React
- Open-source javascript framework
- Javascript 기반의 라이브러리
ECMA Script 2015 (ES6) 이상의 문법만을 지원함- SPA (Single Page Application) 개발 라이브러리
SPA vs MPA
MPA (Multi Page Application)
- Web Application (WebApp) 이 여러 개의 페이지로 구성된 것
- 화면의 요청이 있을 때 마다(URL) 새로운 페이지를 응답한다.
- 페이지를 갱신 할 때마다 불필요한 Data-Load가 발생한다.
SPA (Single Page Application)
- WebApp이 하나의 페이지로만 구성된 것.
- 화면의 요청이 있을 때 마다(URL) 데이터만 바뀌는 컴포넌트만 갱신
- 데이터가 변경된 컴포넌트만 갱신하기에 필요한 만큼의 Data-Load를 수행한다.
- 단, 렌더링을 클라이언트에서 수행하기에 데이터와 컴포넌트가 매우 많을 경우, 초기 렌더링의 시간이 많이 소요된다.
개발환경 세팅
- node.js 설치 (https://nodejs.org/)
Javascript 기반의 서버 프로그램
nodejs 기반의 npm Repository를 활용하기 위해 설치 (React는 npm에 등록된 라이브러리)- VSCode 설치 (https://code.visualstudio.com/)
여러 언어들을 지원하는 경량 개발 툴
플러그인을 통해 다양하게 사용이 가능하다.- Reactjs code snippets 플러그인 설치
Reactjs Content Assist를 지원
ESLint 플러그인 설치 - Javascript 문법 오류를 검출함.
Prettier 플러그인 설치 - 코드를 자동으로 정렬함
크롬 브라우저 React Developer Tools 플러그인 설치 - Reactjs debug 지원
React 애플리케이션 생성
- Reactjs Project 생성
Command 창에서 아래와 같이 입력 / npx create-react-app 프로젝트명
> cd c:\
> mkdir react-projects
> cd react-projects
> npx create-react-app hello-react
React 실행시키기
터미널 => 새 터미널
터미널이 “cmd”로 표시가 안된다면
1. Ctrl + Shift + P => “터미널” 검색
2. “터미널 : 기본프로필 선택“ 클릭
3. “Command Prompt” 선택
터미널에 npm run start 명령어 입력 후 엔터
(npm run은 package.json에 작성된 “scripts” 항목을 실행하는 명령어)
리엑트 전용 서버 연결
3000 포트로 연결되었다.
필요없는 파일 삭제
실수로 node_modules를 지웠을 경우
- node_modules는 React App의 Dependency Library를 모아둔 폴더
만약 삭제한다면 React App은 정상 실행될 수 없음.
실수로 지웠다면, 터미널에서 “npm install” 명령어를 실행.- React Source를 Git, SVN 등에 공유하려면 node_modules를 제거해야한다.
node_modules의 용량이 매우 커, 공유할 경우 시간이 오래걸리기 때문.
Root Component : 모든 파일의 부모 Component 절대 삭제 금지!
중요한 js 파일
라이브러리에 관련된 dependenct 들을 관리.
spring에서 pom.xml과 같음.
App 실행 / 빌드
정말 중요한 파일!
프로젝트 구성
