1. 리액트란?
- 페이스북에서 만든 라이브러리
- front 언어들이 어려워지고 복잡해진다.
- 복잡해진 코드를 밖으로 빼서 정리하고 싶어진다.
- 복잡한 코드를 정리해서 다시 전송한다.
- 사용자 정의 component 기능
1) 가독성이 좋다.
2) 재사용성이 높아진다.
3) 유지보수가 훨씬 편리해진다.
2. 오리엔테이션
필요한 부분, 쉬운 부분부터 시작한다.
1) 개발환경 세팅 : coding
2) 실행 :run
3) 디플로이 : deploy
3. 개발환경 세팅
4. npm을 이용해서 create-react-app 설치
- node.js설치
- npm 설치
- react 설치 : sudo npm install -g create-react-app
5. create react app을 이용해서 개발환경 만들기
- react-app이라는 폴더를 생성
- 폴더에 react개발환경 구축
- 터미널에서 폴더 위치로 이동
- 명령어 : create-react-app .
6. 샘플 웹앱 실행
- react-app폴더로 위치 이동
- 명령어: npm run start
- 리액트 개발환경이 실행된다.
- 실행을 종료하는 명령어: ctrl+c
7. JS 코딩하는 법
- react에서 JS 코드를 수정하는 과정
- react component를 사용해서 코드를 사용하고 수정
- public 디렉토리 안에 있는 index.html 파일의 id가 root인 div에 컴포넌트를 적어주면 화면에 렌더가 된다.
- src 디렉토리 안에 있는 파일들을 수정해서 컴포넌트를 수정하고 생성
- src 디렉토리에 대부분의 파일들을 보관
- app.js : 'app'component가 어떤 기능을 가지고 있는지 설정
- index.js : app.js에서 만든 컴포넌트를 import 해서 'html.div.id:root'에 연결시켜준다.
- index.html : app component의 기능을 적용해 화면에 보여준다.
8. CSS 코딩하는 법
- import된 경로에 맞는 css파일을 수정해주면 된다.
- 방법이 딱히 다르지 않다.
9. 배포하는 법
- 개발자 모드로 리액트를 만들면 용량이 무겁다.
- 사용자들에게 보여주는 리액트는 production mode(build)할 때는 build 디렉토리에서 작업해야한다.
- 빌드할때는 'npm run build' 명령어 사용
- build 모드에서는 불필요한 데이터를 없애고 압축한 상태
- 실제로 서비스할 때는 'build'안에 있는 파일을 사용하면 된다.
- 웹서버의 document.root 최상위 디렉토리에다가 build파일들을 위치하면 서비스 환경 완료
- 'serve'를 통해서 서버환경 구축, 명령어 : npm install -g serve
- 'npx serve -s build' 명령어를 사용하면 서비스환경에서 서버가 오픈