스텝 3 - 웹앱 (Web Application) 입문 - NodeJS

[bryantson]

스텝 3 - 웹앱 (Web Application) 입문 - NodeJS

웹앱 (Web Application) 이란?

모든 컴퓨터에는 다양한 용도의 PORT 가 있는데 웹을 위한 PORT (HTTP/HTTPS) 을 프로그래밍으로 열고 웹사이트/서비스를 서브하는 개념

NodeJS 이란?

원래 Javascript 는 server 용이 아니라 client 용 인데 그걸 서버 용으로 만들어서 현재 프론트엔드 레이어를 만들때 제일 인기있는 앱서버

따라 해봅시다 - NodeJS 로 웹앱 만들기

스텝 1: package.json

1. Editor 에서 새로운 파일을 만들고 package.json 이름으로 만듭니다
2. 코딩 따라하기

{
    "name": "my-app",
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "~4.17.1"
    }
}

3. 파일 저장

스텝 2: index.js

1. Editor 에서 새로운 파일을 만들고 index.js 이름으로 만듭니다
2. 코딩 따라하기

const express = require("express")
const app = express()

app.use(express.static("public"))

app.get("/", (req, res) => (
    res.send("Hello, World")
))

const server = require("http").createServer({}, app);

server.listen(3000, function() {
    console.log("HTTP listening port 3000")
})

3. 파일 저장

스텝 3: 기존 static 파일 경로 바꾸기

1. 같은 폴더 안에서 public 이란 이름의 새로운 folder 를 만듭니다
2. 그 안에 images 라는 새로운 폴더를 만듭니다
3. index.html 은 public 으로 옮기고 다운로드 했던 사진은 public/images 로 옮깁니다

4. index.html 을 오픈해서 <img src="./이미지 파일 이름.확장자" /> 를 <img src="./images/이미지 파일 이름.확장자" /> 로 바꿉니다

스텝 4: 서버 시작하기

1. Terminal/Powershell 을 열어서 프로젝트가 있는 폴더로 이동

• 윈도우: Powershell 로 cd
• Mac: Terminal 로 cd
• VS Code: New Terminal

2. npm install 로 페키지 인스톨
3. npm start 로 서버 스타트
4. 브라우저 오픈해서 localhost:3000 방문

5. 짜짠! 웹사이트 발견!