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

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...

React 라이브러리? 1 . 리액트 ( React ) 사용자 인터페이스를 만들기 위한 javascript 라이브러리 이다. 리액트는 인터렉션이 많은 웹 앱 개발을 위해 주로 사용된다. UI 를 렌더링하는데 관여한다. ( MVC 중에 V ) 1-1. 리엑트 생태계 ( 사용하게되는 라이브러리 ) 1-2. 리액트 사용 이유 상대적으로 배우기 쉬운 라이브러리 여러 기능들으르 위해 이미 만들어져 있는 라이브러리 환경 많은 기업들의 사용으로 검증된 라이브러리 (ex . 페이스북) 1-3. 리엑트 컴포넌트 * 컴포넌트 : 리액트로 만들어진 앱을 이루는 최소한의 단위 리액트는 여러 컴포넌트 조각으로 되어 있다. ex ) 인스타 : 검색 , 포스트, 스토리 등 1-4. 리액트 컴포넌트 종류 클래스형 컴포넌트 함수형 컴..

깃허브에 저장된 탬플릿 가져와서 새로운 프로젝트 생성하기 깃에서 제공하는 명령어 git clone 은 프로젝트를 손쉽게 가져올 수 있지만, 이전 git 버전까지 함께 가져와진다는 문제가 있다. 때문에 이전 git 버전 기록 없이 다운로드 받아 사용하려면, 실제 깃헙주소에 들어가서 다운로드 버튼을 통해 zip 파일로 폴더를 다운 받아 사용해야하는데, Node.js의 npx degit 명령어를 사용하면 쉽게 CML로 설치 할 수 있다. npx : node.js 명령 degit: 원격저장소를 현제 위치에 다운로드 기능 npx degit 저장소 계정이름 / 저장소이름 다운로드 받을 폴더명 npx degit min-log/webpack-template-basic webpack-template-test

Webpack 프로젝트 생성 웹팩은 오픈소스 자바스크립트 모듈 번들러로 여러개로 나누어져 있는 파일들을 하나의 자바스크림트 코드로 압축하고 최적화하는 라이브러리 이다. 모듈단위로 개발이 가능하여 가독성과 유지보수가 쉽다. 1. Webpack 번들러 설치 npm i -D webpack webpack-cli webpack-dev-server@next 3개의 패키지 설치가 필요하다. webpack webpack-cli : 터미널에서 입력할 수 있는 기능 webpack-dev-server@next : 개발 할 때 수정사항 새로고침 기능 1-1 . scripts 부분 설정 "dev": "webpack-dev-server --mode development", "build" : "webpack --mode produ..