Toy Project 05 이케아 클론 프로젝트 : 프로젝트를 마무리하며

dory·2021년 5월 23일
0

토이프로젝트

목록 보기
7/8
post-thumbnail

프론트와 백엔드가 함께한 첫 프로젝트!

이케아 코리아 웹사이트를 클론해보았다.

회원가입 -> 로그인 -> 메인 -> 리스트 -> 디테일로 이동하는 플로우를 구현하고자 했고, 그 중 나는 제품 상세페이지를 중점으로 맡게 되었다.

🎯 목표

  • 협업에 대한 이해
  • git 사용에 익숙해지기
  • Sass의 적극 활용
  • component의 life cycle에 대한 이해
  • 동적 라우팅 구현하기

개인적으로 세웠던 세부 목표들은 위와 같다.

처음으로 프론트와 백이 같이하는 프로젝트인만큼 협업에 대한 전반적인 이해를 할 수 있는 경험이 되길 바랬고, git과 조금 더 친해지고 싶었다. (차마.. git과 익숙해지자는 목표에는 체크를 할 수 없었다.. )

그 외로는 CSS Preprocessor 중 하나인 Sass를 적극 활용해보고싶었고,
life cycle이 어떻게 활용될 수 있는지, 동적 라우팅을 어떻게 쓸 수 있는지 알고 싶었다.

📌 협업에 대한 이해

  • 처음엔 한 팀 아래 두 팀으로 나뉜듯 프론트는 프론트끼리, 백은 백끼리 대화를 주고 받았었다. 하지만 프로젝트가 진행될수록 더 많은 이야기를 함께 나눠야한다는 것을 알게 되었다. 특히나 데이터 구조나 key값에 대한 변동사항은 확실하게 전달해야함을 알 수 있었다.

📌 git과 친해지기

  • branch를 master 위치에서 생성하지 않고, merge되기 전 컴포넌트들을 복붙해서 사용한 결과 .. 꽤나 골치가 아파졌었다.. ㅎ_ㅎ 이곳 저곳에서 conflict가 발생했고, merge와 함께 작업 내용이 사라지기도 했다. 이번 일을 교훈삼아 복붙은 함부로 하지 않겠다 다짐한다 하하💩

📌 Sass의 적극 활용

  • Sass를 처음 사용할 때 까지만 해도 '굳이?' 라는 생각이 컸다. 하지만 쓰면 쓸 수록 Sass의 매력에 푹 빠지게 되었다.
  • 가장 큰 매력은 같은 내용을 반복하지 않아도 된다는 점과, 내 마음대로 mixin을 만들어 사용할 수 있다는 점이었다. 게다가 built-in-function이 제공하는 다양한 기능들이 너무나 편리했고, 마치 프로그래밍 언어를 쓰는 듯한 기분에 뭔가 모르게 재밌었다.
  • mixin을 선언할때는 다소 복잡하게 느껴서 사용하기 힘들 것 같았지만, 오히려 반복되는 코드를 줄일 수 있고, 레이아웃 구현하는 시간이 훨씬 단축되는 효과를 볼 수 있었다.
  • 이러한 효과는 반응형 레이아웃을 만들때 잘 드러났는데, 모바일 사이즈부터 시작해서 만들어놓은 mixin을 적절히 사용하니 손쉽게 반응형을 구현할 수 있었다.

📌 component의 life cycle에 대한 이해

컴포넌트가 생명주기를 갖는다는게 도무지 와닿지 않았다. 업데이트를 왜 써야하는지, life cycle오류가 도대체 무엇인지 알 듯 말 듯 참 어려웠다.

스크롤 반응형 헤더와 동적라우팅을 구현하고서야 componentDidUpdate와 componentWillUnmoun의 이유를 알게 되었다.

그리고 시도 때도 없이 발생하던 map is not a function의 원인을 알게 되었다. 처음에는 화면이 렌더가 되었다가 안되었다가를 반복하길래 vscode의 문제인 줄 알았다..ㅋ_ㅋ 그래서 애꿏은 vscode창만 껐다 켰다를 반복하기도 했다. 이제는 조건부렌더링의 이유와 방법을 너무나 잘 알고있다.

📌 동적 라우팅 구현하기

이전 프로젝트인 인스타그램 클론에서는 버튼에 링크를 걸어주거나, url을 손수 입력하여 화면을 넘어갈 수 있었다.

this.props.match.params을 사용하여 클릭한 대상의 id에 해당하는 상품정보를 불러올 수 있었다.

2개의 댓글

comment-user-thumbnail
2021년 5월 23일

선경님 덕분에 동적라우팅 안 헤메고 호다닥 끝낼 수 있었답니다~~~ 고마워용>.<💛💛

1개의 답글