9room-FrontEnd-PBL

구름톤 트레이닝을 진행하며 해결한 프론트엔드 PBL 모음 저장소 입니다.

[01] HTML, CSS를 이용해서 넷플릭스 사이트 만들기

https://changminpark2.github.io/Goorm-Neflix-Subject/

수행기간

• 24.01.04 ~ 24.01.08

하위과제

• FlexBox 또는 Grid CSS 를 이용해서 영화를 나열합니다.
• 영화에 마우스로 호버 하면 영화 이미지의 사이즈가 크게 될 수 있게 합니다.
  
  

[02] TodoApp 만들기 - PBL

https://changminpark2.github.io/9oorm-TodoApp-PBL/

수행기간

• 24.01.10 ~ 24.01.12

하위과제

• 변수명을 최대한 명확하게 하며, 함수는 최소한의 단위로 나눠서 사용합니다.
• 페이지를 새로고침 해도 데이터가 지속될 수 있게 합니다.(localStorage 이용)
  
  

[03] GitHubFinder 만들기 - PBL

https://changminpark2.github.io/9oorm-GitHubFinder-PBL/GithubFinder/

수행기간

• 24.01.15 ~ 24.01.17

하위과제

• 비동기 통신을 이용합니다.
  
  

[04] SpreadSheet 만들기 - PBL

https://changminpark2.github.io/JavaScript-A-Z/spreadsheet/

수행기간

• 24.01.18 ~ 24.01.22

하위과제

• 현재 focus 된 위쪽 헤더 왼쪽 헤더가 함께 하늘색으로 하이라이트 되게 해 줍니다.
• 작성된 모든 데이터들을 ExportSpreedSheet 버튼을 눌러 Excel파일로 생성합니다.
• 생성된 Excel 파일을 구글로 SpreedSheet 에서 import 하면 같은 데이터가 나오게 합니다.
  
  

[05] 리액트를 이용해서 CRUD 앱 만들기 - PBL

https://changminpark2.github.io/React-A-Z/calculator-crud-app/

수행기간

• 24.01.30 ~ 24.02.01

하위과제

• 최대한 컴포넌트를 나눠서 구현합니다.
• 폴더 이름 및 변수 이름을 명확하게 작성합니다.
  
  

[06] 리액트를 이용해서 쇼핑몰 앱 만들기 - PBL

https://changminpark2.github.io/9oorm-ShoppingMall-PBL/

수행기간

• 24.02.02 ~ 24.02.06

하위과제

• 리덕스와 같은 상태 관리 라이브러리를 이용해서 상태를 관리합니다.
• 선택 사항으로 타입스크립트를 이용해서 구현해봅니다.
• 상품 데이터는 fakestoreapi 를 이용해서 구현할 수 있습니다. (예를 들어서 상품들을 가져오려면 HTTP GET https://fakestoreapi.com/products)

[07] 리액트를 이용해서 노트 앱 만들기 - PBL

https://changminpark2.github.io/9oorm-NoteApp-PBL

수행 기간

• 24.02.07 ~ 24.02.13

하위과제

• 리덕스와 같은 상태 관리 라이브러리를 이용해서 상태를 관리합니다.
• 타입스크립트를 이용합니다.