✅ air cnb 웹페이지 클론 프로젝트 소개
위코드에서의 두번째 프로젝트로 세계 최대의 숙박공유 서비스인 air bnb를 클린코딩 해보았다.
우리 팀원들이 치맥을 좋아해서 이름은 air cnb (chicken n beer)로ㅎㅎ 역시 치맥은 사랑이다...❤️
✅ 사용한 기술 Stack
- HTML / CSS
- JavaScript
- React(CRA 세팅)
- React(Router DOM)
- React(Hooks)
- Redux(ReactRedux(Hooks), Persist, logger)
- Styled Components
- Kakao/Google Login API
- IMport
✅ 재현한 기능
- 메인페이지
- 반응형 구현
- 메인 페이지 효과 구현
- Navbar
- 네비바 효과 구현
- 위치 검색 모듈 구현
- 캘린더 모듈 구현
- 게스트 인원 모듈 구현
- Redux로 전 페이지 관련 내용 동기화
- 로그인/ 회원가입
- 카카오 로그인 / 회원가입 구현
- 구글 로그인 / 회원가입 구현 (Me!)
- 일반 로그인 / 회원가입 구현
- Redux persist 로 토큰 유지
- 카테고리별 상품리스트
- 장바구니 모달창
- 상품카드 분류 및 정렬
- 상품 상세페이지 구현
- 고객후기 게시판 구현 (pagination 포함)
- 상품 할인 금액 적용
- 상품 디테일 페이지
- url parameter를 이용한 동적라우팅 기능
- 저장하기 버튼 누를 시 하트 색 변경 및 서버에 post method로 정보 전송
- 리뷰 더 보기, 인원 설정, 달력 모달창 구현
- 리뷰 더 보기 모달 창에서 스크롤 이벤트를 통한 무한 스크롤(Pagination) 기능 구현
- Google Map API를 이용한 좌표 및 마커 설정 기능
- React dates를 이용한 날짜(Check-In, Check-Out) 선택 기능
- Redux를 이용하여 날짜 및 인원 정보 연동 기능
- Slick slider를 이용한 image carousel 기능 구현
- 예약(최종 구매) 페이지 (ME!)
- url parameter를 이용한 동적라우팅 기능
- React-dates 캘린더 모듈 구현
- 토글 버튼, 모달 창 구현
- Input 창 입력값 관리를 위한 UseReducer 활용
- Redux를 이용하여 날짜 및 인원 정보 연동
- Import를 활용한 카카오페이 구매 연동
✅ 가장 기억에 남는 코드
const reducer = (state, action) => {
return {
...state,
[action.name]: action.value,
};
};
const [state, dispatch] = useReducer(reducer, {
userName: "",
phoneNumber: "",
email: "",
address: "",
region: "",
});
const { userName, phoneNumber, email, address } = state;⏩ useReducer
리듀서는 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수이다. 내가 맡은 페이지에 input 창이 너무 많아 각 인풋창 별로 useState 함수를 쓰는 것은 너무 비효율적이라고 생각했고, 또 Redux를 본격적으로 배우기 전에 예습차원(?)으로 공부해보고자 활용해보았다.
⏩ useReducer 활용방법
const [state, dispatch] = useReducer(reducer, {
userName: ""
...
})useReducer 의 첫번째 파라미터는 리듀서 함수, 그리고 두번째 파라미터는 해당 리듀서의 기본 값을 넣어준다. 그리고 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수이다. dispatch(action) 와 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출되는 구조.
const reducer = (state, action) => {
return {
...state,
[action.name]: action.value,
};
};리듀서는 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 꼭 불변성을 지켜주어야 한다.
useReducer 를 사용하면 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name 을 참조하여 setState 를 해준 것과 유사한 방식으로 작업을 처리 할 수 있다.
** 참고: https://velog.io/@velopert/react-hooks
✅ 새벽감성 소감
- 솔직히 프로젝트를 한 차례 해보았으니 두번째 프로젝트는 더 많은 결과물을 낼 수 있을 줄 알았다. 그치만 styled component, hooks, redux 등 새로운 stack을 익히면서 코드를 짜려니 직전보다 2-3배의 시간이 들었던 것 같다. 이 과정에서 스스로가 많이 답답하기도 했고, 체력적으로도 힘들어서 이전만큼의 능률이 나오지 못했던 것 같다. 운이 좋게도 정말 열정 넘치는 팀원들이 있었기에 지칠 때마다 좋은 자극제가 되어주었다. (스페셜 땡스 투 은선 PM님, 양효님❤️)
- 새로운 stack을 마주칠때 마다 정말 눈물이 찔끔 난다. 특히 redux를 적용해볼 때 더더욱 그랬다. 그래도 이전과 다른 점이 있다면, "안하면 내가 뭐 어쩔거야 하다보면 언젠가는 되겠지" 이런 마인드셋이 갖춰졌다는 점...? 별거 아닌 것 같아도 이런 마음가짐이 꽤 쏠쏠한 도움이 되는 것 같다.
이제 곧 기업협업을 나가게 되는데, 그 곳에서는 React Native와 typeScript라는 새로운 기술을 배우게 된다. 조만간 또 눈물이 찔끔나고 머리가 다 빠질것 같은 느낌을 받겠지만, 그 때에도 지금과 같은 마인드를 가지고 잘 헤쳐나갔으면 좋겠다.
