✨ 원티드 클론 프로젝트 후기

2차 프로젝트였던 ✨ 원티드 클론 프로젝트 ✨ 후기를 써보려고 한다.

🎈 프로젝트 기간 🎈

2020.10.05 - 2020.10.16

💻 프로젝트

주제 : 원티드 클론

🤼‍♂️ 팀 Cuted

• FrontEnd : 박남준, 김호균, 장주희, 이연성
• BackEnd : 홍성은, 문성호

🌍 협업 툴

• Github
• Trello

🌈 기술 스택

💻 프론트엔드

• HTML, CSS
• JavaScript(ES6+)
• React (CRA, Hooks, Redux)
• Slick.js (library)
• HighChart.js
• Google MAP API
• Styled Component

💻 백엔드

• Python
• Django
• MySQL
• Linux

✍ Github

https://github.com/wecode-bootcamp-korea/12-Cuted-frontend
https://github.com/wecode-bootcamp-korea/12-Cuted-backend

🙋‍♀️ 내가 맡은 부분

나는 탐색(메인) 페이지 부분을 맡았다.

① Slick 을 사용한 슬라이드

② React-Hooks로 만든 슬라이드

③ 최신순, 응답률순 필터

① 응답률순

② 최신순

④ 지역별 필터

👻 기억에 남는 코드

① Slick 을 사용한 슬라이드

1차 프로젝트 때 슬라이드를 많이 만들어봤고, 슬릭을 사용해본 상태여서 마지막에 추가로 하면 되겠지하고 쉽게 생각했던 슬릭 슬라이더.
이번에 슬릭 슬라이더를 사용하면서 크게 두 가지를 기억하고 싶었다.

첫번째는 '사용해봤다고 대충하지말고, 기본부터 꼼꼼히 다시 살펴 보자' 이다.

const settings = {
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
};

개인적으로 1차 프로젝트를 하면서 슬릭 슬라이더를 사용하면서 느낀 점은 '그대로 사용하기엔 쉬울 줄 몰라도 커스텀 하기엔 정말 불편하다.' 라는 점이었다.

그러나 마지막으로 만들 슬라이더는 기본만 하면 되는(심지어 화살표도 필요없는) 슬라이더라 슬릭을 사용해서 쉽게 만들려고 했고, 그렇게 생각하다 피를 보게 되었다.

프로젝트 막바지에 빨리 슬릭을 써서 만들어야지 하고 마음 급하게 코드를 그대로 보면서 사용하다 보니 한 슬라이더에 이미지가 3장씩 나오는 것을 발견했다.
도대체 왜 그런건지 혼자서 계속 끙끙대다 주변 동기분께 질문도 하고, 이미지 크기를 줄였다 확대해보기도 하고, 혹시나 map을 돌려서 그런건 아닌지 한 장씩 따로 줘 보기도 했다.
그런데 그대로였다.

이러다가 영영 완성 못하겠다 싶어 멘토님께 찾아갔고, 멘토님이 처음부터 코드를 보자며 봤는데, 세상에나 마상에나 전혀 생각치도 못했던 원인을 발견했다. 바로 초기세팅에 3장씩 보여주게 설정이 되어있었던 것이다.

심지어, 이미지 한 장도 크기가 꽉 채워지지 않고 이상하게 채워져서 이 문제도 이미지 크기를 조정해서 해결해보려고 하다 결국 해결되지 않아 멘토님께 질문했는데, 이것 또한 초기세팅에 이미지가 무조건 센터에 지정되어있게 되어있었다.

예전에 써봤다고해서 쉽게 생각하지말고 하나씩 꼼꼼히 처음부터 보며, 이게 뭘 뜻하는건지 알고 코드를 작성하는게 시간을 더 절약하는 방법이라는 것을 깨달았다.

두번째로는 이미지 양 옆 여백에 배경색을 줘서 꽉채우는 방법이다.

function CompanySlide() {
  return (
    <Container>
      <StyledSlider {...settings}>
        {IMGS.map((el, index) => {
          return (
            <IMG backgroundColor={index === 1 ? '#d3def7' : '#fbb1d4'}>
              <img src={el.imgUrl} />
            </IMG>
          );
        })}
      </StyledSlider>
    </Container>
  );
}

억지로 이미지 크기를 이용해 꽉채웠더니 이미지가 눌러보이는 문제가 발생했다.
그래도 보는데 큰 문제가 없었기에 그대로 진행하려고 했는데, 동기분께서 이렇게 해보면 되지 않냐고 좋은 방법을 알려주셨다!
그 방법은 배경색이 있는 이미지니 양 옆 여백에 해당 색을 백그라운드 컬러로 주는 것이다!
실제로 저 코드처럼 해보니 슬라이드 속 이미지가 꽉 채워지는 것처럼 보이는건 물론, 이미지가 눌러지는걸 방지할 수 있었고, 이미지는 원본을 유지할 수 있었다.
전혀 생각치도 못한 방법이어서 너무 감탄했다... 갓갓... 👍

② 지역 filter 하는 부분 map 돌리기

 {locationData.map((el) => (
      <LocationItem
       key={el.id}
       LocationName={el.Location}
       current={locationId}
       index={el.id}
       onClick={(e) => handleSetLocation(el.id, e)}

       {el.Location}
      </LocationItem>
  ))}
 </LocationFilter>
 </Location>
 <DetailLocation>
   <DetailLocationTitle>상세 지역</DetailLocationTitle>
   <DetailLocationFilter>
       {locationData[locationId - 1]?.Detail_Location.map(
                (el, index) => (
          <DetailLocationItem
              key={index}
              current={detailLocationId}
              index={index}
              onClick={(e) => handleSetDetailLocation(e, index)}

             {el}
    	  </DetailLocationItem>
          )
        )}

지역과 상세지역 모두 map을 이용하여 정보를 뿌리는 방법이다.
나의 데이터는 아래와 같다.

{
  "id": 2,
  "Location": "서울",
  "Detail_Location": ["전체","강남구","강동구","강서구","강북구","관악구","광진구","구로구","금천구","노원구","도봉구","동대문구","동작구","마포구","서대문구","서초구","성동구","성북구","송파구","양천구","영등포구","용산구","은평구","종로구","중구","중랑구"] 
},

1차 프로젝트 때 map 돌리는 부분이 많아서 map을 완벽이해했다고 생각했지만, 사실은 map에 대한 이해가 전혀 되지 않았다는걸 깨달았던 때이다.
추후에 map에 대해 공부를 꼭 하고, 이해한대로 정리해야겠다고 생각했던 코드이다.