TIL - 20220514

 매주마다 이번 주 수업의 내용을 잘 이해하고 있는지 확인하기 위해서 과제를 수업에서 작성한 코드를 바탕으로 시작하는 것이 아닌 npm init부터 시작하며 다시 작성해보는 시간을 가진다. 이번 주에는 작성하면서 다음과 같은 eslint 에러를 만났다.

해당 코드: https://github.com/jaeyooniverse/breakable-toy 

GitHub - jaeyooniverse/breakable-toy

에러가 나서 기존에 작성한 코드와 비교를 했는데(사실, TIL을 작성하는 시점에서 돌이켜보면 IDE가 알려주는 링크를 먼저 확인하는 것이 더 좋은 방법이다. 앞으로는 링크를 먼저 이용해야겠다), 코드가 똑같음에도 불구하고, 과제에서 작성한 코드는 에러가 없었다.

기존에 작성했던 코드: https://github.com/jaeyooniverse/react-week2-assignment-1/blob/separate-files/src/Counter.jsx

GitHub - jaeyooniverse/react-week2-assignment-1: 코드숨 리액트 간단한 카운터앱 만들고 파일 분리하기

아샬님께 물어보고 '설정 파일을 정확히 확인해보세요'라는 답을 얻었다. 그래서, .eslintrc.js 소스 코드도 똑같이 했는데도 에러가 나서 상관없음을 알지만, 혹시나 싶어 webpack, babel 설정도 똑같이 했다. 하지만 계속 에러는 존재하는 상황. 재차 아샬님께 물어보고 얻은 해답은 다음과 같았다.

 

breakable-toy repo의 eslint-plugin-react 버젼은 7.29.4 과제로 제출한 repo의 eslint-plugin-react 버젼은 7.23.2여서 생긴 오류였다. 7.25.0에서 누군가의 제안에 따라 기본 설정을 변경하는 작업이 있었고, 이게 반영되면서 생긴 문제였다. 코드의 일부만 보지 말고 전체를 놓고 비교해야 하는 이유였다.

 

정말 머리가 한 방 얻어맞은 느낌이었다. 나는 설정 파일을 정확히 확인했다 생각했지만, 버전을 관리하는 설정 파일인 package.json은 전혀 고려하고 있지 않은 것이었다. 이번 계기를 통해 개발 내외적으로 배운 것이 정말 많았는데, 다음과 같이 있다.

 

1. 에러와 관련된 질문을 할 때, 이미지만 보여줄 것이 아니라 코드 전체를 공유해야 한다. 또한, 이미지만 보내는 것은 질문을 받는 입장에서 무례하게 느껴질 수도 있다. 항상 이미지로만 질문하는 것이 습관이 돼서 무례할 수도 있다는 생각은 단 한 번도 한 적이 없었는데 정말 지금이라도 알아서 다행이라고 생각한다. 앞으로 개념과 같은 질문이 아닌 이런 질문이라면 무조건 repo를 준비해서 repo 링크로 공유하도록 해야겠다.

 

2. 개발 관련 견습생일 때, 똑같이 했는데도 안 된다? 그건 '내가 뭔가 잘못했겠지'라는 생각을 항상 가져야겠다. 이번에도 난 분명 똑같이 한 것 같았는데 왜 안 될까 정말 억울하다는 생각이 들 정도였는데, 역시, 결국엔 또 내 잘못이었다.

영상 링크: https://youtu.be/AAYMew_RTBE 진짜 정말 강력히 추천한다. 개발자를 꿈꾸며 시작한 지 얼마 안 된 사람이라면 무조건 꼭 봤으면 좋겠다는 생각한다.

 

3. 코드 전체를 비교하자. 2번의 연장선인데, 코드의 일부만 비교하다 에러 해결을 놓쳤다. 항상 나무만 보려 하지 말고 숲을 보며 차근차근 나아가야겠다.