🚀 μ„±μž₯일지 6.0

μ±… ν–‰λ³΅ν•œ 이기주의자(웨인 닀이어)의 λ‚΄μš©μ— μžκ·Ήλ°›μ•„ μ‹œμž‘ν•˜λŠ” μ†Œλ°•ν•œ μ„±μž₯기둝

μ‚΄μ•„μžˆλŠ” 꽃과 죽은 꽃은 μ–΄λ–»κ²Œ κ΅¬λ³„ν•˜λŠ”κ°€?
μ„±μž₯ν•˜κ³  μžˆλŠ” 것이 μ‚΄μ•„ μžˆλŠ” 것이닀.
생λͺ…μ˜ μœ μΌν•œ μ¦κ±°λŠ” μ„±μž₯이닀!

🌾 (4.0)ν•™μŠ΅ ν‚€μ›Œλ“œμ—μ„œ μ΅œλŒ€ν•œ κ°„λ‹¨ν•œ 정보 제곡, κ³ λ―Όμ—μ„œ λ‚΄ κ²½ν—˜μ„ μžμ„Ένžˆ 적자!
πŸ₯Š (5.0)ν•™μŠ΅ ν‚€μ›Œλ“œλŠ” ν•œμ€„μ˜ ν•΅μ‹¬μœΌλ‘œλ§Œ 정리, 성곡/μ‹€νŒ¨ 일지 μž‘μ„±ν•˜κΈ°! 이 λ•Œ, μ‹€νŒ¨μ˜ κ²½ν—˜μ€ μžμ„Ένžˆ 적기!
πŸ‰ (6.0)<μ™„μ „ 개편!!!> 맀일 μŠ΅κ΄€μ μœΌλ‘œ ν•΅μ‹¬λ§Œ 적을 수 있게 ν”„λ ˆμž„ λ³€κ²½. 성곡보단 μ‹€νŒ¨μ— μ΄ˆμ μ„ λ§žμΆ”κΈ°.

  • πŸ‰ (6.1)<μˆ˜μ •> 맀번 성곡, μ‹€νŒ¨λ₯Ό λ”°λ‘œ μ λŠ” 것보단 κ²½ν—˜μœΌλ‘œ ν‘œν˜„ν•˜μž

🌈 였늘의 감정

μƒˆλ‘œμš΄λ° 아직 적응이 되질 μ•ŠλŠ” λŠλ‚Œ..?! μ˜€λŠ˜μ€ 처음으둜 아웃풋 기반의 κ³„νšμ„ μž‘μ„±ν•΄λ³΄μ•˜λ‹€. 아직 아웃풋을 μ€‘μ‹¬μœΌλ‘œ κ³„νšμ„ μ„Έμš°λŠ” 게 쉽진 μ•Šμ§€λ§Œ, κ·Έλž˜λ„ λ­”κ°€ 쒀더 κ°€μ‹œμ μΈ 결과에 μ΄ˆμ μ„ λ§žμΆ”λ‹ˆκΉŒ μŠ€νŠΈλ ˆμŠ€λ„ λœν•œ 것 κ°™κ³  λ­”κ°€ 더 λͺ…ν™•ν•œ ν•˜λ£¨κ°€ λ˜λŠ” 것 κ°™λ‹€. λ¬Όλ‘  아직 μ„œνˆ΄λŸ¬μ„œ, μ•„μ£Ό νš¨μœ¨μ μ΄λΌλŠ” λŠλ‚ŒκΉŒμ§€λŠ” μ•„λ‹ˆμ§€λ§Œ γ…Žγ…Ž

🫧 였늘의 고민

ν΄λ‘œμ €λ₯Ό μ‚¬μš©ν•˜λŠ” 것은 ν•¨μˆ˜ν˜• νŒ¨λŸ¬λ‹€μž„μ— μ–΄κΈ‹λ‚˜λŠ”κ°€?

μ˜€λŠ˜μ€ ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ„ κ³΅λΆ€ν•˜λ©΄μ„œ λͺ…μ‹œμ  μž…λ ₯, 좜λ ₯ 그리고 암묡적 μž…λ ₯, 좜λ ₯을 κ΅¬λΆ„ν•˜λŠ” 법을 λ°°μ› λ‹€. μ—¬κΈ°μ„œ λͺ…μ‹œμ  μž…λ ₯은 ν•¨μˆ˜μ˜ 인자, λͺ…μ‹œμ  좜λ ₯은 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ„ μ˜λ―Έν•œλ‹€. 그리고 이λ₯Ό μ œμ™Έν•œ λͺ¨λ“  μž…λ ₯κ³Ό 좜λ ₯은 암묡적인 κ°’μœΌλ‘œ μš°λ¦¬κ°€ ν”νžˆ μ•„λŠ” side effect(λΆ€μˆ˜ 효과)κ°€ λœλ‹€. ν—Œλ° λ‚΄κ°€ λŠλ‚€ 객체지ν–₯κ³Ό ν•¨μˆ˜ν˜•μ˜ κ°€μž₯ λΉ„μŠ·ν•˜λ©΄μ„œλ„ λ¬˜ν•˜κ²Œ λ‹€λ₯Έ ν¬μΈνŠΈλŠ” λ°”λ‘œ ν΄λ‘œμ €λ₯Ό μ‚¬μš©ν•˜λŠ” 것이닀. 객체지ν–₯은 주둜 class둜 κ΅¬ν˜„μ„ ν•˜λ‹€λ³΄λ‹ˆ κ·Έ 객체 μžμ²΄κ°€ ν”„λ‘œνΌν‹°(μƒνƒœ)와 λ©”μ„œλ“œλ₯Ό κ°–λŠ”λ‹€. ν•¨μˆ˜λŠ” λ‚΄λΆ€μ μœΌλ‘œ μ„ μ–Έν•œ λ³€μˆ˜(μƒνƒœ)λ₯Ό μ‚¬μš©ν•  μˆ˜λŠ” μžˆμ§€λ§Œ, κ·Έ λ³€μˆ˜λ₯Ό μ™ΈλΆ€μ—μ„œ μ ‘κ·Όν•  μˆ˜λŠ” μ—†λ‹€. κ·Έλž˜μ„œ ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ—μ„œλŠ” ν΄λ‘œμ €λ₯Ό μ‚¬μš©ν•΄μ„œ μ™ΈλΆ€μ—μ„œ μ ‘κ·Όν•  수 μ—†λŠ” λ³€μˆ˜λ₯Ό λ§Œλ“€μ–΄μ„œ μƒνƒœλ₯Ό κ΄€λ¦¬ν•œλ‹€. κ·Έλ ‡λ‹€λ©΄ 이건 λΆ€μˆ˜ νš¨κ³Όκ°€ μ•„λ‹Œκ°€..? 이에 λŒ€ν•΄ ꡬ글링을 해도 잘 λ‚˜μ˜€μ§€ μ•Šμ•„μ„œ GPTν•œν…Œ λ¬Όμ–΄λ΄€λ‹€.

ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ—μ„œλŠ” 보톡 μƒνƒœ λ³€κ²½μ΄λ‚˜ 데이터 변경을 μ§€μ–‘ν•©λ‹ˆλ‹€. 이것이 ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ˜ "μˆœμˆ˜μ„±(purity)" κ°œλ…μ— ν•΄λ‹Ήν•©λ‹ˆλ‹€. 순수 ν•¨μˆ˜λŠ” λ™μΌν•œ μž…λ ₯에 λŒ€ν•΄ 항상 λ™μΌν•œ 좜λ ₯을 λ°˜ν™˜ν•˜λ©° λΆ€μž‘μš©(side-effects)κ°€ μ—†μ–΄μ•Ό ν•©λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜, ν΄λ‘œμ €λŠ” ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ—μ„œ μ€‘μš”ν•œ λ„κ΅¬λ‘œμ„œ, μ™ΈλΆ€ ν•¨μˆ˜μ˜ λ²”μœ„μ—μ„œ λ³€μˆ˜λ₯Ό "캑처"ν•˜μ—¬ λ‚΄λΆ€ ν•¨μˆ˜κ°€ 이 λ³€μˆ˜μ— μ•‘μ„ΈμŠ€ν•  수 있게 ν•©λ‹ˆλ‹€. 이λ₯Ό 톡해 ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ—μ„œλ„ μƒνƒœλ₯Ό κ°€μ§ˆ 수 μžˆλŠ” 방법을 μ œκ³΅ν•©λ‹ˆλ‹€.

λ‹€λ§Œ 이 ν΄λ‘œμ € λ³€μˆ˜λ₯Ό λ³€κ²½ν•˜λŠ” 것은 사싀상 μƒνƒœ 변경을 μˆ˜λ°˜ν•˜κΈ° λ•Œλ¬Έμ—, μˆœμˆ˜ν•œ ν•¨μˆ˜ν˜• νŒ¨λŸ¬λ‹€μž„μ—λŠ” μ–΄κΈ‹λ‚˜λŠ” ν–‰μœ„λ‘œ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ‹€μ œ ν”„λ‘œκ·Έλž˜λ° ν™˜κ²½μ—μ„œλŠ” μˆœμˆ˜ν•œ ν•¨μˆ˜ν˜• νŒ¨λŸ¬λ‹€μž„λ§Œμ„ 지킀기 μ–΄λ ΅κ³ , λ•Œλ‘œλŠ” μƒνƒœ 변경이 ν•„μš”ν•œ κ²½μš°κ°€ μžˆμŠ΅λ‹ˆλ‹€.

이런 경우, ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‚˜ λΌμ΄λΈŒλŸ¬λ¦¬λŠ” 'λΆˆλ³€μ„±'을 μœ μ§€ν•˜λ©΄μ„œ μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈν•˜λŠ” 방법듀을 μ œκ³΅ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ¦¬μ•‘νŠΈμ—μ„œλŠ” μƒνƒœ 변경을 μœ„ν•΄ setStateλ₯Ό μ œκ³΅ν•˜κ³ , ν΄λ‘œμ €λ₯Ό μ΄μš©ν•΄ μƒνƒœλ₯Ό μœ μ§€ν•˜λ©΄μ„œλ„ λΆˆλ³€μ„±μ„ μ§€ν‚€λŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€.

λ”°λΌμ„œ, ν΄λ‘œμ €λ₯Ό μ΄μš©ν•΄μ„œ νŠΉμ • ν•¨μˆ˜κ°€ κ°–λŠ” ν΄λ‘œμ € λ³€μˆ˜μ˜ 값을 λ³€κ²½ν•˜λŠ” 것은 κ²½μš°μ— 따라 ν•¨μˆ˜ν˜• νŒ¨λŸ¬λ‹€μž„μ— μ–΄κΈ‹λ‚  수 μžˆμ§€λ§Œ, 이λ₯Ό μ μ ˆν•˜κ²Œ μ‚¬μš©ν•˜λ©΄ ν•¨μˆ˜ν˜• νŒ¨λŸ¬λ‹€μž„μ„ μ§€ν‚€λ©΄μ„œλ„ ν•„μš”ν•œ μƒνƒœ 변경을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μŠ€ν„°λ””μ›λ“€κ³Όλ„ 같이 이야기해볼 μ˜ˆμ •μΈλ°, λ‚΄κ°€ μƒκ°ν–ˆλ˜ 닡변이라 λ§Œμ‘±μŠ€λŸ¬μ› λ‹€. γ…Žγ…Ž :) μ΄μ œλŠ” ν΄λ‘œμ €κ°€ μ™œ μ€‘μš”ν•˜κ³  μ™œ μ‚¬μš©ν•˜λŠ”μ§€, ν˜„λŒ€ λΌμ΄λΈŒλŸ¬λ¦¬λ‚˜ ν”„λ ˆμž„μ›Œν¬μ—μ„œ μ–΄λ–»κ²Œ ν™œμš©ν•˜κ³  μžˆλŠ”μ§€ μ•Œ 것 κ°™λ‹€.

β˜€οΈ 였늘의 κ²½ν—˜

express 없이 μ„œλ²„ κ΅¬ν˜„ν•˜κΈ°

μ˜€λŠ˜μ€ express 없이 μ„œλ²„λ₯Ό κ΅¬ν˜„ν•΄λ³΄μ•˜λ‹€. express 없이 μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜λ €λ©΄ http λͺ¨λ“ˆμ„ μ‚¬μš©ν•΄μ•Ό ν•œλ‹€. http λͺ¨λ“ˆμ€ node.js에 기본적으둜 λ‚΄μž₯λ˜μ–΄ μžˆλŠ” λͺ¨λ“ˆμ΄λ‹€. http λͺ¨λ“ˆμ„ μ‚¬μš©ν•˜λ©΄ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•  수 μžˆμ§€λ§Œ, μ‹€μ œλ‘œ μ½”λ“œμ˜ 가독성도 쒋지 μ•Šκ³  λΌμš°ν„° 처리 λ˜ν•œ μ§€μ €λΆ„ν•˜κ²Œ λΆ„κΈ°μ²˜λ¦¬ν•΄μ•Όν•΄μ„œ express와 같은 라이브러리λ₯Ό μ“°λŠ” 게 νŽΈν•˜λ‹€. 사싀 μ΄μ „μ—λŠ” expressκ°€ ꡉμž₯히 λ§ˆλ²•κ°™μ€ 라이브러리라고 생각을 ν–ˆλŠ”λ°, express 없이 http λͺ¨λ“ˆλ‘œλ§Œ μ„œλ²„λ₯Ό κ°„λ‹¨νžˆ μž‘μ„±ν•΄λ³΄λ‹ˆ λ­λž„κΉŒβ€¦ 보기 μ’‹κ²Œ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³  λ³Ό 수 있게 ν•΄μ£ΌλŠ”..? μ§„μ§œ 쑰금의 편의 κΈ°λŠ₯ 정도λ₯Ό μ œκ³΅ν•œλ‹€λŠ” λŠλ‚Œμ΄ λ“€μ—ˆλ‹€. γ…Žγ…Žγ…Žγ…Žγ…Ž (λ¬Όλ‘  μ œκ³΅ν•΄μ£ΌλŠ” μ—¬λŸ¬ middlewareλŠ” 정말 νŽΈν•œ 것 κ°™λ‹€~!γ…‹γ…‹γ…‹)

μ„œλ²„λ¦¬μŠ€ μ•„ν‚€ν…μ²˜(feat. serverless function)

λ§‰μ—°ν•˜κ²Œ μ„œλ²„λ¦¬μŠ€λΌλŠ” 단어λ₯Ό λ“€μœΌλ©΄ μ„œλ²„κ°€ μ—†λ‹€κ³ ..?λΌλŠ” 생각을 ν–ˆμ—ˆλ‹€. ν•˜μ§€λ§Œ 였늘 κ°„λ‹¨ν•˜κ²Œλ‚˜λ§ˆ netlify와 vercel의 serverless function κΈ°λŠ₯을 μ‚΄νŽ΄λ³΄κ³ μ„  λŒ€λž΅μ μœΌλ‘œ μ„œλ²„λ¦¬μŠ€κ°€ 뭔지 μ•Œ 수 μžˆμ—ˆλ‹€. μ„œλ²„κ°€ μ—†λ‹€κΈ°λ³΄λ‹€λŠ” μ„œλ²„λ₯Ό 직접 κ΅¬ν˜„ν•˜κ±°λ‚˜ 라이브러리λ₯Ό μ‚¬μš©ν•΄μ„œ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜λŠ” 것이 μ•„λ‹ˆλΌ, μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜λŠ” 것을 μΆ”μƒν™”μ‹œμΌœμ„œ μ‚¬μš©μžκ°€ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜λŠ” κ²ƒμ²˜λŸΌ 보이게 ν•˜λŠ” 것이닀. 예λ₯Ό λ“€μ–΄ vercel의 serverless function은 /api 폴더 μ•ˆμ— *.js νŒŒμΌμ„ λ§Œλ“€λ©΄, ν•΄λ‹Ή 파일의 이름이 λΌμš°ν„°κ°€ 되고, 파일 λ‚΄λΆ€μ˜ ν•¨μˆ˜κ°€ λΌμš°ν„° ν•Έλ“€λŸ¬κ°€ λœλ‹€. μ΄λ ‡κ²Œ ν•˜λ©΄ μ„œλ²„λ₯Ό 직접 κ΅¬ν˜„ν•˜λŠ” κ²ƒμ²˜λŸΌ λ³΄μ΄μ§€λ§Œ, μ‹€μ œλ‘œλŠ” vercelμ΄λ‚˜ netlifyκ°€ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜κ³ , μ‚¬μš©μžκ°€ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜λŠ” κ²ƒμ²˜λŸΌ 보이게 ν•˜λŠ” 것이닀. μ΄λ ‡κ²Œ μΆ”μƒν™”μ‹œμΌœμ„œ μ‚¬μš©μžκ°€ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•˜λŠ” κ²ƒμ²˜λŸΌ 보이게 ν•˜λŠ” 것을 μ„œλ²„λ¦¬μŠ€ μ•„ν‚€ν…μ²˜λΌκ³  ν•œλ‹€. μ•„λ§ˆ λ‚΄κ°€ μ•ŒκΈ°λ‘  이런 κΈ°λŠ₯이 Next.js에 기본적으둜 λ‚΄μž₯λ˜μ–΄ μžˆλŠ” 것 κ°™λ‹€.

🐾 였늘의 κ΅ν›ˆ

μ²˜μŒλΆ€ν„° λ‹€ λœλ‹€κ³  μƒκ°ν•˜μ§€ 말자. μƒˆλ‘œμš΄ κ±Έ 천천히 μ μš©ν•΄λ³΄κ³  λ°˜λ³΅ν•˜λ©΄μ„œ μŠ΅κ΄€μœΌλ‘œ, λ‚΄ κ²ƒμœΌλ‘œ λ§Œλ“€μž. λ–„λ‘œλŠ” λ°˜λ³΅ν•˜κ³  μžˆλŠ” μ‹œκ°„μ΄ 아깝닀고 λŠλ‚„ λ•Œλ„ μžˆμ§€λ§Œ, 반볡이 μžˆκΈ°μ— λ‚΄ 것이 λ˜λŠ” 것이닀. 그런 반볡의 와쀑에도 μ–΄λ–»κ²Œ λ‚˜λ₯Ό 쒀더 ν•œ 단계 μ„±μž₯μ‹œν‚¬ 수 μžˆμ„μ§€ 늘 μƒκ°ν•˜μž. μ΄λ ‡κ²Œ λ°˜λ³΅ν•˜λ‹€λ³΄λ©΄ λΆ„λͺ… 쒋은 κ°œλ°œμžκ°€ λ˜μ–΄μžˆμœΌλ¦¬λΌ λ―ΏλŠ”λ‹€. :)

πŸͺ΅ μ°Έκ³