# nested Routes

sangpok

목업 API를 만들다가 삽질해서 기록하는 포스팅.데모로 폴더가 존재하는 투두 리스트 서비스를 만들고 있었고, 다음과 같은 JSON을 만들었다.그리고 다음과 같은 EndPoint가 있었다./users/users/:userId/users/:userId/folders/use

yeol

페이지를 나누고 싶으면 일반 html, css, js 사이트는 하나의 페이지마다 각각 html파일을 만들었지만 리액트에서는 html 파일을 하나만 사용한다.그래서 리액트에선 다른 페이지를 요청하면 내부에 있는 를 바꿔 보여주면 된다.직접 구현도 가능하나 일반적으로 re

x5foddl

리액트는 html을 예쁘게 만들어주는 조그만 라이브러리일 뿐이다.그래서 우리가 만드는 파일들은 95%의 확률로 .js파일이기 때문에 비슷한 .js파일끼리 한 폴더에 묶어놓으면 그것이 좋은 폴더 구조 이다.컴포넌트 역할을 하는 js 파일은 component 폴더에 묶고페

pooh963

react 폴더로 묶기비슷한 특성의 아이들끼리 묶는다ex) 컴포넌트 역할 js는 components 페이지 역할 js는 routes or pages 자주 쓰는 함수가 들어간 js는 utils 등등navigate 함수: 페이지 이동을 도와주는 것. use~이런

corner3499

라우터의 index.jsviews/NotFoundView.vue실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있다. URL의 경로가 중첩된 컴포넌트의 특정 구조와 일치한다는 것이게 무슨 말이냐면 특정 페이지로 들어갔을 때 일부 영역은 고정 시키고

dorong36

useNavigate / Navigate / Nested Routes + Outlet

aimzero9303

/detail/0/author로 접속하면, detail 페이지 내에 작가소개란을 보여주고/detail/0/comment로 접속하면, detail 페이지 내에 댓글을 보여준다.특정 페이지 내에서 또 라우트를 나누는 경우를 nasted routes라고 한다.저렇게 다른 u

aimzero9303

url에 파라미터 주는 법 ) 앞의 글에서는 없지만 간단하게 말하자면, 게시글 리스트 페이지에서 해당하는 게시글로의 이동은 url을 활용한다. 게시글 리스트 페이지 url http://localhost:8080/list 첫번째 게시글 상세 페이지 http://lo

sayber123

프론트 깃허브 링크 실전프로젝트 SA링크 실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.오늘은 Bar 추천 페이지 뷰를 만드는 중이다. Bar 추천 페이지도 마이페

sayber123

프론트 깃허브 링크 실전프로젝트 SA링크 실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.오늘은 어제 이어서 만들던 마이페이지 뷰를 만드는 중이다. 마이페이지에서 N

mopevxw

Nested Route 설정 = 자식 Route들을 부모 element의 Outlet으로 위치 지정 http://localhost:3000/btc-bitcoin/price http://localhost:3000/btc-bitcoin/chart * Coin.tsx*