React3 [React-Router] v6로 적용하기 리액트의 단짝친구 리액트 라우터가 v6 버전이 나왔다..! 새로운 프로젝트에 들어가면서 리액트 라우터 v6 버전을 쓰게 되었는데 사용하면서 간단하게 달라진 점들을 정리해보고자 한다! v5에서 v6 로 마이그레이션 하는 부분은 공식문서 참고 https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5 React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 1. 에서 로! 일단 큰 부분은 Switch 대신 Routes로 네이밍이 변경되었다. 이름이 변경된거지만 뭔가 REST 스러운..느낌? Routes 하위에는 Route가 여러개 존재.. 2021. 11. 26. [React] 나만의 폴더 트리 구성 일단 Next를 사용하기 전, 나름대로 규칙을 가지고 폴더 트리를 구성하였다. 기본적인 스펙은 react-router, redux-saga를 썼을 때의 나만의 폴더 트리를 정리해보았다. 1. App.tsx 리액트 라우터를 정리해 두었다. 라우터가 여기저기 분산되어있으면 보기도 불편하고 유지보수가 어려워서 이쪽에 다 몰아 넣는 편. 2. components 페이지가 아닌 컴포넌트들을 정리해두었다. 특별한 페이지에서만 사용되는 컴포넌트는 페이지에 해당되는 폴더안에 두고 공통은 common 폴더 안에 두도록 정리했다. 3. lib 어플리케이션 내에서 공통으로 사용되는 함수들을 넣어놓는 곳! 주로 여러 어플리케이션에서 사용되는 것들이 많아서 많은 복붙을 하는 곳이기도 하다. 3-1. lib/api 백엔드와의 통.. 2021. 6. 7. [Typescript] @type이 없는 외부 라이브러리 사용 방법 업무때 고생해서 일단 적어보기 1. tsconfig.json 아래 typeRoots와 declaration, declarationDir 등 입력할 것 { "compilerOptions": { ... "typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의 "declaration": true, // lib 만들 때 .d.ts 파일을 자동으로 "declarationDir": "./types" // 이 폴더에 만들어주는 옵션 }, "typeRoots": ["./types", "./node_modules/@types"], "include": ["src"] } 2. root에서 types 라는 폴더를 생성 3. type이 없던 외부 .. 2020. 7. 8. 이전 1 다음
