🌳λͺ©ν‘œ

이전 μ½”λ“œλ₯Ό λ¦¬νŒ©ν† λ§ν•˜μ—¬ serve-static λͺ¨λ“ˆμ„ λ§Œλ“­λ‹ˆλ‹€

πŸ€μ‹€μŠ΅ - serve-static λͺ¨λ“ˆ κ΅¬ν˜„

이전 μ‹œκ°„κΉŒμ§€ ν–ˆλ˜ μ½”λ“œλ‘œ 브랜치 μ΄λ™ν•˜κ² μŠ΅λ‹ˆλ‹€.

$ git checkout -f modules/serve-static-files

src/Application.js에 μžˆλŠ” μ •μ νŒŒμΌ λ‹€λ£¨λŠ” λ‘œμ§μ„ src/serve-static.js 파일둜 λΆ„λ¦¬ν•˜μ„Έμš”.

πŸ€ν’€μ΄

그럼 같이 ν’€μ–΄ λ³ΌκΉŒμš”?

src/serve-static.js νŒŒμΌμ„ λ§Œλ“€κ³  μ•„λž˜ μ½”λ“œλ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€.

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

const serveStatic = (req, res) => {
  const mimeType = {
  // ...

  if (Object.keys(mimeType).includes(ext)) {
    // ...
  }
};
    
module.exports = serveStatic;

μ½”λ“œλ₯Ό κ·ΈλŒ€λ‘œ λ³΅μ‚¬ν•΄μ„œ κ°€μ Έμ™”μŠ΅λ‹ˆλ‹€. μš”μ²­ν•œ 파일의 ν™•μž₯μžκ°€ mimeType λ”•μ…”λ„ˆλ¦¬μ— μžˆμ„ 경우만 이 λͺ¨λ“ˆμ—μ„œ μ²˜λ¦¬ν•˜μ£ . λ§ˆμ§€λ§‰ μ€„μ—μ„œλŠ” serveStatic을 λͺ¨λ“ˆλ‘œ 읡슀포트 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

그럼 src/Application.jsμ—μ„œ 이 λͺ¨λ“ˆμ„ κ°€μ Έλ‹€ μ‚¬μš©ν•˜κ² μŠ΅λ‹ˆλ‹€.

const serveStatic = require('./serve-static')
    
const _server = http.createServer((req, res) => {
  serveStatic(req, res) // serve-static λͺ¨λ“ˆ μ‚¬μš© 

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');

  const filePath = path.join(__dirname, '../public/index.html')
  fs.readFile(filePath, (err, data) => {
    if (err) throw err;

    res.end(data);
  })
});

μš”μ²­μ΄ μ˜€λŠ” μ¦‰μ‹œ serveStatic λͺ¨λ“ˆμ— req, res 인자λ₯Ό λ„˜κ²¨μ„œ μ‹€ν–‰ν–ˆμŠ΅λ‹ˆλ‹€. js, css, image 파일이 μ˜¨λ‹€λ©΄ 이 λͺ¨λ“ˆμ—μ„œ 응닡해 μ£Όκ² μ£ .

그런데 λ¬Έμ œλŠ” serveStatic() 싀행후에 λ‹€μ‹œ index.htmlλ₯Ό μ‘λ‹΅ν•œλ‹€λŠ” κ²λ‹ˆλ‹€. 응닡을 ν–ˆλŠ”λ° 또 μ‘λ‹΅ν•˜λŠ” 쀑볡 둜직이 μƒκΈ΄λ‹€λŠ” λ§μž…λ‹ˆλ‹€.

싀행해보면 이런 μ—λŸ¬ 메세지λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

_http_outgoing.js:491
    throw new Error('Can\'t set headers after they are sent.');
    ^

Error: Can't set headers after they are sent.

헀더λ₯Ό λ‘λ²ˆ λ³΄λ‚Όμˆ˜ μ—†λ‹€λŠ” λ§μ΄λ„€μš”.

ν•œκ³„ - μƒˆλ‘œμš΄ ꡬ쑰가 ν•„μš”ν•œκ°€?

ν•˜λ‚˜μ˜ μš”μ²­μ—λŠ” ν•˜λ‚˜μ˜ μ‘λ‹΅λ§Œ 보내야 ν•˜λŠ”λ° 그렇지 μ•Šμ•„μ„œ 생긴 λ¬Έμ œμž…λ‹ˆλ‹€. serveStatic λͺ¨λ“ˆμ΄ 동기 ꡬ문이라면 ν•œ νŒŒμΌμ— μžˆμ„λ•ŒλŠ” if/else둜 λΆ„κΈ°ν•΄μ„œ μ½”λ“œλ₯Ό μž‘μ„±ν–ˆμ§€λ§Œ, λͺ¨λ“ˆλ‘œ λΆ„λ¦¬ν•˜λ©΄μ„œ 둜직 μ œμ–΄κ°€ νž˜λ“€μ–΄ μ‘ŒμŠ΅λ‹ˆλ‹€.

λ‹€μŒ μ‹œκ°„μ— 이 문제λ₯Ό ν•΄κ²°ν• μˆ˜ μžˆλŠ” νŒ¨ν„΄μ„ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

정리

  • 정적 νŒŒμΌμ„ λͺ¨λ“ˆλ‘œ λ¦¬νŒ©ν† λ§ν•˜λŠ” μ‹œλ„λ₯Ό ν–ˆμŠ΅λ‹ˆλ‹€.
  • 비동기 λ‘œμ§μ„ μ œμ–΄ν•˜λŠ” ν˜„ ꡬ쑰의 ν•œκ³„λ₯Ό μ§šμ–΄ λ΄€μŠ΅λ‹ˆλ‹€.

λͺ©μ°¨ λ°”λ‘œκ°€κΈ°