노마드코더 ReactJS로 영화 웹 서비스 만들기 07 무료강좌 리액트

 

노마드코더 ReactJS로 영화 웹 서비스 만들기 07 무료강좌 리액트

 

 

API 의 json을 받아 값을 처리하여 간단 웹페이지 구현을 하게 됩니다.

이어서 react router 기능을 실습하게 됩니다.

 

***

Command

npm i react-router-dom

***

 

***React Router DOM***

React Router DOM은 웹페이지의 주소(URL)에 따라 화면을 바꿔주는 도구로,

예를 들어, /about 주소로 가면 "About 페이지"가 보이고, /home으로 가면 "Home 페이지"가 보이게 만들어줍니다. 페이지를 새로고침하지 않고 부드럽게 동작합니다.

쉽게 말해, React 앱에서 주소별로 화면(컴포넌트)을 연결해 주는 역할을 합니다.

 

https://reactrouter.com/

React Router Official Documentation

***상대경로 되짚어 보기***

../와 ./는 파일 경로를 작성할 때 사용하는 **상대 경로(relative path)**로, 각각 의미와 사용 방식이 다릅니다.

 

../와 ./는 파일 경로를 작성할 때 사용하는 **상대 경로(relative path)**로, 각각 의미와 사용 방식이 다릅니다.

---

1. ./ (현재 디렉토리)

• ./는 현재 파일이 위치한 디렉토리를 기준으로 파일이나 폴더를 참조합니다.
• 즉, **"내가 있는 폴더 안에 있는 파일이나 폴더"**를 참조할 때 사용합니다.

예시:

현재 폴더 구조가 다음과 같다고 가정:

src/

├── components/

│ └── Movie.js

├── routes/

│ └── Home.js

• Home.js에서 Movie.js를 가져오려면:

import Movie from "./Movie.js"; // 같은 폴더 안에 있다면 이렇게 작성

 

---

2. ../ (상위 디렉토리)

• ../는 현재 파일이 위치한 디렉토리의 상위 폴더를 기준으로 경로를 설정합니다.
• 즉, **"한 단계 위로 올라가서 그 위의 파일이나 폴더"**를 참조할 때 사용합니다.

예시:

폴더 구조가 동일하게 아래와 같다면:

src/

├── components/

│ └── Movie.js

├── routes/

│ └── Home.js

• Home.js에서 Movie.js를 가져오려면:

import Movie from "../components/Movie.js"; // routes 폴더에서 상위 폴더로 올라간 뒤 components 폴더로 이동

 

---

3. 주요 차이 요약

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가
• 2열 선택2열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가

구분	의미	예시
./	현재 디렉토리	./Movie.js → 현재 폴더 안의 파일 참조
../	상위 디렉토리	../components/Movie.js → 상위 폴더로 이동 후 참조

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

---

요약:

• ./는 현재 디렉토리를 기준으로 파일을 참조.
• ../는 상위 디렉토리로 이동하여 파일을 참조.
• 파일이 다른 폴더에 있을 경우 ../를 적절히 사용.

 

이후

강좌 진행을 통해 최종 마무리 됩니다.

 

이후 8장부터는 업데이트된 내용의 강좌이나.

이전 내용과 비슷한 내용입니다. 버전차이가 있을뿐이네요.

 

https://devlunch4.github.io/react-for-beginners_202501/

Movie App

 

그럼 끝!