[수풀] 배열 map 컴포넌트, 상태관리, top 버튼

💻 들어가며

기능 구현하면서 eslint에서 prettier랑 줄바꿈 옵션이 충돌이 난 건지 계속해서 오류가 나왔다..😥

치명적인 영향을 미치지는 않았지만 새로고침 할때마다 계속 브라우저에 오류를 내서 가만히 냅둘 수 없어서

구글링을 시작했다

줄바꿈 eslint 오류

스택오버플로우에서 방법은 찾았는데 적용을 해보니 해결이 안 됐다..

원인은 잘 모르겠고 기능구현하기 바빠 죽겠는데

빨리 해결해야겠다 싶어서 그냥 특정 줄만 eslint 옵션을 끌 수 있는 주석을 달아 해결했다.

위에서 발생한 오류 해결하는 eslint 옵션

eslint-disable-next-line prettier/prettier 옵션을 줘서 해결했는데 부분에만 적용되는 옵션이라서

완벽한 해결방법은 아니라서 조금 아쉽지만 중요한 부분은 아니라 일단 넘어가기로했다

프로젝트 끝나고도 eslint, prettier는 계속 사용할 것 같으니 플젝 끝난 후에 한 번 제대로 알아봐야할 것 같다

---

📚 구현기능

필터링 조건부 스타일

- 배열 map 메서드로 만든 컴포넌트들의 조건부 css

- state를 props로 내려줘서 선택된 로고들이 모이는 list 만듦

---

board 레이아웃 수정

수정중인 게시판

레이아웃을 만들때 전체틀은 grid로 나누고 각 게시글 컴포넌트는 flex를 이용해서 레이아웃을 구성했다

---

🤔느낀점

CSS의 중요성

맨날 flex만 써보다가 전체적인 레이아웃의 구역을 나누는데는 grid가 좋을 것 같아 처음으로 grid를 사용해봤다.

확실히 flex보다 고정적으로 구역을 나눌 수 있다는 것이 전체적인 틀을 구성하는데 훨씬 좋았다.

 

처음에는 자바스크립트만 열심히 하자는 마인드였는데 프로젝트를 하면서 느끼는 점은 html과 css가 생각보다 많이 중요하구나였다.

예전에 유튜브에서 김버그님 영상보고 주니어 프론트 개발자들이 html,css를 소홀히 하는 경향이 있는데 쉽다고 대충하지말아라는 영상을

본 적이 있었다. 프로젝트 시작전에 봤던 영상이라 그냥 별 다른 감흥없이 넘겼었는데

프로젝트를 하면할 수록 뼈저리게 느끼고 있다 지금도 구현하기 급급해서 div태그 남발하고, css 구조 개판이고 좋지 않은 코드를 작성하며

프로젝트를 진행하고 있는 것 같은데...

되는대로 막 기능 구현하다보니 점점 코드 보기도 어려워지고 내가 작성한 코드인데도 구조파악하기가 어려워지는 걸 보면서

시맨틱 태그와 CSS에 숙달의 필요성을 점점 느끼게 되었다😅

 

---

주석

이건 예전에 42서울을 라피신 과정을 진행하면서 생긴 안 좋은 습관인 것 같은데 

42서울 코딩 메뉴얼에 있던 글 중 '쓰레기 같은 코드를 주석으로 퉁치려 하지마' 라는 뉘앙스의 글을 본 기억이 있다.

뭔가 저 글을 보고난 뒤에 주석없이 이해할 수 있는 코드를 짜보자! 라는 생각을 하게되고 주석 쓰는 것을 꺼려하게 된 것 같은데

방금 짠 코드는 당연히 주석없이 이해하지만 프로젝트 진행하면서 예전에 혼자서 사이드로 작성하던 코드를 조금 바꿔서 쓸 수 있을 것 같아서 찾아봤는데 내가 짠 코드라도 며칠, 몇 주 지나니까 못 알아보겠더라... 

또 팀프로젝트이다 보니 팀원들에게 완벽한 설명은 못 해도 어느정도 힌트가 될 수 있는 주석이라도 달아주는 게 맞겠다 생각이 들어

정합성 검사 함수나, API 요청 함수에는 주석을 달기 시작했다. 확실히 이해에 도움이 되는 듯 싶었고 좋은 주석을 다는 방법을 찾아봐야겠다 생각이 들었다.

 

---

🙇‍♂️ 마무리하며

프로젝트 초반에는 조건부, 메서드를 이용한 컴포넌트 렌더링하는 것을 자유자재로 하지 못 했었는데

이제는 어느정도 숙달돼서 어떻게 컴포넌트를 띄울지 머릿속으로 생각할 수 있는 정도는 된 것 같다

물론 아직은 복잡한 조건이 달린다면 구현을 잘 못하겠지만 그래도 예전에는 어려웠던게 지금은 쉬워진 것을 느끼면서 

성장을하고 있구나 느끼게 되었다. 어려운 것도 지금 당장 이해 못 해도 하다보면 무조건 알 수 있게 되니 일단 꾸준히 하는게 중요하다 느꼈다.