[Project] 2차 프로젝트 1~3 일차

프로젝트 소개

• 내용 : 와이즐리 공식 사이트 클론
• 팀구성 : 프론트엔드 3명 / 백엔드 2명
• 프론트엔드 : SimpleKey, SangHa Joo, YoungMi Jung
• 백엔드 : Sungjun Jin, Jung-in Park

와이즐리 공식 사이트의 첫 인상은 깔끔, 심플 느낌 그 자체였다. 얼핏 봤을때는 프로젝트로 하기에 너무 쉬운 사이트를 선택한 거 아닌가 하는 크나큰 착각(?)을 했다.😱 반응형 디자인도 완벽하게 구현되어 있었고, 무엇보다 배우기 좋은 기능들이 많이 있었다. 물론 이걸 2주만에 다 배울 수 있을지는 모르겠지만 최대한 부딛혀보기로 했다!

2차 프로젝트에서 익숙해져야 할 내용

• SCSS가 아닌 styled-component를 사용
• git rebase / squash
• function형 컴포넌트와 hooks 사용

홈페이지 (메인페이지)

⬆︎보다시피 와이즐리 홈페이지는 Nav bar/Footer를 제외하면 여러개의 <section>태그로 구분되어있는 형태다. 홈페이지에는 특별한 기능은 없고 이미지와 텍스트로가 주로 이루어져 있기때문에 빠르게 진행할 수 있었다.

다만 그동안 css와 scss식의 스타일링에 익숙해져있었기 때문에 처음 써보는 styled-component가 아직 너무 어색했다. 뭔가 쓰긴 쓰는데 아직 styled-component만의 편리성을 크게 느끼지 못하는 것 같은... 물론 스타일 내에서 바로 props를 받아 스타일을 적용시킬 수 있다는 점에서는 편리함을 느낌!

⬆︎홈페이지에서 사용한 styled-component 일부분.. styled-component를 사용해도 이름 짓는게 힘든건 여전함😑

⬆︎실제 와이즐리 사이트 홈페이지에 있는 부분! 사실 막 어려운 기능이 아닐 수 도 있지만 어떻게 구현할 지 고민이 많았다. 그때 때마침 승현 멘토의 세션에서 비슷한 내용이 나왔다. 해당 내용은 다음 포스트에서.. (계속)