# router
React와 Next의 Router는 분명히 다릅니다.
React와 Next.js는 둘 다 라우팅을 처리하는 라우터 기능을 제공하지만,그 구현과 사용 방법에서 차이가 있습니다.
라우터 객체의 pathname과 asPath는 무엇이 다른가요?
라우터 객체의 pathname과 asPath는 일반적으로 웹 애플리케이션에서 라우팅된 URL과 관련된 속성 입니다.pathname은 URL의 경로 부분을 나타내며,호스트 및 쿼리 매개변수를 제외한 경로 부분입니다.예를 들어, https://example.com
라우터 객체의 push와 replace 의 차이를 아시나요?
라우터 객체의 push와 replace는 둘 다 브라우저의 주소를 변경하는 메소드입니다. 그러나 두 메소드 간에는 몇 가지 중요한 차이점이 있습니다 !
[React] Link 태그에서 relative프퍼티
리엑트에서 앵커태그 대신 사용가능한 Link태그가 있음a태그를 사용하면 http요청으로인해 url이 변경되면서 새로고침이 발생하는데 리엑트라우터돔에서 제공하는 Link component를 사용하면 http요청없이 라우팅이 가능함이런식으로 사용가능한데 이전 경로로 이동하
라우터(Router)객체와 동적/정적 라우팅(Routing)
라우터(router) 객체 : 페이지 이동과 관련된 기능을 가지고 있는 객체를 의미합니다. 이 라우터 객체를 사용해서, A 페이지 -> B 페이지로 이동할 때, "B 페이지로 라우팅한다" 고 말합니다. 주로 사용하는 라우터
[Vue/Router] 새로고침 없이 params 동적 라우트 매칭
Vue2 + Vuetify2로 프로젝트 진행 중v-navigation-drawer있는 v-list-item에 link 속성을 추가하고동적 라우트를 to 속성으로 지정했더니새로고침은 되지 않고 주소만 바뀌는 상황이 생겼다 😱그래서 href 속성으로 바꾸었더니새로고침 되
react-router-dom
리액트 라우터 돔이란?페이지를 구현할 수 있게 해주는 패키지설치Router.js 생성 및 route 설정 코드 작성App.js에 importreact-router-dom HooksuseNavigatenavigate 생성 후 navigate(’보내고자 하는 url)을 통
# [React] React Router
라우팅이란? > 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 된다. > * 여러 페이지에서 리액트에서의 라우팅 방법 리액트에는 html파일이 하나밖에 없다. (Single Page API) 따라서 페이지 이동을 할 때 필요한 컴
[React] react-router-dom 변경 감지
네비게이션을 로그인/회원가입 페이지에서는 보여주지 않고 나머지에서만 보여주게 구현했는데 문제는 라우팅 시, 보여지는 url은 변경됐지만 UI적으로는 변경된 부분이 없기 때문에 새로고침을 해야 메인 페이지에서 네비게이션이 보이는 것이다.
Rails Router는 어떻게 동작하는가 2편 (영상 번역)
1편 보러가기라우터는 어떻게 읽을까? 우리는 그것을 가르쳐야 한다.Journey는 당신과 내가 읽는 것과 비슷한 방식으로 request를 읽는다. 사실 Journey가 읽는 방식은 컴파일러가 코드를 읽는 방식과 같다.우리가 위와 같은 문장을 읽을 때, 우리의 mind가
Rails Router는 어떻게 동작하는가 1편 (영상 번역)
레일즈 router 관련하여 Vaidehi Joshi라는 분이 2018 RailsConf에서 발표한 영상이 있다. 굉장히 유익하기에 이를 늦게나마 정리하고자 한다. 국내에는 레일즈 router를 어떻게 사용하는지에 대한 글은 좀 있으나, 어떻게 동작하는지 그 원리에 대
Vue 동적 라우팅 사용법
Vue 라우터 설치 router/index.js 파일을 만들고 라우터를 설정한다. 여기서는 params를 사용하여 동적 라우팅을 설정한다. User.vue 파일에서 동적으로 전달된 id 값을 사용한다. App.vue 파일에서 router-view를 추가한다. 마지막으로, main.js 파일에서 라우터를 추가한다. 이제 /user/:id 경로로 이동...
Next.js 라우터
우선 기존의 React 프로젝트에서의 Router 관리는 Router 라는 폴더를 하나에 두고 해당 폴더에서 Router를 관리했다.원하는 Router로 사용할 component들을 Router파일에서 위와 같이 관리했다.그러나 Next.js 에서는위와 같은 page에
[React] 라우터 - 고급기능 2
코드를 줄이고 수동으로 josn 형식 파싱할 필요없음위 코드는 json() 유틸리티 함수를 사용하여 코드를 간소화하는 예제입니다.이전 예제에서는 Response 객체를 사용하여 오류 응답을 생성하였습니다. 그러나, Response 객체는 기본적으로 문자열 데이터를 반환
React Router v6에서 추가된 index routes??
React Router v6에서 추가된 index routes는 특정 경로에 대한 기본 경로(default route)를 설정하는 방법이다.즉, 특정 경로로 접근할 때 경로가 정확히 일치하지 않을 때 기본 경로를 지정할 수 있다.(이전 버전인 v5에서는 기본 경로를 설