목록
FRONT 서버 대표 이미지

AI-Ready 2025 홈페이지 프론트엔드 기술 문서

1. 프로젝트 개요

이 프로젝트는 2025 AI-Ready 홈페이지의 프론트엔드 서버입니다.

Node.js와 Express 프레임워크를 기반으로 구축되었으며, 서버 사이드 렌더링(SSR) 방식으로 사용자에게 웹 페이지를 제공합니다. 동적인 웹 페이지 생성을 위해 EJS 템플릿 엔진을 사용합니다.

주요 역할은 사용자의 요청에 따라 백엔드 API 서버와 통신하여 데이터를 가져온 후, EJS 템플릿에 동적으로 결합하여 완전한 HTML 페이지를 만들어 사용자에게 전달하는 것입니다.


2. AI 시대에 Node.js를 프론트엔드 기술로 선택한 이유

1년차 개발자분들이 가장 궁금해할 수 있는 "왜 많고 많은 기술 중에 Node.js를 사용했는가?"에 대한 답변입니다. 특히 AI 기술이 중요해지는 현시점에서 Node.js가 갖는 장점은 명확합니다.

가볍고 빠른 비동기(Asynchronous) I/O 기반

  • 개념: Node.js의 가장 큰 특징은 '비동기 논블로킹(Non-blocking) I/O’입니다. 예를 들어, 식당에서 한 손님의 주문(요청)을 받고 요리가 완성될 때까지 다른 손님의 주문을 받지 않는다면 ‘동기(Synchronous)’ 방식입니다. 반면, 여러 손님의 주문을 동시에 받고 요리가 완성되는 순서대로 서빙하는 것이 ‘비동기(Asynchronous)’ 방식입니다.
  • 장점: Node.js는 이 비동기 방식을 통해 API 서버로부터 데이터를 가져오거나 파일을 읽는 등의 오래 걸리는 작업을 기다리지 않고, 그 시간에 다른 사용자들의 요청을 효율적으로 처리할 수 있습니다. 이는 곧 서버의 전체적인 응답성을 높여주며, 적은 서버 자원으로도 많은 동시 접속자를 처리할 수 있게 해줍니다.

AI 시대의 프론트엔드와 Node.js

AI 시대의 웹 서비스는 단순히 정보를 보여주는 것을 넘어, 개인화된 콘텐츠를 추천하거나, 실시간으로 사용자와 상호작용(챗봇 등)하고, 대용량의 데이터를 시각화하는 등 복잡한 기능을 요구합니다.

  • AI API Gateway 역할: 프론트엔드 서버인 이 프로젝트는 사용자와 AI 백엔드 서비스 사이의 ‘중간 다리(API Gateway)’ 역할을 수행할 수 있습니다. 예를 들어, 사용자 한 명에게 맞춤형 뉴스, 추천 상품, AI 분석 데이터를 보여주기 위해 여러 종류의 AI API를 호출해야 할 수 있습니다. Node.js는 비동기 처리 능력 덕분에 이러한 다수의 API를 동시에 호출하고 응답을 효율적으로 조합하여 사용자에게 빠르게 전달하는 데 매우 유리합니다.
  • 실시간 기능 구현 용이: AI 챗봇이나 실시간 데이터 분석 대시보드와 같은 기능은 서버와 클라이언트 간의 지속적인 연결이 중요합니다. Node.js는 Socket.io, WebSocket 라이브러리를 통해 이런 실시간 양방향 통신 기능을 손쉽게 구현할 수 있습니다.
  • 데이터 스트리밍 처리: 대규모 언어 모델(LLM)이 생성하는 텍스트나 AI가 분석한 대용량 데이터는 한 번에 오는 것이 아니라 ‘스트림(Stream)’ 형태로 조각조각 전달될 수 있습니다. Node.js는 태생적으로 스트림 처리에 최적화되어 있어, 데이터를 받는 즉시 가공하여 사용자에게 점진적으로 보여주는(progressive rendering) 고급 기능을 구현하기에 적합합니다.

결론적으로, Node.js는 가볍고 빠르면서도 AI 시대가 요구하는 복잡하고 동적인 요청들을 효율적으로 처리할 수 있는 최적의 기술 스택 중 하나입니다.


3. 주요 기술 스택

  • Runtime: Node.js
  • Framework: Express.js
  • View Engine: EJS (Embedded JavaScript)
  • API Communication: Axios
  • Authentication: jsonwebtoken (JWT)
  • Logging: Winston, morgan
  • Environment Variable: dotenv, cross-env
  • Development Utility: nodemon (코드 변경 시 자동 재시작)



4. 프로젝트 설정 및 실행

사전 준비

  • Node.js (v18.x 이상 권장) 설치가 필요합니다.

1. 프로젝트 복제

git clone [저장소 URL]
cd 2025_aiready_homepage_front

2. 의존성 설치

프로젝트에 필요한 라이브러리들을 설치합니다.

npm install

3. 환경 변수 설정

프로젝트 루트 디렉토리에 있는 .env.dev 파일을 복사하여 .env 파일을 생성합니다. 그 후, 자신의 개발 환경에 맞게 파일 내의 설정값들을 수정합니다.

cp .env.dev .env

주요 환경 변수:

  • PORT: 서버가 실행될 포트 번호 (예: 3000)
  • API_URL: 통신할 백엔드 API 서버의 기본 URL
  • JWT_SECRET: JWT 토큰 생성 및 검증에 사용될 시크릿 키
  • UPLOAD_DIR: 파일 업로드 경로
  • WEB_ROOT: 업로드된 파일에 접근하기 위한 웹 경로

4. 서버 실행

  • 개발 모드 (nodemon 사용): 코드 변경 시 서버가 자동으로 재시작되어 개발이 편리합니다.

    npm run start:dev

  • 프로덕션 모드: 실제 서비스 환경에서 실행할 때 사용합니다.

    npm run start:prod

서버가 성공적으로 실행되면 터미널에 서버가 http://127.0.0.1:[PORT] 에서 실행 중입니다. 메시지가 출력됩니다.



5. 디렉토리 구조

/
├── config/           # 데이터베이스, API, 환경변수 등 각종 설정 파일
├── controllers/      # 요청에 대한 실제 비즈니스 로직 처리 (MVC의 Controller)
├── middleware/       # Express 요청/응답 사이클의 중간 처리 함수들
├── public/           # CSS, 클라이언트 JS, 이미지 등 정적 파일
├── router/           # URL 경로와 Controller를 연결하는 라우팅 설정
├── views/            # EJS 템플릿 파일 (사용자에게 보여질 화면)
├── index.js          # 애플리케이션의 시작점 (Express 서버 설정 및 실행)
├── package.json      # 프로젝트 정보 및 의존성 관리
└── hp_front.service  # systemd를 이용한 서비스 배포 설정 파일

6. 배포

이 프로젝트는 Linux 서버 환경에서 systemd를 사용하여 서비스로 등록하고 관리할 수 있습니다.

  1. hp_front.service 파일을 서버의 /etc/systemd/system/ 디렉토리로 복사합니다.
  2. WorkingDirectory와 ExecStart 경로를 실제 프로젝트 경로에 맞게 수정합니다.
  3. 아래 명령어를 순서대로 실행하여 서비스를 등록하고 시작합니다.
# systemd에 서비스 파일 변경사항을 알림
sudo systemctl daemon-reload

# 서비스 시작
sudo systemctl start hp_front

# 부팅 시 자동으로 서비스 시작하도록 설정
sudo systemctl enable hp_front

# 서비스 상태 확인
sudo systemctl status hp_front

#FRONT #nodeJs #Asynch