Node.JS express로 서버 구성하기

프레임워크를 왜 사용할까?

Framework

반복적으로 어디에서나 등장하는 일을 더 적은 코드로 많은 일을 안전하게 처리하기 위한 도구

미리 정성껏 구현해놓은 기능을 사용함

🤔

개발자는

web에서 반복적으로 어디에서나 일어나는 일을 처리하기 위해 아래의 일들을 프레임워크로 수행할 수 있다.

- url 파라미터를 통해 전달된 데이터를 받아 처리하는 일

- 정적인 js파일, image파일들을 컴퓨터에서 읽어와 사용자에게 제공

- 로그인 기능 구현

- 보안적인 이슈 해결

express

node.js 의 보편적 웹프레임워크중 하나

배우기 어렵지만, 사용하기 좋은 프레임워크 중 하나

Node.js

서버사이드에서 동작하는 자바스크립트 실행환경

서버측의 표준 기능을 구현한 라이브러리등 대거 포함

nvm: 패키지 관리 도구 사용하여 버전 관리

npm (node package manager)

Node.js 개발에이용하는 패키지 관리 툴

어떤 패키지의 어느 버전을 사용하는지 "package.json" 이라는 파일에 기록해 관리

프레임워크를 이용하지 않은 간단한 서버 구축해보기 (실습)

간단한 local 서버 구축

1️⃣ 작업용 임의 폴더 생성

npm init -y

이 폴더에서 프로젝트 시작할래! 라고 npm에 전달

-> package.json 파일 생성

2️⃣js 파일 생성 ( app.js)

const http = require('http');
const server = http.createServer((req,res)=>{
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World');
})
//8080이라는 포트에 
server.listen(8080);

http 모듈로드

createServer 메서드 이용하여 서버 생성 변수에 저장

req(request 의 세부 사항)

res(response 보내기 위한 툴 그룹)

writeHead 메서드로 응답헤더 지정 -> "Hello World" 텍스트 메세지 반환

-> 생성된 server object가 listen 메서드 실행하여 요청 수신

3️⃣ app.js 파일 실행

node app.js

✨짜잔~ 나만의 local 서버 완성

참고자료

[짧은 서버 기초강의] :www.youtube.com/watch?v=CGV_01QdM-4

그러나. 매번 요청(request)에 따른 응답(response)선택하는것은 귀찮지 않을까?

그래서 Node.js express 라는 프레임워크를 사용한다

Node.js 의 express 프레임워크 사용해보기 (실습)

express-generator: 양식을 미리 만들어주는 툴

1️⃣ express 설치

npm install express --save

express 설치하고, package.json 도 정리하시길-!

node_modulse 생성

package-lock.json 생성

express 설치 확인

2️⃣폴더와 파일 준비

< 해당과 같이 파일과 폴더 설정

📌public :에 정적파일들 모아둠

- css

- images

- js

📌index.html : 웹페이지의 뼈대

📌api: 미들웨어 둘곳들 ( 후에 나옴)

3️⃣ html, css 구현

index.html

sample.css

sample.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello wrold!</h1>
    <p id="hoge"></p>
    <div>
        <img src="/img/sample.jpg">
    </div>
    <script src="./js/sample.js"></script>
</body>
</html>

h1{
    font-size: 1.5rem;
    color:pink;
}

img{
    max-width:100%;
}

{
    const el = document.getElementById('hoge');
    el.innerText=("hahahaha");
}

4️⃣Web 서버 응용 프로그램 파일 만들기 ( app.js )

const express = require('express');
const app=express();
//패스 지정용 모듈
const path = require('path');
//8080포트로 기다림
app.listen(8080,()=>{
    console.log('Running at Port 8080');
})

//요청파일 루팅
app.use(express.static(path.join(__dirname,'public')));
//기타 리퀘스트 404에러
app.use((req,res)=>{
    res.sendStatus(404);
})

∙ express 모듈 로드 ( http.createServer 대체)

∙ listen 메서드 : 리퀘스트 대기

∙app.listen( 포트번호, 시작 후 콜백함수 )

∙app.use( express.static

__dirname: Node.js에서 미리 로드할 필요 없는 모듈이 작성된 파일경로 반환 : test

path.join(__dirname,'public') : 정적파일 저장되어 있는 폴더(public)과 연결하여 전체경로생성 : test/public

express.static: Node.js의 정적 메서드

app.use( :루팅하는 미들웨어 : Node.js express의 정적메서드의 정적파일이 모여있는 폴더 경로 전달 (뤁경로)

404 : 해당 파일이 존재하지 않을때 404 오류 반환하도록 설정

완성

API

:인터페이스 SW 와 사용자 사이의 소통할 수 있는 창구

지정된 형식으로 요청 명령을 받을 수 있는 수단

Rest API

HTTP 서버에 REST API 요청을 보낼때 사용하는 신호 규약

:HTTP 요청 보낼때 어던 URI 어떤 메서드를 사용할 지 개발자들 사이에 형셩된 규칙

: 서버에 데이터를 요청하는 등 , 요청을 보낸 주소만으로도 어떤 요청인지 알 수 있는

: 각 요청이 어떤 동작이나 정보를 위한 것인지 요청의 모습 자체로 추론 가능

* 조회 (URI) : 자원을 구조와 함께 나타내는

* 정보 삭제, 수정 : CREATE READ UPDATE DELETE

GET	데이터 Read (조회)	www.naver.com 이 서버에 html,js,css요청
POST	Create( 추가)	id: xxx pw:xxxx 서버로 보내졌을 때 valid 한지 확인
DELETE	제거	유저가 탈퇴
PUT	Upadte (변경) 통째로	프로파일 변경 시 업데이트
PATCH	Update 일부	정보중 일부를 특정 방식으로 변경

*P*** ( Body : 더 많이 전송 가능)

출처

아주도움많이 받은 블로그 :codingcoding.tistory.com/1305

'📒 JavaScript' 카테고리의 다른 글

자바스크립트의 Promise()로 callback지옥 벗어나기 (0)	2021.02.25
Javascript JSON.parse(), JSON.stringify() 사용하는법 (0)	2021.02.23
자바스크립트의 객체 (0)	2021.02.22
이벤트 버블링, 이벤트 캡쳐링 - DOM의 이벤트 핸들링 (0)	2021.02.22
[JavaScript ] 이벤트핸들링 (0)	2021.02.16

Node.JS express로 서버 구성하기

프레임워크를 왜 사용할까?

🤔

express

프레임워크를 이용하지 않은 간단한 서버 구축해보기 (실습)

Node.js 의 express 프레임워크 사용해보기 (실습)

API

:인터페이스 SW 와 사용자 사이의 소통할 수 있는 창구

Rest API

'📒 JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

Node.JS express로 서버 구성하기

프레임워크를 왜 사용할까?

🤔

express

프레임워크를 이용하지 않은 간단한 서버 구축해보기 (실습)

Node.js 의 express 프레임워크 사용해보기 (실습)

API

:인터페이스 SW 와 사용자 사이의 소통할 수 있는 창구

Rest API

'📒 JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바