Contents

Web framework에 λŒ€ν•˜μ—¬(1)

   Jul 22, 2023     2 min read

μ›Ή ν”„λ ˆμž„μ›Œν¬μ— λŒ€ν•΄ ν•™μŠ΅ν•˜κ³  κ³΅μœ ν•˜λŠ” κΈ€μž…λ‹ˆλ‹€.

μš°λ¦¬λŠ” 해컀톀 λ“± λΉ λ₯΄κ²Œ ν”„λ‘œμ νŠΈλ₯Ό κ΅¬ν˜„ν•΄μ•Όν•  λ•Œ, 주둜 expressλ₯Ό μ‚¬μš©ν•΄ λΈŒλΌμš°μ €μ— μƒν˜Έμž‘μš©μ„ κ΅¬ν˜„ν•˜κ³€ ν–ˆμŠ΅λ‹ˆλ‹€. 그런데 μ΄λ²ˆμ— λ””μžμΈ νŒ¨ν„΄μ„ κ³΅λΆ€ν•˜λ©°, 토이 ν”„λ‘œμ νŠΈλ₯Ό 생성해 μž‘μ—…ν•˜λŠ”λ° 문득 express 없이 μ›Ή μ„œλ²„λ₯Ό κ΅¬ν˜„ν•  수 μžˆλŠ” 방법이 μžˆμ„κΉŒλΌλŠ” κ³ λ―Όμ—μ„œ μΆœλ°œν•˜μ—¬ ν•™μŠ΅ν•œ λ’€, μ €μ˜ κ²½ν—˜μ„ λ°”νƒ•μœΌλ‘œ 글을 λ‚¨κ²¨λ΄…λ‹ˆλ‹€.

expressλž€ 무엇인가

κ°„λ‹¨ν•˜κ²Œ Express.jsλŠ” Node.jsλ₯Ό 기반으둜 ν•œ μ›Ή ν”„λ ˆμž„μ›Œν¬μž…λ‹ˆλ‹€. 일반적인 λͺ©μ μœΌλ‘œλŠ” Node.js 기반 μ›Ή μ„œλ²„ κ°œλ°œμ„ λ‹¨μˆœν™”ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ©λ‹ˆλ‹€.

그럼 μ›Ή ν”„λ ˆμž„μ›Œν¬λž€ λ¬΄μ—‡μΌκΉŒμš”?

μ›Ή ν”„λ ˆμž„μ›Œν¬(Web framework)λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ κ°œλ°œμ„ λ‹¨μˆœν™”ν•˜κ³  νš¨μœ¨ν™”ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” λ„κ΅¬λ‚˜ 라이브러리의 λͺ¨μŒμž…λ‹ˆλ‹€. μ›Ή ν”„λ ˆμž„μ›Œν¬λŠ” μ›Ή κ°œλ°œμ— ν•„μš”ν•œ κΈ°λ³Έ ꡬ쑰, κΈ°λŠ₯, νŒ¨ν„΄ 등을 μ œκ³΅ν•˜μ—¬ κ°œλ°œμžκ°€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λΉ„μ¦ˆλ‹ˆμŠ€ λ‘œμ§μ— 집쀑할 수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€.

μ›Ή ν”„λ ˆμž„μ›Œν¬μ˜ 제곡 κΈ°λŠ₯은?

  1. λΌμš°νŒ…(Routing): URLκ³Ό μš”μ²­ ν•Έλ“€λŸ¬λ₯Ό μ—°κ²°ν•΄μ£ΌλŠ” κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€. μš”μ²­μ΄ λ“€μ–΄μ˜€λ©΄ ν•΄λ‹Ήν•˜λŠ” ν•Έλ“€λŸ¬λ₯Ό μ‹€ν–‰ν•˜μ—¬ μ μ ˆν•œ 응닡을 λ°˜ν™˜ν•©λ‹ˆλ‹€. 이λ₯Ό 톡해 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ‹€μ–‘ν•œ μ—”λ“œν¬μΈνŠΈλ₯Ό 관리할 수 μžˆμŠ΅λ‹ˆλ‹€.
  2. ν…œν”Œλ¦Ώ 엔진(Template Engine): 동적인 μ›Ή νŽ˜μ΄μ§€ 생성을 μœ„ν•΄ ν…œν”Œλ¦Ώ 엔진을 μ œκ³΅ν•©λ‹ˆλ‹€. ν…œν”Œλ¦Ώ 엔진은 데이터와 ν…œν”Œλ¦Ώμ„ κ²°ν•©ν•˜μ—¬ 동적인 HTML νŽ˜μ΄μ§€λ₯Ό μƒμ„±ν•˜λŠ” κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
  3. λ°μ΄ν„°λ² μ΄μŠ€ 연동: μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ λ°μ΄ν„°λ² μ΄μŠ€μ™€μ˜ μƒν˜Έμž‘μš©μ„ μ‰½κ²Œ ν•  수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€. λ°μ΄ν„°λ² μ΄μŠ€ μΏΌλ¦¬μ™€μ˜ μƒν˜Έμž‘μš©μ„ μΆ”μƒν™”ν•˜κ³ , ORM(Object-Relational Mapping)을 톡해 κ°œλ°œμžκ°€ 객체 지ν–₯적인 λ°©μ‹μœΌλ‘œ λ°μ΄ν„°λ² μ΄μŠ€λ₯Ό λ‹€λ£° 수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.
  4. μ„Έμ…˜ 및 인증 관리: μ‚¬μš©μžμ˜ μ„Έμ…˜ 관리와 인증을 μ²˜λ¦¬ν•˜λŠ” κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€. 둜그인, λ‘œκ·Έμ•„μ›ƒ, μ„Έμ…˜ μœ μ§€ 등을 μ‰½κ²Œ κ΅¬ν˜„ν•  수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€.
  5. λ³΄μ•ˆ κΈ°λŠ₯: μ›Ή ν”„λ ˆμž„μ›Œν¬λŠ” CSRF(Cross-Site Request Forgery) 곡격, XSS(Cross-Site Scripting) 곡격 λ“±κ³Ό 같은 μ›Ή λ³΄μ•ˆ μœ„ν˜‘μœΌλ‘œλΆ€ν„° μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ³΄ν˜Έν•˜κΈ° μœ„ν•œ λ³΄μ•ˆ κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
  6. μ—λŸ¬ 핸듀링: μ˜ˆμ™Έ 처리 및 였λ₯˜ νŽ˜μ΄μ§€ 관리λ₯Ό λ„μ™€μ€λ‹ˆλ‹€. 개발 쀑 λ°œμƒν•˜λŠ” 였λ₯˜λ₯Ό μ μ ˆν•˜κ²Œ μ²˜λ¦¬ν•˜κ³ , μ‚¬μš©μžμ—κ²Œ 였λ₯˜ λ©”μ‹œμ§€λ₯Ό μ œκ³΅ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.
μ›Ή ν”„λ ˆμž„μ›Œν¬μ˜ μ’…λ₯˜λŠ”?

Express.js(Node.js 기반), Django(Python 기반), Ruby on Rails(Ruby 기반), Laravel(PHP 기반) 등이 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ μ›Ή ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜λ©΄ κ°œλ°œμžλŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 기반이 λ˜λŠ” 뢀뢄을 κ΅¬ν˜„ν•˜λŠ” 데 λ“œλŠ” μ‹œκ°„κ³Ό λ…Έλ ₯을 μ ˆμ•½ν•˜κ³ , 생산성을 ν–₯μƒμ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

이제 μ›Ή ν”„λ ˆμž„μ›Œν¬κ°€ 무엇이고, κΈ°λŠ₯은 어떀지, μ–΄λ–€ μ’…λ₯˜κ°€ μžˆλŠ”μ§€ μ•Œμ•˜μŠ΅λ‹ˆλ‹€. 그럼 이제 λ‹€μ‹œ λŒμ•„μ™€ μ΄λŸ¬ν•œ μœ μš©ν•œ κΈ°λŠ₯을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  μ›Ήμ„œλ²„λ₯Ό κ΅¬ν˜„ν•œλ‹€λ©΄ μ–Όλ§ŒνΌ ν”Όκ³€ν•΄μ§ˆκΉŒμš”? ν•œ 번 κ΅¬ν˜„ν•΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.

Express없이 nodejs둜 μ›Ήμ„œλ²„ κ΅¬ν˜„ν•˜κΈ°

κ°„λ‹¨ν•œ μ›Ήμ„œλ²„λ₯Ό λ§Œλ“€μ–΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello, World!");
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

κ°„λ‹¨ν•œ μ½”λ“œ μ„€λͺ…을 ν•˜μžλ©΄ http μ„œλ²„λ₯Ό μƒμ„±ν•˜κ³ , μš”μ²­μ΄ λ“€μ–΄μ˜€λ©΄ Hello, World!λ₯Ό μ‘λ‹΅μœΌλ‘œ λ°˜ν™˜ν•©λ‹ˆλ‹€. μ΄λ ‡κ²Œ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³ , nodejs λŸ°νƒ€μž„ λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜μ—¬ νŒŒμΌμ„ μ‹€ν–‰μ‹œν‚€λ©΄ μ½˜μ†”μ— Server running at http://127.0.0.1:3000/ 메세지가 ν‘œμ‹œλ©λ‹ˆλ‹€.

κ°„λ‹¨ν•œ μ›Ήμ„œλ²„λ‘œ μ›Ή λΈŒλΌμš°μ €μ— μ£Όμ†Œ 창에 http://127.0.0.1:3000/ 둜 μ„œλ²„μ— 접근이 κ°€λŠ₯ν•΄μ‘ŒμŠ΅λ‹ˆλ‹€.

λ‹€μŒ ν¬μŠ€νŒ…μ—μ„œ express없이 λΌμš°νŒ…μ„ κ΅¬ν˜„ν•˜λŠ” 법에 λŒ€ν•΄ 닀루도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€.