프론트엔드 & 백엔드 포함된 초간단 서비스 만들어 보기 - (5) 투두 리스트 앱 실행하기!

이제 본격적으로 풀스택 애플리케이션을 만들어 보자! 예시로 투두 리스트 애플리케이션을 만들어 볼 것이다.

 

프론트엔드 HTML & JavaScript

백엔드 Node.js & Express

DB SQLite

 

요렇게 사용할 예정~

 

 

각각의 파일이 어떤 역할을 하는지는 우리의 chatGPT가 친절히 설명해 준다.

 

이건 백엔드

 

 

이건 프론트

 

 

폴더 기본 구조를 만들고 npm init을 했더니 이렇게 나왔다.

 

 

npm init은 Node.js 프로젝트를 초기화할 때 사용하는 명령어로, 프로젝트의 메타데이터를 담고 있는 package.json 파일을 생성한다.

 

여기서 npm install을 통해 이것저것 패키지를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성된다.

node_modules 폴더는 프로젝트에서 사용되는 모든 패키지들이 실제로 설치되는 장소다.

 

package는 왜 두 개나 생길까,, 궁금했는데,,

 

 

backend 폴더로 들어가서 node server.js를 입력해서 백엔드 서버를 실행시키고 http://localhost:3000를 입력해서 브라우저로 접속을 하면

 

 

이렇게 잘 나온 것을 볼 수 있다.

이것저것 입력하면 잘 들어간다.

 

 

db에 잘 저장이 된 걸 볼 수 있다.

 

 

id가 왜 6부터 시작하냐면 이전에 5개 시험했다가 지웠기 때문 ㅎ