시작179 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가 발생될 수 있고, 정말 .. 2023. 3. 3. 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 로 생략되어 나온다. 는 빈 상태로 작성해서 간단.. 2023. 3. 2. 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 :.. 2023. 2. 28. 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, .. 2023. 2. 28. 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를 이용하여 개발을 하면서 유지보수성과 확장성을 고려하는 상황이 생기는데, 이를 해결하기 위해서 코드를 작은 단위로 쪼개서 파일 분리를 하던가, 재사용 가능한 단위로 만드는 모듈화를.. 2023. 2. 28. 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 문법은 꾸준히 진화 - 문법이 진화하면 작성한 코드를 읽어줄 수 있는 런타임이 진화해야 한다. .. 2023. 2. 27. 이전 1 ··· 11 12 13 14 15 16 17 ··· 30 다음 728x90
