Webpack이란? javascript 모듈(Module) 번들러(Bundler) Webpack은 JS 파일 뿐만 아니라, CSS, HTML, Image 등을 모듈로 로드해서 사용할 수 있다. 또한, 코드를 압축, 최적화 하는 기능들을 제공하며, 번들링된 파일이 너무 무거워질 경우 다시 여러 개의 파일로 나눌 수 있는 코드 스플리팅(Code Spliting) 기능도 제공한다. 핵심 개념으로는 Mode, Entry, Output, Loader, Plugin가 있으며, 추가로 Optimization이 있다. 모듈(Module)이란? 모듈은 프로그램을 구성하는 요소 중 하나이며 관련된 데이터와 함수들이 묶여서 모듈을 형성하고, 주로 파일 단위로 관리된다. 예를 들어, 팝업은 isOpen이라는 상태 데이터와 o..

서론 블로그나 쇼핑몰 등 기본적인 웹사이트를 구성할 때 Header, Section, Footer, SideBar와 같은 기본요소를 가지게 된다. 메뉴를 클릭하여 페이지가 변경되면 Header, Footer, SideBar는 항상 같은 내용을 유지하며, Section의 내용만 변경되게 된다. 이번 포스트에서는 React를 이용하여 기본요소를 가지며, Section만 변경되도록 Layout을 구성해볼 계획이다. 1. 프로젝트 구성 1-1. 프로젝트 생성 npx create-react-app react-layout-app 1-2. package 설치 npm install --save react-router-app styled-components 1-3. 폴더 구성 2. App 구현 3. Layout 구현 3..

0. 서론 웹 브라우저에서 마우스 오른쪽 클릭을 하면 아래와 같이 'Context Menu'가 출력된다. 이 메뉴에는 뒤로가기, 새로고침, 다른 이름으로 저장 등 기본적으로 브라우저에서 제공되는 이벤트들이 있다. 평소처럼 아무 생각없이 이 메뉴들을 사용하다가, 문뜩 내 맘대로 꾸며보고 싶어졌다. 그래서, 또 직접 만들어 보았다. 이번 포스트에서는 이 Context Menu를 만드는 방법에 대해서 다루어 볼 계획이다. 가장 간단하게 만들 수 있는 정적 Context Menu를 만들어보고, 좀 더 확장시킨 동적 Context Menu를 만들어볼 계획이다. 1. 정적 Context Menu 작성 1-1. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ..

서론 HTML 태그 중에 태그의 for속성은 연결된 태그로 Focus를 이동시키는 기능을 한다. 예를들어, 그 대상이 이면 바로 입력할 수 있도록 커서가 깜빡이며, 나 라면 해당 태그의 checked 상태가 'on/off'된다. 이 예제는 이러한 태그의 for속성을 이용한 방법이다. 1. 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81..

서론 Javascript로 클라이언트 사이드 렌더링을 구현하다보면 부모 컴포넌트의 상태가 변경될 때, 자식 컴포넌트의 상태도 변경되는 경우가 많다. 이런 경우에는 부모가 자식에게 변경된 상태를 전달하여 변경되었음을 직접 알려주어야 한다. 그런데, 부모에게 받은 상태값을 자신의 자식에게도 전달해야 하는 경우도 있다. 예를 들어, 메인화면에서 로그인을 했을 때, 헤더에는 유저의 정보를 보여주고, 메뉴목록에는 회원만 접근가능한 회원메뉴이 추가된다. 이 때 상태값의 흐름을 살펴보면 상위에서 하위로 계속 전달되는 것을 알 수 있다. [ '메인화면 > 헤더 > 유저정보' , '메인화면 > 메뉴목록 > 회원메뉴' ] 그렇다면, 로그인 여부에 대한 상태값을 필요로 하는 자식이 100-Depth에 있다고 가정해보자. 1..

0.서론 기존의 웹은 페이지가 전환될 때마다 서버에서 화면을 렌더링한 후 브라우저에 바로 그려주는 서버 사이드 렌더링(SSR, Server-Side Rendering) 방식을 주로 사용하였다. 그러나, 페이지가 전환될 때마다 화면 전체를 다시 그리기 때문에 페이지가 로드되는 속도가 느리고 화면이 자주 깜빡거렸다. 그래서, 최근에는 브라우저에서 XHR을 통해 필요한 데이터만 서버에 요청한 후 데이터를 가지고 브라우저에서 화면을 그려주는 클라이언트 사이드 렌더링(CSR, Client-Side Redering) 방식을 많이 사용하고 있다. CSR은 요소를 생성할 때마다 동적으로 요소들을 생서한다. 그래서, 데이터만 입력받으면 요소를 생성할 수 있도록 필요한 모듈들을 미리 만들어 사용한다. 대표적인 예로 페이스..