본문 바로가기

prettier2

[웹개발] 프론트앤드 빌드 시스템 (바벨, Node.js, NPM, ESLint, Prettier) 프론트앤드 빌드 시스템 프론트앤드 개발은 여러 컴포넌트를 빌드해 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환한다. 이때 코드를 변환하도록 도와주는 도구가 빌드 시스템이다. 컴파일 (Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 (사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업) 컴파일러 (Compiler) 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램 빌드 (Build) 소스코드 파일을 소프트웨어로 만드는 과정 (소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정) 빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다 빌드 시스템 .. 2022. 11. 22.
[리액트] 리액트 프로젝트에서 기본적인 ESLint, Prettier, setting.json 설정해주기 1. 개발용으로 prettier, eslint-config-prettier 패키지 설치해주기 prettier: 코드 포매팅 eslint-config-prettier: eslint 와의 호환을 위한 패키지 yarn add --dev prettier eslint-config-prettier 2. .eslintrc 파일을 만들어 아래의 코드 추가해주기 extends: 누군가 미리 만들어놓은 규칙을 가져와서 사용하고자 할 때 명시하는  react와 prettier를 위한 코드 작성 규칙을 가져와서 사용 { "extends": ["react-app", "prettier"] } 3. .prettierrc 파일을 생성한 후 아래의 코드를 추가해주기 { "trailingComma": "all", "tabWidth":.. 2022. 8. 11.