[node.js] node.js 입문

📌 프레임워크 

편리함, 보안이 좋음 

 

ex) bootstrap - css 프레임워크(frontend)

spring - java 프레임워크(backend)

 

프론트엔드로는 결과만 보여줌 

 

📌 에러

컴파일에러(신텍스에러) : 문법 오류

런타임에러: 실행되는 도중에 다운되는 에러/ 문맥상 오류

 

✅ head vs body 

head안에 있는 내용은 한 줄, 한 줄 나오는게 아니라 한꺼번에 나옴 

body는 한 줄, 한 줄 나옴 

head에 div, span ,, 이런 tag들 다 쓸 수 있음 

body에 오류가 생기면 너그럽게 넘어가지만, head에 오류가 생기면 결과물이 로드되지 않음 

 

📌 자바스크립트 : 비동기식

이벤트 기반

 

원래는 벡엔드가 시나리오 기반이였는데

채팅 : 시나리오 없음, 실시간으로 이루어 져야 함 

대부분 페이지에 채팅 기능이 들어가는 추세가 됨

이벤트 기반이면 언어면 이 기능을 쉽게 구현 가능 

 

📌 node.js (server에서) 구현 

mkdir chat //chat이라는 폴더 생성

cd chat

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (chat) chat_project
version: (1.0.0)
description: very good super chat project
entry point: (index.js) index.js
test command:
git repository:
keywords:
author: So Min Lee
license: (ISC)
About to write to /Users/isomin/Documents/project/chat/package.json:

{
  "name": "chat_project",
  "version": "1.0.0",
  "description": "very good super chat project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "So Min Lee",
  "license": "ISC"
}


Is this OK? (yes)

 

vi : 리눅스 버전 텍스트 편집기 

 

✅ node.js 기반 프레임워크 : express

apt : 우분트에 까는 것 

npm: 프로젝트의 package.json 에 기록된 모든 의존성 패키지들을 내려받게 됨

npm install express

npm install ejs

 

✅ MVC 패턴

: 디자인 패턴 중 하나 

 

Model: DB 정의하는 부분

View: FE 코드 관리 부분

Controller: BE 코드 관리 부분 

 

express는 MVC 패턴을 쓰도록 강제함

 

ejs: view file을 관리 해주는 규칙/ node.js의 가장 상용화된 view engine

 

~ ls
node_modules      package-lock.json package.json

node_modules: 페키지 모듈 관리

 

✅  app.js 추가

const express = require("express"); // express 모듈 요청
const ejs = require("ejs");         // ejs 모듈 요청
const app = express();              // app을 express 프레임워크로 킨다

app.set("view engine", "ejs");      // app에 view engine을 설치, ejs를 템플릿으로
app.use(express.static(__dirname + '/')); // views 폴더 경로는 프로젝트 폴더.(__dirname이 폴더 위치)

app.get("/test1", function(req, res){ 
    console.log("안녕 테스트 페이지!");
    res.render("test1"); 
}); // test1이라는 경로로 들어온 사람에게는 test1이라는 파일을 보여줘라 

app.get("/test2", function(req, res){  
    console.log("안녕 테스트 페이지!");
    res.render("test2"); 
}); // test2이라는 경로로 들어온 사람에게는 test2이라는 파일을 보여줘라

app.listen(3000, function(){
    console.log("test.js is running now..."); 
});

 

require(): 패키지 불러오는 자바스크립트 내장 함수 

라우팅: 경로 설정 

~ node app.js
test.js is running now...

 

// app console.log 찍어보깅 

 

내 서버 ex) www.thals.today  라면, www.thals.today:3000/test1  이런식으로 주소해보면 됨

 

✅ 프로젝트 서버에 올리는 방법 

npm init 

views라는 폴더 생성 

프로젝트 했던 모든 파일 views에 다 옮기고 

경로 설정 다 하고 <a href="b.html">click</a> 이렇ㄱㅔ 설정한거 다 지우기