프로젝트 회고록
이번에 나이키 클론 코딩 프로젝트를 팀단위로 진행 하였다.
처음하는 프로젝트인 만큼 처음에는 떨리기도 하고, 잘 할수 있을지 걱정도 되었지만
이렇게 끝나고 회고록을 작성하고 있는걸 보니 그래도 잘 끝난 것 같다.
각설하고 회고록이란 내가 과거를 돌아 보면서 잘했던 일은 기억해서 나중에 또다시 사용 할 수 있도록 하고
못한 부분이 있으면 고쳐서 다음에 같은 일이 있을때 더 잘할 수 있는 기반이 되기 위해서 하는것으로 알고있으니 내가 사용 했던 코드들을 리팩토링 하고 내가 나이키 웹을 클론 코딩하면서 구현한 기능 들에 대해서
설명하며 정리를 해볼려고 한다.
먼저 나이키 웹에서 나는 ProductList 페이지를 구현 하였다.
해당 페이지는 나이키 웹 에서 메인 페이지에서 Navigation의 카테고리를 클릭했을 때 나오는 페이지이다.
나는 코드를 구성할때 항상 노트에 해당 페이지를 그려보는 편이다.
웹 페이지를 그리면서 어디에 어떤 부분으로 레이아웃을 어떤식으로 하면 좋을지를 먼저 생각하는 것이다.
이러한 과정을 먼저 거치게 되면 기본 뼈대가 잡혀서 이후에 다른 기능들을 넣을 때 어는 정도 가닥이 잡혀서
페이지를 그려보는 걸 선호 하는 편이다.
다음으로는 JSX문법을 이용해서 생각한 레이아웃의 코드를 작성하고, CSS를 입힌다.
기능 구현과 같은 경우에는 뒤에 놓고 작업을 하는 것이다.
물론 이럴 경우에는 기능을 구현한 이후에 간혹가다 CSS가 깨질 수 있다.
이번 프로젝트 때도 처음 레이아웃과 CSS 를 끝내고 기능 구현을 하였는데 이후 기능 구현을 하니
CSS 와 레이아웃이 일부 깨져서 잠깐동안 갈길을 잃었다.
하지만 다음 기능을 구현할때는 해당 부분을 인지하고, 미리 기능 구현할 코드의 className을 미리 생각하고 어떤식으로 CSS를 입힐지 생각하여 꺠지는 일을 방지 하였다.
마지막으로 기능 구현을 다하고 백 엔드분들과 API통신을 하는 일만이 남았을때는 솔직히
예상외로 내가 구현한 코드들이 잘 작동해서 놀랐다.
아직까지는 내 코드에 대한 확신이 없었기 때문이다. 특히 무한 스크롤 같은 경우에는 이번 프로젝트에서
라이브러리를 사용하지 않고 구현을 할려고 하다보니 다른 라이브러리를 사용한 무한 스크롤을 참조하여
나만의 코드를 구성하였더니 확신이 정확히 서질않았던 것이다.
다행이도 코드들은 잘 작동을 했고, 다른 아코디언 메뉴와 같은 기능들도 정상적으로 작동을 하였다.
무한 스크롤
먼저 무한 스크롤을 구현하면서 어려웠던것은 구현해본적이 없어 처음 접근하는 것 조차 어려웠다는 것 이다.
하지만 여러 자료들을 참조하여, 차근 차근 풀어 나가며 해당 코드를 구성 하여 최종적으로는 무한 스크롤을 완성할 수 있었다.
하지만 여기에도 문제점이 있었는데, 무한 스크롤을 실행 하게 되면 또다른 기능인 필터링의 기능이 작동이 안되는 것이다.
결론부터 말하자면 해당 사항은 프로젝트 기간내에 수정하지 못하였다.
최대한 혼자서 생각하며 문제 되는 부분에 대해서 수정을 해볼려고 하였으나 시간이 부족하여 최종 날짜에 맞추지 못하였다.
그래도 성과가 없는 것은 아닌것 같다
처음에는 어떤식으로 만들어야 할지 접근도 못하다가 차근차근 접근하여 결국 무한 스크롤을 구현 하였으며, 이후 다시 무한 스크롤에 대해서 공부하며 내가 구현한 코드와 공부한 코드를 비교하며 공부 할 수 있었는데,
내가 구성한 코드는 fetch로만 구성을 하였는데 해당 부분을 async-await 을 이용하여 구현하지 못한점과 쿼리 스트링을 사용하였음에도 Hook을 제대로 사용 못한 점에 대해서 파악 하였으며, 해당 함수 & Hook 에 대해서 더 배울 수 있는 기회를 얻어서 좋았다.
필터링 & 드롭다운
필터링을 구현하면서 어려웠던것은 쿼리 스트링의 값에 원하는 필터링의 조건 값을 넣어주는 부분에서 조금 까다로웠던 것 같다.
checkbox를 클릭했을때 해당 value 가 값으로 들어가는 부분을 처음에 어렵게 생각해서 진도가 늦었지만 이후에 생각을 간단히 하니 여유롭게 필터링 기능 부분에 대해서 마칠수 있었다.
하지만 해당 기능을 구현하면서 쿼리 스트링 사용시 사용해야할 Hook에 대해서 인지가 부족했던 탓인지 문제점을 너무 뒤늦게 파악한것에 대해서 너무 안타까웠다.
조금만 더 생각했으면, 바로 인지했을 부분에서 실수를해 더 아쉬웠던 것 같다.
프로젝트에 다음이란 존재하지 않지만 현재는 배우는 입장인 만큰 다음 프로젝트 때는 코드를 구성할 때 좀더 여유롭게 생각하고 주의깊게 생각하며, 프로젝트를 진행할 것이라 다짐 하였다.
마지막으로...
마지막으로 한마디 하고 회고록을 마치자면
어딜 가든 무엇을 하든 똑같겠지만 팀원간의 동료간의 의사소통은 늘 중요하다는 것을 다시한번 깨달으며 이번 회고록을 마친다.
