Step-2.-Week-1

카카오 테크 캠퍼스 2단계 - FE - 1주차 클론 과제

과제명

1. 쇼핑몰 웹사이트 탐색을 통한 페이지 구성
2. UI 컴포넌트의 명칭과 사용법 익히기

과제 설명

✅과제 1.

카카오 쇼핑하기는 다음의 페이지 구성을 가지고 있습니다.

• 회원 가입 페이지
• 로그인 페이지
• 메인 페이지
• 개별 상품 상세 페이지
• 장바구니 페이지
• 결제 페이지
• 결제 완료 페이지
  
  

페이지별 구성

1. 회원가입 페이지

- 핵심 기능: 회원가입 요청
- 기능 상세 설명
    - 회원가입 버튼을 클릭하면 서버에 요청을 보냅니다.
    - 유효하지 않은 이메일과 비밀번호 형식이라면 사용자에게 알립니다.
        - 이메일: 이메일 중복, 이메일 형식
        - 비밀번호: 비밀번호 형식, 비밀번호 길이제한
    - 회원가입 성공시 사용자에게 알립니다.
- 인터페이스 요구사항: 이메일, 이름, 비밀번호, 비밀번호 확인 입력 후 회원 가입 버튼 클릭

2. 로그인 페이지

- 핵심 기능: 로그인 요청 및 사용자 로그인 정보 저장
- 기능 상세 설명
    - 이메일과 비밀번호를 이용해 로그인을 진행합니다.
        - 이메일: 이메일 형식
        - 비밀번호: 비밀번호 형식, 비밀번호 길이제한
        - 존재하지 않는 사용자
    - 로그인 성공시 로컬스토리지에 JWT 토큰을 저장합니다.
    - 로그인 성공시 메인 화면으로 리디렉션 시킵니다.
- 인터페이스 요구사항
    - 이메일 또는 비밀번호에 들어온 값이 적합하지 않은 경우 적절한 알림을 보냅니다.
    - 로그인이 성공하면 메인 화면으로 이동합니다.

3.GNB

- 핵심 기능: 페이지 리디렉션, 로그인/로그아웃, 장바구니
- 기능 상세 설명:
    - 카카오 쇼핑하기 로고를 클릭하면 메인 페이지로 리디렉션 시킵니다.
    - 로그인 버튼을 클릭하면 로그인 페이지로 리디렉션 시킵니다.
    - 로그아웃 버튼을 클릭하면 LocalStorage 의 토큰을 제거합니다. 그후 메인 페이지로 리디렉션 합니다.
    - 장바구니 카트에 담긴 아이템을 뱃지를 사용하여 사용자에게 알려줍니다.
    - 장바구니 버튼을 클릭하면 장바구니 페이지로 이동합니다.
- 인터페이스 요구사항
    - 카카오 쇼핑하기 로고 클릭 -> 메인 페이지 이동
    - 로그인 클릭 -> 로그인 페이지 이동
    - 로그아웃 클릭 -> 로그아웃 후 메인 페이지 이동
    - 장바구니 클릭 -> 장바구니 페이지 이동

4. 메인 페이지

- 핵심 기능: 전체 상품 목록, 무한 스크롤, 상세 페이지 리디렉션
- 기능 상세 설명
    - 메인 페이지에 접근시 전체 목록을 요청하여 전체 상품 목록을 가져온다.
    - 전체 상품 목록을 화면에 그린다.
    - 사용자가 목록의 스크롤을 내리면 무한 스크롤이 발생하여 다음 목록이 불러진다.
    - 상품을 클릭하면 상세 페이지에 대한 요청을 한다.
    - 요청이 받아지는 동안 스켈레톤이나, 로딩이라는 의미가 담긴 화면을 사용자에게 보여준다.
    - 상세 페이지를 그린다.
- 인터페이스 요구사항
    - 메인 페이지에 접근한다. -> 전체 상품 목록을 보여준다.
    - 전체 상품 목록의 스크롤을 내린다. -> 다음 목록이 출력된다.
    - 상품을 클릭한다. -> 상세 페이지를 보여준다.

5. 상품 상세 페이지

- 핵심 기능: 상세 데이터 요청시 로딩, 장바구니 담기 aside
- 기능 상세 설명
    - 상세 페이지에 대한 요청동안 로딩화면을 보여준다.
    - 상세 페이지를 출력한다.
    - 상품에 대한 옵션을 선택한다.
        - 선택한 옵션을 재확인하고 수량을 결정할 수 있다.
        - 선택한 옵션의 수량에 따라 합계 금액이 출력된다.
    - 장바구니 담기 버튼을 클릭한다.
        - 상품과 옵션에 대한 정보를 포함하여 서버에 요청한다.
        - 토스트 메세지를 출력한다. (바로가기도 구현)
- 인터페이스 요구사항
    - 상품을 클릭하면 상세 페이지로 이동한다.
    - 옵션을 클릭하면 선택한 옵션이 출력된다.
    - 선택한 옵션의 +/- 버튼으로 주문 수량을 수정한다. -> 수량이 변경되고 합계 금액도 변경된다.
    - 장바구니 버튼을 클릭한다. -> 장바구니에 담겼다는 토스트 메세지를 출력한다.

6. 장바구니 페이지

- 핵심 기능: 장바구니 정보 출력, 장바구니 옵션 변경
- 기능 상세 설명
    - 장바구니 페이지에 대한 요청동안 로딩화면을 보여준다.
    - 장바구니 페이지를 출력한다.
    - 상품에 대한 옵션을 선택한다.
        - 선택한 옵션을 재확인하고 수량을 결정할 수 있다.
        - 선택한 옵션의 수량에 따라 합계 금액이 출력된다.
    - 주문하기 버튼을 클릭한다.
        - 상품과 옵션에 대한 정보를 포함하여 서버에 장바구니 수정 요청한다.
        - 결제 페이지로 이동한다.
- 인터페이스 요구사항
    - 선택한 옵션의 +/- 버튼으로 주문 수량을 수정한다. -> 수량이 변경되고 합계 금액도 변경된다.
    - 결제하기 버튼을 클릭한다. -> 결제 페이지로 이동한다.

6. 결제 페이지

- 핵심 기능: 상품 주문
- 기능 상세 설명
    - 사용자가 전체 동의를 했는지 체크한다.
    - 결제하기 버튼을 클릭하면 결제 완료 페이지로 리디렉션 된다.
- 인터페이스 요구사항
    - 결제하기 버튼 클릭 -> 주문 결과 확인 페이지로 이동

7. 결제 완료 페이지

- 핵심 기능: 주문 결과 확인
- 기능 상세 설명
    - 주문한 상품에 대한 주문 결과를 출력한다.
- 인터페이스 요구사항
    - 주문한 상품에 대한 주문 결과를 출력한다.

디렉터리 구조

• public
• src
  • apis
  • assets
  • components
  • redux
  • hooks
  • pages
  • utils
  • App.js
  • index.js

✅과제 2.

프론트 개발자가 다른 프론트 개발자와 소통 및 UI 디자이너와 소통하는데 필수적인 UI 컴포넌트의 명칭과 사용법을 익힙니다.
수업시간에 배운 컴포넌트의 명칭과 사용법 이외에 대표적인 UI 라이브러리 홈페이지를 조사해보면 수많은 컴포넌트가 어떤식으로 동작하는지 확인할 수 있습니다.
리액트 프로젝트를 생성하고, 토스트, 브래드크럼, 캐러셀, 라디오버튼, 토글버튼, 체크리스트를 UI 라이브러리가 아닌 자신만의 방식으로 스타일링하고 상태 관리를 적용해 코드를 작성하세요.
작성된 코드는 레퍼지토리에 업로드하여 멘토님에게 전달해주세요.

✅과제 3.

각 컴포넌트를 시현해 볼 수 있는 페이지를 만드세요.
하나의 페이지에 모든 컴포넌트를 둬도 좋고, 각 페이지별로 분리해도 괜찮습니다.

과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것

1. README.md 파일은 동료 개발자에게 프로젝트에 쉽게 랜딩하도록 돕는 중요한 소통 수단입니다.
   해당 프로젝트에 대해 아무런 지식이 없는 동료들에게 설명하는 것처럼 쉽고, 간결하게 작성해주세요.

2. 좋은 개발자는 디자이너, 기획자, 마케터 등 여러 포지션에 있는 분들과 소통을 잘합니다.
   UI 컴포넌트의 명칭과 이를 구현하는 능력은 필수적인 커뮤니케이션 스킬이자 필요사항이니 어떤 상황에서 해당 컴포넌트를 사용하면 좋을지 고민하며 코드를 작성해보세요.

코드리뷰 관련: PR시, 아래 내용을 포함하여 코멘트 남겨주세요.

1. PR 제목과 내용을 아래와 같이 작성 해주세요.

• PR 제목 : 부산대FE_라이언_1주차 과제

---

Step-2.-Week-2

카카오 테크 캠퍼스 2단계 - FE - 2주차 클론 과제

과제명

1. 코드 디자인 패턴과 상태 관리

과제 설명

✅과제 1. 아토믹 컴포넌트 디자인 패턴 사용

- 회원가입, 로그인 페이지 개발에 필요한 컴포넌트를 아토믹 디자인 패턴을 사용해 작성하세요.
- 작성한 컴포넌트는 사용의 편의성을 위해 Props에 적절한 주석을 달아주세요.

✅과제 2. 회원 가입, 로그인 페이지 개발

- 백엔드 API 문서를 참고하여 회원가입, 로그인 페이지를 개발하세요.
- 각 페이지에는 적합한 값이 입력되도록 하고, 적절하지 않은 값이 들어온 경우 API 요청을 보내기 전에 프론트에서 에러 캐칭을 해주세요.
- 회원가입, 로그인 후에는 메인 페이지로 리다이렉트하세요.
- API 응답 과정에서 로그인이 실패하는 경우, 회원가입이 실패한 경우에 대해서 에러 캐칭도 적용해야 합니다.

✅과제 3. 상태관리 모듈 적용

- 로그인 후에 사용자의 정보를 상태관리 모듈을 하나 선정해 저장하고 불러올 수 있도록 코드를 작성하세요.
- 사용자가 로그인 상태일 때는 GNB 영역에 로그인 버튼이 보이면 안됩니다.
- 로그아웃시 상태를 초기화하세요.
- 새로고침 시에도 상태를 잃지 않고 유지해야 합니다.
- 일정한 시간이 지나면 로그인 유지가 끝나도록 설정하세요.(예: 1일)

과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것

1. 아토믹 컴포넌트를 작성할 때 Atoms, Molecules에 반드시 특정한 컴포넌트가 들어갈 필요는 없습니다. 개발자의 주관이 들어갈 수 있는 부분이니 적절한 뎁스로 나누어보세요.

2. API 요청을 보내고, 응답 받을 때 성공 케이스만 생각해 코드를 작성하는 경우가 많습니다. 숨은 에러 케이스는 없을지 한 번 더 고민해보세요.

3. 상태 관리 모듈은 자신이 써보고 싶은 어떤 모듈이던 상관 없습니다. 모듈을 사용해보면서 모듈에 들어가는 미들웨어나 툴도 사용해보세요.

코드리뷰 관련: PR시, 아래 내용을 포함하여 코멘트 남겨주세요.

1. PR 제목과 내용을 아래와 같이 작성 해주세요.

• PR 제목 : 부산대FE_라이언_2주차 과제

2. PR 내용 :

• 코드 작성하면서 어려웠던 점
• 코드 리뷰 시, 멘토님이 중점적으로 리뷰해줬으면 하는 부분

---

Step-2.-Week-3

카카오 테크 캠퍼스 2단계 - FE - 3주차 클론 과제

과제명

1. 비동기 통신 활용과 레이아웃

과제 설명

✅과제 1. 상품 목록 페이지 개발

- 백엔드 API 문서를 참고하여 상품 목록 페이지를 개발하세요.
- 페이지네이션을 이용해 페이지 값을 증가시켜가며 조회될 수 있도록 코드를 작성해주세요.
- 데이터 로딩 과정에 로더를 구현하세요.
- 데이터 불러오기를 할 때 react-query를 사용해보세요.

✅과제 2. 스켈레톤과 로더

- 컴포넌트에 props를 전달해 데이터 로딩 중 스켈레톤 또는 로더가 적용될 수 있도록 코드를 작성해보세요.
- 상품 목록 카드에 스켈레톤을 적용하세요.
- 페이지 전체에 대한 로딩이 진행될 때는 글로벌 로더를 적용해보세요.(적절한 모듈을 찾아 적용해도 좋습니다.)

✅과제 3. 백엔드 상태 코드 반응

- API 응답에 대해 전처리 하는 코드를 작성해보세요.
- 200, 300, 400, 500번 대의 상태 코드별 에러 캐칭이 필요한 경우라면 해당 함수에서 먼저 실행되도록 코드를 작성합니다.
- react-query에서 전처리하는 방식이 있다면 해당 방식을 적용하거나 또는 별도의 함수나 클래스를 만들어 관리를 시도해보면 됩니다.

과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것

1. 스켈레톤과 로더를 바텀부터 만들기보단 Codepen 등을 참고해 구현하고, Props를 통한 실제 적용에 집중해주세요.
2. 과제 3번을 해결할 때 Facade pattern을 참고해보세요.
3. 과제 1번을 해결할 때 react-query를 사용해보되 전체 프로젝트에 react-query를 적용할 필요는 없습니다. 하나 이상의 API 요청에 적용해보세요.

코드리뷰 관련: PR시, 아래 내용을 포함하여 코멘트 남겨주세요.

1. PR 제목과 내용을 아래와 같이 작성 해주세요.

• PR 제목 : 부산대FE_라이언_3주차 과제

2. PR 내용 :

• 코드 작성하면서 어려웠던 점
• 코드 리뷰 시, 멘토님이 중점적으로 리뷰해줬으면 하는 부분

• 한 개의 PG 서비스 또는 PG 서비스를 돕는 서드파티 앱을 사용해 개발합니다.
• 테스트 환경에서 결제를 성공해야 합니다.
• 결제가 실패하는 경우(잔고 부족, 결제 정보 불일치 등)에 대해 에러 캐칭을 적용하세요.
• 다양한 에러 상황에 대해 주석으로 에러 상황과 대응 방식을 설명해주세요.

</br>

## **과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것**

1. 결제를 구현할 때 새로운 모듈을 학습하는데 있어서 생각보다 시간 소요가 클 것입니다. 또한 몇몇의 PG사에서 제공하는 SDK의 경우 리액트와 호환성이 나쁜 경우도 있습니다.
2. 테스트 결제시에 실제 비용이 나가는 것처럼 보이는 경우도 있습니다. PG사마다 정책이 다르지만 대부분 테스트 금액은 1일 이내로 환급받는 구조입니다.
3. 결제시에는 생각보다 많은 데이터를 하나의 페이로드에 담아 전달해야 합니다. 이 과정에서 데이터가 적절하지 않은 값이 들어갈 가능성이 높고, 코드가 복잡해질 수 있습니다. 기능 단위를 나누어 함수형 프로그래밍을 시도해보는게 도움이 될 수 있습니다.

</br>

## **코드리뷰 관련: PR시, 아래 내용을 포함하여 코멘트 남겨주세요.**
**1. PR 제목과 내용을 아래와 같이 작성 해주세요.**

>- PR 제목 : 부산대FE_라이언_5주차 과제

</br>

**2. PR 내용 :**

>- 코드 작성하면서 어려웠던 점
>- 코드 리뷰 시, 멘토님이 중점적으로 리뷰해줬으면 하는 부분


</div>
</details>


---


<details>
<summary>Step-2.-Week-6</summary>
<div>

## 카카오 테크 캠퍼스 2단계 - FE - 6주차 클론 과제
</br>

## **과제명**

프로젝트 마무리

</br>

## **과제 설명**

✅**과제 1. 배포**

• 카카오 배포환경을 통해 배포를 진행합니다.
• 계정을 생성하고 자신의 레포지토리를 연결해 배포합니다.
• 배포 레벨에서 사용될 환경 변수는 �인스턴스에 적용되도록 직접 설정해줍니다.
• 배포에 사용될 브랜치는 개발 브랜치와 꼭 분리합니다.

</br>

✅**과제 2. 프로젝트 마무리**

• 모든 핵심 기능이 정상 작동되도록 숨은 버그와 기능을 점검합니다.
• 특정한 파일이 너무 크다면, 코드 내의 함수를 다른 파일로 옮겨 import / export 하는 등 코드 리펙터링을 진행합니다.
• 개발 환경과 배포 환경 모두 버그가 없는지 체크합니다.

</br>

✅**과제 3.  README.md 정리**

• 배포한 환경에 대해 구체적인 설명을 남겨주세요.
• 포함될 내용은 배포 순서, 배포에 영향 받는 브랜치, 배포시 주의 사항, 배포 환경 등 다른 개발자가 해당 프로젝트를 인수인계 받았을 때 문제가 없도록 꼼꼼히 작성합니다.

</br>

## **과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것**

1. 많은 서비스가 개발 레벨에서는 잘 작동하다가도 배포 단계에서 에러를 만나는 경우가 많습니다. 배포 후에 기능을 하나하나 점검해보고, 여러 환경에서 시도해보세요.

2. 배포된 환경을 하나의 브라우저에서만 테스트하지 말고, 최대한 다양한 디바이스와 브라우저에서 테스트해보세요. 삼성 브라우저, 아이폰 사파리, 데스크탑이라면 크롬, 사파리, 파이어폭스 등으로 테스트해보세요.

3. 코드를 시간이 지나서 보면 어떤 목적으로, 왜 만들었는지 알아보기 힘든 경우가 많습니다. 기본적인 내용이라 생각한 부분도 주석을 달아주세요.

</br>

## **코드리뷰 관련: PR시, 아래 내용을 포함하여 코멘트 남겨주세요.**
**1. PR 제목과 내용을 아래와 같이 작성 해주세요.**

>- PR 제목 : 부산대FE_라이언_6주차 과제

</br>

**2. PR 내용 :**

>- 코드 작성하면서 어려웠던 점
>- 코드 리뷰 시, 멘토님이 중점적으로 리뷰해줬으면 하는 부분


</div>
</details>