230303 - React - styled-components, css, ThemeProvider

오늘 내가 배운 것 styled-components 1. CSS 함수, props 활용하여 동적으로 관리 2. ThemeProvider 1. CSS 함수, props 활용하여 동적으로 관리 리엑트에서 CSS 적용하는 방법으로 `styled-components`를 사용했는데, CSS를 적용시키다 보면 공통된 CSS 내용이 있다. 그러면 조금 간결하게 사용하기 위해서 공통된 내용을 css 함수를 이용하여 따로 뽑아서 사용할 수 있다. import styled, { css } from "styled-components" const flexCenter = css` display: inline-flex; justify-content: center; align-items: center; ` const Button ..

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

230303 - React - npm과 npx, prop

오늘 내가 배운 것 1. npm과 npx 2. prop 1. npm과 npx 리액트를 배우면서 webpack를 이용해서 작성한 코드를 확인했었다. 이때 사용한 명령어가 몇 가지 있는데 그중 3가지 방법에 대한 차이점에 대해서 작성했다. $ npx webpack $ npx webpack server $ npm run dev 1-1. npx webpack npx webpack 명령어를 이용하게 되면 설정해 둔 webpack.config.js 파일을 기반으로 해서 파일을 번들링 한다. 설정해 둔 디렉토리, 파일이름으로 번들링을 해주고 이를 확인하기 위해서 직접 서버를 열어서 확인해야 한다. 1-2. npx webpack server npx webpack serve 명령어는 webpack dev server을 ..

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

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 - React - Functional Component and Hook (함수형 컴포넌트와 Hook)

오늘 내가 배운 것 1. 함수형 컴포넌트 2. Hooks 3. 함수형 컴포넌트의 상태관리 4. 함수형 컴포넌트의 props 5. 함수형 컴포넌트의 생명주기 (라이프사이클) 1. 함수형 컴포넌트 함수형 컴포넌트는 클래스형보다 코드가 간단하고, 가독성이 높다. 원래 함수형 컴포넌트는 기존에도 있었지만 상태를 관리하기 위해선 클래스 컴포넌트만 사용했어야 했는데 ver.16.8부터 React Hooks 개념이 생기면서 상태를 관리할 수 있게 되었다. 그래서 최근에는 함수형 컴포넌트를 이용한 React가 많다. 2. Hooks 대표적인 Hook으로 2가지 `useStete` 와 `useEffect` 가 있다. 이외에 메모이제이션 기능을 하는 `useMemo`, `useCallback`이 있다. useStete :..

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