1. Issues 생성하기
- Github 저장소에서 생성한 disney_plus_clone 시작 화면에서 Issues를 선택합니다.
새로운 issue 생성하기 1
- New issue 버튼을 눌러서 새로운 이슈를 생성합니다.
새로운 Issue 생성하기 2
- Title에 "라우터 설정"이라고 작성하고 Assignees에 코드를 작성할 사람을 선택한 후 Submit new issue 버튼을 클릭합니다.
새로운 Issue 생성하기
2. branch 생성하기
- VS Code 터미널을 실행한 후 아래의 코드를 작성하여 새로운 branch를 생성합니다.
git checkout -b feat/2
- 왼쪽 하단에서 현재 branch가 feat/2인지 확인합니다.
3. 라우터 준비하기
- 라우터란 주소 표시줄에 site.com/a 나 site.com/b와 같은 주소를 입력했을 때 어떤 컴포넌트를 보여줄지 결정하는 역할을 합니다.
- 라우터가 제대로 동작하기 위해서는 라우터가 이해할 수 있도록 파일과 폴더를 구성해야합니다.
- pages 폴더를 만들어 페이지를 저장하고 components 폴더를 만들어서 페이지를 이루는 구성 요소들을 저장합니다.
- pages 폴더에 main.js, home.js, login.js signup.js, selectProfile.js, search.js, mylist.js, originals.js, movies.js, series.js 파일을 생성합니다.
- 새로 생성한 파일들에 아래 내용을 추가합니다.
// main.js
const MainPage = () => {
return <div>Main Page</div>
}
export default MainPage
// home.js
const HomePage = () => {
return <div>Home Page</div>
}
export default HomePage
// login.js
const LogInPage = () => {
return <div>LogIn Page</div>
}
export default LogInPage
// signup.js
const SignUpPage = () => {
return <div>SignUp Page</div>
}
export default SignUpPage
// selectProfile.js
const SelectProfilePage = () => {
return <div>SelectProfile Page</div>
}
export default SelectProfilePage
// search.js
const SearchPage = () => {
return <div>Search Page</div>
}
export default SearchPage
// mylist.js
cosnt MyListPage = () => {
return <div>MyList Page</div>
}
export default MyListPage
// originals.js
const OriginalsPage = () => {
return <div>Originals Page</div>
}
export default OriginalsPage
// movies.js
const MoviesPage = () => {
return <div>Movies Page</div>
}
export defualt MoviesPage
// series.js
const SeriesPage = () => {
return <div>Series Page</div>
}
export default SeriesPage
- 지금까지 작성한 부분을 아래 코드로 Github에 업로드합니다.
git add .
git commit -m "docs: 기본 파일 추가"
- 터미널에 아래의 명령어를 입력해서 라우터를 설치합니다.
npm i react-router-dom
- 지금까지 작성한 부분을 아래 코드로 Github에 업로드합니다.
git add .
git commit -m "feat: react-router-dom 설치"
- App.js 파일을 아래와 같이 수정해서 라우터를 설정합니다.
import { BrowserRouter, Routes, Route } from "react-router-dom"
import HomePage from "./pages/home"
import LogInPage from "./pages/login"
import MainPage from "./pages/main"
import MoviesPage from "./pages/movies"
import MyListPage from "./pages/mylist"
import OriginalsPage from "./pages/originals"
import SearchPage from "./pages/search"
import SelectProfilePage from "./pages/selectProfile"
import SeriesPage from "./pages/series"
import SignUpPage from "./pages/signup"
/*
- BrowserRouter : 하나의 Context 이다. Router 관련된 정보를 제공해줌
- Routes : 주소에 맞게 Route를 노출함
- Route : 특정 path로 들어왔을 때 어떤 컴포넌트를 보여줄지 정의
*/
const App = () => {
return <BrowserRouter>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/home" element={<HomePage />} />
<Route path="/login" element={<LogInPage />} />
<Route path="/sign-up" element={<SignUpPage />} />
<Route path="/select-profile" element={<SelectProfilePage />} />
<Route path="/search" element={<SearchPage />} />
<Route path="/my-list" element={<MyListPage />} />
<Route path="/originals" element={<OriginalsPage />} />
<Route path="/movies" element={<MoviesPage />} />
<Route path="/series" element={<SeriesPage />} />
</Routes>
</BrowserRouter>
}
export default App
- 지금까지 작성한 부분을 아래 코드로 Github에 업로드합니다.
git add .
git commit -m "feat: 페이지 url 설정"
git push origin feat/2 // 현재 branch로 올리기
4. Pull Request로 코드 병합하기
- Github 화면에서 Pull requests를 선택합니다.
새로운 Pull request 만들기 1
새로운 Pull request 만들기 2
- base: master, compare: feat/2이 체크되어있는지 확인 후 Create pull request를 클릭합니다.
새로운 Pull requst 만들기 3
- Title에 "라우터 주소 설정", Reviewers에 코드 리뷰를 할 사람을 선택하고, Assignees에 코드를 작성한 사람을 선택한 후 Create pull request버튼을 눌러 새로운 Pull request를 생성합니다.
새로운 Pull requst 만들기 4
- 코드 리뷰가 끝나면 Merge pull request를 클릭하고 Confirm merge를 클릭하여 pull request를 닫습니다.
- Delete branch 버튼을 클릭하여 feat/2 브랜치를 삭제합니다.
- Issue를 생성한 곳으로 돌아가서 현재 이슈를 Close issue 버튼을 클릭하여 닫습니다.
- VS Code 터미널에 아래 코드를 입력하여 master 브랜치를 최신화합니다.
git checkout master
git pull origin master