고양이 사진첩(Vanilla JS) 회고

🤔 고양이 사진첩 만들기 !!!

 들어가기 전에 완성본 영상을 보고 가겠습니다.

폴더 파일 구조

📦src
 ┣ 📂components
 ┃ ┣ 📜app.js
 ┃ ┣ 📜breadCrumb.js //경로 나타내는 곳(경로 선택 가능)
 ┃ ┣ 📜catNode.js //파일, 폴더 나타내는 곳(파일,폴더 선택가능)
 ┃ ┣ 📜imageViewer.js //파일 선택시 그림 보여주는 곳
 ┃ ┗ 📜loading.js //loading 중 인 상황
 ┣ 📂constants
 ┃ ┗ 📜constants.js
 ┣ 📂utils
 ┃ ┣ 📜api.js
 ┃ ┣ 📜backEvent.js
 ┃ ┣ 📜fetchCat.js
 ┃ ┗ 📜returnHTML.js
 ┗ 📜main.js

뭔가 허접하게 했습니다. 이 것을 3시간 안에 다 끝내야 하는데 생각해보면 한 5시간은 걸린 것 같습니다.....
그냥 처음에는 딱 이거였습니다.

내가 쓰는 것이 뭐지 그런데 조금 생각하니 잘 해결이 되었습니다.
해당 부분은 거의 반복이다 보니 엄청 어렵지는 않고 숙련도가 부족한 문제점이었습니다.

 그러나!!!

시간을 많이 잡아 먹는 문제가 발생했습니다.

🔥 문제 : Modal 범위 문제

imageViewer.js를 만들고 난 후 addEventListener을 이용하여 폴더, 파일을 click 하는데.... click이 안되네??

여기 부분에서 addEventListener 가 문제가 있는 줄 알고 stackoverflow, 구글링을 해본 후 chrome에서 실행을 시켜 봤더니 그냥 되었습니다... 그럼 뭐가? 처음으로 확인 한 것은 js 부분이었습니다. 그런데 계속 봐도 문제가 없었습니다.

그래서 다음으로 확인을 한 부분은 css 였습니다. css를 주석 처리 후 실행해보니 어 ???? 되네 ??? ㅋㅋㅋㅋㅋ 뭐지

약간 되서 기쁜데 왜 이런지 알지 못해서 슬픈 느낌이었습니다. 그래서 찾아보기로 했습니다.
막 뒤져 봤는데 이 친구로 인해 원인을 파악하게 되었습니다.

원인은 간단했습니다.

Modal의 범위가 화면 전체를 감싸고 있어서 addEventListener가 작동을 할 수 없는 것이었습니다.

즉 addEventListener을 걸어놓은 page 위에 Modal의 범위가 가면처럼 쓰고 있는 문제였습니다. ㅎㅎㅎㅎ
정말 허무한 시간 낭비였습니다...

🔥 문제 : 코드 깔끔's

그 후 코드를 깨끗하게 짜기 위해

🧐 update 된 값을 재 rendering하는 setState 고민 

이부분에 대해서는 무조건 전체를 setState 하는 방식보다 상황에 맞게 setState를 하면 되는 것이었습니다. 뭔가 짜 맞추기 느낌...

 

🧐 사용하지 않는 state 의 값을 넘겨주냐 아니면 조금 드럽더라도 남겨서 넘겨주냐에 대한 고민 

현재 사용하는 data는 많은 정보를 포함하고 있지 않기 때문에 좀 깨끗해 보이는 state전체를 넘겨주는 방식을 선택했습니다. 다음에는 여러 방법들이 있겠지만 state를 변경해서 넘겨주는 방식으로 해볼려고 합니다. :)

 

😃 마치며

하나하나 과제를 진행해 나가면서 실력이 느는 건지는 모르겠지만 익숙해지고 있습니다. 정말 좋은 상황이라고 보고 문제점을 해결하는 방법을 좀 더 넓게 봐야 겠다는 깨달음도 얻게 되었고 이젠 vanilla JS를 지나 SCSS, Vue 등을 시작하는 데.... 까먹지 말고 간간히 한번씩 복습을 하러 돌아와야 겠습니다. :) 코드는 프로그래머스 비공개 저장소에 있어서 못 봅니다. commit msg 도 잘써놨는데... 아깝다.

더 열심히 하고 최종 프로젝트를 올려봐야 겠습니다. :) 올려도 될련지는 모르겠지만 ㅎ

REF

프로그래머스 데브코스
프로그래머스 고양이 사진첩 문제