Sign in Subscribe
dev

직접 만들어보는 To Do List - Express.js + React.js + SQLite (1)

Express.js와 React.js를 이용한 To do list를 연재합니다. 프로젝트 폴더 생성 및 초기 설정부터 공부한 내용들을 정리했습니다. 백엔드 경험이 없는 입문자 입장에서 많은 설명을 덜어내고 바로 실행해볼 수 있는 것들 위주로 정리해보았습니다.

직접 만들어보는 To Do List - Express.js + React.js + SQLite (1)
Photo by TERRA / Unsplash
  1. Express.js 설치
  2. Express.js - Route 설정
  3. React 설치
  4. Backend API
  5. Frontend - React

초기설정

먼저 프로젝트 폴더를 만들겠습니다.

mkdir todo_list
cd todo_list

앞으로 우리가 작성해야 할 소스는 todo_list 폴더 안에서 작성할겁니다.

일단 npm 라이브러리를 설치하기 전에 package.json을 생성하는 명령부터 입력하겠습니다.

npm init -y

이제 package.json 파일이 생성됐을겁니다.

저는 github 업로드를 할 예정입니다.  github에 올라가선 안되는 파일들과 폴더에 대해서 명시하는 .gitignore 파일을 아래와 같이 작성해주었습니다.

.idea
.idea/**/*

.vscode

node_modules
*/**/node_modules

.env
.env.local
  • .idea / .vscode - 사용중인 IDE나 에디터에서 생성하는 폴더라 프로젝트와 큰 연관이 없는 불필요한 내용들입니다.
  • node_modules - 하위 폴더에 있는 node_modules 폴더도 포함하지 않기 위해서 적어주었습니다.
  • .env - 보안과 관련된 파일은 올라가선 안되기 때문에 제외해줍니다.

모든 작업이 완료되고 나면 최종적으로 파일들이 위와 같이 생성되어있을 것입니다. package-lock.json 파일은 자동으로 생성된 파일이니 신경쓰지 않아도 됩니다.

backend

기본적으로 사용해야할 도구들을 먼저 설치하겠습니다.
프로젝트 가장 상위폴더(Root) 폴더에서 아래 명령을 실행합니다.

npm i express

설치가 끝나고 나면 폴더 안에는 다음과 같은 폴더가 생성됩니다.

NPMNode Package Manager으로 express를 설치했기 때문에 node_modules라는 폴더가 생긴것입니다.

이 폴더 안에 들어있는 내용은 직접 수정하려고 해선 안됩니다. npm 명령을 이용해서 추가, 삭제, 업데이트 등을 수행할 수 있습니다.

이제 mkdir(Make Directory) 명령으로 폴더를 만들어주고, cd (Change Directory) 명령으로 이동해줍니다. 

mkdir backend
cd backend

Server.js

backend 폴더 안에서 server.js 파일을 작성해줍니다. 

// backend/server.js
const express = require('express')
const app = express()
const PORT = 5000

app.listen(PORT, () => {
    console.log(`http://localhost:${PORT} 에서 서버 실행중`)
})

아주 간단한 소스입니다.

express를 불러온 다음 지정된 포트번호로 접속할 경우 console에 메세지가 출력되도록 작성했습니다.

실제로 실행을 해봅시다. 

node server.js

콘솔console 메세지가 출력되는걸 확인할 수 있습니다.

서버의 실행을 중단 시킬 때는 커맨드 창에서 Ctrl+C를 누르면 강제로 중단시킬 수 있습니다.

server.js 파일은 backend 폴더에서 작성되었기 때문에 실행도 backend 폴더에서 해주면 됩니다. 하지만 최종적으로 root 폴더 - todo_list에서 backend와 frontend를 동시에 실행해주려고 합니다.

Package.json 실행 스크립트 설정

그렇게 하기 위해서 package.json에 가서 내용을 바꿔주겠습니다.

보통 npm을 이용해서 스크립트를 실행하는데, package.json에서 scripts 부분에 우리가 원하는 이름으로 실행 명령을 지정해주면 됩니다.

위와 같이 scripts 부분을 작성해주면 됩니다. 전체 소스는 아래와 같습니다. 

{
  "name": "todo_list",
  "version": "1.0.0",
  "description": "직접 만들어보는 To Do List - Express.js + React.js + SQLite",
  "main": "backend/server.js",
  "scripts": {
    // 이 부분을 수정해주세요
    // "test": "echo \"Error: no test specified\" && exit 1"
    "start": "node backend/server.js"
  },
  "keywords": [
    "to do list",
    "express",
    "react",
    "sqlite",
    "투두리스트",
    "익스프레스",
    "리액트"
  ],
  "author": "hyunki, bae",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.2"
  }
}

package.json는 이제 아래와 같은 모습이 될 것입니다. 다른 내용들은 제가 필요해서 넣은 내용들이고, 주목해야 할 부분은 scripts 부분입니다.

스크립트 부분을 작성해줬으니 이제는 스크립트로 실행해보겠습니다.

cd ..
npm run start

backend 폴더에서 실행했기 때문에 cd .. 명령을 이용해서 한 단계 상위 폴더 - todo_list로 다시 이동해왔습니다. package.json 파일이 있는 곳입니다.

여기서 npm run start 명령을 실행해야 package.json 파일 안에 scripts 명령을 실행할 수 있습니다.

정상적으로 실행이 된다면 위와 같이 콘솔console 메세지가 출력됩니다. 이 부분은 아까 우리가 server.js 에서 아래와 같이 작성해준 부분이 출력 되는 것입니다.

http://localhost:5000 은 5000번 포트를 이용해서 접속할 경우 서버에 접촉할 수 있다는 의미입니다. 이제 이 주소를 웹브라우저에 입력해서 내용을 봅시다.

Cannot GET / 이라는 메세지가 출력될 겁니다. 사용자가 특정 주소로 들어왔을 때 어떤 내용을 보여줄지 작성한 내용이 없기 때문입니다.

Route 설정

이제 backend 폴더에 있는 server.js 파일에 내용을 추가해줍니다.

...
app.get('/', (req, res) => { 
    res.send('홈페이지에 접속하였습니다')
})
...

아래와 같이 소스를 수정해주시면 됩니다.

app이라는 변수에는 express가 실행되도록 담아주었기때문에, get 방식으로 요청이 들어 올 경우에 어떤 결과를 보내줄지 정해주는 부분입니다.

res.send('작성하고 싶은 메세지') 형태로 결과를 전달해줄 수 있습니다.

이제 이게 실제로 브라우저에서 어떻게 보이는지 보기 위해서 현재 실행됐던 명령을 취소하고 다시 실행해줘야 합니다.

Ctrl + C를 눌러 실행을 취소하고 다시 npm run start를 눌러 실행 해주면 이제 변경된 내용이 적용될 것입니다.

http://localhost:5000 번으로 다시 접속해보면, 아까 작성한 메세지대로 출력되는 것을 볼 수 있습니다.

Nodemon - 개발서버

지금 과정에서 보면, 매번 소스를 변경할때마다 서버를 정지시켰다가 다시 npm run start 명령을 통해 실행해줘야하는 번거로운 상황입니다.

소스를 한 글자만 바꿔도 이 과정을 거쳐서 새로운 내용이 반영됐는지 확인해야하기 때문에 매우 번거롭습니다. 그래서 개발 단계에서 서버를 중단했다 다시 시작하는 작업을 대신해주는 패키지를 설치하겠습니다.

패키지 설치는 별다른 설명이 없다면 늘 todo_list에서 실행해주면 됩니다. package.json 파일이 있는 곳입니다.
npm i -D nodemon

nodemon이라는 패키지를 통해 서버를 실행하면, 소스가 변경될 때마다 알아서 감지해서 새로고침을 해주기 때문에 매우 편리합니다.

다시 package.json 내용을 수정해주어야합니다. 

  ...
  "scripts": {
    "start": "node backend/server.js",
    "server": "nodemon backend/server.js"
  }
  ...

아까 작성했던 scripts 항목에 server 라는 이름으로 nodemon이 실행되도록 변경해줍니다. 

npm run server

npm run start 명령으로 서버가 실행중이라면 역시 이번에도 ctrl+c 명령을 통해 중지 시킨 후 npm run server 명령으로 실행해줍니다.

이제 nodemon을 통해 실행되는 것을 확인할 수 있습니다.

'

아까와 다르게 nodemon이 출력해주는 메세지와 함께 실행되는 것을 확인할 수 있습니다.

다시 server.js 파일에 가서 내용을 수정해보겠습니다.

...
app.get('/', (req, res) => {
    res.send('Welcome')
})
...

위와같이 소스를 수정해주고, 이제는 개발서버를 중단할 필요 없이 바로 브라우저에 가서 새로고침을 해봅니다

바뀐 내용이 잘 적용된걸 확인할 수 있습니다.

기본적으로 사용자가 접속했을 때 메세지를 출력하는 부분까지 작성해봤습니다. 다음 포스팅에서 API 서버를 구축하는 방법을 더 진행하도록 하겠습니다.

GitHub - baehyunki/todo_list-express-react-sqlite: To Do List - Express.js + React.js + SQLite
To Do List - Express.js + React.js + SQLite. Contribute to baehyunki/todo_list-express-react-sqlite development by creating an account on GitHub.
GitHubbaehyunki

Read next

Comments ()