[23.10.06] 45일차
React를 활용한 SPA (Single Page Application)
<<진도>>
Front-end
- [React]
- 모듈 module (외부 모듈 export / import)
- node.js
- npm 명령어: node package manager
- Webpack
- 배포용 프로덕션
<<오늘의 팁>>
- powershell 터미널에서 위 명령어들 지우기 : clear
- cf) React native는 모바일 앱관련 프레임워크
* 리액트 문법 module모듈 (export / import)
- 02_module 폴더
** git / github 원격 저장소 – 인증 문제로 접근이 안되는 경우
다른 사용자의 정보가 있다면 지우고 다시 인증연결이 필요하다.
** 새로운 React 앱 만들기
기존 라이브러리 링크를 걸던 js, babel은 개발용
배포용 (= 프로덕션)의 코드가 따로있다.
매번 라이브러리 링크형태로 거는 것이 아닌
최신 JavaScript 버전의 설치 명령코드가 따로있다.
(node.js의 명령어로 node.js가 설치되어 있어야 한다.)
** [ Node.js ]
: JavaScript 언어기반 확장성 있는 네트워크(서버와 클라이언트) 애플리케이션 개발에 사용되는 소프트웨어 플랫폼
설치 후 터미널에서 버전확인
최초 생성
node.js는 npm으로 시작하는 명령어
* npm start
새로운 서버가 생성
* ctrl+c (Y/N) : 서버 종료
- package.json : app 기본 정보와 패키지의 정보가 키 : 값 … 형태로 존재
: + start 등의 실행 명령어가 존재하므로 padckage가 없으면 react 실행되지 않는다.
: JavaScript의 버전이나 파일 관리를 할 수 있다.
- package-lock.json : 파일 정보와 노드 모듈에 대한 정보가 온다.
: 많은 라이브러리 정보도 담겨있다.
- gitignore : git 통해 올릴 때 제외할것들을 넣는 곳
** webpack의 resource 리소스
** node-modules과 패키지에 라이브러리들 모두 있으므로 기존 코드에 링크코드들은 필요없다!
** github에 my-app 전체를 올리기
add로 추가하는데 오류는 운영체제 줄 인식 방식 때문에
오류설정을 해줘야한다.
git config --global core.autocrlf true
- 설정 후 commit, push로 원격저장소에 저장
***** 하지만 위에 올린 my-app은 개발용이다.
배포할때는 배포용/프로덕션으로 최적의 상태로 만들어서 올려야하는데
<node.js> 명령어 : npm run build 으로
개발용을 배포용에 맞게 통합/제외하고 배포에 최적화된 상태로 변환
-> build 폴더에 저장
++) github에서는 배포용을 쉽게 배포할 수 있게 하는 라이브러리를 제공하고 있다!
1. github page 라이브러리 설치 후 (package-lock에 추가)
2. package.json에 “hompage”:“”, 추가
3. github에 배포
터미널에서 npm install gh-pages 로 설치
package-lock.json ㅡ packages ㅡ dependencies에 설치됨
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"gh-pages": "^6.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
package.json의 “homepage”: “”, 에
- github page주소를 기입
- scripts에 “deploy” 추가
{
"homepage": "https://cpcpcool.github.io/app/",
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"gh-pages": "^6.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
},
설치 추가 후, 다시 빌드 명령어(npm run build) 후,
npm run deploy 명령어 입력 시
add, push 되어 github gh-page탭에 올라감!
Branch를 main -> gh-pages로 바꾸면 깃허브 페이지에 반영
*** [수동으로 프로덕션 배포용 만들기]
기존 index.html의 컴포넌트들을 모듈별로 분리 App.js에 통합
=====================================================================
1. React 기본문법
2. Node.js: 웹팩 -> 개발(로컬)
3. Github : 배포(원격)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 실습과제 >>>>>>>>>>>>>>>>>>>>>>>>>>>>
[p231006 폴더에서 작업]
<< 로컬 >>
1. 앱 생성 : homework -> 간단한 앱 작성(코드)
2. 로컬 : git init (git 폴더 생성)
<< 원격 >>
3. git hub : homework repository 추가
<< 로컬 >>
4. build -> 배포
(pages 설치필요)
----> 과제폴더에 업로드 homework폴더 압축, 폴더에 구글문서 만들어서 배포 github url넣어주기
