# Route

130개의 포스트
post-thumbnail

[Next] Next-JS의 라우트 시스템

Next-JS는 리액트, 뷰와 같은 라이브러리가 아닌 프레임워크입니다. 따라서 프레임워크에서 정해진 규칙대로 설계하고 작성해야합니다. 파일 기반 라우팅 시스템이 뭔지, 왜 해야하는지, 어떻게 하는지에 대해서 정리합니다.

2023년 11월 25일
·
0개의 댓글
·
post-thumbnail

React Router v6 Tutorial - Basic

Record how "react-route-dom" is used.

2023년 11월 14일
·
1개의 댓글
·
post-thumbnail

AWS VPC Setup for EC2

AWS에서 EC2 인스턴스를 생성하여 SSH로 접속하고자할 때 VPC에 대한 필요한 리소스들을 정리해보자.Terraform 기준으로 전체적으로 아래의 리소스들이 필요하다.aws_vpc: VPC 생성aws_subnet: VPC 내부의 서브넷 생성aws_internet_g

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

라우터

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

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

SPA: Route로 다른 컴포넌트 연결(3)

지난 시간에 마무리 지었던 전체 코드를 다시 한번 살펴보자.이 코드에서 button 밑의 hint 부분부터 먼저 수정해줄 것이다."Click to get a hint"를 누르면 특정 주소의 컴포넌트로 연결되도록 하기 위해서 리액트 라우팅 라이브러리가 필요하다. 리액트

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

[Next] 라우팅 시스템 (Next13)

Next 13버전에서는 App 디렉토리 신규로 추가되었습니다. App 디렉토리를 사용시 폴더 구조와 Data Fetch 방법들이 달라졌습니다.

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

[Next] 라우팅 시스템 (Next12)

해당 글은 Next 13 이전 버전을 기준으로 작성하였습니다. Next.js는 파일 시스템 기반의 라우터를 사용합니다.

2023년 10월 21일
·
0개의 댓글
·

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

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

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

플라스크 MVC 디렉토리

📌Changing Modeling MVC 📌MVC?

2023년 9월 19일
·
0개의 댓글
·

Next.js App Router에 대해 알아보자(2. 라우팅 정의하기)

Next.js는 파일 시스템 기반에 라우팅을 제공합니다. 각 폴더는 라우터에 세그먼트를 대표합니다.각각의 폴더에는 page.tsx가 존재해야 해당 URL에 접근이 가능합니다. 일반적으로 UI를 표시하는 페이지와 여러 경로에서 공유되는 UI를 표시하는 레이아웃으로 페이지

2023년 8월 27일
·
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

React Router에 대해 알아보자

키워드 라우터란? React Router Browser Router Route Memory Router 최종 목표 React에서 라우팅 처리에 대해 배워보자. 현재 목표 React Router에 대해 알아보자. React Router란? 리액트에서 주소에 따른 컴포

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

sudo -i 가 왜 느릴까? #2

sudo -i 가 느려지는 원인을 디버깅하는 과정을 연재한다.

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

동적 라우팅

router.query.qqq에 query값이 저장되어있음.주의할점 : 대괄호로 묶어 주어야 됨.mutation

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

routing - 페이지 이동

글번호에 따라 이동게시글 번호에 따라 상세 조회data? => data있으면 가져오고, 없으면 기다리고.. 옵셔널 체이닝fetchBoard? => data삭제 되었을때nullish-coalescing\-> false면 오른쪽 실행!

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

Next.js - Link Route

https://nextjs.org/docs/pages/building-your-application/routing해당 공식문서를 참고하였습니다. Next.js에는 route.push()가 있고, Link가 있다. 위 코드들은 모두 /about 이라는 경로로 페

2023년 7월 21일
·
0개의 댓글
·
post-thumbnail

Next13 Route Handler 사용해보기

Next13에 추가된 Route Handler 맛보기

2023년 7월 18일
·
0개의 댓글
·

routerLinkActive

상단 routerLinkActive :현재 라우트 링크와 일치할 경우 명시한 내용을 class name 으로 설정일반적으로라는 조건을 활용해서 현재 메뉴와 라우터 url을 비교하기 마련인데, 이 방식을 쓰면 코드도 줄고 더욱 직관적이라 좋습니다

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

Routing / Dynamic Routes 번역 및 요약

Routing / Dynamic Routes 번역 및 요약

2023년 6월 23일
·
0개의 댓글
·