Zillow 클론코딩 회고

리액트 방식으로 간단한 토이프로젝트를 해보았지만 웹페이지를 구현하는데 자신감이 부족했습니다.

클론 코딩을 통해 리액트 구현능력을 기르고 CSS 실력 향상시키기 위한 목적으로 간단한 프로젝트를 해보았습니다.

구현하면서 했던 고민과 어려웠던 점 등을 간단하게 포스팅 하려 합니다!

✔ 구현 이미지

✔ git-hub pages 배포 주소

https://homiekim.github.io/Zillow_Clone/

Zillow Clone

 

✔ 사용한 라이브러리

• React (초기 세팅 CRA 사용)
• emotion (CSS-in-JS 방식 사용)
• ant-design (Input, Card, Button 정도의 컴포넌트를 ant-design에서 가져와 사용하였습니다.)
• font-awesome icon (똑같이 클론하려다 보니 antd-icons에 없는 아이콘(브랜드 아이콘 등..)이 있어서 사용하였습니다.)
• react-responsive (간단한 반응형은 css 내부에 미디어쿼리 사용하였고 모바일이나 태블릿에서는 Menu나 Navbar 모양이 아예 달라져서 컴포넌트 단위로 반응형을 적용하기 위해 사용 하였습니다.)

 

✔ 사이트 선정이유?

• 복잡한 애니메이션이 없이 깔끔한 UI와 header, body, footer 구조로 가장 연습해보기 좋다고 생각함
• Menu나 Input 등 단순 페이지 구현이 아니라 컴포넌트 단위로 구현해야할 기능이 많이 있다고 생각함
• 반응형이나 hover, click등 이벤트 핸들링이 필요했기 때문

 

✔ 고민했던 점

• 최대한 컴포넌트 단위로 분리하려 노력했습니다. (크게 header, contents, footer로 나누고 세부적은 컴포넌트를 내부에서 분리하는 식으로 진행)
• 단순 코드 반복을 최대한 줄이려고 했습니다. (웹 뷰와 모바일 뷰에서 같은 list가반복 되기 때문에 각각 html코드를 쓰지 않고 dummy data로 분리하여 반복문 통해 렌더링)
• emotion-styled를 통해 유의미한 이름으로 컴포넌트 작성하려 노력했습니다.

✔ 아쉬운 점

• css가 복잡해 지니 오히려 styled-component 쓰는게 코드가 더 길어지고 가독성이 좋지 않아짐
• 최대한 유의미한 단위로 컴포넌트 분리하려 했지만 Footer쪽의 리스트는 조금 하드코딩한 감이 있음
• toggle이나 hover 이벤트를 state로 value를 가지고 있고 이 value에 따라 렌더링하는 방식으로 구현했는데 지금 보면 useCallback으로 리렌더링을 처리하거나 이벤트 핸들러로도 처리할 수 있었을 거 같음
• ant-design쓴이유가 Card 컴포넌트 쓰면 중간에 contents 구현하는데 적합하다고 생각했는데 막상 쓰니까 세부적인 css 다시 수정해줘야 하는 경우가 많았음 (똑같이 클론 하려다 보니) css 프레임워크 안쓰고 직접 다 구현해봐도 될 뻔했다.

✔ 느낀점, 개선할 부분

• 확실히 웹사이트를 구현하는데 자신감이 많이 생김(특히, CSS)
• 리액트에서 컴포넌트 단위로 쪼개서 코딩하는데 감이 좀 생긴거 같다.  다른 프로젝트를 한다면 좀 더 효율적으로 할 수 있을 것 같음
• 단순 페이지 클론이다 보니 특별히 상태가 많이 바뀌거나 관리할 필요없었는데 페이지가 더 많아지고 상태가 변하는 부분이 많아지면 코드가 엄청 지저분해질 거 같음.. state 관리에 대해 조금 더 관심있게 공부할 필요가 있겠다.
• 페이지만 우선 구현하고 기능은 따로 구현 안했는데 찾아보니 zillow에서 데이터를 가져올 수 있는 api를 제공함 추후에 검색 기능도 완성하면 좋을 것 같다.

 

✔ 전체 코드

https://github.com/HomieKim/Zillow_Clone

GitHub - HomieKim/Zillow_Clone: Zillow Clone