1-2강 강의 자료

1강
- NODE.JS 설치, CREATE REACT APP 설치, NODE EXPRESS FRAMWORK설치
- 프로젝트 구조 및 설정 파일 분석
- React, Node 서버 구동
- 프록시, 포트 설정
- GET 방식, POST 방식으로 REACT 서버에서 NODE 서버의 JSON 데이터를 가져온다.

 

1) NODE.JS 설치

 

https://nodejs.org

Node.js — 어디서든 JavaScript를 실행하세요

 

위 링크에 접속해 Nods.js LTS(long-term support) 버전을 설치한다.

LTS란 기능 업데이트를 줄이고, 보안 업데이트의 지원 기간을 늘린 버전이다.

또한 어느정도 기간을 두고 이미 많은 사람들이 사용했기 때문에

버그 등의 이슈도 증명이 된 상태이다.

 

2025.01.14 기준 LTS는 v22.13.0(최신 버전은 23.6.0)

 

node.js 공색 홈페이지 lts 다운로드

 

2. 설치된 Node.js, npm 버전 확인

 

설치 완료 후, 윈도우의 경우 CMD 창을 열어

node -v 명령어로 설치된 node.js 버전을

npm -v 명령어로 설치된 npm 버전을 확인한다.

 

npm(Node Package Mananger) :  개발에 필요한 패키지들을 쉽고 간단하게, 설치할 수 있게 도와주는 패키지 매니저.

yarn : 페이스북에서 만든 패키지 매니저로, npm과 기본 기능은 동일.

         npm에서 불필요한 패키지들을 정리하고 가볍게 만든 것

설치된 node, npm 버전 확인

 

3. create-react-app 템플릿(프레임워크)로 프로젝트 생성

 

C드라이브 > project2025 > class001 폴더를 생성한다.

이제부터 class001 폴더를 워크스페이스라고 부른다.

create-react-app은 CRA로 줄여부른다.

빈 프로젝트 폴더

 

npx 명령어로 create-react-app으로 client라는 프로젝트 생성(오류 발생 무시)

npm이 패키지를 설치 후 사용했다면, npx는 설치 없이 실행해 사용 가능하다.

 

npm = Package Manager (관리)
npx = Package Runner (실행)

 

npx 명령어 실행

 

client 프로젝트와 하위 경로 생성

4. npm start 명령어로 react 서버 구동

 

react 서버 구동을 위해, react 프로젝트 경로인 client 폴더로 디렉터리 이동 [cd client]

[npm start] 명령어로 서버 실행. web-vitals라는 패키지 오류 발생

 

web-vitals 패키지 재설치 후, 서버 시작하니 오류 없이 동작

 

크롬에서 실행된 react 서버 메인 화면

 

위에 화면에 보이고 있는 소스는 App.js에 작성된 코드이다.

 

5. express 프레임워크 설치, 프로젝트 생성

 

CMD 창에서 워크스페이스 class001 경로로 이동한다. [cd C:\project2025\class001]

npm 명령어로 express-gernerator를 설치한다 [npm i -g express-generator]

여기서 i는 install의 약자, -g는 global의 약자이다.

global 옵션을 추가하면, 현재 경로 뿐만 아니라 다른 위치에서도 설치된 패키지를 사용할 수 있다.(운영체제에 설치됨)

 

node.js에서는 express라는 프레임 워크를 사용해, 복잡한 서버 세팅 없이 간편하게 백엔드 서버를 구동할 수 있다.

express-generator는 express 프레임워크 환경을 간단하게 구축해주는 또 다른 패키지이다.

초기 필수적인 프레임워크 구조를 잡아주기 때문에, 별 다른 작업없이 서버를 띄울 수 있다.

 

create-react-app과 달리 프로젝트를 생성해도 node_modules 폴더가 생성되지 않는다.

node_modules에는 서버가 구동되는데 필요한, 실제 라이브러리 파일들이 설치된다.

 

node 프로젝트 경로에서 [npm install] 명령어를 실행하면

npm이 package.json 소스를 읽어, 필요한 라이브러리 리스트를 설치한다.

 

node_modules 폴더가 생성되었다.

 

node 프로젝트 경로에서 [npm start] 명령어를 실행하면, node 서버가 구동된다.

 

 

create-react-app과 달리 express 서버는 자동으로 브라우저를 열어주지는 않는다.

사용할 브라우저에 [locallhost:3000]을 입력해야 express 홈화면에 접속할 수 있다.

 

* 주의 : create-react-app과 express 서버 모두 초기 포트가 3000번이다.

한 운영체제에서는 중복 포트로 프로세스가 실행될 수 없다.

만약 cra 서버가 켜져있다면, 종료해야 express 서버를 띄울 수 있다.

 

5. Visual Studio Code 설치

 

https://code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

 

위 링크에 접속해 vscode 프로그램을 다운로드&설치한다.

IDE로 다른 툴을 사용해도 OK

 

통합 개발 환경(Integrated Development Environment, IDE)
: 코딩, 디버깅, 컴파일 등 프로그래밍 개발 작업을 할 수 있는 툴

 

6. 프로젝트 구조 및 설정 파일 분석

 

VSCODE에서 워크스페이스 경로(C:\project2025\class001)를 열어

CRA 프로젝트 폴더(client)와 Express 프로젝트 폴더(project_tmp)의 하위 폴더 및 파일을 확인한다.

React와 Node 프로젝트 모두 npm으로 패키지를 설치, 관리하기 때문에

비슷한 파일 구조를 갖는다. package.json 파일과 node_modules 폴더는 모두 존재한다.

 

package.json 소스에 프로젝트에 필요한 라이브라리 리스트가 적혀있고

[npm install] 명령어를 실행하면 npm이 리스트를 읽어 node_modules 폴더에 필요한 패키지 프로그램을 설치한다.

express 하위 폴더

CRA 하위 폴더

react 프로젝트의 package.json 소스를 보면 json 데이터 형식으로

key가 dependencies와 scripts인 리스트가 있다.

dependencies에 패키지명과 버전이 적혀있고, 실제 패키지 프로그램은 node_modules 폴더안에 있다.

 

scripts에는 명령어를 정의할 수 있는데, 

CMD창에 [npm start]를 입력해 서버를 구동했을 때도

이곳에 작성된 start명령어가 react-scripts 패키지의 start 명령어를 대신 실행해

서버가 구동되었다.

 

node 프로젝트의 구조도 react와 거의 동일하다.

dependencies에 사용중인 패키지 리스트가 적혀있고

[npm start] 명령어를 실행하면, node가 /bin 폴더의 www소스를 참조해

서버를 구동한다.

 

 

다시 react 프로젝트로 돌아와서

react 서버가 구동될 때, /client/src의 index.js 소스를 가장 먼저 읽어 실행한다.

CRA 서버의 홈화면은 App.js에 작성되어 있는데,

index.js에서 App.js 파일을 import해서 ReactDOM으로 렌더링 한다.

 

React에서는 화면 구성 요소들을 component라는 단위로 사용.
홈 화면을 나타내는 App컴포넌트를 사용하기 위해, 상대 경로(./)로 불러온다(import).

렌더링 : 화면 구성 요소들이 포함된 컴포넌트를 화면에 그려주는 것

화면 구성 요소 : html, css, javascript으로 웹 페이지의 모양, 동작을 구성

 

 

App.js 컴포넌트를 보면 App() 함수가 정의 되어있다.

App()함수가 리턴하는 html 코드가 화면에 나타난다.

 

html 적용되는 스타일은 App.css에 작성되어있는데, 상대경로로 참조되어 있다.

 

React에서 사용하는 컴포넌트 종류는 크게 2가지가 있는데,
클래스형 컴포넌트와, 함수형 컴포넌트이다. 

일반 함수를 선언하는 것과 같은 문법으로, 컴포넌트를 선언
: App 함수가 = App 컴포넌트

실무에서는 함수형 컴포넌트를 많이 사용한다.(여러가지 이유에서)

 

node 프로젝트로 돌아와서,

위에 package.json에서 start 명령어에 연결된 소스가 www였다.

 

react에서 import 문법으로 외부 소스나 패키지를 불러왔다면

express에서는 require 문법을 사용한다. 둘 다 사용 목적은 동일하다.

상대경로로 app.js를 불러와 port 3000번으로 서버를 구동한다.

 

프레임워크에서 기본으로 제공해주는 normalizePort 이런 함수들은 굳이 외울 필요는 없다.

 

www에서 불러온 app.js 소스를 보면

Router 설정이 되어있다.

 

라우터란 호출 Url 경로에 따라 매칭된 소스 로직을 연결&실행하는 것이다.

 

app.use(호출 URL 경로, 실행 소스 경로) 처럼 사용하는데

루트(/)경로(localhost:3000/)를 호출하면, routes 폴더의 index.js 소스를

/users 경로(localhost:3000/users) 를 호출하면, routes 폴더의 users.js 소스를 실행한다.

 

localhost:3000/을 호출하면 상대경로 /routes/index.js 소스를 실행한다.

get은 http 메소드 중 get 함수를 의미하고, req는 request, res는 response이다.

get메소드로 호출이 들어오면 response에 render함수로 화면 경로와 변수를 담아 보낸다.

index라는 프론트엔드 화면 파일에

title변수에 Express값을 담아 전달한다.

 

express에서는 jade라는 HTML페이지 템플릿 엔진 모듈을 사용하는데

(수업에서는 express를 백엔드 서버로만 사용할 것이라서 jade를 사용하지 않는다)

index.js에서 render함수가 전달한 'index'가 index.jade이고

title담아 전달한 Express라는 텍스트가 html h1태그와 p태그에 할당되어 화면에 노출된다.

 

 

7. Express 프로젝트의 프론트엔드 관련 파일들

 

수업에서는 express는 백엔드 서버, CRA는 프론트엔드 서버로 사용할 것이기 때문에

express 프로젝트 폴더중 public, views 하위 폴더/파일 들은 사용하지 않는다.

다음 예제 소스에서는 해당 폴더는 삭제된다.