# router

37개의 포스트
post-thumbnail

React Twitter Clone (4) - 라우터 세팅

src에 conponents와 routes 디렉터리를 만들고 App.js를 componenets 폴더에 옮겨 놓습니다. 그리고 index.js 부분의 App의 경로를 수정합니다.기본 페이지 구성은 위와 같이 해주겠습니다.이 후에 Navigation을 만들어야 하는데np

4일 전
·
0개의 댓글

React 공부 2(route)

exact={true} 속성을 주면 정확한 path의 경로만 컴포넌트해준다.

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

[JavaScript] React - Router

React - Router SPA (single page Apllcation - 페이지가 한개) > 이전에 우리가 계속 사용했던 것은 페이지 수만큼 html 파일이 존재했지만, 리액트에서 사용할 프로젝트에서는 html 파일의 개수는 1개이다. SPA인데 여러개의 페

2020년 9월 12일
·
0개의 댓글
post-thumbnail

[TIL] React Router

1. SPA 단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 헨더링과 비교할 떄, 배포가 간단하며 네이티브 앱과 유사한 유사한 사용자 경험을 제공할

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

React스터디_라우터로 SPA 개발하기

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다.말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다.

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

TIL DAY.20 React Router, Sass

SPA:페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성이 되어서 유저가 새로운 페이지를 요청 할 때 마다 페이지가 새로고침되고 로딩할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 하는 방식입니다.

2020년 9월 7일
·
0개의 댓글
post-thumbnail

TIL - 2020.09.03

오늘도 새벽에 작성하는 TIL,,, 열심히 프로젝트 개발 중이다!프로젝트 개발오늘은 화면이 넘어가는 부분을 구현했다.Css Grid를 활용했다.화면내에 사이드바를 구현했는데 계속 다른 탭으로 안 넘어가서 애를 먹었다.예를들어 menu/1에서 2번째를 누르면 menu/2

2020년 9월 3일
·
0개의 댓글
post-thumbnail

koa-router

리액트에서 웹 브라우저의 라우팅을 돕는 것처럼 koa 사용시에도 다른 주소로 요청이 들어오는 경우 다른 작업을 처리할 수 있도록 라우터를 사용해야 합니다. Koa 자체에는 이 기능이 내장되어 있지 않기 때문에 koa-router 모듈을 설치해야 합니다.koa-route

2020년 9월 3일
·
0개의 댓글

React Router 기본 시작하기

React Router를 기능별로 분리해 보고 기본 사용법에 대해서 이해한 내용을 정리했습니다.

2020년 8월 31일
·
0개의 댓글

[vue] vue-router 동적라우팅

react로 첫 프로젝트를 할 때 동적라우팅개념을 몰랐을 때, 어떻게 url에 따라 기본틀은 유지하면서 안의 내용물만 바꿀 수 있을지 굉장히 고민했었다. 그러다가 동적라우팅 개념을 알고나서 나름 혁신적인 경험을 했던 기억이 있다. vue에도 당연히 리액트와 같은 기능을

2020년 8월 30일
·
0개의 댓글
post-thumbnail

TIL. 동적 라우팅 -8/25

동적 라우팅은 쇼핑몰에서 많은 상품들처럼 컴포넌트들을 하나씩 다 Routes에 넣기에는 너무 힘들기 때문에 동적으로 원하는 url로 넣어주는 방법입니다.먼저 라우츠에 스위치에 동적 라우팅을 사용할 컴포넌트에 path를 수정해 줍니다.이런식으로 path에 :hello (

2020년 8월 25일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 13장, 리액트 라우터로 SPA 개발하기

# 😁 SPA란? # 😭 SPA의 단점 ## Link # 😍 URL 파라미터와 쿼리 ## URL Query ## qs # 🙄 서브 라우트 # 😐 리액트 라우터 부가 기능 ## history ## withRouter ## Switch ## NavLink

2020년 8월 24일
·
0개의 댓글

TIL. Sass, Router, Git 초기세팅 - 8/5

Sass는 css의 상위에 있는 메타언어로, 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 일종의 CSS 전처리기(pre-processor)이다

2020년 8월 5일
·
0개의 댓글
post-thumbnail

React Router 2

React Router 2 (withRouter,match,location,history)

2020년 6월 16일
·
0개의 댓글

라우터를 알아보자2

사용자 이름이나 상품 ID 같은 변할 수 있는 URL 을 매칭할때는요청 매개변수를 사용한다.여기서 id 라는 이름을 붙인 요청 매개변수는 아래와 같이 사용한다.실제로 사용할 때는 props를 기반으로 요청 매개변수를 사용하는 것이 좋다.URL 쿼리는 아래와 같이 사용한

2020년 6월 14일
·
0개의 댓글
post-thumbnail

React Router

위와 같은 구조의 포트폴리오 사이트를 리액트 네이티브 SPA로 구현 중이다. 리액트 라우팅에 대해 학습한 내용을 정리해본다. BrowserRouter as Router 는 코드에서 Router를 식별자로 사용하겠다는 의미이다. Switch는 URL 매칭이 일어나면 그

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

[Network] 라우터의 기능과 구조

WAN/인터넷 서비스는 전 세계에 여러 가지가 있으며, 서비스마다 접속하는 인터페이스와 프로토콜도 각양각색입니다. 라우터는 그런 다양한 서비스에 접속할 수 있게 다양한 인터페이스와 프로토콜을 지원합니다.

2020년 6월 1일
·
0개의 댓글

React Router

React Router 서로 다른 주소를 가진 view 를 만들어 관리하는 방법을 알아봅니다.

2020년 6월 1일
·
0개의 댓글

라우터

서로 다른 네트워크와 통신하려면 라우터가 필요하다.라우터는 네트워크를 분리 할 수 있다.라우터 하나에 스위치 두개가 연결 되어있다고 한다면 , 스위치 A: 192.168.1.0/24스위치 B: 192.168.2.0/24는 서로 다른 네트워크 이다. router 는 3

2020년 5월 25일
·
0개의 댓글
post-thumbnail

Router/ fetch

: Routing은 페이지 이동을 의미한다. 하지만 리액트에서는 라우팅이 내재되어있지 않아서 npm install react-router-dom --save 라는 명령어로 설치한다.import React from 'react';는 react패키지에서 React를 임포트

2020년 5월 24일
·
0개의 댓글