Prettier 2

Next.js + TypeScript + ESlint + Prettier 세팅(4)

ESLint가 개발할 때 혹은 빌드할 때 실수하지 않도록 우려가 될 만한 부분에 대해 에러를 뿜어주는 역할이라면 Prettier는 코드 작성 패턴을 사전에 설정해놓은 대로 자동으로 바꿔주는 역할을 한다. 그러므로 ESLint와 Prettier를 적절히 활용하면 에러를 미연에 방지하고, 코드가 예쁘게 나오고, 다른 사람과 협업 시에도 코드 컨벤션을 지키면서 작업을 할 수 있게 된다. 역시 VSCode 기준으로 설명하겠다. VSCode에서 prettier를 검색하고 다음의 확장프로그램을 설치한다. 그리고 프로젝트 최상위에 .prettierrc.js 라는 파일을 만들고 다음과 같이 작성 후 저장한다. module.exports = { semi: true, // 세미콜론(;) 사용 여부 trailingComma..

개발/FrontEnd 2021.07.14

Next.js + TypeScript + ESlint + Prettier 세팅(1)

Next.js는 React.js를 개발할 때 SSR(Server Side Rendering)을 보다 쉽게 해주는 프레임워크 중 하나이다. React.js 실무 프로젝트에서 가장 많이 사용되는 프레임워크이며, 나 같은 경우엔 굳이 SSR이 꼭 필요한 상황이 아니더라도 라우팅 등이 편해서 React.js 프로젝트를 할 때는 Next.js 위에서 작업하는 것을 선호한다. 이 포스팅에서는 Next.js를 설치하고 TypeScript, ESlint, Prettier를 끼얹는 과정까지만 다룬다. React.js 및 Next.js 프로젝트에서는 위의 프레임워크, 라이브러리 외에도 Redux나 Styled-Components와 같은 패키지들을 주로 설치해서 쓰곤 하나 반드시 필요한 요소라고는 할 수 없다. TypeSc..

개발/FrontEnd 2021.07.05