728x90 반응형 SMALL react-router-dom3 단일 페이지 애플리케이션 만들기 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션(Single Page Application, SPA) 방식으로 개발하는 것이 정석입니다. 단일 페이지 애플리케이션은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션 입니다. 전통적인 방식의 웹 페이지는 페이지를 전환할 때마다 랜더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있습니다. 단일 페이지 애플리케이션은 페이지 전환에 의한 랜더링을 클라이언트에서 처리하기 때문에 마치 네이티브 애플리케이션 처럼 자연스럽게 동작합니다. 브라우저 히스토리 API 먼저 단일 페이지 애플리케이션을 구현하기 위해 필요한 브라우저 히스토리 API가 있습니다. 히스토리 API란? 단일 페이지 애플리케이션 구.. 2022. 1. 23. [React] react-router-dom 설치 후 Route 시 오류 / 해결방법 React-router-dom 실습하는 도중 localhost :3000 화면은 오류없이 흰창으로 나오지만 콘솔에서 많은 오류가 생겼습니다... 이중 index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 이 주된 이유였습니다 ㅠㅠ3개 전부 가 원인인것을 알수있습니다. 문제의 원인? react-router-dom 라이브러리가 버전 업데이트가 되어서 최신버전에 맞게 설치해주거나 이전 버전을 설치하는 방법이있습니다. 제가 사용하고있는 router-dom 라이브러리 버전을 먼저 확인해보겠습니다. 저에게 설치되어진 버전은 6.2.1 버전입.. 2022. 1. 23. React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한이유 이 라이브러리가 왜 필요한지 설명전에 우리에게 익숙한 형식의 웹 애플리케이션을 살펴 보겠습니다. 우리에게 익숙한 형식의 라우팅은 다음과 같습니다. 브라우저에 "어떤사이트.com"을 입력하고 들어가면 index.html 이 렌더링 됩니다. index.html은 어디서 온것일까요?? 바로 "어떤 사이트" 의 서버에서 온것입니다. 어떤사이트 주소를 렌더링 할 html 과 여타 다른 파일들을 리턴한 것입니다. 마찬가지로 어떤사이트.com/login 을 입력하고 들어가면 이 요청은 GET 요청이 되어 해당 사이트의 서버에 전달됩니다. 서버는 로그인 경로를 보고 login.html 페이지를 반환합니다. 브라우저는 이런 라우팅을 서버-사이트 라우팅 이라고 합니다... 2021. 12. 14. 이전 1 다음 728x90 반응형 LIST