230227 - Webpack ( 웹팩 )

오늘 내가 배운 것 1. Webpack 2. Webpack 모듈 번들러 모듈 번들러 로딩속도 개선 주의 3. Webpack 주요 속성 4. Step 1. Webpack 기본 실행 5. Step 1-1. React를 npm install 하여 require로 사용하기 6. Step 2. Webpack Loaders - CSS파일 번들링 하기 7. Step 3. Webpack Plugins - HTML template(React)을 import 하고 Babel을 이용하여 JSX문법 이용하기. 1. Webpack javascript를 이용하여 개발을 하면서 유지보수성과 확장성을 고려하는 상황이 생기는데, 이를 해결하기 위해서 코드를 작은 단위로 쪼개서 파일 분리를 하던가, 재사용 가능한 단위로 만드는 모듈화를..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 2. 28.
• textsms

230227 - Babel ( 바벨 )

오늘 내가 배운 것 1. babel (바벨) 2. step 1. babel을 통해 ES6 -> ES5 문법 변경 3. step 2. babel을 통해 express를 require가 아닌 import를 이용하기 4. step 3. babel을 통해 React-JSX문법 컴파일 하기 1. babel (바벨) 리액트를 처음 배우면서 JSX문법을 사용하기 위해서 babel을 CDN으로 사용해 봤다. 그러면 babel은 무엇일까? 기본적으로 babel은 Javascript 코드를 변환해 주는 도구 ( javascript를 컴파일해 주는 도구)라고 생각하면 된다. 크게 2가지의 상황이 있는데, 1. javascript 문법은 꾸준히 진화 - 문법이 진화하면 작성한 코드를 읽어줄 수 있는 런타임이 진화해야 한다. ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 2. 27.
• textsms

230224 - React TicTacToe(틱택토) 게임 만들기

오늘 내가 배운 것 1. 틱택토 게임 만들기 1. TicTacToe(틱택토) 게임 만들기 React 공식 홈페이지 내 자습서에 나와 있는 코드를 그대로 따라 치면 다음과 같은 결과가 나온다. 히스토리까지 저장을 해서 되돌리기도 가능하다. 1번 코드 확인하기 더보기 HTML CSS body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px so..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 2. 24.
• textsms

230221 - React (리액트) 기초

오늘 내가 배운 것 1. 브라우저 렌더링 과정 2. 브라우저 렌더와 React 3. React 4. JSX 5. DOM / React / JSX를 이용한 React 문법 비교 1. 브라우저 렌더링 과정 여태까지는 화면을 꾸밀 때 `javascript`를 이용하여 HTML을 조작했다. (DOM) 브라우저 렌더링 과정 (응답을 받고 화면에 보이기 직전 시점이다.) HTML을 그릴 때 아래와 같은 과정을 거친다. 1. 응답이 오면, 응답 바디에 있는 HTML 내용을 파싱 한다. 2. 파싱 이후 트리를 만든다. 3. 표현준비를 한다. (사이즈 정렬... 등등..) 4. Render가 된다. 2. 브라우저 렌더와 React DOM을 이용하여 화면을 그리는 과정이 매우 불편하고 귀찮았다. (엘리먼트를 만들고 inn..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 2. 21.
• textsms