230302 - React - CSS 적용하기

오늘 내가 배운 것 1. React CSS 적용하기 2. 방법 1. inline-style 이용하기 3. 방법 2. CSS파일 import 해서 이용하기 4. 방법 3. CSS Module 이용하기 5. 방법 4. Styled-components ( CSS-in-JS ) 라이브러리 이용하기 1. React CSS 적용하기 SPA의 특성상 URL이 바뀌지 않은 상태로 컴포넌트만 바뀌면서 페이지를 보여주는데, 이를 특성을 이용하면 CSS파일을 한 개만 만들어서 bundle.js 해서 이용하는 것이 정상이다. 하지만 이 과정에서 많은 문제점이 있다. 한 파일을 이용해서 관리를 하기 때문에 많은 내용의 CSS가 한 파일에 있어야 하고, 그러면 나중에 관리가 힘들어진다. 중복되는 CSS가 발생될 수 있고, 정말 ..

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

230302 - React - React.Fragment, useRef, Custome Hook

오늘 내가 배운 것 1. React.Fragment 2. useRef 3. Custome Hook 1. React.Fragment React를 처음 배울 때 컴포넌트 return에 최상위 엘리먼트는 1개여야 한다는 것을 설명한 적이 있다. 그때 모든 컴포넌트 대해서 `div`를 이용해서 감쌀 경우 원치 않은 div에 감싸지는 경우가 생긴다. 컴포넌트 1-1 컴포넌트 1-2 컴포넌트 2-1 컴포넌트 2-2 최상위 `div`를 React.Fragment로 감싸게 되면 컴포넌트 1-1 컴포넌트 1-2 컴포넌트 2-1 컴포넌트 2-2 코드를 작성할 때는 태그가 있지만 실제로 출력되는 엘리먼트 요소는 컴포넌트 1-1 컴포넌트 1-2 컴포넌트 2-1 컴포넌트 2-2 로 생략되어 나온다. 는 빈 상태로 작성해서 간단..

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

230228 - Webpack (웹팩) - hot reloading

오늘 내가 배운 것 1. hot reloading 1. hot reloading Webpack을 사용할 때, 번들링 하기 전 원본 파일의 내용을 수정하게 되면 다시 번들링을 해서 bundle.js를 생성했어야 했다. 근데, 이 과정이 번거롭기 때문에 Webpack에서 hot reloading이라는 기능을 추가했다. 이를 이용하여 개발자가 코드를 변경하면 브라우저에서 즉시 변경 내용이 반영이 되어서 적용 상태를 볼 수 있다. 1. 관련 패키지 설치 $ npm install webpack-dev-server 2. webpack.config.js 수정 devServer 속성을 통해 설정을 할 수 있다. //추가 devServer: { static: { directory: path.join(__dirname, ..

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

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