프론트엔드 2

[리액트 실습] 간단 영화 앱 만들기 5 (React Routing)

[리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보 0lrlokr.tistory.com 헤더 + 상세페이지가 있는 앱을 만들어볼 예정이다. 1. SPA vs MPA 이번에는 지난번까지 만들었던 간단 영화 앱에서 최신 영화 목차에서 더 나아가 클릭하면 영화의 일부 정보가 뜨는 '상세 페이지'와 페이지 이동까지 만들어 볼 예정이다. 리액트에서는 페이지 이동을 위해 react-route-dom을 활용한다. ** react-route-dom : SPA방식의 애플리케이션에..

FE/React 2023.02.26

[리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기

3주차 과제는 ~~~ 마켓컬리 클론 코딩이다 ! 3주차에서는 SPA, routing에 대해서 배웠다. React Routing - Rising Camp 12th WEB SPA 방식의 어플리케이션에서 여러 페이지를 처리할 수 있도록 도와주는 react-router-dom 라이브러리를 활용해보며, 리액트 라우팅에 대해 이해해봅시다. inbroz-charles.gitbook.io 개인적으로 리액트에서 가장 큰 장점이라 생각되는 부드러운 넘어감(?)을 구현해보는 시간이었다. 1. header 완성화면 페이지 각각은 아직 구현중이다. Kurly홈 이미지를 누르면 Main화면으로 넘어온다. 다른 버튼들도 마찬가지로 누르면 각각 이동한다. 2. 구현 리액트의 react-route-dom을 활용했다. 지금까지 작성한 ..

FE/React 2023.02.03