고정 헤더 영역
상세 컨텐츠
본문
* React 사용에 앞서 NodeJS가 설치되어 있어야 한다.
설치는 https://nodejs.org/en 에서 안정적인 LTS 버전으로 설치하자.
1. New Project - JavaScript - React App - Next
2. 프로젝트명과 경로 입력 후 Next (소문자만 가능하며, 숫자 및 하이픈이 있을 경우오류를 띄운다. 전에는 됐었는데....)
알파벳만 입력해서 프로젝트를 만든다!
프로젝트 경로에 해당하는 폴더가 없을 경우 자동으로 생성해준다.
3. 프로젝트가 생성되면 디버그콘솔창에서 리액트 프로젝트가 생성되는것을 볼 수 있다 (은근 오래걸린다)
4. 콘솔창에 Done 이 뜨면 완료!
5. 프로젝트 실행은 우측 상단에 npm start 옆 재생 버튼을 누르거나, 터미널창에서 npm run start 를 입력하면 접속 가능하다.
기본포트는 3000 으로 되어 있다.
package.json 파일 scripts - start 값 앞부분에 "set PORT=변경할포트 &&" 부분을 추가해주면 변경 가능하다.
6. 접속된 화면이다.
서버 종료는 상단 도구표시줄에서 정지버튼을 누르거나, 터미널에서 Ctrl + C 키를 눌러 종료 가능하다.
* 생성된 프로젝트의 기본 구조는 이렇게 생겼다
| React 프로젝트 | |||
| src | - 메인 소스 경로(Component 파일들의 관리 등) | ||
| App.js | - Component 파일들을 모아 출력 - 함수형 (하나의 기능), 클래스형 (여러개의 기능) 이 될 수 있음 |
||
| ↓ | |||
| index.js | - 함수, 클래스들을 호출. - 루트 컴포넌트(App.js)를 DOM에 마운팅 |
||
| public | ↓ | - css, js에 해당하는 파일들 경로 | |
| index.html | - 루트 태그를 통해 화면에 출력 | ||
| package.json | - 외부 라이브러리를 관리 |
* package.json 파일에서는 프로젝트에 필요한 npm 모듈 (외부 라이브러리)를 추가 후 설치가 가능하며,
인텔리제이에서는 자동완성을 너무나도 잘 지원해주기 때문에 몇글자만 입력하면 알아서 쫙-!
최신버전도 알아서 쫙-! 자동완성이 가능하다.
"dependencies": {} 부분에 이어서 추가할 경우 , 로 구분하여 입력해주면 된다.
* 필요한 모듈 및 버전은 https://www.npmjs.com 에서 최신버전 확인, 설치 명령어를 확인 할 수 있다.
* 내가 사용했던 Node 라이브러리들
react (기본제공) : React는 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리
react-dom (기본제공) : React의 DOM 및 서버 렌더러에 대한 진입점 역할
react-scripts (기본제공) : React 앱 생성을위한 구성 및 스크립트
express : Node의 웹 프레임워크
xml2js : 간단한 XML to JavaScript 객체 변환기
mongodb : Node.js의 공식 MongoDB 드라이버
axios : 브라우저 및 node.js에 대한 약속 기반 HTTP 클라이언트 (Promise에 기반한 async/await문법을 사용하여 XHR요청을 쉽게 할 수 있다)
request : HTTP 네트워크 라이브러리
socket.io : Node.js 실시간 프레임 워크 서버
socket.io-client : socket.io 클라이언트
react-router : React에 대한 Path 설정
react-router-dom : React Router에 대한 DOM 바인딩
react-redux : React 에서 Redux 패턴 사용
jquery : DOM 작업을위한 JavaScript 라이브러리
* 리액트 기본 문법등은 공식 사이트에서 한글도 친절하게 지원되니 참고하자.
댓글 영역