May 10, 2024
ESLint ESLint는 JavaScript/Typescript 코드에서 문법 오류를 검사하고 코드 최적화를 도와주는 도구이다. ESLint를 사용하면 코드 품질을 높이고 일관된 코드를 작성할 수 있어 협업 환경에서 주로 사용된다. Lint란? 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위. ESL…
May 12, 2024
prettier Prettier는 코드를 정해진 스타일로 교정해주는 도구이다. 주로 ESLint와 함께 사용되며 ESLint를 통해 에러를 최소화하여 코드 품질을 높이고 prettier를 통해 코드 스타일을 자동 포맷팅하여 코드의 가독성과 일관성을 높인다. prettier 설치 prettier config 추가 파일을 생성하고 다음과 같은 규칙을 추가한…
May 21, 2024
1. lint-staged : 에러 판독기 git에서 staged된 상태 파일들에 한해 lint를 실행하여 커밋 전에 코드 스타일을 검사하고 수정하는 도구 협업 환경에서는 모든 개발자가 일관된 코드 품질을 유지하는 것이 중요하다. 하지만 개발 환경이 모두 다르기때문에 코드 스타일 규칙이 지켜지지 않는 경우가 종종 발생한다. 이러한 문제를 해결하기 위해 l…
June 26, 2024
디버깅이란? (Debugging) 디버깅은 코드가 예상대로 동작하지 않을 때 오류가 나는 부분을 찾아 원인을 파악하고 해결하는 전체적인 과정을 뜻한다. 디버깅하는 방법 는 대표적인 디버깅 방법이다. console.log()로 코드의 동작을 확인하고 데이터 흐름을 추적할 수 있다. 하지만 무분별한 console.log()의 사용은 코드의 가독성을 떨어트리…
June 27, 2024
Chrome DevTools 디버깅 도구 Source 탭 활용하기 Chrome DevTools의 Network 탭이 데이터를 분석하고 오류의 원인을 찾기 위해 사용되었다면 Source 탭은 실제 코드를 확인하면서 디버깅하는 데 사용된다. 이때, breakpoint라는 기능을 사용하는데 이는 코드의 특정 지점에서 실행을 멈추고 상태를 점검할 수 있도록 도와…