Large Rainbow Pointer
728x90
[React] 좋은 리액트 코드 작성을 위한 환경 구축하기
💜 리액트/React2024. 6. 18. 14:23[React] 좋은 리액트 코드 작성을 위한 환경 구축하기

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위해 여러 가지 방법이 있는데 그 중에 정적 코드 분석이 있다. 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사전에 수정하는 것 자바스크립트에서 가장 많이 사용되고 있는 정적 코드 분석 도구가 바로 ESLint 이다. ESLint 살펴보기ESLint 는 어떻게 자바스크립트 코드를 읽어서 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.2번에서 구조화한 트리를 AST(Abstract..

[React] ESLint & Prettier 설정 방법
💜 리액트/라이브러리2023. 12. 22. 15:16[React] ESLint & Prettier 설정 방법

팀 프로젝트를 하다보면, 사람마다 코드 스타일이 다른 경우가 발생한다.그래서 코드의 규칙을 설정하여 일관성을 맞춰주기 위해 eslint 와 prettier 를 사용한다. 실제로 나도 팀프로젝트를 진행하면서 eslint 와 prettier 를 사용하였고,우아한테크코스 프리코스를 진행하면서도 eslint 와 prettier 를 계속 사용할 만큼 개발할 때 중요한 기술이다. ESLint & Prettier 란?그럼 여기서 eslint 와 prettier 는 정확하게 무엇일까?ESLintESLint 는 간단하게 말하자면 코드 구현 방식 규칙을 설정해주는 것이다.즉 코드를 구현하는 방식을 일관성 있게 설정해주는 것이다. 그래서 맞는 코드여도 규칙을 지키지 않았다면 해당 부분에 오류 flag 를 자동으로 달아준다...

728x90
image
loading