[POSCO x Codingon] node.js, 모듈 - http, express, class | 웹개발자 풀스택 과정 12기 6주차 회고 1

 

 

6주차 회고

 

 

프로젝트를 마치고 다시 이론을 공부하려고 하니 힘든 부분도 있었지만, 힘내서 6주차 회고를 다시 작성해보려 한다.
node.js에 대해 더 자세한 기능들과 사용할 수 있는 모듈에 대해 배웠으며, 모듈을 불러와 출력하는 연습을 해볼 수 있었다.

 

 

---

 

 

1. node.js

 

: 크로스 플랫폼 오픈 소스 자바스크립트 런타임 환경 => 브라우저 외부에서 자바스크립트가 실행될 수 있는 환경을 만들어 준다.

: 실행시간이 매우 빠르고, 다양한 플랫폼에서 실행된다.

 

• REPL : node.js의 대화형 모드

: node 명령어로 node.js를 실행해주고, a, b를 선언한 후 콘솔창에 출력되도록 명령을 넣어주었다. 실행을 마치려면 .exit를 적어주면 된다.

: node의 REPL은 윈도우의 cmd, 맥의 terminal과 같은 기능을 한다고 보면 된다!

 

REPL 연습

 

 

---

 

2. node.js 내부 구조

 

: 이벤트가 발생하면 이벤트 리스너에 등록해 둔 콜백 함수를 호출한다.

• 이벤트 루프(Event Loop) : 여러 이벤트가 동시에 발생하면 어떤 순서로 콜백 함수를 호출할지 판단한다. 노드 종료될 때까지 이벤트 처리 작업을 반복하므로 루프라 불린다.
• 태스크 큐(Task Queue or Callback Queue) : 이벤트 발생 후 호출돼야할 콜백 함수들이 기다리는 공간이다. 콜백들이 이벤트 루프가 정한 순서대로 줄을 서 있으므로 콜백 큐라고도 부른다.
• API에 따라 마이크로 태스크 큐를 사용하거나, 매크로 태스크 큐를 사용한다.
• 백그라운드(Background) : 타이머나 I/O 작업 콜백 또는 이벤트 리스너들이 대기하는 곳이다.

 

• 싱글스레드

• 프로세스 : 운영체제에서 할당하는 작업의 단위이다.
• 스레드 : 프로세스 내에서 실행되는 흐름의 단위이다. (하나의 프로세스는 여러개 스레드 가질 수 있다.)

 

• 블로킹 IO vs 논블로킹 IO

• 블로킹 : 실행되고 있는 작업이 끝날 때까지 다른 작업을 실행하지 못하고 멈춘다.
• 논블로킹 : 자유롭게 여러 작업 번갈아가며 실행이 가능하다. => 시간 효율성이 좋다.

 

---

 

 

2. 모듈

 

: 특정한 기능을 하는 함수, 변수들의 집합 => 재사용 가능한 코드 조각이다.

 

모듈을 만들고 export로 모듈을 내보내 다른 파일에서 모듈을 사용할 수 있다.

 

 

예를들어, a+b를 수행하는 모듈을 만들어 준 후, module.exports를 이용해 모듈을 내보냄으로써 다른 파일에서 모듈을 가져와 사용할 수 있게된다.

const add = (a,b)=>{

    return a+b

}

module.exports = add;

 

 

다른 파일에서 모듈을 가져오는 방법은 아래의 코드와 같이 require을 이용하면 된다.

const add = require('./math')

 

 

 

또한, 모듈을 불러오고 사용하는 방법으로 자바스크립트 자체 시스템 문법도 있다.

이는 사용하기 위해 package.json에 "type":"module",을 먼저 추가해줘야한다.

 

 

다음으로 모듈을 만든 후, export를 사용해 모듈을 내보내 준다.

function connect(){

    return a+b;

}

export default connect;

 

 

모듈을 내보낸 후 사용하려 하는 파일에서 import를 활용해 모듈을 가져와 사용할 수 있다.

from뒤에는 모듈을 만들어 둔 파일 경로를 적어주면 된다!

import returnString from './func.js'

 

 

 

728x90

 

---

 

 

3. node.js 서버 구축

 

: http, express 모듈 사용

 

• http 모듈

: 웹 서버 구동을 위한 node.js 내장 웹 모듈이다.

: 서버 객체, request, response 객체를 사용한다.

 

예를들어, 먼저 http모듈을 불러와주고, 8000번 포트가 열리면 콘솔창에 문자를 출력하도록 만들어준 코드이다.

const http_ex = require('http');

const server = http_ex.createServer()

server.on('connection',(socket)=>{

    console.log('새로운 연결')

})

server.listen(8000)

console.log("8000포트 열렸음")

 

다음은 http 모듈을 사용해서 req, res를 받아 index.html을 실행하고, 만약 실패하면 에러 메세지까지 나타나게 만드는 코드이다.

const http = require('http')

const fs = require('fs')

const server = http.createServer((req,res)=>{

    try{

        const data = fs.readFileSync('index.html')

        res.writeHead(200)

        res.write(data)

        res.end()

    } catch(err) {

        console.error(err)

        res.writeHead(404)

        res.write(err.message)

        res.end()

    }

})

server.listen(8000,()=>{

    console.log('server is running...')

})

 

 

• express 모듈

: 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크이다.

: 각종 메소드와 미들웨어 등이 내장되어 있다.

: http 모듈 코드의 가독성과 확장성이 낮은 것을 해결하기 위한 프레임워크

 

express 모듈을 사용하기 위해선 npm install express를 통해 먼저 모듈을 설치해줘야한다.

 

 

기본적으로 서버를 구축하는 것이기 때문에 http 모듈과 비슷하게 req, res를 받는다.

app.get을 활용해 페이지에 res.send한 메세지를 로드할 수 있다.

const express = require('express');

const app = express()

app.listen(8000,()=>{

    console.log('8000포트로 서버 운행 중')

})

app.get('/',(req,res)=>{

    res.send(`<h2>Home page express</h2>`)

})

app.get('/about',(req,res)=>{

    res.send(`<h2>Home page express</h2>`)

})

 

 

또한, express로 서버를 구축할 때 ejs 템풀릿을 활용했다.

ejs는 문법과 설정에 따라 파일을 html형식으로 변환시키는 모듈이다.

• ejs 기본 문법 : <% %>

• title 불러오기 : <%= %>

• ejs 파일 불러오기 : <%- include(’파일 경로’) %>

 

express, ejs를 활용해 서버를 구축한 코드이다.

res.render를 사용해 ejs파일을 불러와 로드했으며, 경로가 지정되어 있기 때문에app.ge을 사용했다.

에러페이지와 같은 경로가 지정되지 않았을 때는 app.use를 사용해 render해준다.

const express = require('express')

const app = express()

const PORT = 8000;

app.set('view engine', 'ejs');

app.set('views', './views'); //두개 이름 같아야함

app.use(express.static('public')) //변경되지 않아야하는 폴더 등록

app.get('/', (req,res)=>{

    res.render('index', {title:'HOME'})

})

app.get('/about', (req,res)=>{

    res.render('about', {title:'About'})

})

app.get('/create', (req,res)=>{

    res.render('create', {title: '작성하기'})

}) //지정된 경로가 있을때 get사용

app.use((req,res)=>{

    res.status(404).render('404')

}) //use를 사용하는 이유는 지정된 경로가 없기 때문

app.listen(PORT, ()=>{

    console.log(`Server is running ${PORT}`)

})

 

 

---

 

 

4. class

 

: 객체를 만들 수 있는 틀 => 정해진 틀로 같은 규격의 객체를 여러개 만들 수 있다.

: 클래스는 함수로도 지정할 수 있다.

: extends를 사용해 클래스를 상속 받을 수 있다.

 

 

아래 코드는 클래스를 정의하는 기본 코드이다.

메소드를 클래스 안에 정의하고 메소드를 호출해 결과를 출력한다.

class Circle1{

    constructor (radius){

        this.radius = radius

    }

    draw(){

        console.log('🚗')

    }

}

const d = new Circle1(1);

console.log(d)

d.draw();

 

 

---

 

 

node.js의 기본 기능, 내부 구조, 사용 가능한 모듈들에 대해 배우고 연습해볼 수 있었다.
사용할 모듈을 직접 만들고 export해 다른 파일에 사용해보면서 재사용 가능한 코드의 중요성을 느낄 수 있었다. 모듈을 사용해 코드를 간결하게 만들 수 있었으며, 중복되는 내용을 다시 정의할 필요 없이 간편하게 코드를 작성할 수 있었다.

서버를 구축하는 방법인 express와 ejs를 사용해서 페이지를 만드는 연습과 실습까지 해볼 수 있어서 좋았고, 처음에는 app.get, app.use, app.set 등 코드 기능에 대해서 헷갈리기도 했지만, 반복해서 실습하면서 직접 기능을 파악해가며 이해할 수 있어서 더 좋았다.

또한 자바스크립트를 배우면서 이를 확인하기 위한 문제도 리더님께서 주셔서 현재까지 배운 자바스크립트 문법의 이해도를 확인해볼 수 있어서 좋았다.
리더님의 풀이와 내가 작성한 풀이가 달라서 정답이 맞는지 확인하고, 리더님께 질문드리면서 알지못했던 함수(reduce 등)에 대한 내용도 배울 수 있었다.

앞으로도 모르는 내용이 생기면 바로바로 질문하면서 지식을 채워나가고 싶다.