반응형 글쓰기 개발기록/React3 [React] React-router-dom 리액트 라우터 리액트는 SPA(Single Page Application)방식으로, 페이지를 새로고침하지 않고 변경된 부분만 자바스크립트를 통해 업데이트하는 방식이다 리액트에서 외부 라이브러리를 사용하여 SPA 페이지를 구현하는 방법에는 여러가지가 있다 그 중에서 React-router-dom을 사용해서 라우팅을 구현해보자 여기서는 빠른 페이지 구현을 위해, CRA으로 만든 리액트앱에서 프로젝트를 진행해보겠다 1. react-router-dom 설치 npx create-react-app router-tutorial 또는 npm create-react-app router-tutorial 을 통해 리액트앱을 생성해준다 (나는 지난번에 만들어둔 my-app을 사용했다) 다음으로 명령프롬프트에서 해당 디렉토리로 이동한다 cd.. 2022. 2. 5. [React] 리액트 웹팩으로 시작하기 지난 포스팅에서 CRA를 이용하여 쉽고 빠르게 리액트 개발환경을 구축해보았다. https://spectrum20.tistory.com/entry/React-CRA%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EC%84%A4%EC%B9%98%EB%B6%80%ED%84%B0-%EC%84%A4%EC%A0%95%EA%B9%8C%EC%A7%80 [React] CRA로 리액트 시작하기 - 설치부터 설정까지 왕초보의 구구절절한 리액트 개발을 시작합니다. Create React App(CRA)는 리액트를 배우기에 간편한 환경이다 - (리액트 문서 참조) CRA을 이용하면 웹팩이나 바벨같은 복잡한 설정을 몰라도 리액트를 spectr.. 2022. 2. 2. [React] 리액트 시작하기 - Create React App(CRA) 왕초보의 구구절절한 리액트 개발을 시작합니다. Create React App(CRA)는 리액트를 배우기에 간편한 환경이다 - (리액트 문서 참조)CRA을 이용하면 웹팩이나 바벨같은 복잡한 설정을 몰라도 리액트를 쉽게 시작할 수 있다.웹팩 그런거 나는 잘 모르겠고~ 일단 무작정 CRA를 통해 리액트를 시작해보겠다. 1. node.js 설치먼저, 초기 설정을 위해 node.js를 설치해준다.(react는 node.js 기반의 라이브러리로, CRA는 node.js 서버에서 실행되기 때문에 node.js를 설치)↓ 노드에 대한 간단한 설명2023.10.29 - [개발기록] - Node.js 노드 시작하기 (노드란?) (리액트 문서에는 Node 14.0.0 이상의 버전 및 npm 5.6 상위버전이 필요하다고 나와.. 2022. 2. 1. 이전 1 다음 반응형