wetown 프로젝트 기록

🙋‍♂️ 역할

• 프론트 엔드 : 메인 페이지

• 백엔드 : 메인 페이지 사진 API, 로그인 & 회원가입 API

헤더

• 구현 요소

  • SMTOWN 홈페이지의 헤더는 기존 우리가 흔히 보던 드롭다운보다는 디테일한 부분이 많았다. 대부분의 헤더들이 마우스 호버 시에 말그대로 상세 메뉴가 내려오는데에 그쳤다면, SMTOWN 헤더는 일단 메뉴에 마우스를 호버하면 헤더의 배경이 투명한 색에서 분홍색으로 바꼈고, 메뉴 하나 하나에 마우스 호버 시 동그라미가 배경에 추가가 되도록 하였다.

  • 또한 PET 메뉴의 상세 메뉴들에는 애완동물 각각의 고유한 색깔을 지닌 동그라미들이 호버 시에 나타났어야 했다. 상세 메뉴들은 서버에서 불러 왔다.

• 구현 방법

  • CSS를 활용해서 각 메뉴에 hover 시 배경이였던 동그라미가 opacity 0에서 1로 바뀌면서 보이도록 하였다.

  • 스크롤을 내렸을 때 헤더가 고정되게 하게끔은 먼저 자바스크립트로 스크롤을 감지하는 함수를 사용해서 어느정도 사용자가 스크롤을 내렸을 때 useState를 사용해서 state 값을 fix로 변경시키고 그에 따라 배경색도 바뀌게끔 만들었다.

캐러셀

• 구현 요소

  • 각 동물들의 화보를 보여주는 캐러셀은 2초 마다 다른 동물들의 화보를 보여주게끔 만들었고, 각 동물들의 사진이 바뀔 때마다 배경 색이 동물 고유의 테마 색깔로 바뀌게끔 만들었다. 사진 옆에는 작은 글씨로 사진 제목들이 내려오게끔 css transition 속성을 주었다.

  • 캐러셀은 무한 슬라이더로 끊임없이 사진들이 바뀌고 순회하게 되어 있다.
    캐러셀 밑에 사진 개수만큼 점이 있는데, 이 점들은 각각의 사진들을 표현하기 위해 만들었다.

  • 캐러셀의 각 동물 사진들을 클릭하면 해당 동물의 용품 페이지로 넘어가도록 만들었다.

• 구현 방법

  • 리액트에 캐러셀에 관한 다양한 라이브러리가 많지만, 혼자 해보면서 캐러셀의 원리를 알고 싶어 라이브러리 없이 만들었다.

  • 구현헌 캐러셀은 사진들이 모두 겹쳐져 있는 형식인데 맨 앞의 보여지는 사진을 제외한 나머지는 모두 opacity 0으로 보여지지 않고 있다. 그리고 2초 마다 사진들이 담겨 있는 배열의 인덱스를 바꾸면서 usestate의 state가 변하게끔 만들었다.

  • 캐러셀 밑의 점들도 배열의 인덱스가 바껴지면서 이동하는 형태로 구현했다.

PET for U

• 구현 요소

  • 메인 페이지에서도 각 동물들의 용품들을 간단하고 한 눈에 볼 수 있는 부분을 구현하고 싶었다.

  • 상단의 메뉴에 마우스를 호버하면 각 동물 별 용품들이 변하도록 만들었다.
    또한 해당 상품을 클릭하면 상품의 상세 페이지로 갈 수 있도록 만들었다.

• 구현 방법

  • 상품 사진들은 display를 flex로 하여 flex-wrap으로 정렬하였다.

  • 상품 사진들은 서버에서 등록된 아이디 순으로 배치하였고, 따로 가져오는 API를 직접 만들어서 사용했다.

로그인 & 회원가입 API

• 구현 요소

  • 회원가입 페이지에서 필수 작성 항목인 이름, 아이디, 이메일, 비밀번호, 핸드폰 번호, 성별을 클라이언트 단에서 넘겨 받는다.

  • 만약 필수 작성 항목 중 빠진게 있으면 오류를 보내고, 이메일이 중복되어도 오류를 보내서 서버에 이메일이 중복되어 저장되는 일이 없도록 한다.

  • 비밀번호는 비밀번호 그대로 저장하지 않고 반드시 암호화해서 저장을 한다. Bycrypt 해쉬 함수를 사용해서 암호화했다.

  • 로그인 과정에서 암호화된 비밀번호를 비교해서 (bycrypt의 compareSync 함수 사용) 맞으면 로그인이 성공한다.

  • 사용자가 로그인에 성공한 후에는 JWT로 만들어진 access token을 첨부해서 request를 서버에 보낸다. 서버는 받은 access token을 복호화해서 해당 사용자의 정보를 얻는다.

  • 미들웨어를 만들어서 로그인을 한 사용자만 장바구니 기능을 이용할 수 있도록 만들었다.

• 구현 방법

  • 코드를 구조적으로 나눠서 관리하기 위해 Model, View, Controller로 나누는 MVC 패턴을 사용했다. 여기서 Controller의 역할을 좀 더 세분화하는 레이어드 패턴(Layered Pattern)을 사용해서 Controller와 Service 영역에서 오류나 데이터를 걸러내는 작업을 수행하도록 했다.

  • 1차적으로 Controller에서 클라이언트 단에서 누락된 데이터는 없는지를 검사한다. 2차로는 Service에서 회원가입 할 때 이미 가입된 이메일인지 아닌지를 판별한다. 그리고 가입된 이메일이 아니면 비밀번호를 암호화해서 저장한다.

  • 로그인 과정에서 Service는 사용자가 입력한 비밀번호와 서버의 비밀번호가 일치한지 아닌지를 검사하고, 맞으면 JWT 토큰을 발행한다.

느낀점

• 풀스택으로 프론트엔드와 백엔드 둘 다 하려는 마음에 조바심이 났지만 팀원들과 애자일 방식으로 업무 스케줄을 조율하면서 차근차근 진행하니 걱정했던 것 보다는 일이 수월하게 진행되었다.

• 먼저 백엔드 API를 만듬으로써 데이터의 흐름을 파악하고 모델링을 해서 진행했던게 일의 능률을 크게 높였던 것 같다. 이처럼 프론트와 백 둘다 해보니 프로그램을 다양한 시선으로 볼 수 있어서 배운 점이 많았다.

페이지 사용에 대한 영상 : https://youtu.be/sub8Kfjcw08