[멋사12기] 리액트(react) | 7주차 세션 및 과제 제출

 

7주차 세션

 

 

7주차 세션에서는 이전에 했던 내용들을 복습하고,

글 작성하기 페이지를 스스로 실습해보는 시간이 주어졌다.

 

 

따라서 과제에 대한 내용을 위주로 적어보려한다.

 

 

주어진 과제는 2개였다.

 

첫째,

나만의 유튜브 페이지 만들기

 

api와 props, router 등 많은 요소들을 실습해볼 수 있었고, api를 발급받는 부분이 어렵기도 했지만, api를 활용해볼 수 있어서 의미있었다.

 

 

api를 활용해 검색 기능을 구현했고, 유튜브 api를 활용해 검색 결과가 표시되게끔 코드를 설정해주었다.

 

또한, router 기능을 이용해 각 카테고리 별로 컴포넌트 이동이 가능하도록 구현했다.

 

완성된 결과물은 다음과 같다.

 

나만의 유튜브 페이지 만들기

 

 

728x90

---

 

 

둘째,

fila 페이지 만들기

 

 

두번재 과제는 fila 페이지를 만들어보는 것이었다.

다양한 기능들이 요구되었는데,

먼저, swiper 기능을 활용해서 메인 배너를 만들어주었고, scss를 활용해 pagination을 커스텀해 슬라이드바 형태로 변경ㄹ해주었다.

 

상단 메뉴바는 hover 기능으로 열리고 닫히게끔 기능을 넣어주었고,

태그에 따라 보여지는 상품이 달라지게끔 switch문을 작성하고, swiper를 이용해 상품 목록도 넣어주었다.

 

fila 페이지 만들기

 

 

실습 전체 코드는 깃허브에서 확인할 수 있다.

 

https://github.com/BB545/likelion/tree/main/07_session