Development
-
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..
-
7. Spring Boot + Spring Security + JWT + access token + refresh token + 토큰 갱신Project/React+Java 2022. 8. 2. 15:50
https://github.com/dchkang83/project-board GitHub - dchkang83/project-board Contribute to dchkang83/project-board development by creating an account on GitHub. github.com refresh token 설정을 하다 보니 부족한 부분들이 보여서 수정된 부분이 많다. 사실... 기분내키는 대로 많이 수정해서.. 기억나는 부분만 내용 정리하였는데 암튼.. 포인트만 정리 하였다! 최대한 dto, dao, vo의 성격에 맞게 사용하려고 노력하였으며 보안을 위하여 토큰들은 모두 header에 담아서 클리아언트와의 통신을 할 수 있도록 구성해 보았다. 어플리케이션이 실행될때 마다 편하게 작..
-
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. 확인
-
JS/무한 스크롤(Infinite scroll)Language/Java Script 2022. 7. 29. 08:09
코드를 보시면 아시겠지만 아쉽게도 아직.. jQuery쓰고 IE를 버린지 한달도 안되었다.. OTL.. 당연이 front back이 나눠지지 않았으니 감안해서 보시면 되시겠다. 1. html 2. page script const TEST = { page: 1, limit: 20, scroll: null, init: () => { ... this.scroll = window; this.load(); ... }, load: () => { this.getList(); }, getList: () => { // Infinite 전용 로딩바 show document.querySelector('#divListLoading').style.display = ''; // ajax 호출 ajax({ ... }, succes..
-
JS/Pagination 만들기Language/Java Script 2022. 7. 29. 07:50
새로운 프로젝트를 진행함에 있어서 아래와 같이 페이지네이션 사양이 추가되어 급하게 만들게 되었다. 코드를 보시면 아시겠지만 아쉽게도 아직.. jQuery쓰고 IE를 버린지 한달도 안되었다.. OTL.. 당연이 front back이 나눠지지 않았으니 감안해서 보시면 되시겠다. 1. html 2. page script const TEST = { page: 1, limit: 20, PAGER: null, init: () => { ... const page = parseInt(TEST.page, 10); TEST.PAGER = new PAGER('.divListPagination', page, args => { const {page} = args; TEST.page = page; TEST.getList(); }..