본문 바로가기

전체 글85

[웹 개발 초보] 웹개발 독학 사이트 추천 1. MDN https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org 웹 브라우저 파이어폭스를 개발한 모질라에서 운영하는 사이트입니다. 단계별로 HTML, CSS, JAVASCRIPT 문서들이 잘 정리되어 있습니다. 웹개발 문서의 근본입니다. 2. W3school https://www.w3schools.com/ W3Schools Online Web Tutorials HTML Example: www.w.. 2023. 12. 28.

[HTML, CSS] flexbox(display: flex) 총정리 flex는 grid만큼 다양한 기능을 가지고 있지는 않지만, 대부분의 레이아웃은 flexbox의 조합만으로도 충분히 구현이 가능합니다. grid layout에 관해서는 아래 깔끔하게 잘 정리된 글을 링크로 남깁니다. https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com Flex Layout Flex Layout은 css의 Flexbox를 활용한 화면구현 모델입니다. 복잡한 레이아웃을 간단하게 구현하거나 콘텐츠를 자동으로 정렬하는데 초점이 맞춰져.. 2023. 12. 28.

[next] Data 요청, Next fetch API Next 13 Data fetchingnext에서 외부의 데이터를 가져오는 방법은 크게 두 가지로 나뉩니다.클라이언트에서 fetching서버에서 fetching 1. 클라이언트에서 fetchingClient component에서는 아래와 같은 방식으로 데이터를 가져올 수 있습니다.useEffect를 활용한 브라우저 fetch 혹은 axios 패키지 사용vercel의 swr 패키지react-query 패키지 Client component에서 가져온 데이터는 서버로부터 응답받은 초기 HTML에 포함되지 않기 때문에 SSR에 해당되지 않습니다. next에서 클라이언트 사이드의 fetching은 주로 다음과 같은 상황에서 필요합니다.초기 렌더링 이후 추가 Data가 필요할 때.. 2023. 11. 1.

[next] Routing Conventions Next 13 App router - Routing Conventions nextjs는 file system based 라우팅 방식입니다. 즉, 프로젝트의 폴더와 파일 구조에 따라서 라우팅 경로가 결정됩니다. 예시 위와 같은 프로젝트 구조라면 localhost:3000에서 실행했을 때 다음과 같이 라우팅 됩니다. localhost:3000 app 폴더의 layout, page 실행 localhost:3000/product app/product 폴더의 (layout), page 실행 localhost:3000/user app/user 폴더의 (layout), page 실행 참고로 이미지에 있는 favicon.ico, globals.css와 같이 위의 Routing conventions에 없는 파일은 경로로.. 2023. 10. 29.

[next] App router Nextjs 13 App router1. App router에 대해 정리하기 전에 next부터 정리1) next 등장배경컴포넌트 단위의 개발인 react는 높은 확장성과 유연함을 가지고 있습니다. next는 react의 장점을 유지하는 동시에 SSR(Server Side Rendering)을 수행하기 위해 등장합니다. SSR 이란?브라우저가 서버에서 생성된 HTML을 응답받아서 출력해 주는 방식입니다. 서버에서 HTML을 생성하므로 Server side Rendering, 서버 사이드 렌더링이라고 표현합니다. 이와 대비되는 방식으로는 브라우저가 서버로부터 javascript 코드를 응답받고, 이를 사용하여 HTML을 직접 렌더링 하는 CSR(Client side Rendering), 클.. 2023. 10. 29.

[JAVASCRIPT] 캐싱 함수 만들기 / 데코레이터(decorator) 캐싱 함수(Caching function) 로직이 무겁고 호출이 잦은 함수는 캐싱기능을 활용하면 성능을 높일 수 있습니다. 단, 캐싱기능을 구현하려는 함수는 퓨어(pure) 해야 합니다. = input에 따른 output이 항상 일정함. = side effect가 없음. 예시 함수 someFunc는 비용이 높은 연산을 수행하고, 파라미터(num)에 따른 항상 동일한 값(num+1)을 반환한다고 가정하겠습니다. function someFunc(num) { console.log("Expensive"); // ... expensive code block return num + 1; } 함수를 실행시켜 보면 someFunc(1); // Expensive someFunc(1); // Expensive 첫 번째와 .. 2021. 8. 30.

[JAVASCRIPT] 중첩 객체에서 특정 프로퍼티의 합 구하기, 재귀함수 활용 중첩 객체에서 프로퍼티의 합 구하기 코딩 테스트에서 자주 활용되는 개념입니다. 간단해 보이지만 의외로 헤매는 경우가 많습니다. 아래와 같은 타입을 가지는 product 객체가 있다고 가정합니다. name: string; price: number; products 객체에는 product들이 아래와 같이 여러 중첩 객체로 포함되어 있습니다. const products = { fruits: [ { name: "apple", price: 1000, }, { name: "banana", price: 2000, }, ], clothes: { bottom: [ { name: "jean", price: 3000, }, ], top: { shirts: [ { name: "blue shirt", price: 3500, }.. 2021. 8. 19.

[JAVASCRIPT] 구조 분해를 사용하여 변수값 교환하기 변수값 교환 ES6의 구조 분해 문법(Desctructuring)은 객체의 프로퍼티나 배열의 요소를 변수로 쉽게 추출할 수 있게 해주는 문법입니다. 이 문법을 활용하면 두 개 이상의 변수의 값을 간단하게 교환할 수 있습니다. 구조 분해 없이 변수의 값을 교환할 때에는 주로 아래와 같이 구현합니다. let str1 = "One"; let str2 = "Two"; console.log(str1, str2); // One Two let temp = null; temp = str1; str1 = str2; str2 = temp; console.log(str1, str2); // Two One temp라는 새로운 변수를 활용해서 한쪽의 값을 임시로 저장한 후, 각 변수에 차례대로 값을 초기화해 주는 방식입니다. .. 2021. 8. 19.

[react] 리액트 전체화면 넘기기 스크롤링(full page scroll) 리액트 전체화면 스크롤링 마우스 휠 움직임에 반응하여 전체화면을 스크롤링하는 코드를 구현해 보겠습니다. 1. outer div와 inner div(3개)를 생성해 줍니다. inner div는 각각 위 결과물의 1,2,3페이지가 됩니다. App.js import "./App.css"; function App() { return ( 1 2 3 ); } export default App; App.css .outer { } .inner { } .bg-yellow { background-color: #f7f6cf; } .bg-blue { background-color: #b6d8f2; } .bg-pink { background-color: #f4cfdf; } 2. 스크롤은 body가 아닌 outer div에서 제.. 2021. 6. 18.

[HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) 스크롤바 생성 overflowcss속성 overflow로 자식 요소의 크기가 부모 요소의 크기를 초과했을 때 스크롤바 생성을 제어할 수 있습니다. 수직과 수평 방향은 각각 oveflow-x, overflow-y로, 두 개를 동시에 제어할 때에는 overflow 속성을 사용합니다. overflow 속성을 사용할 때 주의할 점은 자식 요소의 크기가 부모 요소의 크기를 초과했을 때 출력 방식을 제어하는 속성이므로 부모 요소의 크기가 명시적으로 설정되어 있지 않은 상태에서는 의도한대로 제어되지 않습니다.overflow-x수평 방향 제어overflow-y수직 방향 제어overflow모두 제어 overflow-y 속성을 적용하면서 예시를 살펴보겠습니다. 1. visible속성을 설정하지 않을 때 적용되는 defa.. 2021. 4. 1.

[react] 리액트 모달(modal) DOM tree, createPortal createPortal 모달은 사용자에게 항상 최우선으로 출력되어야 하는 경우가 많습니다. react의 DOM tree를 보면, 모든 컴포넌트가 최상위 컨테이너인 root()에 종속되는데, 모달의 경우에는 어느 컴포넌트에서 호출이 되어도 모든 컴포넌트 위에 존재합니다. 따라서 물리적인 구조상 root를 벗어나는 것이 더 깔끔할 수 있습니다. 모달 뿐만이 아니라 애플리케이션 내에서 리액트 코드를 부분적으로만 사용하는 경우에도 root 이외의 DOM tree를 구성해야 하는 경우가 있습니다. 이럴 때 createPortal을 사용하면 컴포넌트를 기존의 DOM tree에서 물리적으로 분리할 수 있습니다. 구문 react-dom 패키지의 createPortal을 사용해 줍니다. createPortal(child.. 2021. 3. 28.

네이버 뉴스 크롤링 따라하기 - node / request / cheerio / iconv / 웹크롤러 만들기 네이버 뉴스 크롤링 따라 하기 자바스크립트, 노드 공부를 목적으로 하는 크롤링 포스트입니다. 1. 프로젝트 세팅 크롤러를 만들기 위해 npm 프로젝트를 생성해 줍니다. mkdir news-crawler cd news-crawler npm init request, cheerio, iconv 패키지 설치 npm install request cheerio iconv 루트 폴더에 index.js 파일을 생성해 줍니다 touch index.js 코드 편집기 실행 code . index.js 파일 상단에 필요한 패키지 3가지를 불러옵니다 const request = require("request"); const cheerio = require("cheerio"); const iconv = require("iconv.. 2021. 3. 25.

[JAVASCRIPT] 정규식(regExp) - 한글 영어 숫자만 입력받기 2023. 03. 18 [수정] or로 잘못설명된 '|' 를 삭제하였습니다. 김코더님 감사합니다. 한글, 영어, 숫자만 입력받는 정규표현식 정규식(정규표현식)은 문자열을 처리하기 위한 패턴을 정의하는 표현식입니다. 문법은 조금씩 다르지만, 자바스크립트뿐만 아니라 다양한 프로그래밍 언어에서 지원합니다. 정규식을 적절히 활용하면 문자열을 다루는 코드의 가독성이 좋아지고, String 객체의 내장 메서드로는 해결할 수 없는 다양한 작업도 해낼 수 있습니다. 영문 아이디, 이메일, 전화번호 등 대부분의 테스트는 validator 패키지로 쉽게 해결할 수 있습니다만 영문아이디 - isAlphanumeric() 이메일 - isEmail() 핸드폰번호 - isMobilePhone() https://www.npmjs... 2020. 12. 23.

[HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (2) - flex, grid 레이아웃 네이버 UI 클론코딩 (2) - flex, grid 레이아웃 이전 글에서 완성한 header, footer에 이어 이 글에서는 main 영역을 만들어보겠습니다. main에서는 모든 요소를 세부적으로 카피하지는 않고 레이아웃을 구현하는 작업을 두 가지 방식으로 살펴보겠습니다. 큰 단위부터 작은 단위로 grid cell로 나눠서 할당 1. 큰 단위부터 작은 단위로 가장 큰 요소부터 시작해서 하위 요소들을 점진적으로 나눠주는 방식입니다. body를 header, main, footer의 영역으로, main을 또다시 각 구역으로, 각 구역을 다시 세부적으로 계속 나눠줍니다. 우선 main영역을 크게 아래와 같이 나눠보겠습니다. 여기서는 flex와 grid 레이아웃을 자유롭게 사용할 수 있습니다. 이전 글에서도 .. 2020. 3. 28.

[HTML, CSS] box-sizing 속성 / 테두리도 크기에 포함시키기 CSS box-sizing 속성 box-sizing 속성은 요소의 크기가 계산되는 방법을 결정합니다. content-box(기본값), border-box 두 가지 값이 있습니다. content-box 설정한 크기가 padding, border, margin을 제외한 순수한 요소의 크기가 됩니다. border-box 설정한 크기가 (요소 + padding + border)의 크기가 됩니다. 그림으로 보면 아래와 같습니다. content-box border-box 예시 content-box container 안에 box 두 개가 있습니다. box-sizing 속성은 따로 설정하지 않았으므로 기본값인 content-box입니다. 초록 빨강 container안에 green_box와 red_box가 딱 맞게 들어.. 2020. 3. 22.

[HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (1) 네이버 UI 클론코딩 (1) 네이버 사이트를 그대로 카피하면서 레이아웃을 잡는 연습을 해보겠습니다. 웹개발 초기에는 이렇게 잘 만들어진 사이트를 클론코딩하는 게 실력향상에 큰 도움이 됩니다. 레이아웃 설계 간단한 웹사이트라도 항상 설계를 먼저 하고 나서 작업에 들어가시는 게 정신건강에 좋습니다. 설계 시 가장 먼저 할 일은 페이지를 가장 큰 단위로 나누는 일입니다. 여기에는 정해진 규칙은 없고, 사이트의 목적에 따라 다양한 형태가 존재하지만 일반적으로는 header, main, footer의 세 가지 영역으로 나뉩니다. HTML5 요소로는 각각 랜드마크 요소인 네이버를 시작페이지로 쥬니어네이버 해피빈 검색 검색 메일 카페 블로그 지식iN 쇼핑 Pay TV 사전 뉴스 증권 부동산 지도 영화 뮤직 책 웹툰 .. 2020. 3. 21.

개인정보처리방침 1. 개인정보의 처리 목적 "https://codingbroker.tistory.com/" 과 "https://codingbroker.tistory.com/" (이하 블로그)는 다음의 목적을 위하여 개인정보를 처리하고 있으며, 다음의 목적 이외의 용도로는 이용하지 않습니다. - 고객 가입의사 확인, 고객에 대한 서비스 제공에 따른 본인 식별.인증, 회원자격 유지.관리 등. 2. 개인정보의 처리 및 보유 기간① 블로그 정보주체로부터 개인정보를 수집할 때 동의 받은 개인정보 보유․이용기간 또는 법령에 따른 개인정보 보유․이용기간 내에서 개인정보를 처리․보유합니다.② 구체적인 개인정보 처리 및 보유 기간은 다음과 같습니다.☞ 아래 예시를 참고하여 개인정보 처리업무와 개인정보 처리업무에 대한 보유기간 및 관련 .. 2020. 1. 5.

[HTML, CSS] input창 클릭 시 CSS적용하는 방법(focus, animation input focus effect input 태그를 클릭했을 때 요소에 스타일을 적용하는 간단한 예시입니다. 마우스 클릭이나 탭 변환 등으로 커서가 진입했을 때 발생하는 이벤트는 focus입니다. 여기에 스타일을 적용하기 위해서는 css에서 :focus 가상 클래스에 속성을 적용하면 됩니다. 예시 input 태그가 있습니다. .my-input { padding: 10px; width: 250px; outline: none; border: 1px solid gray; } HTML 삽입 미리보기할 수 없는 소스 input 태그에 커서가 들어오면 border 색상을 바꾸고, boder-radius 애니메이션 효과를 주는 코드입니다. .my-input { padding: 10px; width: 250px; ou.. 2019. 12. 29.

[react] 불필요한 리렌더링 방지하기 - React.memo 성능 최적화 React.memo 리액트 애플리케이션에서는 state의 변화가 없는 컴포넌트도 다른 요인에 의해 리렌더링 되는 경우가 있습니다. 대표적으로 부모가 렌더링 되면서 함께 렌더링이 되는 경우입니다. 이런 경우에는 React의 memo 메서드로 해당 컴포넌트를 저장했다가 재사용할 수 있습니다(memoization). memo 메서드로 감싼 컴포넌트는 렌더링이 트리거 될 때 prop의 변화가 없는 경우 이전 렌더링 결과를 재사용합니다. 예시 App.js import React, { useState } from "react"; import Item from "./Item"; const App = () => { const [numbers, setNumbers] = useState([1, 2, 3]); return .. 2019. 12. 23.

[JAVASCRIPT] 배열 내의 요소 무작위로 섞기(shuffle) 배열 랜덤 섞기 Shuffle 자바스크립트에서 배열 내의 원소를 무작위로 섞는 예시입니다. Math.random 메서드를 활용하여 배열의 요소들을 순회해야 합니다. shuffle 함수입니다. const shuffleArray = array => { for (let i = 0; i < array.length; i++) { let j = Math.floor(Math.random() * (i + 1)); // j는 0이상 i이하의 수 [array[i], array[j]] = [array[j], array[i]]; // i번째 요소와 j번째 요소의 값을 변경 } return array; }; i번째와 j번째를 바꾸는(swap) 코드는 아래와 같습니다. const temp = array[i]; array[i] =.. 2019. 11. 2.

[HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (2) - 미사일 이전글 2019.10.28 - [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 자바스크립트로 게임 만들기 - 포트리스(1) 탱크, 표적 HTML5의 canvas와 자바스크립트를 이용하여 간단한 포트리스 게임을 만들어보겠습니다. 1. 화면 틀 만들기 적당한 크기의 게임판을 만들었습 codingbroker.tistory.com 자바스크립트로 게임 만들기 - 포트리스(2) 미사일 탱크와 표적에 이어서 이번 글에서는 미사일을 구현해 보겠습니다. 다음 순서로 진행합니다. 파워게이지 충전 미사일 발사 판정 먼저 필요한 변수들을 선언합니다. 2019. 10. 29.

[HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 자바스크립트로 게임 만들기 - 포트리스(1) 탱크, 표적 HTML5의 canvas와 자바스크립트를 이용하여 간단한 포트리스 게임을 만들어보겠습니다. 1. 화면 틀 만들기 적당한 크기의 게임판을 만들었습니다. canvas에는 자바스크립트로 로직을 제어하기 위해 id값을 설정했습니다. 이후부터는 HTML 부분은 건드리지 않고 MDN - Canvas API Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용 developer.mozilla.org 2019. 10. 28.

[react] 올바른 리액트 조건부 렌더링 (if else 구문과 ternary operator, && 차이) 리액트의 조건부 렌더링 리액트에서 JSX를 조건에 따라 렌더링 할 때에는 크게 두 가지 방법이 있습니다. 1) if, else 구문을 사용하는 방법과 2) ternary operator를 사용하는 방법입니다. 두 가지 방법 모두 겉으로 보기에는 condition에 따른 JSX를 렌더링 한다는 점에서 비슷하지만, 경우에 따라 성능상의 차이가 크게 나타나기도 합니다. 간단한 예시를 통해서 어떤 차이가 있는지 살펴보겠습니다. 1. if / else if, else를 활용한 예시입니다. showing state에 따라서 Header 컴포넌트의 렌더링 여부를 결정하도록 구현했습니다. import React, { useState } from "react"; import "./App.css"; function App.. 2019. 9. 9.

[HTML, JAVASCRIPT] 뒤로가기(이전 페이지), 앞으로가기(다음 페이지) 구현 - window.history.back(), forward(), go() 자바스크립트로 뒤로 가기, 앞으로 가기 구현 브라우저의 페이지 이동을 자바스크립트로 제어할 수 있습니다. 이를 위해 window - history 객체의 back, forward, go 메서드를 사용합니다. 예시 5개의 페이지가 있습니다. 모든 페이지의 구조는 동일합니다. one.html One go one go two go three go four go five 1. back 이전 페이지로 돌아갑니다. history.back(); 각 페이지에 누르면 이전 페이지로 돌아가는 을 만들어보겠습니다. One go one go two go three go four go five Back 버튼을 클릭하면 history object의 back() 메서드를 실행하도록 구현했습니다. 브라우저의 뒤로 가기와 동일하게 동.. 2019. 8. 29.

이전 1 2 3 4 다음

티스토리툴바