결말(느낀점)을 먼저말하는 회고

위코드에서 마지막 프로젝트여서 더욱 맘이 쓰이기도 했고 1차 프로젝트에서 협업의 아쉬웠던 점들을 보충하고자 했는데 너무 매끄럽게 협업이 이루어져서 놀라리만큼 수월하게 프로젝트를 진행했다.
또한 처음 프로젝트를 시작할때 새로운 부분(React-Hook, Styled-components)를 적용하여 1차 프로젝트보다 더욱 난이도 있는 사이트를 더 짧은 기간에 클론해야해서 부담이 있었다.
하지만 구글/블로그/공식문서 등 다양한 자료를 활용해 새로운 기능을 생각보다 일찍 적용해 기능 구현을할 수 있었다.

새로운 기술을 빨리 적용해 활용할 수 있다는 자신감을 얻은게 가장 큰 수확인것 같다.

2차 프로젝트 목표

1차프로젝트를 한 이후의 아쉬운점을 보강하고 추가로 배웠던부분을 적용하는것이 가장 큰 목표였다. 목표를 크게나누면 밑과 같다.

1) 깔끔한 코드를 작성할 것 --> 변수명 더욱 직관적으로, 동일기능 하는 함수 하나로 통일해 중복없이 효율적인 코드 작성
2) 새로 배웠던 부분을 적용/익숙해질것 --> React-Hook, Styled-components
3) 소셜로그인 : 소셜로그인 구현하며 전체 흐름 파악, 코드로 구현 후 숙지할것
4) 클론코딩 그이상 : 클론 코딩이지만 순수 우리힘으로 코딩하고자 했다. 실제로도 그랬고, IKEA 에서 놓쳤던 발전시킬 부분도 찾아서 적용하기

OKYA 프로젝트 Front-end 소개

IKEA 클론 코딩 프로젝트, IKEA의 기본적인 기능들을 우리 힘으로 구현해 보았다.

• 가구 판매 사이트 이케아 클론 프로젝트

💁🏻‍♂️ 💁🏻‍♀️ 팀원

• 최민기
• 김민성
• 오송미

📅 프로젝트 기간

2021.07.26 ~ 2021.08.10 (16일)

🔑 Skills

FrontEnd

🛠 Tool

구현 기능 상세

1. 공통 구현 사항 - 본인 구현

• 네비게이션바 / 사이드 메뉴
  - 메뉴 아이콘 클릭시 이중모달창 구현 (모든제품 -> 제품 카테고리리스트)
  - 카메라 아이콘 클릭시 이미지 검색 구현(이미지 첨부 기능까지만 구현 // 첨부 후 이미지검색 AI 구현X )
• Footer

2. 메인 페이지

• container로 사용할 Grid 레이아웃 환경구축
• Masonry 레이아웃(i.e. pinterest) 적용
• mockdata에서 이미지마다 가지고 있는 카테고리 Id를 이용하여 해당 버튼 클릭 시 filtering
• 더보기 버튼 사용시 지정 limit 단위로 데이터 받아오기

3. 상품 리스트 페이지

• 상품 분류 카드, 카테고리 바, 상품 카드 목록에 Grid 레이아웃 적용
• 리스트 페이지 상단의 상품 분류 카드를 mockdata로 부터 가져와 map 함수를 사용하여 상품 정보 카드 나열
• 상품 카드 정보를 mockdata로 부터 가져와 map 함수를 사용하여 상품 카드 나열
• 상품 카드 내, 상품 이미지 hover 시, 이미지 변경 및 장바구니 버튼 생성
• 상품 장바구니 버튼 클릭 시, ‘장바구니에 담김’을 알리는 ‘alert’ 메소드 구현
• 상품 장바구니에 담길 상품 정보를 담는 token 저장
• product 정보를 장바구니 버튼 클릭 시, 장바구니 페이지에 넘겨 주기 위해 fetch 내 백엔드API를 받아옴

4. 장바구니

• 장바구니 Read API와 연동
  • 유저의 토큰을 확인해서, 그 유저가 사용하는 장바구니를 출력
• 토큰이 존재하지 않을 때, 그리고 장바구니가 비었을 때 ‘장바구니가 비었습니다’ 메세지 출력
• 토큰 만료 시, 로그인 요청 dialog 출력 및 로그인 페이지로 리다이렉트

5. 로그인/회원가입 - 본인 구현

• 로그인
  카카오 소셜 로그인 구현(백엔드 통신 후 존재하는 유저 -> 로그인, 신규유저 -> 회원가입)
• 회원가입 기능 및 회원가입 성공 시 로그인 페이지로 이동
• Hook 활용하여 ID,PW 밸리데이션 및 애니메이션 구현

기억하고 싶은 코드(카카오 소셜 로그인)

• FrontEnd - 로컬 API - 외부 API 삼자간의 Flow를 이해하고자 했고 로그인/회원가입 기능인 만큼 Token을 어떻게 불러오고 보내는지 이해하고자 했다.
  (하기 이미지 참고)
• KaKao Developer 공식 문서를 이용하여 전체 Flow를 코드로 구현하며 공식문서를 활용하는 법을 터득했다.

function KakaoButton(props) {
  const loginWithKakao = () => {
    window.Kakao.Auth.login({
      scope: 'account_email', //백엔드에 전달할 정보//
      success: authObj => {
        // 로그인 성공시 토큰 발급 받음, 그 토큰을 백엔드 서버로 넘긴다//
        axios(KAKAO_LOGIN_API, {
          method: 'post',
          //카카오에서 받은 토큰 --> 백엔드 전달//
          headers: {
            'Content-Type': 'application/json',
            Authorization: authObj.access_token,
            //받아오는 response객체의 access_token을 통해 유저 정보를 authorize한다.
          },
        }).then(res => {
          localStorage.setItem('token', res.data.token);
          //백엔드에서 요구하는 key 값(token)으로 저장해서 localStorage에 저장한다.//
          alert('로그인 되었습니다.');
          props.history.push('/');
        });
      },
      fail: error => {
        alert(JSON.stringify(error));
      },
    });
  };

  const kakaoLogout = () => {
    if (window.Kakao.Auth.getAccessToken()) {
      window.Kakao.API.request({
        url: '/v1/user/unlink',
        //로그아웃 시키는 API//
        success: function (response) {
          console.log(response);
        },
        fail: function (error) {
          console.log(error);
        },
      });
      alert('로그아웃이 완료되었습니다.');
      window.Kakao.Auth.setAccessToken(undefined);
      //로그아웃 이후 토큰 삭제//
    }
  };