🤮 코딩초짜 코칭 프로젝트 - (6) 화면이동

들어가기

• 프로필 페이지, 질문하기 페이지 레이아웃 만들기
• 프로필 페이지에서 버튼 누르면 질문하기 페이지로 이동
• (화면이 프로필 페이지, 질문하기 페이지 두개인 웹어플리케이션 만들기!

---

프로필 페이지 만들기

• page_profile.js 만들기
• 내 프로필 확인할 수 있고
• 내가 정리했던 질문확인할 수 있고
• 질문하기 페이지로 넘어갈 수 있음.

• 팁! 페이지가 갈라질 때는 js파일 뿐 아니라
• css파일도 나누어 관리하면 찾기도 기억하기도 편함!
  

---

질문 페이지 만들기

• page_query.js 만들기
• 질문 입력할 수 있고
• 태그 입력할 수 있고
• 발췌 입력할 수 있고

---

페이지 이동하기

• 프로필 페이지에서 질문하기 버튼 누르면 질문 페이지로 이동
• 브라우저 이전으로 버튼 누르면 프로필 페이지로 돌아가기
• 페이지 이동하기에는 라우터를 사용할 수 있음.
• router = 웹에서 길을 안내해주는 개발도구

---

라우터 설치하기

• npm = 편리하고 빠르게 개발할 수 있게 도와주는 개발도구 설치할 수 있는 프로그램!
• 라우터 설치하기!

---

index.js 라우터 세팅

• import = 설치된 개발도구 가져와서 사용할 때 설정하는 코드!
• 라우팅 세팅에 필요한 개발도구 import로 가져오기

• 라우팅 기본 세팅하기

---

app.js 라우터 사용

• 라우팅에 필요한 개발도구 import로 가져오기

• 버튼을 누르면 라우트를 요청하도록

• 라우터가 요청을 받아서 해당 페이지를 열어주도록
  (메인페이지는 프로필페이지, 버튼 누르면 질문페이지로 이동)

나가기