minlog
article thumbnail
[ React ] Single Page Application (SPA)
FrontEnd/React 2023. 8. 17. 18:27

Single Page Application (SPA) 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것. 결국 index.html 은 하나만 존재한다. 자바스크립트 영역에서 HTML5의 History API를 이용하여 현제 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다. 리엑트에서는 React-Router-Dom 이 History API를 사용한다. History API 명령어 기능 History.back() 세션 기록의 뒤 페이지로 이동하는 비동기 메서드 (= 브라우저의 뒤로가기 기능) History.forward() 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드 History.go() 특정한 세션 기록으로 이동하게 해주는 비동기 메서드 ( 1 을 넣어 호출 시..

article thumbnail
[ React ] 리액트 설치 'Create React App'
FrontEnd/React 2023. 8. 17. 16:34

Create React App을 이용하여 리액트 설치 1. 터미널을 사용한 간단한 설치 npx create-react-app 이라는 명령어로 간단하게 설치 가능하다. 이전에는 웹팩이나 바벨 같은 모듈을 설치 후 설정을 해야 리액트 앱을 실행할 수 었는데, 위의 명령어를 통해 자동으로 모두 설치와 설정을 할 수 있다. 1-1 . 현제 프로젝트 폴더 경로에서 바로 설치 ※ npx node.js 명령어 npx create-react-app ./ 1-2. 설치 된 파일 및 폴더 확인해보기 1) 이름이 수정되면 안되는 파일 public/index.html : 페이지 템플릿 src/index.js : 자바스크립트 시작 2) Static 파일의 경로 Images : public 내부의 파일만 public/index...