prettier
-
[Next.js + TS] 초기세팅 - (2) ESLint, PrettierFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 14. 05:15
지난, CRA 초기세팅 및 Typescript 세팅에 이은 2번째 글이다. 주제는 ESLint, Prettier! 뒤에서도 설명하겠지만, 이 툴들은 기능적인 부분보다는 동기들과의 프로젝트 협업을 위한 세팅에 사용되었다. 이들의 역할을 알아보고, 나도 단순히 적용만 하고 지나쳤던 설정들에 대해 자세히 알아보았다. 📓 ESLint - 개요 ESLint는 Javascript, Typescript 의 코딩 스타일 도구이다. JS코드가 ECMAScript Specification에 부합하는지 검사하는 툴이다. 코딩 스타일 가이드라인을 지정하여, 패턴을 준수하지 않을 경우 사후에 발생할 수 있는 잠재적 문제점을 사전에 방지하기 위해 사용되는 것이다. * 본래, TS는 TSLint 라는 코딩 스타일 도구가 있었으나,..
-
[Next.js + TS] 초기세팅 - (1) CRA, tsconfig.jsonFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 11. 03:49
😃 서론 지난달 초, Typescript 공부를 위해 OP.GG 사이트 클로닝 프로젝트를 간단하게 진행하였다. (리뉴얼 작업으로 최근까지 holding...) 오랜만에 React, Styled-Components를 쓸 뿐만 아니라, Typescript와 Next.js는 실전에 처음 사용하는 프로젝트였다. 이를 위해, eslint/prettier 부터 위 툴들을 사용하기 위한 프로젝트 초기세팅을 정리해두고, 이를 좀 더 쉽게 구성하고 사용하기 위해 고민했던 다양한 방법들을 포스팅을 통해 남겨보고자 한다! 📘 CRA (Create-React-App) React 프로젝트 초기세팅을 하는 가장 간편한 방법을 CRA(Create-React-App) 이라고 한다. 프로젝트에 필요한 기본적인 모듈들, 그리고 Babe..