꿈꾸는 개발자 박혜웅

React 개발환경

1. React?

React는 자바스크립트 라이브러리로 오직 View만 신경쓰는 라이브러리 입니다.

React는 DOM을 복사해서 Virtual DOM을 사용합니다.

변화가 생겼을 때 페이지 전체를 렌더링 하지않고, 변화한 부분만 실제 DOM에 적용하는 방식을 사용합니다. 

2. 개발 환경

1) Node.js / npm 설치

Babel, Webpack등을 사용하기 위해 NodeJS와 npm 설치가 필요합니다.

아래 URL에서 다운 가능합니다.

https://nodejs.org/ko/download/

설치를 완료하고 node -v 명령과 npm-v 명령으로 

노드와 npm 버전 확인이 가능합니다.

2) yarn 설치

npm은 의존하는 라이브러리 개수가 많으면 속도가 매우 저하 되기때문에 yarn 도구도 설치해줍니다.

아래 URL에서 windows용 다운 가능합니다.

https://yarnpkg.com/en/docs/install#windows-stable

yarn 역시 yarn -v명령으로 버전확인이 가능합니다.

해당 명령이 실행되지 않을 경우

yarn이 설치되어있는 경로 \bin폴더 까지 환경변수를 잡아주시면 됩니다.

3) VSCODE 설치

Visual Studio Code는 에디터 이지만, 

javascript 외에도 확장 프로그램을 설치하면 

C, Java, Spring boot 등 다양한 언어도 사용 가능해서 간편합니다.

아래 URL에서 설치 다운 가능 합니다.

https://code.visualstudio.com/download

3. 테스트 프로젝트 생성

1) create-react-app 도구 설치

npm, yarn 도구 둘다 설치 가능합니다.

저는 yarn을 이용해서 전역으로  설치했습니다.

터미널에 다음과 같이 입력해서 설치합니다.

> yarn global add create-react-app

2) 프로젝트 생성

create-react-app 도구를 이용해서 프로젝트를 생성합니다.

터미널에 다음과 같이 입력해서 설치합니다.

> create-react-app 프로젝트 명

프로젝트명으로 대문자는 사용이 불가합니다.

작업 환경에 따라서 1분~3분정도 소요됩니다.

3) 로컬 서버 실행

프로젝트가 생성되었으면, 해당 프로젝트로 이동 후

터미널창에 아래와 같이 입력하면 빌드후 로컬 서버가 실행됩니다.

로컬서버는 기본으로 3000번으로 열립니다.

파일이 수정될때마다 자동으로 다시 빌드하고 페이지를 리로드합니다.

> yarn start

참고 : 리액트를 다루는 기술(저:VELOPERT)

Express를 이용한 NodeJS 웹서버 구축

안녕하세요 오늘은 요새 공부중인 NodeJS로 웹서버를 구축 해 보겠습니다.

짧은 시간에 웹서버를 구축할 수 있다는 소문을 듣고

로컬 웹 서버 구축을 해보게 되었습니다.

가장 먼저 아래 명령을 이용해서 express-generator 패키지를 설치합니다.

express프레임워크 중에서 express-generator 패키지가 

기본 프로젝트 구조까지 잡아주는 패키지라고 합니다.

npm i -g express-generator

패키지를 설치하신 뒤에는 원하는 경로로 이동한뒤에 

아래와 같은 명령으로 프로젝트를 생성합니다.

express 프로젝트 이름 --view=템플릿 엔진

프로젝트를 생성 후 이동해보면 기본 구조대로 

프로젝트가 생성되어 있습니다.

해당 프로젝트의 경로로 이동한 뒤 

아래와 같은 명령을 입력합니다.

npm i

package-lock.json 파일이 생성되고, 필요한 패키지들을 추가 해줍니다.

다음과 같이 npm start 명령을 실행하면

기본으로 설정된 웹서버가 구동이 됩니다.

아래와 같이 방화벽 경고 창이 뜨는데 

엑세스 허용 해주시면 됩니다.

http://localhost:3000 으로 접속해보면

아래와 같은 테스트 페이지가 뜨는걸 확인할 수 있습니다.

웹서버에 접속하면 터미널에 Web Access 로그가 찍히는 것도 확인 할 수 있습니다.

마지막으로 자동으로 생성된 프로젝트 구조입니다.

구조에 대한 상세한 설명은 다음 포스팅에서 이어서 하도록 하겠습니다.