react-router
(React Router) 5. 중첩 라우팅
이전 글: https://moneytech.kr/72 (React Router) 4. contact.jsx 생성과 라우팅 이전 글: https://moneytech.kr/71 (React Router) 3. global layout을 추가해보자 이전글: https://princox.tistory.com/70 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. moneytech.kr 1. 중첩 라우트의 목표 우리의 중첩 라우트라는 것은 루트 라우트 안에서 화면 라우팅이 되는 것이다. contact route를 root route 내부의 자식으로 만들어 줍니다. src/main.jsx const router = createBrows..
(React Router) 4. contact.jsx 생성과 라우팅
이전 글: https://moneytech.kr/71 (React Router) 3. global layout을 추가해보자 이전글: https://princox.tistory.com/70 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. mkdir src/routes touch src/routes/root.jsx 꼭 커맨드를 사용할 필요 없습니 moneytech.kr 1. Contact Route UI 404 Not Found 페이지 대신에 실제로 무언가를 그려보자. 새로운 URL 링크를 걸기 위해서는 새로운 라우트가 필요하다. src/routes/contact.jsx를 만들자. touch src/routes/contact.j..
(React Router) 3. global layout을 추가해보자
이전글: https://moneytech.kr/70 (React Router) 2. 기본 CSS, JS, JSX 세팅과 Root Route 설정 1. 기본 CSS, JS 파일 세팅 이 튜토리얼은 데이터 만들기(create), 읽기(reading), 검색하기(searching), 수정(update), 삭제(deleting)하기를 다룹니다. 전형적인 웹 앱의 경우 웹 서버의 API와 소통하겠지만, 이 moneytech.kr 1. Root Route 구현하기 src 폴더 내에 routes라는 폴더를 구현하고 그 안에 root.jsx 파일을 생성합니다. mkdir src/routes touch src/routes/root.jsx 꼭 커맨드를 사용할 필요 없습니다. 에디터에서 클릭으로 만들어도 됩니다. src/r..
(React Router) 2. 기본 CSS, JS, JSX 세팅과 Root Route 설정
이전 글: https://moneytech.kr/69 (React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성 1. 개요 리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다. 라우트는 프론트엔드 개발의 기본 중에 기 moneytech.kr 1. 기본 CSS, JS 파일 세팅 이 튜토리얼은 데이터 만들기(create), 읽기(reading), 검색하기(searching), 수정(update), 삭제(deleting)하기를 다룹니다. 전형적인 웹 앱의 경우 웹 서버의 API와 소통하겠지만, 이 튜토리얼의 경우 브라우저 저장소(Browser Storage)와 가짜 네트워크 지연(Ne..
(React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성
1. 개요 리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다. 라우트는 프론트엔드 개발의 기본 중에 기본이지만, 오랜만에 코드를 손에 잡는 나로서는 아예 기억이 안 난다. 그래서 이번 글은 React Router에 있는 튜토리얼을 직접 진행해보면서 react-router-dom 모듈을 익혀보려고 한다. 이 프로젝트를 클론했습니다: https://reactrouter.com/en/main/start/tutorial Tutorial v6.6.1 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you k..