[ Cafe24 서버 호스팅 ] #3: Node.js + Angular 프로젝트 생성 및 개발서버 실행까지!

✨ 목표

로컬 PC에서 Angular(프론트엔드) + Node.js/Express(백엔드) 프로젝트를 구성하고,
개발 서버가 정상적으로 작동하는지 확인합니다.

 

📦 주요 작업 요약

1. 프로젝트 디렉토리 구조 구성
2. Node.js 프로젝트 초기화 (npm init)
3. Angular 프로젝트 생성 (ng new)
4. Express 설치 및 간단한 서버 실행
5. Angular 개발 서버 실행 및 브라우저 확인

---

✔️ 1. 프로젝트 폴더(디렉터리) 구조 만들기

C:\
└── myPrj\
    ├── server\      ← Node.js(Express) 백엔드
    └── client\      ← Angular 프론트엔드 (ng new 시 생성됨)

 

1️⃣ 원하는 경로에 프로젝트 폴더 생성

 

이 게시글에서는 C드라이브에 프로젝트 폴더를 생성하겠습니다.

C:\myPrj

 

2️⃣ 프로젝트 폴더 안에 서버(Backend) 폴더 생성

 

myPrj 폴더 안에, 서버(Backend)를 각각 담당할 폴더를 생성해 줍니다.

C:\myPrj\server

 

3️⃣ VSCode 실행 → 파일 > 폴더 열기 → C:\myPrj 선택

• 클라이언트와 서버 폴더가 모두 탐색기에서 보이게 됨

---

✔️ 2. Node.js 백엔드 프로젝트 초기화

server 폴더에서 npm init 명령어를 실행하여 Node.js 프로젝트를 초기화합니다.

cd C:\myPrj\server
npm init -y

-y 옵션은 기본 설정으로 package.json 을 자동 생성합니다.

 

⭐️ server 폴더 경로 가는 방법  ⭐️

1. server 폴더 마우스 우클릭, 통합 터미널에서 열기

2. 터미널(crtl + `)을 열어 해당 경로 찾아가기

---

✔️ 3. Angular 프로젝트 생성

1️⃣ Angular CLI 설치 여부 확인 ( myPrj폴더 )

npm list -g @angular/cli

 

없다면 설치

npm install -g @angular/cli

 

2️⃣ Angular 프로젝트 생성

 

myPrj 폴더에서 ng new 명령어로 클라이언트(Frontend)를 담당할 Angular 프로젝트를 생성합니다.

cd C:\myPrj
ng new client
ng new client --no-standalone

 

⭐️ ng new 폴더명 : Angular 17 이상 기준으로, 기본적으로 standalone component 기반 프로젝트 생성

⭐️ ng new 폴더명 --no-standalone : 전통적인 NgModules 방식으로 구성된 프로젝트 생성

이번 프로젝트에서는 'ng new client --no-standalone'로 진행
ng new 실행 시, 나오는 질문은 대부분 Enter, 스타일은 CSS, SSR/SSG는 No 선택.

디렉터리 현재 구성 상황

 

📌  Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?

 

단순한 Angular 앱 또는 CSR 중심의 프로젝트라면 No를 선택해도 충분하며, SSR/SSG는 SEO가 필요할 때에만 사용하는 것이 일반적입니다.

상황	선택 추천
일반적인 SPA로 개발 (관리 시스템, 내부 툴 등)	❌ No (필요 없음)
검색 엔진 최적화(SEO)가 중요한 웹사이트 (블로그, 쇼핑몰 등)	✅ Yes (SSR/SSG 유리)
정적 페이지를 미리 만들어서 성능을 높이고 싶을 때	✅ Yes
백엔드나 서버 환경 설정이 복잡한 게 싫다면	❌ No

---

✔️ 4. Express 설치 및 서버 실행 테스트

1️⃣ server 폴더로 이동 후 Express 설치

cd C:\myPrj\server
npm install express

참고: npm i는 npm install의 축약형으로, 둘 다 같은 명령어입니다.

express 설치 모습

 

2️⃣ server.js 파일 생성 후 아래 코드 작성

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello from Cafe24 Node.js Server!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

 

3️⃣ 서버 실행

 

이제 server.js 파일을 실행하여 서버가 정상적으로 작동하는지 확인해 보겠습니다.

터미널에서 다음 명령어를 입력합니다.

C:\myPrj\server
node server.js

 

서버가 정상적으로 실행되면, 아래와 같은 메시지가 출력됩니다:

Server is running on port 3000

 

4️⃣ 브라우저 접속 확인

 

이제 브라우저를 열고, http://localhost:3000 주소로 접속합니다.
만약 "Hello from Cafe24 Node.js Server!" 메시지가 표시된다면, 서버 실행이 성공적으로 완료

---

✔️ 5. Angular 개발 서버 실행

⭐️ 클라이언트 디렉터리에서 Angular 프로젝트를 개발 모드로 실행하고, 브라우저에서 정상적으로 열리는지 확인합니다.

 

1️⃣ client 폴더로 이동

cd C:\myPrj\client

 

2️⃣ Angular 개발 서버 실행

ng serve

 

아래와 같은 메시지가 나오면 정상적으로 실행되고 있는 것입니다:

또는

✔ Compiled successfully.
✔ Local: http://localhost:4200/

 

⚠️ 만약 ng serve 명령어가 동작하지 않는다면 Angular CLI가 설치되어 있는지 확인하세요:

npm list -g @angular/cli
없다면 설치:
npm install -g @angular/cli

 

3️⃣ 브라우저 접속 확인

 

브라우저를 열고 주소창에 다음 주소를 입력합니다:

http://localhost:4200

 

Angular 기본 화면이 보이면 개발 서버가 성공적으로 실행된 것입니다.

🎉 완료

여기까지 완료되면, 프론트엔드(Angular)와 백엔드(Node.js/Express) 양쪽 서버가 모두 로컬에서 실행 가능한 상태.