# BrowserRouter

26개의 포스트

풀스택 웹개발 부트캠프 13주차 (2)

React Router 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공 주요 컴포넌트 BrowserRouter Routes Route Link createBrowse

2023년 10월 18일
·
0개의 댓글
·
post-thumbnail

React Router

단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여 Router를 사용해야한다.터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다.package.json 파일에서 react-router-dom이 정상적으로 설치되었는지

2023년 8월 25일
·
0개의 댓글
·

[React] 페이지이동(React-Router-Dom/Link, Route, BrowserRouter, Routes)

페이지 이동 애초에 React는 Single Page Application (html 파일이 하나밖에 없기 때문에)이기 때문에 페이지 이동이라는 개념 자체가 존재하지 않는다. 따라서 주소가 안바뀌고, 뒤로가기 앞으로가기 불가능하다 React-Router-Dom 페

2023년 8월 17일
·
0개의 댓글
·
post-thumbnail

HashRouter vs BrowserRouter

HashRouter vs BrowserRouter

2023년 5월 26일
·
0개의 댓글
·
post-thumbnail

[블체스 Part.2] 230425

BrowserRouter로 가장 바깥쪽을 감싼다.main color 설정fontFamily 설정BrowserRoute, Routes, Route 를 이용해서 localhost 주소에 따라 페이지가 이동할 수 있게 만들었다.나머지 코드와 코드리뷰는 내 깃허브에 올려두었다

2023년 4월 26일
·
0개의 댓글
·
post-thumbnail

React Router의 HashRouter 알아보기

영상편집 툴의 대표적인 Adobe Premiere Pro에서 동작하는 플러그인을 개발중인데 해당 플러그인은 HTML, CSS, JavaScript로 개발할 수 있다. 따라서 React환경을 구축해서 빌드하였다. 하지만 React App은 클라이언트 사이드 렌더링을 통해

2023년 3월 14일
·
0개의 댓글
·

BrowserRouter, HashRouter의 차이

는 URL의 hash를 활용한 라우터입니다. 정적인(static)페이지에 적합보통 request와 response로 이루어지는 동적인 페이지를 제작 가 보편적

2023년 2월 11일
·
0개의 댓글
·

React Router

리액트는 SPA방식이고 기존 웹 페이지처럼 새로윤 웹페이지를 사용하는게 아니고 페이지를 로드하지 않고 필요한 데이터를 가져온다! url에 따라 선택된 데이터를 페이지에 렌더링 해준다.\-사용하기전 라이브러리 설치 방법 터미널에 npm install react-route

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

[ React ] React Router 사용하기

[ React ] React Router 사용하기에 대해 알아보자.

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

React Router

React SPA에서는 경로(Route)에 따라 다른 뷰를 보여줄 수 있다. 라우팅에 따라 다른 뷰를 보여주기 위해 React에서는 React Router라는 라이브러리를 사용한다. SPA & Routing SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면

2022년 9월 29일
·
0개의 댓글
·

React + spring boot

Spring boot 와 React를 연동하기 해보기 위해서 작성함참고https://velog.io/@ysm6768/SpringBoot-React-%EA%B2%8C%EC%8B%9C%ED%8C%90https://velog.io/@velopert/reac

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

SPA와 React Router

전통적인 방식의 웹 애플리케이션 단점 서버가 화면을 그리기 위해 필요한 html을 만들어서 내려주는 역할까지 하여 서버의 부담이 커짐 때문에 속도가 느려짐 정보양이 많아져 빠르게 계산하여 내려주기 위한 추가적인 캐싱 작업 페이지 이동 시, 새로운 html을 서버에서 내

2022년 7월 7일
·
2개의 댓글
·

리액트-페이지 나누기(라우팅)

여러 페이지를 만들기위한 라우팅 세팅해서 사용해보기.

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

[React] React Router 사용하기

react-router-dom에서 Router(BrowserRouter), Switch, Route, Link 등의 기능을 제공해줍니다. Router 사용Router 태그로 return 하는 전체 태그를 감싸줍니다.Link 사용Link to 속성 뒤에 원하는 경로를 문

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

HashRouter vs BrowserRouter

A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.HTML5 history API를 사용하여 UI(화면

2021년 10월 27일
·
0개의 댓글
·
post-thumbnail

사전 프로젝트(Dictionary) - 개념설명 및 소스코드

첫째, 프로젝트를 생성한다.yarn create react-app 프로젝트명둘째, 뷰를 만든다.styled-components를 사용하여 디자인한다.셋째, 라우팅을 한다.index.js에서 BrowserRouter로 감싸준다.넷째, 리덕스를 이용한다.redux폴더 >

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

React-Router(1): Link와 exact

리액트는 SPA(single page Application)방식으로써, 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA방식과 달리, 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.예를 들어 로그인과 회원가

2021년 9월 10일
·
0개의 댓글
·
post-thumbnail

[React] 라우터 이해하기(Route, Link, Switch)

라우터는 path 속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정할 수 있습니다. 또한, 브라우저 이동 없이 컴포넌트만 전환하여 마치 모바일 앱처럼 이루어지게끔 해줍니다.URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이

2021년 8월 13일
·
0개의 댓글
·