사실 기술면접 경험없습니다.
그래도 일단 들어오셨으니 얕고 유용한 내용 가져가보세요.
프론트엔드 개발자에게 있어 코드의 품질과 일관성을 유지하는 것은 매우 중요합니다. 특히, 현업에서는 혼자 프로젝트를 진행하는 경우가 거의 없다는 것은 학부생도 알고 있는 사실이죠.
팀 단위로 프로젝트를 진행할 때, 모든 팀원이 동일한 코드 스타일을 따르는 것은 유지보수성과 가독성을 높이는 핵심 요소이자 배려이자 개념이자 기본 소양입니다.
이러한 상황에서 강력한 도구가 바로 ESLint이며, 그 중심에는 프로젝트의 .eslintrc.json 설정 파일이 있습니다.
--
왜 .eslintrc.json을 사용해야 하는가?
1. 코드 품질 유지
.eslintrc.json 파일은 프로젝트의 ESLint 설정을 정의하는 파일입니다. ESLint는 코드 품질을 자동으로 검사해주고, 일관되지 않은 코드 스타일이나 잠재적인 에러를 발견할 수 있습니다. 이 파일은 팀 내에서 일관된 코드 스타일을 유지하는 데 매우 중요한 역할을 합니다. 이를 통해 개발자는 팀원들 간에 서로 다른 코드 스타일로 인해 발생하는 불필요한 충돌을 줄일 수 있습니다.
2. 버그 예방
규칙 기반의 ESLint 설정은 잠재적인 버그를 미리 찾아낼 수 있도록 돕습니다. 예를 들어, 변수 선언 후 사용하지 않았거나, 올바르지 않은 비교 연산자를 사용한 경우 경고 메시지를 통해 버그 발생을 예방할 수 있습니다. 이는 사소해 보이지만, 시간이 지남에 따라 큰 문제로 발전할 수 있는 버그들을 조기에 잡아내는 데 매우 유용합니다.
3. 일관된 코드 스타일
팀이 커질수록 코드 스타일의 통일성은 점점 더 중요해집니다. 프로젝트 초기부터 ESLint 설정을 확립해놓으면, 팀원들이 동일한 코드 스타일 규칙을 따르게 되어 리뷰 시간도 단축되고, 코드 가독성도 높아집니다. ESLint는 코딩 컨벤션을 강제할 수 있는 다양한 플러그인과 규칙을 제공합니다. 예를 들어, 세미콜론 사용 여부, 들여쓰기 스타일, 함수의 선언 방식 등 일관된 스타일을 유지하는 데 도움을 줍니다.
좀 더 직관적이게 예시로 보여드리겠습니다.
ESLint 설정 (.eslintrc.json)
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb",
"prettier"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"semi": ["error", "always"], // 세미콜론을 항상 사용
"quotes": ["error", "single"], // 문자열을 항상 single quote로 사용
"indent": ["error", 2], // 들여쓰기를 2칸으로 강제
"react/jsx-indent": ["error", 2], // JSX 들여쓰기를 2칸으로 강제
"react/prop-types": "off" // PropTypes 사용을 끔 (TypeScript 대체)
}
}ESLint 규칙 설명
semi: ["error", "always"]: 세미콜론을 항상 붙이도록 강제.quotes: ["error", "single"]: 문자열은 항상'(single quote)로 작성하도록 강제.indent: ["error", 2]: 들여쓰기를 2칸으로 고정.react/jsx-indent: ["error", 2]: JSX에서도 들여쓰기를 2칸으로 고정.react/prop-types: "off": PropTypes를 사용하지 않도록 하고, 대신 TypeScript를 사용하는 경우를 대비.
코드 예시
1. 잘못된 코드 (ESLint 규칙 위반)
import React from "react"
function MyComponent(props) {
return (
<div>
<h1>Hello, {props.name}</h1>
<p>This is my component</p>
</div>
)
}- 문제점:
- 세미콜론이 누락됨 (
semi규칙 위반). - 들여쓰기가 4칸으로 되어 있음 (
indent규칙 위반). - 문자열이 더블 쿼트로 되어 있음 (
quotes규칙 위반).
- 세미콜론이 누락됨 (
2. ESLint가 자동으로 수정한 코드 (규칙 적용)
import React from 'react'; // single quotes and semicolon
function MyComponent(props) { // indent fixed
return (
<div>
<h1>Hello, {props.name}</h1>
<p>This is my component</p>
</div>
); // semicolon added
}- 수정 사항:
- 세미콜론이 추가됨.
- 들여쓰기가 4칸에서 2칸으로 변경됨.
- 문자열이 더블 쿼트에서 싱글 쿼트로 변경됨.
이제 뭔가 느낌이 오시죠? 많이 쓰이는 플러그인 Prettier와 비슷한 느낌이 있습니다.
4. 협업에 준비된 개발자로서의 필수 요소
함께 개발할 준비가된 개발자라면 .eslintrc.json 파일의 중요성을 이해하고 프로젝트에서 이를 적극적으로 사용해야 합니다! 내가 만든 음식이 아무리 맛있어도 플레이팅이 개판이면 내 정성을 몰라주는건 당연합니다.
기술 면접에서 나올 수 있는 질문들
기술 면접에서 ESLint와 .eslintrc.json 설정 파일에 대해 질문이 자주 나온다고 합니다(제가 이 글을 쓰게된 이유입니다). 면접관은 당신이 얼마나 협업을 고려한 개발을 하고 있는지, 코드 품질 관리에 신경을 쓰고 있는지를 확인하려 할 것입니다. => 실력만큼 협업할 준비가 되었는지에 대한 역량도 당연히 중요하겠죠?
1. ESLint란 무엇인가요?
- ESLint는 JavaScript 코드의 품질을 분석하고 오류를 찾아내는 도구입니다. 코드 스타일을 통일하고 잠재적인 오류를 사전에 방지하기 위해 사용됩니다.
(여기서 만약 "ESLint는 ES(Ecma Script)와 Lint를 합친 것으로, (Ecma라는 기구에서 만든 Script가 표준 Javascript이기 때문에) 자바스크립트 코드의 에러를 표시해 줍니다. 아, Lint는 Linter의 약자로 에러가 있는 코드에 표시를 달아주는것을 뜻합니다." 까지 말한다면 바라보는 눈빛이 달라지겠네요.)
2. 프로젝트에서 .eslintrc.json 파일을 사용하는 이유는 무엇인가요?
.eslintrc.json파일은 프로젝트의 코드 스타일 규칙과 오류 탐지 규칙을 설정하는 곳입니다. 이를 통해 팀원들이 일관된 코드 스타일을 유지하고, 코드에서 발생할 수 있는 잠재적 오류를 미리 잡아낼 수 있습니다.
3. ESLint와 Prettier의 차이점은 무엇인가요?
- ESLint는 주로 코드의 품질과 오류를 검사하는 도구이며, Prettier는 코드의 포매팅(형식화)을 위한 도구입니다. 두 도구는 서로 보완적으로 사용될 수 있습니다. ESLint는 예를 들어 변수를 사용하지 않는 것 같은 논리적 오류를 찾아내고, Prettier는 코드의 들여쓰기나 세미콜론 위치 같은 포매팅을 자동화합니다.
4. ESLint 설정을 어떻게 관리하나요?
- 일반적으로
.eslintrc.json파일을 루트 디렉토리에 두고, 프로젝트 전반에 걸친 코드 스타일과 규칙을 정의합니다. 추가로 프로젝트의 상황에 따라eslint-plugin-react,eslint-plugin-import와 같은 플러그인들을 사용하여 더 구체적인 규칙을 설정할 수 있습니다.
5. ESLint를 CI/CD 파이프라인에 통합할 수 있나요?
- 네, ESLint를 CI/CD 파이프라인에 통합하면 자동으로 코드 품질을 체크할 수 있습니다. 코드를 푸시하거나 풀 리퀘스트를 생성할 때 자동으로 ESLint 규칙이 적용되어 코드 품질을 보장할 수 있습니다.
결론
협업할 준비가 되어있는 프론트엔드 개발자라면 ESLint와
.eslintrc.json파일은 필수 도구!
