Life of Jibro

리액트 라우터 Tutorial 따라하기 - Root 라우트 이번 시간에는 리액트 라우터 공식문서의 다음 내용을 살펴보는 시간을 가져보고자 한다. https://reactrouter.com/en/main/start/tutorial#the-root-route Tutorial v6.8.2 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do s..

리액트 라우터 Tutorial 따라하기 - Router 추가하기 이번 시간에는 리액트 라우터 공식문서의 다음 내용을 살펴보는 시간을 가져보고자 한다. https://reactrouter.com/en/main/start/tutorial#adding-a-router Tutorial v6.8.2 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to ..

프론트엔드 개발 프로젝트의 시작에 있어 가장 중요한 부분은 라우터 설정이라고 볼 수 있다. 왜냐하면 실제 CSR 웹서비스를 제공할 때 라우터 설정이 되어 있지 않다면 해당 페이지에 대한 url 접근이 불가능하기 때문이다. 필자는 블로그 또는 튜토리얼을 따라하며 왜 그런지 모르는 상태로 리액트 라우터 설정을 해왔다. 하지만 스스로의 역량에 있어 심각한 기술 부채를 느끼는 바, 간단하게 나마 리액트 라우터 공식 문서의 Tutorial을 따라해보고 이를 바탕으로 코드의 확장성도 고려하여 보는 과정을 기술하여 보고자 한다. 0. 시작 공식 문서 url은 다음과 같다. https://reactrouter.com/en/main/start/tutorial Tutorial v6.8.2 Tutorial Welcome t..

앞서 useNavigate의 state 속성을 이용하여 다른 컴포넌트로 값을 전달하였듯 Link 컴포넌트를 사용해서도 값을 전달할 수 있다는 사실을 알게 되었다. 이 부분에 대해 간단히 살펴보도록 하겠다. 는 무엇일까요? 먼저 React Router 공식문서에서의 설명을 확인하여 보자. (공식문서의 내용을 번역하였습니다.) ''는 탭을 하거나 클릭을 하여 다른 페이지로 사용자가 이동할 수 있게 해주는 요소이다. 'react-router-dom'에서 는 연결된 리소스를 가리키는 하이퍼링크(href)를 사용하여 접근 가능한 요소를 렌더링합니다. 이것은 를 마우스 오른쪽 버튼으로 클릭하는 것과 같은 작업이 예상대로 동작함을 의미합니다. 를 사용하여 클라이언트측 라우팅을 생략하고 브라우저가 페이지 전환을 정상적..

보통 회원가입을 하다보면 가입하는 페이지에서 사용할 이메일을 적고 비밀번호까지 생성한 뒤, 프로필 생성 페이지로 넘어가게 된다. 그런데 프로필 생성 페이지에 도착해서야 API를 통해 계정을 생성한다면? 그리고 그 때 전달해야하는 사용자 정보가 앞선 페이지에서 사용자가 작성한 이메일과 비밀번호라면?? 이전 페이지에서 작성한 정보를 어떻게 다른 컴포넌트로 가져와서 API 요청시 전달할 것인가? 하는 이슈를 마주하게 된다. 필자는 이를 처음에는 이메일과 비밀번호 작성하는 페이지에서 사용자가 입력한 정보를 로컬스토리지에 담은 뒤, 프로필 생성 페이지에서 API 요청한 뒤 로컬스토리지를 초기화하는 방식으로 이를 해결하였다. const Signup = () => { // ... const handleSignupSu..

React로 개발을 하다보면 꼭 사용하게 되는 라이브러리가 바로 React router-dom이다. 특히 웹앱을 개발하다보면 뒤로가기 버튼을 구현하여야 하는 경우가 있는데 이때 useNavigate를 사용하면 좋다. 다른 url로의 이동으로 React-Router의 Link 컴포넌트를 사용할 수 있다. 하지만 이는 특정 url 경로로의 이동을 위해 사용된다. 그리고 해당 Link 컴포넌트를 사용한 경우 클라이언트 측 라우팅을 건너뛰고 브라우저가 마치 a요소의 하이퍼링크처럼 전환을 정상적으로 처리하도록 할 수 있다. 하지만 종종 이는 시멘틱한 html의 작성을 위해 지양되는 경우가 발생한다. 이러한 Link 컴포넌트의 특징에 유의하여야 하며, 동시에 우리가 구현하고자 하였던 뒤로가기 기능을 구현하기 위해서..