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

230223 - React this 바인딩, Counter 만들기, list 만들기

오늘 내가 배운 것 1. 카운터 만들기 2. componentDidMount, state를 이용하여 loading 구현하기 3. loading 후 증감 하는 버튼 만들기 4. 배열로 들어온 데이터 렌더하는 방법 (List) 5. this 바인딩하는 방법 1. 카운터 만들기 +버튼을 누르면 increment 함수를 이용해서 상태를 +1 해주고, -버튼을 누르면 decrement 함수를 이용해서 상태가 -1 된다. 처음 랜더 했을 경우 초기값이 10이 뜨는데 어떤 순서에 의해서 10이 되는지를 알아야 한다. 실행되자마자 10으로 세팅되는 것이 아니다. 1-1. 최초 실행 순서 constructor()가 실행되면서 상태의 number는 0인 상태가 된다. number가 0 인 상태로 render()가 실행된다..

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

230222 - React Comment 만들기

오늘 내가 배운 것 1. React를 이용하기 위한 기본 세팅 2. Component, 트리구조 3. HTML과 JSX에서의 class 4. React - props 1. React를 이용하기 위한 기본 세팅 HTML의 head안에 리액트 CDN 링크를 작성한다. 그리고 body 안에 리액트로 작성할 영역을 root로 설정해 준다. 위와 같이 설정하게 되면 script 영역에서 만드는 내용은 `div#root` 안에 작성된다. (당연히 script 부분은 따로 파일로 만들 수 있다.) 2. Component, 트리구조 오늘의 목표는 Comment CRUD 중에 C, R 부분이다. 이 부분을 HTML로 만드려고 했을 때 구역을 나눠서 HTML구조를 짜게 될 텐데, HTML의 구조를 보면 아래의 사진의 좌측..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 2. 22.
• 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