be come πŸ’‘

ν”„λ‘ νŠΈ μ„œλ²„

Posted Updated
By 베짱이가 λ˜κ³ μ‹Άμ€ κ°œλ―Έγ€‚
λΈŒλΌμš°μ € μž‘λ™μ›λ¦¬μ— λŒ€ν•΄ κ³΅λΆ€ν•˜λ˜ 쀑 의문점이 λ°œμƒν–ˆλ‹€.

"λΈŒλΌμš°μ € μ£Όμ†Œμ°½μ— URL을 μž…λ ₯ν•˜λ©΄ λΈŒλΌμš°μ €λŠ” HTTP GET μš”μ²­μ„ URL ν”„λ‘ νŠΈ μ„œλ²„λ‘œ μ „μ†‘ν•œλ‹€. 보톡 ν”„λ‘ νŠΈ μ—”λ“œκ°€ μžˆλŠ” μ›Ή μ„œλΉ„μŠ€μ˜ 경우 HTML νŒŒμΌμ„ 결과둜 λ°˜ν™˜ν•œλ‹€." λΌλŠ” 뢀뢄인데 ν”„λ‘ νŠΈ μ„œλ²„μ˜ μ‘΄μž¬κ°€ μ •ν™•νžˆ μ–΄λ–€ 일을 ν•˜λŠ” 것인지 κΆκΈˆν•΄ μ‘Œλ‹€..
β†’ react, next, styled-components, redux λ“±

ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ React 라이브러리λ₯Ό ν™œμš©ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈ(λΈŒλΌμš°μ €)μ—κ²Œ μ œκ³΅ν•  JavaScript νŒŒμΌλ“€μ„ ES6 + JSX λ¬Έλ²•μœΌλ‘œ μž‘μ„±ν•˜κ²Œ 되면, Babel λ“±μ˜ μ»΄νŒŒμΌλŸ¬κ°€ λͺ¨λ“  λΈŒλΌμš°μ €μ—μ„œ ν˜Έν™˜ κ°€λŠ₯ν•œ λ¬Έλ²•μœΌλ‘œ λ³€ν™˜ν•΄μ€€λ‹€.

λ˜ν•œ Webpack λ“±μ˜ λͺ¨λ“ˆ λ²ˆλ“€λŸ¬κ°€ HTML, CSS, JavaScript νŒŒμΌλ“€μ„ 효율적인 λ°©μ‹μœΌλ‘œ 적절히 λ²ˆλ“€λ§ν•˜μ—¬ μ€€λΉ„ν•΄λ‘”λ‹€.

ν΄λΌμ΄μ–ΈνŠΈκ°€ μš”μ²­μ„ 보낼 λ•Œλ§ˆλ‹€ ν”„λ‘ νŠΈ μ„œλ²„λŠ” 미리 μ€€λΉ„ν•΄λ‘” HTML, CSS, JavaScript νŒŒμΌλ“€μ„ ν΄λΌμ΄μ–ΈνŠΈμ—κ²Œ μ œκ³΅ν•œλ‹€. 그러면 ν΄λΌμ΄μ–ΈνŠΈ(λΈŒλΌμš°μ €)λŠ” 전달받은 JavaScriptλ₯Ό μ‹€ν–‰ν•΄ νŽ˜μ΄μ§€μ— λ Œλ”λ§μ„ μ‹œμž‘ν•œλ‹€. 즉, React 라이브러리λ₯Ό ν™œμš©ν–ˆλ˜ JavaScript μ½”λ“œλŠ” λ™μ μœΌλ‘œ DOM에 λ Œλ”λ§ ν•΄μ€€λ‹€.

λΈŒλΌμš°μ €μ˜ 전체 흐름

πŸ“ SSR

SSR 전톡적인 μ›Ήμ‚¬μ΄νŠΈμ—μ„œλŠ” λΈŒλΌμš°μ €μ—μ„œλŠ” ν”„λ‘ νŠΈ μ„œλ²„λ‘œ GET μš”μ²­μ„ ν•˜κ³  ν”„λ‘ νŠΈ μ„œλ²„μ—μ„œ λ°±μ—”λ“œ μ„œλ²„λ‘œ 데이터 μš”μ²­μ„ ν•˜μ—¬ λ°±μ—”λ“œ μ„œλ²„λŠ” λ°μ΄ν„°λ² μ΄μŠ€μ—μ„œ 데이터λ₯Ό λ°›μ•„μ™€μ„œ ν”„λ‘ νŠΈμ„œλ²„λ‘œ 데이터λ₯Ό 보내주고 ν”„λ‘ νŠΈ μ„œλ²„λŠ” HTMLκ³Ό 데이터λ₯Ό ν•©μ³μ„œ λΈŒλΌμš°μ €μ—κ²Œ 보내쀀닀.

λΈŒλΌμš°μ € βž” ν”„λ‘ νŠΈ μ„œλ²„ βž” λ°±μ—”λ“œ μ„œλ²„ βž” DB

πŸ“ SPA

SPA μ—μ„œλŠ” ν”„λ‘ νŠΈ μ„œλ²„μ—μ„œ μ •μ νŒŒμΌλ“€μ„ λ¨Όμ € λ°›μ•„(HTML, CSS, JavaScript) 화면을 그리고 데이터λ₯Ό λ°±μ—”μ„œ μ„œλ²„μ—μ„œ λ°›μ•„μ˜€λŠ”λ™μ•ˆ λ‘œλ”©λ°”λ₯Ό 화면에 ν‘œμ‹œν•΄ 주도둝 ν•œλ‹€.

λΈŒλΌμš°μ € βž” ν”„λ‘ νŠΈ μ„œλ²„μ—μ„œ μ •μ νŒŒμΌλ“€μ„ λ°›μ•„μ˜΄(HTML, CSS, JavaScript)
λΈŒλΌμš°μ € βž” λ°±μ—”λ“œ μ„œλ²„(ν”„λ‘ νŠΈ μ„œλ²„λ₯Ό κ±°μΉ˜μ§€ μ•Šκ³  λ°±μ—”λ“œ μ„œλ²„λ‘œ λ°”λ‘œ 데이터λ₯Ό μš”μ²­) βž” DB

πŸ“ ν”„λ‘ νŠΈ μ„œλ²„(μ›Ή μ„œλ²„)

  • λ‹€λ₯Έλ§λ‘œ HTTP Server라고도 ν•œλ‹€. μ›Ή λΈŒλΌμš°μ €μ˜ νŒŒνŠΈλ„ˆλ‘œμ„œ μ„œλ²„μ˜ 정보λ₯Ό μ œκ³΅ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄λΌκ³  ν•  수 μžˆλ‹€.
  • λŒ€ν‘œμ μœΌλ‘œ Nginx, Apacheκ°€ μžˆλ‹€.
  • μ›Ή μ„œλ²„λŠ” 인터넷 λ„€νŠΈμ›Œν¬ μœ„μ—μ„œ HTTP ν”„λ‘œν† μ½œμ„ μ΄μš©ν•΄ HTML, CSS, JavaScript, image/mediafileκ³Ό 같은 정적인 정보듀을 μ›Ή λΈŒλΌμš°μ €μ— μ „μ†‘ν•œλ‹€.
  • μ•„νŒŒμΉ˜ μ†Œν”„νŠΈμ›¨μ–΄ μž¬λ‹¨μ—μ„œ λ§Œλ“  μ›Ήμ„œλ²„(web server)λ₯Ό μΌμ»«λŠ”λ‹€.
  • λ¦¬λˆ…μŠ€μ—μ„œλŠ” httpd 둜 λͺ…λͺ…지어져 λ°°ν¬λœλ‹€.
  • 정적인 데이터듀 (html, css 이미지, 파일 λ“±)에 λŒ€ν•œ ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ„ λ°μ΄ν„°λ‘œ λ§Œλ“€μ–΄μ„œ μ‘λ‹΅ν•œλ‹€.
  • 80 포트λ₯Ό μ‚¬μš©
http ν”„λ‘œν† μ½œ 기반으둜 web client (browser) λ‘œλΆ€ν„°μ˜ μš”μ²­μ„ μ„œλΉ„μŠ€ν•˜λŠ” κΈ°λŠ₯을 λ‹΄λ‹Ήν•˜λŠ” ν”„λ‘œκ·Έλž¨. 80번 포트둜 ν΄λΌμ΄μ–ΈνŠΈ μš”μ²­(POST,GET,DELETE)이 μ™”μ„λ•Œλ§Œ μ‘λ‹΅ν•œλ‹€. 정적인 데이터에 λŒ€ν•œ 처리λ₯Ό λ‹΄λ‹Ήν•œλ‹€.

πŸ“ μ›Ήμ„œλ²„λ₯Ό μ΄ν•΄ν•˜κΈ°μ— κ°€μž₯ νŽΈν–ˆλ˜ 유투브 μ˜μƒ</h4>

https://www.youtube.com/watch?v=Zimhvf2B7Es

Β© 2024 베짱이가 λ˜κ³ μ‹Άμ€ κ°œλ―Έγ€‚ Some rights reserved.

portfolio v1.0.0-alpha.3