Language/Node.js, Next.js, React
-
React/material-uiLanguage/Node.js, Next.js, React 2022. 8. 2. 16:01
1. material-ui $ yarn add @mui/material @emotion/react @emotion/styled $ yarn add @mui/icons-material $ yarn add @emotion/css (추가??) 2. 주요소스 정리 - SignIn.js import React from 'react'; import Avatar from '@mui/material/Avatar'; import Button from '@mui/material/Button'; import CssBaseline from '@mui/material/CssBaseline'; import TextField from '@mui/material/TextField'; import FormControlLabel fro..
-
React/TypeScript - 절대경로 지정Language/Node.js, Next.js, React 2022. 8. 2. 15:23
`~/` 에 대한 절대경로를 추가해 보자. 0. typescript 추가 # typescript 추가 $ yarn add --dev typescript @types/node @types/react @types/react-dom @types/jest 1. paths alias 설정 $ yarn add --dev react-app-rewired customize-cra 2. tsconfig.json { "extends": "./tsconfig.paths.json", "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext", ], "allowJs": true, "skipLibCheck": true, "esModuleIntero..
-
React/JSX - 절대경로 지정Language/Node.js, Next.js, React 2022. 8. 2. 14:45
`~/` 에 대한 절대경로를 추가해 보자. 1. paths alias 설정 $ yarn add --dev react-app-rewired customize-cra 2. jsconfig.json { "extends": "./jsconfig.paths.json", "compilerOptions": { "module": "commonjs", "target": "es6" }, "include": [ "src" ], "exclude": [ "./node_modules", "**/node_modules", "dist" ] } 3. jsconfig.paths.json { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "src/*" ] } } } 4. config..
-
React/프로젝트 생성Language/Node.js, Next.js, React 2022. 8. 2. 14:40
1. React 프로젝트 생성 및 실행 # npx cash 날리기 $ npx clear-npx-cache # create-react-app 설치 $ npm config set prefix /usr/local $ sudo npm install -g create-react-app # front-end 프로젝트 생성 $ npx create-react-app front-end-js $ cd front-end-js # 시작 $ yarn start $ ONLY_DEV=true BROWSER=none yarn start 2. 확인