# Route
[Next] Next-JS의 라우트 시스템
Next-JS는 리액트, 뷰와 같은 라이브러리가 아닌 프레임워크입니다. 따라서 프레임워크에서 정해진 규칙대로 설계하고 작성해야합니다. 파일 기반 라우팅 시스템이 뭔지, 왜 해야하는지, 어떻게 하는지에 대해서 정리합니다.
AWS VPC Setup for EC2
AWS에서 EC2 인스턴스를 생성하여 SSH로 접속하고자할 때 VPC에 대한 필요한 리소스들을 정리해보자.Terraform 기준으로 전체적으로 아래의 리소스들이 필요하다.aws_vpc: VPC 생성aws_subnet: VPC 내부의 서브넷 생성aws_internet_g
라우터
페이지를 나누고 싶으면 일반 html, css, js 사이트는 하나의 페이지마다 각각 html파일을 만들었지만 리액트에서는 html 파일을 하나만 사용한다.그래서 리액트에선 다른 페이지를 요청하면 내부에 있는 를 바꿔 보여주면 된다.직접 구현도 가능하나 일반적으로 re
SPA: Route로 다른 컴포넌트 연결(3)
지난 시간에 마무리 지었던 전체 코드를 다시 한번 살펴보자.이 코드에서 button 밑의 hint 부분부터 먼저 수정해줄 것이다."Click to get a hint"를 누르면 특정 주소의 컴포넌트로 연결되도록 하기 위해서 리액트 라우팅 라이브러리가 필요하다. 리액트
[Next] 라우팅 시스템 (Next13)
Next 13버전에서는 App 디렉토리 신규로 추가되었습니다. App 디렉토리를 사용시 폴더 구조와 Data Fetch 방법들이 달라졌습니다.
[Next] 라우팅 시스템 (Next12)
해당 글은 Next 13 이전 버전을 기준으로 작성하였습니다. Next.js는 파일 시스템 기반의 라우터를 사용합니다.
풀스택 웹개발 부트캠프 13주차 (2)
React Router 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공 주요 컴포넌트 BrowserRouter Routes Route Link createBrowse
Next.js App Router에 대해 알아보자(2. 라우팅 정의하기)
Next.js는 파일 시스템 기반에 라우팅을 제공합니다. 각 폴더는 라우터에 세그먼트를 대표합니다.각각의 폴더에는 page.tsx가 존재해야 해당 URL에 접근이 가능합니다. 일반적으로 UI를 표시하는 페이지와 여러 경로에서 공유되는 UI를 표시하는 레이아웃으로 페이지
React Router
단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여 Router를 사용해야한다.터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다.package.json 파일에서 react-router-dom이 정상적으로 설치되었는지
[React] 페이지이동(React-Router-Dom/Link, Route, BrowserRouter, Routes)
페이지 이동 애초에 React는 Single Page Application (html 파일이 하나밖에 없기 때문에)이기 때문에 페이지 이동이라는 개념 자체가 존재하지 않는다. 따라서 주소가 안바뀌고, 뒤로가기 앞으로가기 불가능하다 React-Router-Dom 페
React Router에 대해 알아보자
키워드 라우터란? React Router Browser Router Route Memory Router 최종 목표 React에서 라우팅 처리에 대해 배워보자. 현재 목표 React Router에 대해 알아보자. React Router란? 리액트에서 주소에 따른 컴포
routing - 페이지 이동
글번호에 따라 이동게시글 번호에 따라 상세 조회data? => data있으면 가져오고, 없으면 기다리고.. 옵셔널 체이닝fetchBoard? => data삭제 되었을때nullish-coalescing\-> false면 오른쪽 실행!
Next.js - Link Route
https://nextjs.org/docs/pages/building-your-application/routing해당 공식문서를 참고하였습니다. Next.js에는 route.push()가 있고, Link가 있다. 위 코드들은 모두 /about 이라는 경로로 페
routerLinkActive
상단 routerLinkActive :현재 라우트 링크와 일치할 경우 명시한 내용을 class name 으로 설정일반적으로라는 조건을 활용해서 현재 메뉴와 라우터 url을 비교하기 마련인데, 이 방식을 쓰면 코드도 줄고 더욱 직관적이라 좋습니다
