JS-EVERYWHRE | chapter 1~3

책을 구입하고 잠깐 따라해보다가 막혀서 손 놓다가..더이상 이렇게 시간을 허비하는 건 좀 (요즘, 타입스크립트에 꽂혀서..) 아닌듯 해서, 주제는 달라도 실습하면서 배우고 느끼고 익혔던 부분을 기록해보고자 한다. (어디서 중복되려나?)

 

01. 개발환경

- Git

- NodeJS LTS v18.x

- Visual Studio Code v1.78.2

 

02. 워크스페이스

- 맘대로 C:\JS_EVERYWHERE 라고 만듦

- 깃 설치도 하고, 그날그날 커밋을 남겨보기로 했음 (git init)

03. 깃허브 저장소도 연동해서 1일 1커밋을 목표로 작업을 시작해본다.

< 교재 이름이 좀 틀렸군요? >

README.md 를 생성하고, 간단한 프로젝트 제목과 내용을 입력한 뒤 커밋을 생성하고 최초로 푸시도 해봄..^.^

04. Node와 Express를 이용한 API를 만들어보기

- API 란? Application Programming Interface(이하 API) / 한 컴퓨터 프로그램이 다른 컴퓨터 프로그램과 상호작용 할는 일련의 규약

1) npm init -y : Node.js 프로젝트는 이걸로 시작!

2) npm i express : npm을 이용해 express 모듈을 설치 (dependencies에 추가됨)

3) npm i nodemon -g : npm을 이용해 전역으로 nodemon 모듈 설치 (자동으로 express를 재시작하거나 수동 재시작:rs)

4) package.json에 "script" 항목을 "dev" 명령어 추가함 ($> npm run dev), 이어서 ESM 세팅함.

{
  "name": "js_everywhere",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "type": "module"
}

5) src 폴더를 생성해 index.js 파일을 생성하고 Express 모듈을 이용한 서버를 구축하고 테스트 함

import express from "express";
const app = express();
const port = process.env.PORT || 4000;

app.get("/", (req, res) => {
  res.send("Hello World!")
}).listen(port, () => {
  console.log(`server is running on port ${port}`)
})

6) 개발 서버를 구동하고, 결과를 확인하였음. 굳!

7) 앞으로 요청(Request)에 따른 응답(Response)은 HTTP를 통해 HTML 형식으로 보내줘야 하니까 여기서 약간 더 수정

import express from "express";
const app = express();
const port = process.env.PORT || 4000;

app.get("/", (req, res) => {
  res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
  res.write("<h1>Hello World!</h1>");
  res.end();
}).listen(port, () => {
  console.log(`server is running on port ${port}`)
})

음, 잘 되었군?!

 

결론! 1장은 쉽다...so easy,..but! 다음장은..흑흑..