기록

기존에 React, Redux로 3년은 더 된 회사의 프로젝트를 다시 재구성하여 작업을 진행할 기회가 생겨 프로젝트 설정부터 완료까지 혼자 진행한 회고록이다. 1. 기술 스택 설정 - 기존에 사용하던 스택으로는 React, Redux, Redux-Saga, Antd, Styled-Component, Typescript 였고 presentational & container 패턴을 이용하여 제작을 주로 사용하였다. 다른 기술들과 비교점을 찾아가며 협업과 개발에 더 편리한 스택을 찾기 위해 새로운 기술 스택을 도입하였다. React 프레임워크인 Next를 채택하였고 상태 관리로 Mobx, UI프레임워크로 MetarialUI를 사용하였다. 컴포넌트를 더 세분화하고 재사용성을 더 높이기위해 Atomic디자인 패턴..

프로젝트 생성 npx create-next-app --typescript 프로젝트 구조 왼쪽 - 프로젝트 설치시 기본 구조 오른쪽 - 기존 리액트 프로젝트에서 src폴더에 파일들을 관리했었기때문에 익숙한 구조로 구조변경 당장에 사용하지않는 파일 및 폴더 삭제 public 폴더는 남겨놔야한다 안에 들어가있는 favicon 404 에러가 표출된다... Babel 설정 프로젝트 root에 .babelrc 파일생성 { "presets": ["next/babel"] } 프로젝트 실행 npm run dev or npm run build && npm start