어제부터 넘블에서 진행하는 2주간의 인스타그램 클론코딩 챌린지가 시작되었다.
어제 오후 8시 OT를 간단하게 진행했고, 챌린지에 필요한 깃허브 레포지토리와 노션 페이지에 초대받았다.
과제는 총 5단계로 나뉘어져 있는데 1단계 과제를 완수하면 다음 과제가 오픈되는 방식이다.
개발 가이드라인과 화면 설계서 그리고 GUI 에셋 링크가 제공되는데 디자이너와 협업하는듯한 느낌을 받을 수 있었다.
1단계는 회원가입 기능이었는데 퍼블리싱을 먼저 완료하고 기능 구현을 하는 방식으로 계획을 짰다.
피그마를 보며 순조롭게 퍼블리싱 작업을 하고 있었는데 문제가 생겼다.
회원가입에 필요한 Input은 총 4개였는데 거의 동일한 구조였고, 효율적으로 코딩하기 위해 컴포넌트화했는데,
props를 사용하는 과정에서 에러가 발생했다.
pages/SignUp.js
components/Input.js
에러에 커서를 올려보니 다음과 같은 메세지가 나왔고, 해석해보니 props 유효성 검사에서 placeholder가 누락되었다는 뜻이었다.
해결 방법은 세 가지가 있었는데 첫 번째 해결 방법은
다음 줄에서 react/prop-types 관련 eslint 검사를 끄는 방법이었고
두 번째 해결 방법은 파일 전체에서 react/prop-types 관련 eslint 검사를 끄는 방법이었다.
위의 두 가지 방법은 설정된 eslint 규칙을 무시해버리는 방법이라서
코드의 일관성을 해칠 수 있기 때문에 좋지 않은 방법이라고 판단해서 사용하지 않았다.
마지막 방법은 react/prop-types 관련 문서를 보고 해결하는 방법이었는데 해결하기까지 생각보다 긴 시간이 소요됐다.
해당 규칙은 React 컴포넌트 정의에서 누락된 props 유효성 검사를 허용하지 않는다는 규칙이었다.
규칙 설명을 조금 더 읽어보니 "컴포넌트 props의 유형을 정의하면 수신된 데이터의 유효성을 검사하여
컴포넌트의 재사용 가능성이 향상된다. 다른 개발자가 잘못된 데이터 유형으로 컴포넌트를 재사용하는
동안 실수를 하면 경고할 수 있다." 라는 내용이었다.
prop-types를 사용해서 타입 체크를 해주면 해결되고, 코드는 아래와 같다.
사실 간단한 문제였지만 시간이 많이 소요된 이유는 중간에 @eslint-plugin-react의 recommened rules를 찾기까지 어려움이 있었기 때문이다.
이번 에러에서 근본적인 원인은 eslint 설정 때문이었고, extends 옵션에서 recommended rules가 사용되도록 설정되어 있었다.
에러를 해결하긴 했지만, 근본적인 원인이었던 ESLint의 recommended rules에 대해 공부해놓는 것이 좋다고 생각해서 더 찾아보게 되었다.
코드를 살펴보면 assign 메소드를 사용해서 all rules와 recommended rules를 병합하고 있다.
각각의 규칙에 대한 값들이 0과 1이 아닌 0과 2로 구성되어 있어서 한 번 더 찾아봐야 했고,
스택 오버 플로우에 그에 대한 질문과 답변이 있었다.
규칙 심각도는 3가지 값 중 1가지를 선택할 수 있고,
0이 의미하는 것은 off, 1이 의미하는 것은 warn, 2가 의미하는 것은 error였다.
에러 해결 과정을 정리해보자면, eslintrc.js 파일에서 recommended rules가 설정되어 있었고,
(recommended rules 관련 코드의 26번째 줄) react/prop-types의 심각도는 2였기 때문에
Input을 컴포넌트화하는 과정에서 props 유효성 검사를 진행했을 때 에러가 발생하고 이를 해결하기 위해서는
prop-types를 사용해서 타입 체크를 해줘야 했다.
