본문 바로가기

💬

(50)

useMemo 와 useCallback 은 무엇이 다른 것인가...... useMemo((...) => fn, deps) === useCallback(fn, deps) useMemo 는 메모제이션 된 값을 반환한다. = 함수를 실행한다. useCallback 은 메모제이션 된 함수를 반환한다. => 아예 새로운 함수를 반환하는 것이기 때문에 각각 다른 메모리를 가진다!!!!!!!!!!!!! 그래서 장점?

40일차 🦝 40일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 10. Deploy React App Ch 11. React 로 만드는 쇼핑몰 프로젝트 Ch 10. Deploy React App 🔗 SPA 프로젝트 배포 이해하기 모든 요청을 서버에 하고 받아오는 형태가 아님 라우팅 경로에 상관없이 리액트 앱을 받아 실행 라우팅은 받아온 리액트 앱을 실행 후, 적용 static 파일을 제외한 모든 요청을 index.html 로 응답해 주도록 작업 $ nvm install 10.16.3 $ npm ci $ npm run build 🔗 serve 패키지로 React Web App 배포하기 $ npm install serve -g $ serve -s build # -s 옵션은 어떤 라우팅으로 ..

39일차 🐙 39일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 8. React Testing Ch 9. React Advanced Ch 8. React Testing 🔗 JavaScript Unit Test & Jest 사용하기 https://jestjs.io/docs/expect Expect · Jest When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. jestjs.io https://github.com/testing-..

38일차 🙀 38일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 7. Hooks & Context Ch 6. Hooks & Context 🔗 Basic Hooks : 컴포넌트의 state와 관련된 로직을 재사용할 수 있다. Functional Component != Stateless Componet because state hooks https://ko.reactjs.org/docs/hooks-intro.html useState: state 를 대체할 수 있다. // ./App.js ... import Example1 from "./components/Example1"; import Example2 from "./components/Example2"; import Example3 fro..

37일차 🐧 37일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 6. 리액트 실전 활용 Ch 6. 리액트 실전 활용 🔗 HOC (Higher Order Component) : 를 인자로 받아 를 리턴하는 함수 https://ko.reactjs.org/docs/higher-order-components.html 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org https://github.com/mridgway/hoist-non-react-statics GitHub - mridgway/hoist-non-react-statics: Copies non-react specific statics from..

36일차 🐼 36일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 5. React Component Styling Ch 5. React Component Styling 🔗 Style Loaders // webpack.config.js // import './App.css'; { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { mode: 'icss', }, }), sideEffects: true, }, // import styles from './App...

35일차 🦦 35일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 4. React Router Ch 4. React Router https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com $ npm i react-router-dom // App.js impor..

34일차 🦊 34일차 Part 10. React 로 쇼핑몰 만들기 (React 기본) Ch 3. Creating React Project Ch 3. Creating React Project https://create-react-app.dev/ Create React App Set up a modern web app by running one command. create-react-app.dev $ npx create-react-app my-app // package.json { "scripts": { "start": "react-scripts start", // npm start (개발용) "build": "react-scripts build", // npm run build (프로덕션용) "test": "rea..

이전 1 2 3 4 5 ··· 7 다음

티스토리툴바