# router

189개의 포스트
post-thumbnail

Vue.js

routing SPA에서 가장 먼저 처리해야 할 것이 라우팅 서버에서 라우팅은 URI에 따라 해당하는 정적 파일을 내려주는 방식 이를 브라우저에서 구현해야 하는것이 SPA 개발의 핵심 요청 URI에 따라 브라우저에서 DOM을 변경하는 방식 vue router는 SPA 개발시 유용한 라우터 전용 라이브러리 hashbang mode vs history mode...

약 21시간 전
·
0개의 댓글
post-thumbnail

Router / 220114

TIL 다섯걸음1) 페이지 이동을 뜻한다.next.js에서 이동을 도와주는 도구실행 명령(아래그림▼참조)\-const router = useRouter() => 자동으로 next/router에서 useRouter를 import해와준다.2)라우터의 종류정적라우팅(stat

3일 전
·
0개의 댓글
post-thumbnail

express 웹 서버 만들기 -2(multer, 라우팅 분리, req, res, +전체 코드)

1. multer, 2. 라우팅 분리(feat. Router 객체), 3. req, res 객체, +전체 코드

2022년 1월 18일
·
0개의 댓글
post-thumbnail

react-router-dom v6

react-router-dom v6에 대해 사용방법을 간단히 알아본다.

2022년 1월 16일
·
0개의 댓글
post-thumbnail

페이지를 이동해보자 : Routing

페이지를 이동하는 과정에서 알아야 할 단어가 있는데, routing : 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정 router : 컴퓨터 네트워크 간에 데이터 패킷을 전송하는 네트워크 장치 💡 React 에서 router,routing

2022년 1월 14일
·
0개의 댓글
post-thumbnail

React-Router

BrowserRouter 는 리액트 라우터 돔을 적용하고 싶은 컴포넌트에 최상위 컴포넌트를 감싸주는 웨퍼컴포넌트이렇게 하면 App이라는 컴포넌트에서는 BrowserRouter컴포넌트를 사용할수 있는 상태라는것라우터가 버전 업그레이드 되면서 오래된 강의자료들이랑 다르게

2022년 1월 13일
·
0개의 댓글
post-thumbnail

[React] useLocation() 사용하여 현재 URL 정보 가져오기

useLocation을 사용하기 위해서는 라우터 설치가 필수다. 자세한 세팅 방법은 router 세팅하기 페이지에서 참고하면 된다.npm install react-router-dom1) useLocation을 import 한다.2) 변수에 useLocation 정보를

2022년 1월 13일
·
0개의 댓글

[React] useParams() 사용하여 파라미터 가져오기

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams()라는 훅을 사용하면 된다. 라우터를 사용하고 있다는 가정 하에 useParams 사용 방법에 대해 알아보도록 하겠다.1) useParams를 import 한다.2) useParams

2022년 1월 13일
·
0개의 댓글

React Router와 SPA(Single Page Application)

과거의 웹 사이트는 페이지를 옮길 때 마다 모든 페이지를 불러와야 했다. 이는, 많은 트래픽과 사용자의 경험을 저하시켰습니다.

2022년 1월 11일
·
0개의 댓글

React - Router

1. SPA SPA(Single Page Application)란? 페이지가 1개인 어플리케이션을 의미함. -> 다른 여러 개의 페이지를 보여주기 위해 Routing을 함. 사용 이유 렌더링을 위한 서버 자원 및 불필요한 트래픽 낭비를 줄이기

2022년 1월 10일
·
0개의 댓글
post-thumbnail

React Router 사용법

⭐⭐⭐⭐⭐⭐⭐$ npm install react-router-domBrowserRouter를 받아와서 감싸준다.routes로 겉을 감싸준 다음 <Route> 로 경로를 지정하고 element에 컴포넌트 작성import {Link} from ‘react-router

2022년 1월 9일
·
0개의 댓글
post-thumbnail

[KDT]FCFE - 7주5일 React Router

전통적으로 새로운 페이지로 이동할 때 페이지 정보를 url 주소를 통해 서버에 요청하고 전달 받았다.But!SinglePageApplication 를 사용하기 시작한 후서버에서 app 전체를 받아오고 client가 필요한 부분을 url 변경을 통해 사용하는 방식을 사용

2022년 1월 8일
·
0개의 댓글

[TypeScript] react router 오류 해결

현재 react-router는 v6까지 나왔다. 근데 타입스크립트 환경에서 리액트 작업 시에 뭔가 충돌이 있는 거 같다. v5로 작업해도, v6로 작업해도 계속 오류가 난다. 왠지 타입스크립트용 router는 아직 v6가 아니어서 그런듯.그냥 react-router를

2022년 1월 4일
·
0개의 댓글
post-thumbnail

[TypeScript] Router 세팅하기

📎 react-router 시작하기이 전 글에서 react router 사용 법에 대해서 정리했었다. 이 방법은 일반 자바스크립트 환경에서의 방법이다. 리액트에서 TypeScript 사용 시 router 오류가 발생하는데, 타입을 지정해주지 않아서 발생하는 오류이다.

2022년 1월 4일
·
0개의 댓글
post-thumbnail

[ErrorCatcher 5] Multiple databases

아니 뭐 db는 하나만 써봤죠?아니 왜 안 가르쳐 줬어여,,,,,?inspect db이미 갖춰진 table을 불러와서 migration, migrate 없이 사용 할 수도, 또, db를 여러 개 사용할 수도 있다는 건 아주 당연한건데 db를 덤프 떠서 다시 넣어 사용을

2022년 1월 3일
·
0개의 댓글
post-thumbnail

[React] useHistory() 사용하여 페이지 뒤로가기

useHistory()를 사용하기 전에 react-router가 설치되어 있어야 한다.📌 react-router 시작하기1) useHistory를 import한다.2) 변수를 하나 생성해서 useHistory 함수를 담는다.이제 history라는 변수에 페이지 방문

2022년 1월 1일
·
0개의 댓글
post-thumbnail

[React] Router 시작하기

리액트 작업 시 원 페이지가 아닌 여러 페이지를 만들고 싶다면 라우터를 이용한다. 이는 새로고침을 통한 실제 페이지 이동이 아니며, 페이지를 이동한 것처럼 보여주는 것이다.기존 <a> 태그를 사용하면 링크 변경 시 페이지가 새로고침(reload)되면서 페이지가 완

2022년 1월 1일
·
0개의 댓글
post-thumbnail

12.29 - twinter cloneCoding 3

어제까지 로그인 기능을 마무리했으니 이제 로그아웃 기능을 추가해야한다. 그러기위해서는 먼저 라우터를 좀 더 설정해줘야하는데 오늘은 react-router-dom이 속을썩였다ㅎㅎ 분명 redirect, switch, useHistory 모두 이번학기에 팀플할때까지만 해도

2021년 12월 29일
·
0개의 댓글
post-thumbnail

vyos set interface

configureset interfaces ethernet eth0 address dhcpset interfaces ethernet eth0 description 'OUTSIDE'set interfaces ethernet eth1 address 10.0.0.1/24se

2021년 12월 28일
·
0개의 댓글
post-thumbnail

정말 많이 바뀐 react router v6, 업데이트 총 정리

React Router v6는 Reack hook를 많이 사용하므로 v6를 사용하기 위해 React 16.8 이상이 요구됩니다.6이상의 버전으로 업그레이드만 하더라도 번들 크기에 대한 최적화가 바로 이루어 질 수 있습니다.Switch는 기본적으로 동시에 여러개의 rou

2021년 12월 28일
·
0개의 댓글