react
-
8. React 프로젝트 생성Project/React+Java 2022. 8. 10. 19:56
https://github.com/dchkang83/project-board GitHub - dchkang83/project-board Contribute to dchkang83/project-board development by creating an account on GitHub. github.com https://dchkang83.tistory.com/32 React - 프로젝트 생성 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 프로젝트 생성 $ n..
-
React/redux & react-redux & redux-saga & etcLanguage/React 2022. 8. 4. 13:06
1. redux & react-redux & redux-saga 등 설치 $ yarn add react-router-dom $ yarn add redux react-redux redux-saga $ yarn add @reduxjs/toolkit query-string axios $ yarn add ramda 2. 주요소스 2.1 index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter as Router } from "react-router-dom"; import { Provider } from 'react-redux'; import store from '~/store' import ..
-
React/router & LayoutLanguage/React 2022. 8. 4. 11:49
1. react-router $ yarn add react-router-dom 2. 주요소스 정리 - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter as Router } from "react-router-dom"; import App from '~/App' const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); - app.js import React from 'react'; import RootRoutes from '~/routes/RootRoutes'; const App = () ..
-
React/material-uiLanguage/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/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/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/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. 확인