Section 3
강의내용
- DM 보내기
- webPack Proxy 설정 [source]
devServer: {
historyApiFallback: true, // react router
port: 3090,
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
proxy: {
'/api/': {
target: 'http://localhost:3095',
changeOrigin: true,
ws: true,
},
},
},웹팩 devServer는 개발시, 사용하기 때문에 배포시에는 무시된다. (알아서)
※ Proxy Server
프록시(Proxy)는 "대리"의 의미
프로토콜에 있어서 대리응답등에 사용하며
보안상의 문제로 직접 통신을 주고 받을 수 없는 사이에서 프롤시를 이용해 중계하는 개념
- SWR 사용 [source]
swr등 전역상태관리 hook을 가져다쓰면서, props를 잘 사용하지 않는다.
component 자체적으로 상태를 가져다 사용.다만, props는 공통인 데이터나 각 component마다 값이 바뀌는 것에 대해서는 props를 사용한다.
다만 props를 적게 사용하면 부모와 자식관의 연결고리를 약화시킬수 있다. - onKeyDown [reference]
내가 사용한 키를 알 수있음 (console로찍어보면 객체정보 나옴)
ex) ctrl : true / false, metakey, alt : true/false, shift : true/false - library 알아보기 [reference]
1) autosize (글에 따라 autosize해주는 library)
2) react-custom-scrollbars (스크롤바 커스터마이징)
3) mention (@ 햇을때 사람 태그할수있는 기능) - useCallback등 deps항목 안넣었을때
eslint설정을 하면된다."eslint": "^8.31.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.31.11",
위 패키지 설치하면됨 .(안하는게 가독성이 더 좋아보임..)