✨ 프론트와 백엔드가 함께한 첫 프로젝트!
이케아 코리아 웹사이트를 클론해보았다.
회원가입 -> 로그인 -> 메인 -> 리스트 -> 디테일
로 이동하는 플로우를 구현하고자 했고, 그 중 나는 제품 상세페이지를 중점으로 맡게 되었다.
개인적으로 세웠던 세부 목표들은 위와 같다.
처음으로 프론트와 백이 같이하는 프로젝트인만큼 협업에 대한 전반적인 이해를 할 수 있는 경험이 되길 바랬고, git과 조금 더 친해지고 싶었다. (차마.. git과 익숙해지자는 목표에는 체크를 할 수 없었다.. )
그 외로는 CSS Preprocessor 중 하나인 Sass를 적극 활용해보고싶었고,
life cycle이 어떻게 활용될 수 있는지, 동적 라우팅을 어떻게 쓸 수 있는지 알고 싶었다.
컴포넌트가 생명주기를 갖는다는게 도무지 와닿지 않았다. 업데이트를 왜 써야하는지, life cycle오류가 도대체 무엇인지 알 듯 말 듯 참 어려웠다.
스크롤 반응형 헤더와 동적라우팅을 구현하고서야 componentDidUpdate와 componentWillUnmoun의 이유를 알게 되었다.
그리고 시도 때도 없이 발생하던 map is not a function의 원인을 알게 되었다. 처음에는 화면이 렌더가 되었다가 안되었다가를 반복하길래 vscode의 문제인 줄 알았다..ㅋ_ㅋ 그래서 애꿏은 vscode창만 껐다 켰다를 반복하기도 했다. 이제는 조건부렌더링의 이유와 방법을 너무나 잘 알고있다.
이전 프로젝트인 인스타그램 클론에서는 버튼에 링크를 걸어주거나, url을 손수 입력하여 화면을 넘어갈 수 있었다.
this.props.match.params을 사용하여 클릭한 대상의 id에 해당하는 상품정보를 불러올 수 있었다.
선경님 덕분에 동적라우팅 안 헤메고 호다닥 끝낼 수 있었답니다~~~ 고마워용>.<💛💛