Premium Contents

​

최근 node.js를 활용하면서 json-server란 기능으로 간단한 CRUD까지 구현해 보았다.

아직 웹퍼블리셔라는 직업군으로 있기때문에, 프론트엔드 개발에 관련된 기능은 모두 처음접해보는 기술들이 많았다.

작업을 통해 json으로 간단한 db의 기능을 만들 수 있는 점이 나에게는 무척 흥미로웠다.

​

현재 프로젝트와 같은 환경에서 (보안상 인터넷을 이용하지 못하는 실무 프로젝트)에서 json-server를 이용하면 별도의 db 프로그램이 없어도 간단한 To-do 리스트와 협업 툴 정도는 구현할 수 있지 않을까 하는 아이디어가 떠올랐다.

​

아직은 오프라인에서는 구현해 보지 못했기 때문에 추후 다루어보기로하고, 이번 챕터에서는 express 웹서버와 json-server로 CRUD까지 구현해 본 내용까지 정리해 보려고 한다.

​

​

이번 챕터는 글 4개로 아래와 같이 정리해보려고 한다.

​

1. Node.js의 Express로 웹 서버 만들기

2. 웹 서버의 라우팅 처리 방법

3. Express에서 에러 처리와 정적 파일 제공하는 방법

4. Json-server 구축 및 활용(방명록 만들기 소스제공)

​

​

작업에 들어가기 전에 간단하게 Node.js를 사용하는 이유에 대해서 알아보자.

장점을 간단히 요약하면 다음과 같다.

​

• 자바스크립트 개발자가 웹 서버 개발까지 가능하다.

• 프런트엔드와 백엔드 개발을 동시에 할 수 있는 풀스택 개발 능력을 갖추게 된다.

• 빠른 웹 애플리케이션 개발이 가능하기 때문에 유지 보수 비용 절감 즉, 개발 생산성이 향상된다.

​

Node.js에서 웹 애플리케이션 혹은 API 서버를 구축하는데 가장 많이 사용되는 대표적인 프레임워크이다.

​

본격적으로 웹서버를 만들어보자.

먼저 에디터 프로그램 (VSCode) 설치가 되어있고, Node.js 가 설치되어 있지 않다면, 설치해 주자.

​

​

1. 먼저 테스트할 프로젝트 폴더를 생성해 준다. VSCode를 실행하여 터미널을 켜고 해당 폴더에 접근하여 세팅 준비를 해준다.

​

2. VSCode의 터미널에서 다음 명령어를 실행하여 package.json 파일을 만들어준다.

​

명령어를 입력하면 필요한 정보를 입력해 주고 마지막에 yes를 입력하면 package.json 파일이 생성된 것을 볼 수 있다. 각 항목의 내용은 아래 표를 참조하자.

​

• Package.json 파일은 npm 을 통해 추가하는 패키지들의 버전과 의존성 정보를 관리하는 파일이다.

​

▶ 참고 : 일일이 정보 입력이 귀찮다면 다음 명령어를 입력해 주면 단계를 건너뛸 수 있다.

​

​

​

3. 다음 명령어로 Express를 설치해 준다.

​

• Express 패키지가 설치되면 프로젝트 폴더에 node_modules라는 폴더가 생성되며, 자동으로 express 패키지가 참조하고 있는 다른 npm 패키지들이 설치된다. (패키지 의존성이라 부른다.)

​

​

4. 루트 경로에 app.js 파일을 만들어 다음 코드를 작성해 준다.

​

​

5. 다음 명령어를 통해 서버를 실행해 보자.

​

6. 브라우저를 실행하고 http://localhost:3000을 입력하면 다음과 같은 화면이 나오면 성공이다!

​

이번 챕터의 첫번째 목표를 달성했다. 글이 길어서 그렇지 막상 몇번 따라해보면 순식간에 이루어지는 셋팅이다. 프로젝트를 하다보면 자연스럽게 손에익을 것이다. 다음 글에서는 라우팅에 대해서 알아보자.

​

​

• 웹 서버의 라우팅 처리 방법

• Express에서 에러 처리와 정적 파일 제공하는 방법

• Json-server 구축 및 활용(방명록 만들기 소스제공)