221212 - HTTP 통신 방식, Node.js HTML파일 불러오기, path.join

오늘 내가 배운 것

1. 과거와 현재 HTTP 통신 방식 비교

2. HTML 파일 열기

 

과거와 현재 HTTP 통신 방식 흐름 비교

 

좌측이 과거방식, 우측이 현재 방식이다.

 

그림을 확인하면서 읽어주세요.

과거에는 백엔드 개발자가 웹페이지를 구현하였는데, 클라이언트가 백엔드에 요청을 하면 백엔드에서 정보를 처리해서 응답을 주는 방법과,  API, DB를 이용해야 하는 경우는 API, DB에 백엔드가 요청하고 응답을 받고 응답을 받은 내용을 다시 클라이언트에게 응답해주는 방식을 이용하였다. 기본적인 화면을 구성할 때에도 이런 방식을 통해서 데이터를 받아서 구현하였다.

`React`라는 것이 만들어지면서 프런트엔드의 개념이 생겨났는데, 프런트엔드가 생기면서 클라이언트는 프런트엔드와 통신을 하면서 기본적인 화면을 구성하고, AJAX 방식을 이용하여 클라이언트가 필요한 데이터를 백엔드에 요청을 하고 백엔드가 DB나 다른 서버에 다시 요청하고 응답받은 내용을 클라이언트에게 응답하여주는 방식으로 바뀌었다.

 

 

HTML 파일 불러오기

웹 페이지를 구현하기 위해 HTML 파일을 클라이언트가 요청하게 되는데 클라이언트가 요청을 하더라도 서버에서 언제 응답을 줄지 모르기 때문에 요청을 보내는 코드는 비동기/동기 관계없다.

응답을 해줄 때는 정확하게 파일을 다 읽고 나서 보내야 하기 때문에,

비동기로 처리한다면, 콜백 함수 안에 콜백 함수가 쌓이는 콜백 지옥 구조가 될 것이다. 이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵기 때문에 동기적으로 코드를 짤 수 있도록 한다.

 

Node.js의 내장 모듈이 'fs'를 이용하면, 파일을 불러올 수 있다,.

const fs = require('fs')

fs.readFile()
fs.readFileSync()

---

const fs = require('fs')
const path = require('path') 

//__dirname 이나 __filename는 개발환경에따라 경로에 슬래시, 역슬레시 처리가 힘들기 때문에
// path.join을 많이쓴다.
const filename = path.join(__dirname, './src/index.html')
console.log('1_'+filename)

//readFile(path(파일경로+파일명), 인코딩(옵션), callback) 
// callback을 이용하여, error가 있을 때와 없을 때를 처리 해줄 수 있다.
fs.readFile(filename, "utf8", (err, data) => {
    if(err) console.log(err) // err가 있으면 err를 출력해주세요
    console.log(data) // err가 없으면 data 출력
}) 
console.log("3_Hello World")

const data = fs.readFileSync(filename, 'utf8')
console.log('sysn : ', data)
console.log('4_hello World')

이 코드를 진행 출력해 보면 

처음 출력되는 것은 console.log('1_'+filename) 이 부분이고,

console.log("3_Hello World"),

console.log('sysn : ', data),

console.log('4_hello World'),

readFile 안에 console.log(data)가 순서대로 출력된다.

 

무슨 말이냐면, readFile 은 비동기 방식이고, readFileSync는 동기 방식이라는 것이다.

응답을 해줄 때, HTML 파일을 보내줘야 하는데, 위에 말한 것처럼 비동기 방식이 아닌 동기 방식으로 불러와야 한다는 것이다.

그래서 readFile() 보다는 readFileSync()를 이용하여 동기적으로 코드를 짜면 된다.