์๋ ํ์ธ์, ์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค!
์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค๋ ์นด๋ค๊ธฐ ๋ฉ๋ก , ์์ฑํด, ํ ๋ก ํ , ์ํฐ๋ฃจ ๋ฑ ๋ถ๋ฏธ์ ์ฃผ์ ๋ํ์์ ์ปดํจํฐ๊ณตํ์ ์ ๊ณตํ๊ณ , Google, Microsoft, Meta ๋ฑ ๊ธ๋ก๋ฒ IT ๊ธฐ์ ์์ ์ค๋ฌด ๊ฒฝํ์ ์์ ๊ฐ๋ฐ์๋ค์ด ํจ๊ป ๋ง๋ ๊ต์ก ๊ทธ๋ฃน์ ๋๋ค.
์ฒ์์๋ ๋ฏธ๊ตญ๊ณผ ์บ๋๋ค์ ์ปดํจํฐ๊ณตํ ์ ๊ณต์๋ค๋ผ๋ฆฌ ํจ๊ป ๊ณต๋ถํ๋ฉฐ ์ฑ์ฅํ๊ณ ์ ๋ง๋ ์คํฐ๋ ๋ชจ์์์ ์์๋์์ต๋๋ค. ๊ฐ๊ธฐ ๋ค๋ฅธ ๋ํ, ๋ค๋ฅธ ์๊ฐ๋์ ์์์ง๋ง ํจ๊ป ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์๋ก์๊ฒ ๋ฐฐ์ด ๊ทธ ์๊ฐ์ ๋งค์ฐ ํน๋ณํ๊ณ , ์์ฐ์ค๋ฝ๊ฒ ์ด๋ฐ ์๊ฐ์ด ๋ค์์ต๋๋ค.
โ์ฐ๋ฆฌ๊ฐ ๊ณต๋ถํ๋ ์ด ๋ฐฉ์, ๊ทธ๋๋ก ๋ค๋ฅธ ์ฌ๋์๊ฒ๋ ์ ํ๋ฉด ์ด๋จ๊น?โ
๊ทธ ๋ฌผ์์ด ๋ฐ๋ก ์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค์ ์ถ๋ฐ์ ์ด์์ต๋๋ค.
ํ์ฌ๋ ์ฝ 30๋ช ์ ํ์ง ๊ฐ๋ฐ์์ ์ปดํจํฐ๊ณตํ ์ ๊ณต ๋ํ์๋ค์ด ๊ฐ์์ ์ ๋ฌธ ๋ถ์ผ๋ฅผ ๋งก์, ์ ๋ฌธ๋ถํฐ ์ค์ ๊น์ง ์์ฐ๋ฅด๋ ์ปค๋ฆฌํ๋ผ์ ์ง์ ์ค๊ณํ๊ณ ๊ฐ์ํฉ๋๋ค. ๋จ์ํ ์ง์ ์ ๋ฌ์ ๋์ด, ์ง์ง ๊ฐ๋ฐ์์ ์์ ์ผ๋ก ๋ฐฐ์ฐ๊ณ ํจ๊ป ์ฑ์ฅํ ์ ์๋ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค.
โ์ง์ง ๊ฐ๋ฐ์๋, ์ง์ง ๊ฐ๋ฐ์์๊ฒ ๋ฐฐ์์ผ ํฉ๋๋ค.โ
์ ํฌ๋ ์น ๊ฐ๋ฐ์ ์ ๊ณผ์ ์ ์ฒ์๋ถํฐ ๋๊น์ง ์ฒด๊ณ์ ์ผ๋ก ๋ค๋ฃจ๋, ์ด๋ก ์ ๋จธ๋ฌด๋ฅด์ง ์๊ณ ์ค์ต๊ณผ ์ค์ ์ค์ฌ์ ํผ๋๋ฐฑ์ ํตํด ์ค๋ ฅ์ ํค์๋๋ฆฝ๋๋ค.
์๊ฐ์ ํ ์ฌ๋, ํ ์ฌ๋์ ์ฑ์ฅ์ ํจ๊ป ๊ณ ๋ฏผํ๊ณ ์ด๋์ด๊ฐ๋ ๊ฒ์ด ์ฐ๋ฆฌ์ ์ฒ ํ์
๋๋ค.
๐ฏ ์ฐ๋ฆฌ์ ์ฒ ํ์ ๋ถ๋ช
ํฉ๋๋ค.
"์ง์ ํ ๋ฐฐ์์ ์ค์ฒ์์ ์ค๊ณ , ์ฑ์ฅ์ ํจ๊ปํ ๋ ์์ฑ๋๋ค."
๊ฐ๋ฐ์ ์ฒ์ ์์ํ๋ ์
๋ฌธ์๋ถํฐ, ์ค๋ฌด ๋ฅ๋ ฅ์ ํค์ฐ๊ณ ์ถ์ ์ทจ์
์ค๋น์, ์ง๋ก๋ฅผ ํ์ ์ค์ธ ์ฒญ์๋
๊น์ง.
์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค๋ ๋ชจ๋์ ์ถ๋ฐ์ ์ด์, ํจ๊ป ๊ฑท๋ ๋ ๋ ํ ๋๋ฐ์๊ฐ ๋๊ณ ์ ํฉ๋๋ค.
์ด์ , ํผ์ ๊ณ ๋ฏผํ์ง ๋ง์ธ์.
์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค๊ฐ ์ฌ๋ฌ๋ถ์ ์ฑ์ฅ์ ํจ๊ปํ๊ฒ ์ต๋๋ค.
Welcome to Neighborhood Coding Studio!
Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.
It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:
โWhat if we shared this way of learning with others?โ
That thought became the foundation of Neighborhood Coding Studio.
Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertiseโdesigning and delivering a curriculum that spans from foundational knowledge to real-world development.
Weโre not just here to teachโweโre here to help you see through the lens of real developers and grow together.
โTo become a real developer, you must learn from real developers.โ
Our courses take you through the entire web development journeyโfrom start to finishโfocused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learnerโs growth and are committed to supporting your path every step of the way.
๐ฏ Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."
Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpadโand your trusted companion on the journey.
You donโt have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.
Courses
Reviews
- Implementing Notion Directly with Vanilla JavaScript
rarla
ยท
From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]- Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]
- Implementing Notion Directly with Vanilla JavaScript
- Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]
Posts
Q&A
๋ง์ฝ ๋ฌธ์ ์๊ฐ ๋งค์ฐ ๋ง์์ง๋ค๋ฉด ์ฑ๋ฅ ์ด์๋ ์์๊น์?
์๋ ํ์ธ์ ์๋ฐฅ๋ ๐์ง๋ฌธ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.์ด ๋ด์ฉ์์ ๋ค๋ฃจ๋ ์ต์ ํ ๋ฐฉ๋ฒ์ ์์ ํ ์ดํดํ๋ ค๋ฉด ์ฝ๊ฐ์ ์ปดํจํฐ ๊ณผํ์ ๋ฐฐ๊ฒฝ ์ง์์ด ํ์ํฉ๋๋ค.ํนํ ๋ค์ ์ธ ๊ฐ์ง ๊ฐ๋ ์ ์๊ณ ์์ผ๋ฉด ํจ์ฌ ์ฝ๊ฒ ์ดํดํ ์ ์์ต๋๋ค.์ฒซ์งธ๋ ์๊ฐ ๋ณต์ก๋(Time Complexity) ๊ฐ๋ ์ผ๋ก, ์ด๋ค ์ฝ๋๊ฐ ๋ฐ์ดํฐ์ ์์ด ๋์ด๋ ์๋ก ์ผ๋ง๋ ๋๋ ค์ง๋์ง๋ฅผ ๋ํ๋ด๋ ์งํ์ ๋๋ค. ์๋ฅผ ๋ค์ด ๋ฐฐ์ด์ ์ฒ์๋ถํฐ ๋๊น์ง ๋ชจ๋ ํ๋ ์ฝ๋๋ O(n), ์ค์ฒฉ ๋ฐ๋ณต๋ฌธ์ด ์๋ ์ฝ๋๋ O(nยฒ)์ฒ๋ผ ํํํฉ๋๋ค.๋์งธ๋ ์๋ฃ๊ตฌ์กฐ(Data Structure) ์ค ๋ฐฐ์ด(Array)๊ณผ ๋งต(Map, ํด์๋งต HashMap)์ ๋๋ค. ๋ฐฐ์ด์ ์์๋๋ก ์ ์ฅํ๋ ๊ตฌ์กฐ์ด์ง๋ง ๊ฒ์ํ ๋๋ ์ฒ์๋ถํฐ ๋๊น์ง ์ฐพ์์ผ ํ๊ณ , ๋งต์ ํค(key)๋ฅผ ์ด์ฉํด ๊ฐ์ ๊ฑฐ์ ์ฆ์ ์ฐพ์ ์ ์๋ ๊ตฌ์กฐ์ ๋๋ค.์ ์งธ๋ ์ธ๋ฑ์ค(Index) ๊ฐ๋ ์ผ๋ก, ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ ๊ฒ์ ์์คํ ์์ โํ์ํ ๋ฐ์ดํฐ๋ฅผ ๋น ๋ฅด๊ฒ ์ฐพ๊ธฐ ์ํด ๋ฏธ๋ฆฌ ๋ง๋ค์ด๋๋ ์ฐธ์กฐ์ฉ ์ง๋โ๋ฅผ ๋งํฉ๋๋ค.์ด ์ธ ๊ฐ์ง ๊ฐ๋ ์ด ์ด ๊ธ์ ๋ชจ๋ ์ต์ ํ ๋ ผ๋ฆฌ์ ํ ๋๊ฐ ๋ฉ๋๋ค.์ง๊ธ์ ๊ตฌ์กฐ๋ state.docs ๋ฐฐ์ด ์ ์ฒด๋ฅผ ๋งค๋ฒ find()๋ filter()๋ก ํ์ด๋ณด๋ ๋ฐฉ์์ด๋ผ, ๋ฌธ์๊ฐ ์๋ฐฑ ๊ฐ๋ ์์ฒ ๊ฐ๋ก ๋์ด๋๋ฉด ์์ฐ์ค๋ฝ๊ฒ ์ฑ๋ฅ ์ ํ๊ฐ ์๊น๋๋ค. ์ด๋ฐ์๋ ์๋ฌด ๋ฌธ์ ๊ฐ ์์ด ๋ณด์ฌ๋, ํธ๋ฆฌ ๋ ๋๋ง์ด ์ผ์ด๋ ๋ ๊ฐ ๋ ธ๋๋ง๋ค childrenOf()๊ฐ ๋ฐ๋ณต์ ์ผ๋ก ํธ์ถ๋๊ณ , ๊ฑฐ๊ธฐ์ ๋ฌธ์ ์ด๋, ์ ๋ชฉ ์์ , ์ฆ๊ฒจ์ฐพ๊ธฐ ํ ๊ธ ๊ฐ์ ์ด๋ฒคํธ๊ฐ ๋์์ ์ผ์ด๋๋ฉด ํ ํ๋ ์ ์์์ ์ ํ ํ์์ด ์ฌ๋ฌ ๋ฒ ๊ฒน์น๊ฒ ๋ฉ๋๋ค. ์ด๋ ๊ฒ ๋๋ฉด ์ฒด๊ฐ์ O(nยฒ) ํํ๋ก ๋๋ ค์ ธ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ์ ๋ฉ์ถ๋ ํ์์ด ๋ฐ์ํ ์ ์์ต๋๋ค.์ด ๋ฌธ์ ๋ฅผ ๊ทผ๋ณธ์ ์ผ๋ก ํด๊ฒฐํ๋ ค๋ฉด ์ธ ๊ฐ์ง๊ฐ ํจ๊ป ๊ณ ๋ ค๋์ด์ผ ํฉ๋๋ค. ์ฒซ์งธ, ์กฐํ๋ฅผ ๊ฑฐ์ ์ฆ์ ๋๋ผ ์ ์๊ฒ ๋ง๋๋ ์ธ๋ฑ์ค ๊ตฌ์กฐ ์ค๊ณ. ๋์งธ, DOM ๊ฐฑ์ ์์ฒด๋ฅผ ์ต์ํํ๋ ๋ ๋๋ง ๋ฐฉ์. ์ ์งธ, ์ ์ฅ๊ณผ ๋ ๋ ํธ์ถ ๋น๋๋ฅผ ์กฐ์ ํด ๋ฉ์ธ ์ค๋ ๋๊ฐ ๊ฐ์๊ธฐ ๊ณผ๋ถํ๋์ง ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค.์ด ์๋ฆฌ๋ฅผ ์กฐ๊ธ ๋ ์ฝ๊ฒ ์ค๋ช ํ๋ฉด โ์์ฃผ ์ผ์ด๋๋ ์ผ์ ์ต๋ํ ๋น ๋ฅด๊ฒ, ๋๋ฌผ๊ฒ ์ผ์ด๋๋ ์ผ์ ์กฐ๊ธ ๋๋ ค๋ ๊ด์ฐฎ๊ฒ ๋ง๋ ๋คโ๋ ๊ฐ๋ ์ ๋๋ค. ๋ฌธ์ ํ์์ ๋งค์ฐ ์์ฃผ ์ผ์ด๋๋ ์์ ์ด๋ฏ๋ก ๋ฐ๋์ ๋น ๋ฅด๊ฒ ๋ง๋ค์ด์ผ ํ๊ณ , ๋ฐ๋ฉด ๋ฌธ์๋ฅผ ์๋ก ๋ง๋ค๊ฑฐ๋ ์ด๋ํ๊ฑฐ๋ ์ญ์ ํ๋ ์ผ์ ์๋์ ์ผ๋ก ๋ ์์ฃผ ์ผ์ด๋๊ธฐ ๋๋ฌธ์ ๊ทธ๋๋ง ์ฝ๊ฐ์ ์ถ๊ฐ ๋น์ฉ์ ๋ด๋ ์ ์ฒด ์ฑ์ ์ฒด๊ฐ ์๋๋ ํจ์ฌ ๋นจ๋ผ์ง๋๋ค.์ด ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋ ๋๊ตฌ๊ฐ ๋ฐ๋ก ์๋ฐ์คํฌ๋ฆฝํธ์ Map์ ๋๋ค.Map์ ์ผ๋ฐ ๊ฐ์ฒด(Object)์ ๋น์ทํ๊ฒ ํค(key)์ ๊ฐ(value)์ ์ง์ง์ด ์ ์ฅํ๋ ์๋ฃ ๊ตฌ์กฐ์ด์ง๋ง, ๋ช ๊ฐ์ง ์ค์ํ ์ฐจ์ด๊ฐ ์์ต๋๋ค.์ฒซ์งธ, Map์ ์ด๋ค ํ์ ์ด๋ ํค๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ซ์, ๋ฌธ์์ด๋ฟ ์๋๋ผ ๊ฐ์ฒด๋ ์ฌ๋ณผ๋ ๊ฐ๋ฅํฉ๋๋ค.๋์งธ, get, set, has, delete, size ๊ฐ์ ์ ์ฉ ๋ฉ์๋๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ๋งค์ฐ ๋น ๋ฅด๊ฒ ์ฝ๊ณ ์ธ ์ ์์ต๋๋ค.์ ์งธ, Map์ ๋ด๋ถ์ ์ผ๋ก ํด์ ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ํ๊ท ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฐพ๊ฑฐ๋ ๋ฃ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ด ๊ฑฐ์ ์ผ์ ํฉ๋๋ค. ์ฆ, ๋ฐ์ดํฐ๊ฐ ์๋ฌด๋ฆฌ ๋ง์์ ธ๋ ์กฐํ ์๋๊ฐ ๊ฑฐ์ ๋ณํ์ง ์์ต๋๋ค.์ด๊ฑธ ์ ํ๋ฒํธ๋ถ๋ก ๋น์ ํด ๋ณด๋ฉด ํจ์ฌ ์ง๊ด์ ์ ๋๋ค.์ผ๋ฐ ๋ฐฐ์ด์ ํ์ํ๋ ๊ฒ์ ๋ง์น โ์ ํ๋ฒํธ๋ถ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ํ ์ค์ฉ ๋๊ธฐ๋ฉฐ ์ด๋ฆ์ ์ฐพ๋ ๋ฐฉ์โ์ด๋ผ๋ฉด, Map์ โ์ด๋ฆ์ ์ ๋ ฅํ์๋ง์ ๋ฐ๋ก ๋ฒํธ๊ฐ ๋จ๋ ์ค๋งํธํฐ ์ฐ๋ฝ์ฒ ๊ฒ์โ์ ๊ฐ๊น์ต๋๋ค.์ด์ฒ๋ผ Map์ ์ด์ฉํ๋ฉด id๋ก ๋ฌธ์๋ฅผ ์ฆ์ ์ฐพ๊ฑฐ๋ ํน์ ๋ถ๋ชจ ID์ ์ํ ์์ ๋ฌธ์๋ค์ ํ ๋ฒ์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.์ด ์๋ฆฌ๋ฅผ ํ์ฌ ์ฝ๋์ ์ ์ฉํ๋ ค๋ฉด ๋ ๊ฐ์ง ๊ด์ ์์ ์ธ๋ฑ์ค๋ฅผ ์ค๊ณํ๋ฉด ๋ฉ๋๋ค.ํ๋๋ id โ ๋ฌธ์ ๊ฐ์ฒด ํํ์ ์ธ๋ฑ์ค์ด๊ณ ,๋ค๋ฅธ ํ๋๋ parentId โ [์์ ๋ฌธ์๋ค] ํํ์ ์ธ๋ฑ์ค์ ๋๋ค.์ฑ์ด ์ฒ์ ์คํ๋ ๋ ํ ๋ฒ ์ ์ฒด ๋ฐ์ดํฐ๋ฅผ ํ์ด์ ์ด ๋ ์ธ๋ฑ์ค๋ฅผ ๋ฏธ๋ฆฌ ๋ง๋ค์ด ๋๊ณ , ์ดํ์๋ ๋ฌธ์๊ฐ ์๋ก ๋ง๋ค์ด์ง๊ฑฐ๋ ์์ ๋๊ฑฐ๋ ์ด๋๋๊ฑฐ๋ ์ญ์ ๋ ๋๋ง๋ค ์ธ๋ฑ์ค๋ฅผ ์ฆ์ ๊ฐฑ์ ํ๋๋ก ์ ์งํ๋ฉด ๋ฉ๋๋ค.์ด๋ ๊ฒ ํ๋ฉด ๋ฌธ์๋ฅผ ์ฐพ์ ๋ ์ ์ฒด ๋ฐฐ์ด์ ํ์ ํ์๊ฐ ์๊ณ , ํ์ํ ์ ๋ณด๋ง ์ฆ์ ๊บผ๋ด์ฌ ์ ์์ต๋๋ค. ๋ํ ๋ณ๊ฒฝ ์์๋ ๊ทธ ๋ถ๋ชจ์ ํด๋นํ๋ ์์ ๊ทธ๋ฃน๋ง ๋ค์ ์ ๋ ฌํ๋ฉด ๋๋ฏ๋ก ์ ์ฒด๋ฅผ ๋ค์ ๊ณ์ฐํ ํ์๊ฐ ์์ต๋๋ค.์ ๋ ฌ ๊ธฐ์ค์ ๊ธฐ์กด๊ณผ ๋์ผํ๊ฒ order๋ฅผ ์ฐ์ ์ผ๋ก ํ๊ณ , ๊ฐ์ด ๊ฐ์ ๋๋ง title์ ๋น๊ตํ๋ ๊ฒ์ด ์ข์ต๋๋ค. localeCompare๋ CPU ๋น์ฉ์ด ์๋์ ์ผ๋ก ํฌ๊ธฐ ๋๋ฌธ์ ๋ณด์กฐ ๋น๊ต๋ก๋ง ์ฌ์ฉํ๋ ๊ฒ์ด ํจ์จ์ ์ ๋๋ค.์๋ ์ฝ๋๋ ์ด๋ฐ ์ธ๋ฑ์ค๋ฅผ ์ค์ ๋ก ๊ตฌํํ๋ ์ต์ํ์ ์์์ ๋๋ค. ํธ์ถ๋ถ๋ ๊ทธ๋๋ก ๋๊ณ , ๋ด๋ถ ๋์๋ง ๊ต์ฒดํ๋ ๋ฐฉ์์ด๋ผ ์ ์ฒด ์ฝ๋ ๊ตฌ์กฐ๋ฅผ ๋ฐ๊พธ์ง ์์๋ ์์ ํ๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค.// ์ธ๋ฑ์ค const index = { byId: new Map(), byParent: new Map() }; const byOrder = (a,b)=> (a.order - b.order) || a.title.localeCompare(b.title); function ensureBucket(pid){ const key = pid ?? null; if (!index.byParent.has(key)) index.byParent.set(key, []); return index.byParent.get(key); } function buildIndexes(){ index.byId.clear(); index.byParent.clear(); for (const d of state.docs){ index.byId.set(d.id, d); ensureBucket(d.parentId).push(d); } for (const arr of index.byParent.values()) arr.sort(byOrder); } // ์กฐํ ํฌํผ ๋ด๋ถ ๊ตฌํ๋ง ๊ต์ฒด function findDoc(id){ return index.byId.get(id) || null; } function childrenOf(pid){ const bucket = index.byParent.get(pid ?? null) || []; return bucket.slice(); // ์ธ๋ถ ๋ณํ ๋ฐฉ์ง } ์ฌ๊ธฐ์ ๋์ค๋ โ๋ฒํท(bucket)โ์ด๋ผ๋ ๋จ์ด๋, ๊ฐ์ ๋ถ๋ชจ๋ฅผ ๊ฐ์ง ๋ฌธ์๋ค์ ํ๋์ ๋ฌถ์ ๋จ์๋ก ์ ์ฅํด ๋ ๋ฐฐ์ด์ ๋ปํฉ๋๋ค.์ฆ, index.byParent๋ผ๋ Map ์์ ๋ถ๋ชจ ID โ [ํด๋น ๋ถ๋ชจ์ ์์ ๋ฌธ์ ๋ชฉ๋ก]์ด ์ ์ฅ๋๋๋ฐ, ์ด ์์ ๋ฌธ์ ๋ฐฐ์ด ํ๋ํ๋๊ฐ ๋ฐ๋ก โ๋ฒํทโ์ ๋๋ค.์ฝ๊ฒ ๋งํด, โํ ๋ถ๋ชจ ๋ฐ์ ์๋ ์์ด๋ค ํด๋๋ฅผ ํ ๋ฐ๊ตฌ๋(bucket)์ ๋ด์๋๊ณ , ๋ถ๋ชจ๋ณ๋ก ๋ฐ๊ตฌ๋๋ฅผ ๋ฐ๋ก ๊ด๋ฆฌํ๋ ๊ตฌ์กฐโ๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค.์ด ๋๋ถ์ ํน์ ๋ถ๋ชจ ๋ฐ์ ์์ ๋ฌธ์๋ค๋ง ๋น ๋ฅด๊ฒ ์ฐพ๊ฑฐ๋ ์ ๋ ฌํ ์ ์์ต๋๋ค.์ฌ๊ธฐ์ ์ค์ํ ๊ฒ์ โํญ์ ์ต์ ์ํ๋ฅผ ์ ์งํ๋ ๊ฒโ์ ๋๋ค.Map ๊ตฌ์กฐ๋ ๋น ๋ฅด์ง๋ง, ํ ๊ณณ์ด๋ผ๋ ๊ฐฑ์ ์ ๋์น๋ฉด ์ค์ ๋ฐ์ดํฐ(state.docs)์ ์ธ๋ฑ์ค(Map) ์ฌ์ด์ ๋ถ์ผ์น๊ฐ ์๊น๋๋ค.๋ฐ๋ผ์ createDoc, updateDoc, moveDoc, archiveDoc, restoreDoc, removeDoc ๋ฑ ๋ชจ๋ ๋ณ๊ฒฝ ํจ์๊ฐ ๋ฐ๋์ ์ธ๋ฑ์ค๋ฅผ ํจ๊ป ๊ฐฑ์ ํด์ผ ํฉ๋๋ค.์ด๊ฑธ ๋ณด์ฅํ๊ธฐ ์ํด ๊ธฐ์กด ํจ์๋ฅผ ์๊ฒ ๊ฐ์ธ์ โ์ํ ๋ณ๊ฒฝ์ด ์ผ์ด๋ ๋๋ง๋ค ์ธ๋ฑ์ค๋ ํจ๊ป ๊ฐฑ์ ๋๋๋กโ ๋ง๋๋ ๊ฒ์ด ์์ ํ ๋ฐฉ์์ ๋๋ค.๊ทธ ์๋ฆฌ๋ ๊ฐ๋จํฉ๋๋ค.๋ฌธ์๋ฅผ ์๋ก ๋ง๋ค๋ฉด byId์ ๋ฑ๋กํ๊ณ , ํด๋น ๋ถ๋ชจ์ ๋ฒํท(์ฆ, ์์ ๋ฌธ์ ๋ฐฐ์ด)์ ์ ๋ฌธ์๋ฅผ ์ ๋ ฌ๋ ์์น์ ๋ผ์ ๋ฃ์ต๋๋ค.์ ๋ชฉ์ด๋ ์์๋ฅผ ๋ฐ๊พธ๋ฉด ๊ฐ์ ๋ถ๋ชจ ๋ฒํท ์์์ ํ ๋ฒ ๋นผ๊ณ ์ ๋ ฌ ๊ธฐ์ค์ ๋ง๊ฒ ๋ค์ ๋ฃ์ต๋๋ค.๋ฌธ์๋ฅผ ๋ค๋ฅธ ๋ถ๋ชจ๋ก ์ฎ๊ธธ ๋๋ ์ด์ ๋ถ๋ชจ์ ๋ฒํท์์ ์ ๊ฑฐํ๊ณ ์ ๋ถ๋ชจ์ ๋ฒํท์ ์ถ๊ฐํฉ๋๋ค.์์นด์ด๋ธ๋ ์์ ๊ณผ ์์๋ค์ ์ธ๋ฑ์ค์์ ์ ๊ฑฐํ๊ณ , ๋ณต์์ ๋ฐ๋๋ก ๋ค์ ์ฝ์ ํฉ๋๋ค.ํนํ ์ด๋์ด๋ ์์ ๊ฐ์ ๊ฒฝ์ฐ๋ โ์ด์ ๋ถ๋ชจโ์ โ์ ๋ถ๋ชจโ๋ฅผ ๊ตฌ๋ถํด์ ๋ ๋ค ์ ๋ฐ์ดํธํด์ผ ๋ฒํท์ด ๊ผฌ์ด์ง ์์ต๋๋ค.// createDoc ๋ํ ์๋ฆฌ: ์ํ ๋ฐ์ โ byId ๋ฑ๋ก โ ๋ถ๋ชจ ๋ฒํท์ ์ ๋ ฌ ์ฝ์ const _createDoc = createDoc; createDoc = function(payload){ const id = _createDoc(payload); const d = state.docs.find(x => x.id === id); index.byId.set(id, d); // ์ ๋ ฌ ๋น์ฉ ์ต์ํ๋ฅผ ์ํด '์ด์ง ์ฝ์ ' ๊ฐ์ ๋ฐฉ์์ผ๋ก ๋ค์ด๊ฐ ์์น๋ง ์ฐพ์ ๋ฃ๋ ๊ฒ์ด ์ ๋ฆฌ const arr = ensureBucket(d.parentId); let lo=0, hi=arr.length; while(lo>1; (byOrder(arr[mid], d)๋ ๋๋ง๊ณผ ๊ด๋ จ๋ ๋ณ๋ชฉ์ ์กฐํ์๋ ๋ณ๋์ ๋ฌธ์ ์ ๋๋ค.์๋ฅผ ๋ค์ด childrenOf()๋ฅผ ํ ํจ์ ์์์ ์ฌ๋ฌ ๋ฒ ๋ถ๋ฅด๋ฉด ๋งค๋ฒ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฐ์ ธ์ค๊ฒ ๋๋ฏ๋ก ๋ถํ์ํ ์ฐ์ฐ์ด ์์ด๊ฒ ๋ฉ๋๋ค.์ด๋ด ๋๋ ํ ๋ฒ๋ง ํธ์ถํด ๋ณ์์ ์ ์ฅํด ๋๊ณ ์ฌ์ฌ์ฉํ๋ ๊ฒ์ด ํจ์ฌ ํจ์จ์ ์ ๋๋ค.๋ํ ๋ณ๊ฒฝ์ด ์ผ์ด๋ ๋ถ๋ชจ ์น์ ๋ง ๋ถ๋ถ์ ์ผ๋ก ๋ค์ ๊ทธ๋ฆฌ๋๋ก ๋ถ๊ธฐํ๋ฉด ์ฒด๊ฐ ์๋๊ฐ ๋์ ๋๊ฒ ์ข์์ง๋๋ค.๋ง์ฝ ํ ํ๋ฉด์ ์์ฒ ๊ฐ์ ๋ฌธ์๋ฅผ ํผ์ณ์ ๋ณด์ฌ์ค์ผ ํ๋ ์ํฉ์ด๋ผ๋ฉด, ํ๋ฉด์ ์ค์ ๋ก ๋ณด์ด๋ ๋ถ๋ถ๋ง ๋ ๋๋งํ๋ โ๊ฐ์ ์คํฌ๋กค(virtual scroll)โ ๋ฐฉ์์ ์ฌ์ฉํ๋ ๊ฒ๋ ์ข์ ์ ํ์ ๋๋ค.๊ทธ๋ฆฌ๊ณ normalizeOrders(pid) ํจ์๋ ์ด๋ฏธ byParent ๋ฒํท์ด ์ ๋ ฌ๋์ด ์์ผ๋, ๊ตณ์ด ๋ค์ ์ ๋ ฌ์ ๋ฐ๋ณตํ์ง ๋ง๊ณ ๊ทธ ์์๋๋ก 0๋ถํฐ ์์ ๋ฒํธ๋ฅผ ๋ค์ ๋งค๊ธฐ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.์ ๋ชฉ ๊ฒ์์ด๋ ์ ๋ ฌ์ด ์์ฃผ ๋ฐ์ํ๋ค๋ฉด, titleLower ์์ฑ์ ๋ฌธ์์ ์ถ๊ฐํด๋์ด ๋ฏธ๋ฆฌ ์๋ฌธ์๋ก ์ ์ฅํด๋๋ ๊ฒ๋ ์ข์ต๋๋ค.์ด๋ ๊ฒ ํ๋ฉด ๋งค๋ฒ toLowerCase()๋ฅผ ํธ์ถํ์ง ์์ CPU ์ฌ์ฉ๋์ ์ค์ผ ์ ์์ต๋๋ค.// renderNode ์์์ ์ค๋ณต ํธ์ถ์ ์์ ๋ ๊ฐ๋จํ ํํ const kids = childrenOf(doc.id); const hasChildren = kids.length > 0; // hasChildren ์ฌ์ฉ ๋ฐ kids ์ฌ์ฌ์ฉ โฆ ์ ์ฅ๊ณผ ๋ ๋ ํธ์ถ์ ์ฌ์ฉ์์ ์กฐ์์ด ๋น ๋ฅด๊ฒ ์ด์ด์ง ๋ ์งง์ ์๊ฐ ์์ ์ฌ๋ฌ ๋ฒ ๋ฐ์ํ ์ ์์ต๋๋ค.์ด๋ด ๋ localStorage ์ ์ฅ์ด ๋๋ฌด ์์ฃผ ์ผ์ด๋๋ฉด ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ ์ ๋ฉ์ถ๊ฒ ๋ง๋ค์ด ๋ธ๋ผ์ฐ์ ๊ฐ ๋๊ธฐ๋ ๋๋์ ์ค ์ ์์ต๋๋ค.๋ฐ๋ผ์ ์ ์ฅ ํจ์๋ฅผ ๋ฐ๋ก ์คํํ์ง ์๊ณ , ์ฝ๊ฐ์ ์ง์ฐ์ ๋ฌ์ ์ผ์ ์๊ฐ ๋์ ์์ฒญ์ด ์ฌ๋ฌ ๋ฒ ๋ค์ด์ค๋ฉด ํ ๋ฒ๋ง ์คํ๋๋๋ก ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ด๋ฅผ โ์ฐ๋กํ(throttle)โ์ด๋ผ๊ณ ๋ถ๋ฆ ๋๋ค.์ฐ๋กํ์ ์ถ๊ฐํ๋ฉด ๊ธฐ๋ฅ์ ๊ทธ๋๋ก ์ ์งํ๋ฉด์๋ ํ๋ฉด์ด ํจ์ฌ ๋ถ๋๋ฌ์์ง๋๋ค.let saveQueued = false; function saveThrottled(){ if (saveQueued) return; saveQueued = true; setTimeout(()=>{ save(); saveQueued = false; }, 250); } ์ด ๊ตฌ์กฐ๋ฅผ ์ ์ฉํ ๋ ๋ฐ๋์ ์ง์ผ์ผ ํ ์ ์ด ์์ต๋๋ค.์ฒซ์งธ, load()๊ฐ ์คํ๋ ์งํ ๋จ ํ ๋ฒ buildIndexes()๋ฅผ ํธ์ถํด ์ด๊ธฐ ์ธ๋ฑ์ค๋ฅผ ๋ฐ๋์ ๋ง๋ค์ด์ผ ํฉ๋๋ค.๋์งธ, ๋ฌธ์๋ฅผ ์์ฑํ๊ฑฐ๋ ์์ ํ๊ฑฐ๋ ์ด๋ํ๋ ๋ฑ ๋ชจ๋ ๋ณ๊ฒฝ ํจ์๊ฐ ๋ฐ๋์ ์ธ๋ฑ์ค์ ๋๊ธฐํ๋์ด์ผ ํฉ๋๋ค.์ ์งธ, findDoc()๊ณผ childrenOf()์ ์ด๋ฆ๊ณผ ์ธ์ ๊ตฌ์กฐ๋ ๊ทธ๋๋ก ์ ์งํด์ผ ๊ธฐ์กด ์ฝ๋๋ค์ด ๋ชจ๋ ์ ์์ ์ผ๋ก ๋์ํฉ๋๋ค.์ด๋ ๊ฒ ํ๋ฉด ์กฐํ๋ ํญ์ ๋น ๋ฅด๊ฒ ์ ์ง๋๊ณ , ๋ ๋๋ง์ ํ์ํ ๋ถ๋ถ๋ง ๋ค์ ๊ทธ๋ฆฌ๊ฒ ๋๋ฉฐ, ์ ์ฅ์ ์ฐ๋กํ ๋๋ถ์ ๋ถ๋๋ฝ๊ฒ ์ด๋ฃจ์ด์ง๋๋ค.์ด ๋ฐฉ๋ฒ์ ๋ฌธ์๊ฐ ์๋ฐฑ ๊ฐ ์ ๋๋ฐ์ ๋์ง ์์๋ ํธ๋ฆฌ ์ ์ฒด๋ฅผ ์์ฃผ ๋ ๋๋งํ๊ฑฐ๋ ๋ฌธ์ ์ด๋์ด ์ฆ์ ์ํฉ์์ ํฐ ํจ๊ณผ๋ฅผ ๋ณผ ์ ์์ต๋๋ค.Map ์ธ๋ฑ์ค๋ฅผ ์ ์ฉํ๋๋ฐ๋ ์ฌ์ ํ ํ๋ ์ ๋๋์ด ๋๊ปด์ง๋ค๋ฉด, ๋จผ์ childrenOf()์ ์ค๋ณต ํธ์ถ์ ์์ ๊ณ , ์ ์ฒด๋ฅผ ์๋ก ๊ทธ๋ฆฌ๋ ๋์ ํ์ํ ๋ถ๋ถ๋ง ๋ค์ ๊ทธ๋ฆฌ๋๋ก ๋ฐ๊พธ๋ ๊ฒ์ด ๋น์ฉ ๋๋น ํจ๊ณผ๊ฐ ๊ฐ์ฅ ํฝ๋๋ค.๋ฐ์ดํฐ๊ฐ ์์ฒ ๊ฐ๋ก ๋์ด๋๊ฑฐ๋ ํ ํ๋ฉด์์ ์๋ง์ ๋ ธ๋๋ฅผ ๋์์ ํผ์ณ์ผ ํ๋ ๊ฒฝ์ฐ์๋ ๊ฐ์ ์คํฌ๋กค์ ํจ๊ป ๋์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค.์ ์ฅ ์ฐ๋กํ์ ์ด๋ค ๊ท๋ชจ์์๋ ์ ์ฉํ๋ฏ๋ก ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ฑํํด ๋๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.๊ฒฐ๊ตญ ํต์ฌ์ ๋จ์ํฉ๋๋ค.Map ์ธ๋ฑ์ค ๋ ๊ฐ(byId, byParent)๋ฅผ ๋ง๋ค์ด ๋ฌธ์๋ฅผ ๋น ๋ฅด๊ฒ ์ฐพ๊ณ , ์ค๋ณต ํธ์ถ์ ์ ๊ฑฐํด DOM ์ฐ์ฐ๋์ ์ค์ด๋ฉฐ, ์ ์ฅ๊ณผ ๋ ๋๋ง์ ์ฐ๋กํ๋ก ์ ์ดํด ๋ฉ์ธ ์ค๋ ๋๊ฐ ๋ฒ๋ฒ ์ด์ง ์๊ฒ ๋ง๋๋ ๊ฒ์ ๋๋ค.์ด ์ธ ๋จ๊ณ๋ฅผ ํจ๊ป ์ ์ฉํ๋ฉด, ๋ฌธ์ ์๊ฐ ์์ฒ ๊ฐ๋ก ๋์ด๋๋๋ผ๋ ํ์ฌ ์ฝ๋ ๊ธฐ๋ฐ์์ ๋ถ๋๋ฝ๊ณ ์์ ์ ์ธ ์ฑ๋ฅ์ ์ ์งํ ์ ์์ต๋๋ค.๋ ํ ๊ฐ์ง ๋ง๋ถ์ด์๋ฉด, ์ค์ ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฅ๊ธฐ๊ฐ ๋ณด๊ดํ๊ฑฐ๋ ํญ ๊ฐ ๋๊ธฐํ๊ฐ ํ์ํ ์ํฉ์ด๋ผ๋ฉด, ๋ฉ๋ชจ๋ฆฌ ๊ธฐ๋ฐ Map ์ธ๋ฑ์ค๋ง์ผ๋ก๋ ๋ถ์กฑํ ์ ์์ต๋๋ค. ์ด๋ฐ ๊ฒฝ์ฐ์๋ IndexedDB ๊ฐ์ ๋ธ๋ผ์ฐ์ ๋ด์ฅ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ํจ๊ป ํ์ฉํด ์ธ๋ฑ์ค๋ฅผ ๋์คํฌ์ ์บ์ ํํ๋ก ์ ์ฅํด ๋๋ฉด, ์๋ก๊ณ ์นจ ํ์๋ ๋น ๋ฅธ ์ด๊ธฐ ์กฐํ๊ฐ ๊ฐ๋ฅํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ฉ๋ชจ๋ฆฌ์ ๋์คํฌ ์์ชฝ์์ ๊ท ํ ์กํ ๊ตฌ์กฐ๋ก ๋ ์์ ์ ์ธ ์ฑ๋ฅ์ ์ป์ ์ ์์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค!
- 0
- 2
- 21
Q&A
CSS๊น์ง๋ง ์ง์ฐ์ ์ํฅ์ ์ฃผ๋๊ฑด๊ฐ์?
์๋ ํ์ธ์, ์ ์์ง๋ ๐DOM๊ณผ CSSOM์ด ๊ฒฐํฉ๋์ด ๋ ๋ ํธ๋ฆฌ๊ฐ ๋ง๋ค์ด์ง ๋ค์์์ผ ์ค์ ํ๋ฉด์ด ๊ทธ๋ ค์ง๋ค๋ ์๋ฆฌ๋ฅผ ์ ํํ ์ดํดํ๊ณ ๊ณ์๋ค์. ์ด ๊ฐ๋ ์์ script ํ๊ทธ์ ๋์ ๋ฐฉ์์ ๋ ๊น์ด ์ดํดํ๋ฉด, ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ป๊ฒ ๋ ๋๋ง์ ๋ฉ์ถ๊ฑฐ๋ ์ด์ด๊ฐ๋ฉฐ, async์ defer ์์ฑ์ด ์ค์ ๋ก CRP(Critical Rendering Path, ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก) ์ ์ด๋ค ์ํฅ์ ์ฃผ๋์ง๋ฅผ ์์ ํ ์ฒด๊ฐํ์ค ์ ์์ต๋๋ค.๋ธ๋ผ์ฐ์ ๋ HTML ๋ฌธ์๋ฅผ ์์์ ์๋๋ก ์ฝ์ด๊ฐ๋ฉฐ DOM(Document Object Model) ์ ์์ฑํ๊ณ , ๋์์ ์ธ๋ถ CSS ํ์ผ์ ์์ฒญํด CSSOM(CSS Object Model) ์ ๋ง๋ญ๋๋ค.์ด ๋ ๊ตฌ์กฐ๊ฐ ๋ชจ๋ ์ค๋น๋์ด์ผ ๋ธ๋ผ์ฐ์ ๋ Render Tree๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.Render Tree๊ฐ ์์ฑ๋๋ฉด ๊ทธ๋์์ผ Layout(์์์ ์์น ๊ณ์ฐ)๊ณผ Paint(ํฝ์ ๊ทธ๋ฆฌ๊ธฐ) ๋จ๊ณ๋ฅผ ๊ฑฐ์ณ ํ๋ฉด์ ํ์ํ๊ฒ ๋ฉ๋๋ค.์ด ์ผ๋ จ์ ๊ณผ์ ์ ์ฒด๋ฅผ Critical Rendering Path๋ผ๊ณ ๋ถ๋ฆ ๋๋ค.์ฌ๊ธฐ์ โHTML์ ์ฝ๋๋คโ๋ ๊ฒ์ ์ฌ๋์ ๋์ผ๋ก ์ฝ๋ ๊ฒ์ด ์๋๋ผ,๋ธ๋ผ์ฐ์ ๊ฐ , ๊ฐ์ ํ๊ทธ๋ฅผ ํ๋์ฉ ํด์ํด์ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ์๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค.๊ทธ๋ฆฌ๊ณ CSS ํ์ผ์ ์ด ํธ๋ฆฌ ์์ โ์, ํฌ๊ธฐ, ์์นโ ์ ๋ณด๋ฅผ ์ ํ๋ ์ค๊ณ๋๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.์ฌ๊ธฐ์ ํ ๊ฐ์ง ์ค์ํ ์ฌ์ค์ด ์์ต๋๋ค.CSS ํ์ผ ๋ํ ๋ ๋๋ง ๊ฒฝ๋ก๋ฅผ ์ฐจ๋จ(blocking) ํ ์ ์์ต๋๋ค.๋ธ๋ผ์ฐ์ ๋ ๋ฅผ ๋ง๋๋ฉด CSS ํ์ผ์ ๋ค์ด๋ก๋ํ๋ฉด์, JS ์คํ์ ์ ์ ๋ฉ์ถฅ๋๋ค. ์๋ํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ getComputedStyle()์ด๋ DOM ๋ณ๊ฒฝ์ ํตํด ์คํ์ผ์ ์ํฅ์ ์ค ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ฆ, CSS๊ฐ ์์ ํ ๋ก๋๋๊ณ CSSOM์ด ๋ง๋ค์ด์ง ๋๊น์ง๋ JS ์คํ์ด ์ฐ๊ธฐ๋ ์ ์์ต๋๋ค.์ฌ๊ธฐ์ โ์ฐจ๋จ(blocking)โ์ด๋, ๋ธ๋ผ์ฐ์ ๊ฐ ๋ค๋ฅธ ์ผ์ ์ ์ ๋ฉ์ถ๊ณ โ์ด๊ฑฐ ๋จผ์ ๋๋ด์ผ์ง!โ ํ๊ณ ์ฐ์ ์์๋ฅผ ์ฃผ๋ ์ํ๋ฅผ ๋งํฉ๋๋ค.์๋ฅผ ๋ค์ด, ์๋ฆฌ๋ฅผ ํ๋ค ๋ง๊ณ ๊ฐ์๊ธฐ ๋ฌผ์ ๋์ฌ์ผ ํด์ ๋ชจ๋ ์ผ์ ๋ฉ์ถ๋ ๊ฒ๊ณผ ๋น์ทํฉ๋๋ค.CSS ํ์ผ์ ๋ค ๋ถ๋ฌ์์ผ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ค์ HTML์ ๊ณ์ ์ฝ์ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.(์ ํํ๋, CSS๋ ๋ ๋๋ง์ ์ฐจ๋จํ๊ณ , ๋๊ธฐ ์คํ์ ์ง์ฐ์ํต๋๋ค.HTML ํ์ฑ ์์ฒด๋ฅผ ์ฆ์ ๋ฉ์ถ๋ ๊ฒ์ ์๋์ง๋ง,๊ณง๋ฐ๋ก ์ด์ด์ง๋ ์คํฌ๋ฆฝํธ ๋๋ฌธ์ ์ค์ ๋ก๋ ํ์ฑ์ด ์ ์ ๋ฉ์ถ ๊ฒ์ฒ๋ผ ๋ณด์ ๋๋ค.)์ด๋ HTML ์์ ํ๊ทธ๊ฐ ๋ฑ์ฅํ๋ฉด,๋ธ๋ผ์ฐ์ ๋ โ์ฌ๊ธฐ์ JavaScript๋ฅผ ์คํํด์ผ ํ๋คโ๊ณ ์ธ์ํฉ๋๋ค.๋ฌธ์ ๋ ์ด ์คํฌ๋ฆฝํธ๊ฐ ํ์-๋ธ๋กํน(parser-blocking) ์ด๋ผ๋ ์ ์ ๋๋ค.์ฆ, ๋ธ๋ผ์ฐ์ ๋ ์คํฌ๋ฆฝํธ๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ์คํํ๋ ๋์ HTML ํ์ฑ์ ๋ฉ์ถฅ๋๋ค.์ฌ๊ธฐ์ โํ์ฑ์ ๋ฉ์ถ๋คโ๋ ๊ฑด, ๋ธ๋ผ์ฐ์ ๊ฐ HTML ๋ฌธ์๋ฅผ ๋ ์ด์ ์๋๋ก ๋ด๋ ค๊ฐ์ง ์๊ณ โ์ด ์คํฌ๋ฆฝํธ๋ฅผ ๋จผ์ ์คํํ ๊ฒ์โ ํ๊ณ ์ผ์ ์ ์งํ๋ ์ํ์ ๋๋ค.๊ทธ๋์ JS๊ฐ ์ค๋ ๊ฑธ๋ฆฌ๋ฉด, HTML์ ๋๋จธ์ง ๋ถ๋ถ(์: )์ด ๋ฆ๊ฒ ๊ทธ๋ ค์ง๋ ๊ฒ๋๋ค.์๋ฅผ ๋ค์ด ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๊ฐ ์๋ค๊ณ ํด๋ณด๊ฒ ์ต๋๋ค. Hello, world! This text might not appear immediately. ์ด ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ main.js๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ์คํํ ๋๊น์ง HTML ํ์ฑ์ ์ค๋จํฉ๋๋ค.main.js๊ฐ ๋คํธ์ํฌ์์ ๋ด๋ ค๋ฐ๋ ๋ฐ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฐ๋ค๋ฉด, ๊ณผ ๋ ๊ทธ๋์ ํ๋ฉด์ ๊ทธ๋ ค์ง์ง ์์ต๋๋ค.์ฆ, ์คํฌ๋ฆฝํธ์ ์คํ ์์๋ฟ ์๋๋ผ CRP ์์ฒด๊ฐ ์ง์ฐ๋๋ ๊ฒ์ด์ฃ .โ๋คํธ์ํฌ์์ ๋ด๋ ค๋ฐ๋๋คโ๋ ๊ฒ์, ๋ธ๋ผ์ฐ์ ๊ฐ ์ธํฐ๋ท์ ํตํด main.js ํ์ผ์ ์๋ฒ์์ ์์ฒญํด์ ๋ฐ์์ค๋ ๊ณผ์ ์ ๋๋ค.๋ง์ฝ ์ธํฐ๋ท ์๋๊ฐ ๋๋ฆฌ๋ฉด, ํ๋ฉด์ด ํ์๊ฒ ๋ฉ์ถฐ ์๋ ์๊ฐ์ด ๊ธธ์ด์ง ์ ์์ต๋๋ค.์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ฑ์ฅํ ์์ฑ์ด async์ defer์ ๋๋ค.async๋ฅผ ๋ถ์ด๋ฉด ๋ธ๋ผ์ฐ์ ๋ HTML์ ํ์ฑํ๋ฉด์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ณ๋ ฌ๋ก ๋ค์ด๋ก๋ํฉ๋๋ค.์ฌ๊ธฐ์ โ๋ณ๋ ฌโ์ด๋ ๋์์ ์ฌ๋ฌ ์ผ์ ํ๋ ๊ฒ์ ๋๋ค.์ฆ, HTML์ ๊ณ์ ์ฝ์ผ๋ฉด์ ๋ฐฑ๊ทธ๋ผ์ด๋์์๋ JS ํ์ผ๋ ๋ด๋ ค๋ฐ์ต๋๋ค.ํ์ง๋ง ๋ค์ด๋ก๋๊ฐ ์๋ฃ๋๋ ์๊ฐ, ํ์ฑ์ ์ ์ ๋ฉ์ถ๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ์ฆ์ ์คํํฉ๋๋ค.์ฆ, ๋ค์ด๋ก๋๋ ๋น๋๊ธฐ(=๋ฐ๋ก๋ฐ๋ก ๋์์)์ง๋ง ์คํ์ ์ฆ์ ์ผ์ด๋๋ฏ๋ก,์คํ ์์ ๋ง๋ค ํ์๊ฐ ์ ๊น์ฉ ์ค๋จ๋ ์ ์์ต๋๋ค.๋ํ ์ฌ๋ฌ ๊ฐ์ async ์คํฌ๋ฆฝํธ๊ฐ ์์ ๊ฒฝ์ฐ,๋์ฐฉํ ์์๋๋ก ์คํ๋๋ฏ๋ก ์คํ ์์๊ฐ ๋ณด์ฅ๋์ง ์์ต๋๋ค.์ด ๋ง์, ๋จผ์ ๋ด๋ ค๋ฐ์ ํ์ผ์ด ๋จผ์ ์คํ๋๋ค๋ ๋ป์ผ๋ก,์ฝ๋ ์ฌ์ด์ ์์กด ๊ด๊ณ๊ฐ ์์ผ๋ฉด ๋ฌธ์ ๊ฐ ์๊ธธ ์ ์์ต๋๋ค.๋ฐ๋ฉด defer๋ ๋ค์ด๋ก๋๋ ๋น๋๊ธฐ์ด์ง๋ง ์คํ์ HTML ํ์ฑ์ด ๋๋ ์งํ์ ์ด๋ฃจ์ด์ง๋๋ค.์ฆ, ๋ชจ๋ DOM ํ์ฑ์ด ์๋ฃ๋ ๋ค์, ๋ฌธ์์ ์์๋๋ก ์คํฌ๋ฆฝํธ๊ฐ ์คํ๋ฉ๋๋ค.์ด๋ ๊ฒ ๋๋ฉด HTML ํ์ฑ์ ๋ง์ง ์๊ธฐ ๋๋ฌธ์, ์ด๊ธฐ ๋ ๋๋ง ์๋์ ๊ฑฐ์ ์ํฅ์ ์ฃผ์ง ์์ต๋๋ค.์ฝ๊ฒ ๋งํด async๋ โ๋จผ์ ๋์ฐฉํ๋ฉด ๋ฐ๋ก ์คํโ,defer๋ โHTML ๋ค ์ฝ๊ณ ๋์ ํ๊บผ๋ฒ์ ์คํโ์ด๋ผ๊ณ ๊ธฐ์ตํ์๋ฉด ๋ฉ๋๋ค.๋ ๋ค HTML๊ณผ JS๋ฅผ ๊ฐ์ด ๋ค์ด๋ก๋ํ์ง๋ง, ์คํ ์์ ์ด ๋ค๋ฆ ๋๋ค.ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ type="module" ์์ฑ์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.๋ชจ๋์ ๊ธฐ๋ณธ์ ์ผ๋ก defer์ ๊ฐ์ ๋์ ๋ฐฉ์์ ์ทจํ๋ฏ๋ก,ํ์ฑ์ ๋ฐฉํดํ์ง ์๊ณ HTML์ด ๋ชจ๋ ์ฝํ ๋ค์ ์คํ๋ฉ๋๋ค.๋จ, ๋ชจ๋ ๊ฐ์ ์์กด ๊ด๊ณ์ ๋ฐ๋ผ ์ฌ๋ฌ ํ์ผ์ด ๋ณ๋ ฌ๋ก ๋ค์ด๋ก๋๋๋ฉฐ,์คํ์ import ์์๋ฅผ ๋ฐ๋ฆ ๋๋ค.์ด ๊ฒฝ์ฐ defer ์์ฑ์ ํจ๊ป ๋ถ์ด๋๋ผ๋ ๋ฌด์๋ฉ๋๋ค.(์์ธ์ ์ผ๋ก, ๋ชจ๋ ์คํฌ๋ฆฝํธ์ async ์์ฑ์ ํจ๊ป ๋ถ์ด๋ฉด,๋ค์ด๋ก๋๊ฐ ๋๋๋ ์ฆ์ ์คํ๋์ด defer์ ๋ฌ๋ฆฌ ํ์ฑ ์๋ฃ ์ ์ ์คํ๋ ์๋ ์์ต๋๋ค.)์ถ๊ฐ๋ก import() ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ฉด ์์ ํ ๋น๋๊ธฐ์ ์คํ์ด ๊ฐ๋ฅํ๋ฉฐ,์ด๋ ํ์๋ ๋ ๋๋ง์ ์ ํ ๋ธ๋กํนํ์ง ์์ต๋๋ค.์ฆ, HTML๊ณผ ์๊ด์์ด ๋์ค์ โํ์ํ ๋๋งโ JS๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ ๋๋ค.์ฆ, async์ defer๋ ๋จ์ํ ์คํฌ๋ฆฝํธ์ โ์คํ ์์โ๋ง ๋ฐ๊พธ๋ ์์ฑ์ด ์๋๋ผ,HTML ํ์ฑ๊ณผ ๋ ๋๋ง์ ํ์ด๋ฐ ์์ฒด๋ฅผ ๋ฐ๊พธ๋ ์ฑ๋ฅ ์กฐ์ ๋๊ตฌ์ ๋๋ค.์ค๋ฌด์์ ์์ฃผ ์ฐ์ด๋ ์๋๋ฆฌ์ค๋ฅผ ํ๋ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.์์ ์ํฉ:์ ์์๊ฑฐ๋ ํ์ด์ง๋ฅผ ์๋ก ๋ค์ด๋ณด์ฃ .์ฌ์ฉ์๊ฐ index.html์ ์ฒ์ ๋ฐฉ๋ฌธํ ๋, ๋ฉ์ธ ์ด๋ฏธ์ง๊ฐ ๋น ๋ฅด๊ฒ ๋ณด์ฌ์ผ ์ ํ์จ์ด ๋์ต๋๋ค.ํ์ง๋ง ๊ฐ๋ฐ์๊ฐ ๋ค์๊ณผ ๊ฐ์ด ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ๋ค๊ณ ๊ฐ์ ํด๋ด ์๋ค. My Shop (์ฌ์ง) Buy Now ์ด ์ฝ๋๋ analytics.js์ main.js๋ฅผ ์์ฐจ์ ์ผ๋ก ๋ธ๋กํน ๋ฐฉ์์ผ๋ก ์คํํ๋ฏ๋ก,์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์ด๋ฉด ๋ฉ์ธ ์ด๋ฏธ์ง๊ฐ ํ์ฐธ ๋์ ๋ณด์ด์ง ์์ต๋๋ค.โ์์ฐจ์ ์คํโ์ด๋, ์ฒซ ๋ฒ์งธ ์คํฌ๋ฆฝํธ๋ฅผ ์์ ํ ๋๋ด์ผ ๋ ๋ฒ์งธ ์คํฌ๋ฆฝํธ๊ฐ ์คํ๋๋ค๋ ๋ป์ ๋๋ค.์ฆ, ํ ๋ฒ์ ํ ์ผ๋ง ํ๋ ๊ฑฐ์ฃ .๊ทธ๋์ JS๊ฐ ๊ธธ๊ฑฐ๋ ๋คํธ์ํฌ๊ฐ ๋๋ฆฌ๋ฉด, ์ด๋ฏธ์ง์กฐ์ฐจ ๋ฆ๊ฒ ๋ณด์ด๊ฒ ๋ฉ๋๋ค.์ด๋ฅผ ์์ ํ๋ฉด ์ด๋ ๊ฒ ๋ฉ๋๋ค. My Shop (์ฌ์ง) Buy Now ์ด์ ๋ ์คํฌ๋ฆฝํธ๊ฐ CRP์ ๋ฏธ์น๋ ์ํฅ์ ์์ ํ ๋ฌ๋ผ์ง๋๋ค.๋ธ๋ผ์ฐ์ ๊ฐ HTML์ ์ฝ์ผ๋ฉด์ ๋์์ CSS์ ๋ ์คํฌ๋ฆฝํธ๋ฅผ ๋ณ๋ ฌ๋ก ๋ค์ด๋ก๋ํฉ๋๋ค.(์ฆ, ์ธ ๊ฐ์ง ์ผ์ด ๋์์ ์ผ์ด๋ฉ๋๋ค: HTML ์ฝ๊ธฐ, CSS ๋ฐ๊ธฐ, JS ๋ฐ๊ธฐ)analytics.js๋ async์ด๋ฏ๋ก ๋์ฐฉ ์ฆ์ ์คํ๋์ง๋ง,DOM์ ์์กดํ์ง ์๋ ๋ถ์ ์ฝ๋๋ผ ํ์ด์ง ๊ตฌ์กฐ์๋ ์ํฅ์ ์ฃผ์ง ์์ต๋๋ค.main.js๋ defer์ด๋ฏ๋ก, HTML ํ์ฑ์ด ๋ชจ๋ ๋๋ ํ์ ์คํ๋ฉ๋๋ค.DOM์ด ์์ ํ ์ค๋น๋ ๋ค ์คํ๋๋ฏ๋ก ์์ ํ๋ฉฐ, ์ฒซ ํ์ธํธ์๋ ์ํฅ์ ์ฃผ์ง ์์ต๋๋ค.๊ทธ ๊ฒฐ๊ณผ, ์ฌ์ฉ์๋ ๋ฉ์ธ ์ด๋ฏธ์ง์ ๋ฒํผ์ ์ฆ์ ๋ณผ ์ ์๊ณ ,๋์์ ๋ฐฑ๊ทธ๋ผ์ด๋์์๋ ์คํฌ๋ฆฝํธ ๋ก๋ฉ์ด ๋ณ๋ ฌ๋ก ์งํ๋ฉ๋๋ค.์ด๋ฐ ๋ณํ ํ๋๋ก ์ฒซ ํ์ธํธ(First Paint) ์ DOMContentLoaded ์ด๋ฒคํธ ์์ ์ด ํจ์ฌ ๋นจ๋ผ์ง๋๋ค.์ฐธ๊ณ ๋ก, defer ์คํฌ๋ฆฝํธ๋ DOM ํ์ฑ์ด ๋๋ ์งํ ์คํ๋๊ณ ๋์DOMContentLoaded ์ด๋ฒคํธ๊ฐ ๋ฐ์ํฉ๋๋ค.๋ฐ๋ฉด async ์คํฌ๋ฆฝํธ๋ ๋ค์ด๋ก๋ ์๋ฃ ์์ ์ ์ฆ์ ์คํ๋๋ฏ๋ก,์ด๋ค ๊ฒ์ DOMContentLoaded๋ณด๋ค ๋จผ์ , ์ด๋ค ๊ฒ์ ๋์ค์ ์คํ๋ ์๋ ์์ต๋๋ค.๋ฐ๋ผ์ DOMContentLoaded ์ ํ ์คํ ํ์ด๋ฐ์ด ์ค์ํ ๋ก์ง์ด๋ผ๋ฉด defer๊ฐ ํจ์ฌ ์์ ์ ์ ๋๋ค.๋ค์์ ์ดํด๋ฅผ ๋๊ธฐ ์ํ ๊ฐ๋จํ ๋น๊ต ์์ฝ์ ๋๋ค.๊ธฐ๋ณธ ๋๊ธฐ์ ์คํ ๋ฐฉ์์ผ๋ก, ํ์ผ์ ๋ฐ๋ก ์คํํ๋ฉฐ ์์๋ฅผ ๋ณด์ฅํ์ง๋ง HTML ํ์ฑ์ ์์ ํ ๋ฉ์ถฅ๋๋ค. ๊ฐ์ฅ ๋๋ฆฐ ๋ฐฉ์์ ๋๋ค.async๋น๋๊ธฐ ๋ค์ด๋ก๋ ๋ฐฉ์์ผ๋ก, HTML์ ์ฝ๋ ๋์ค JS๋ฅผ ๋์์ ๋ด๋ ค๋ฐ๊ณ , ๋ค์ด๋ก๋๊ฐ ๋๋๋ ์ฆ์ ์คํํฉ๋๋ค. ์คํ ์์๋ ๋ณด์ฅ๋์ง ์์ผ๋ฉฐ, HTML ํ์ฑ์ด ์ ๊น์ฉ ๋ฉ์ถ ์ ์์ต๋๋ค. ๊ด๊ณ ๋ ํต๊ณ ์ฝ๋์ฒ๋ผ ๋ ๋ฆฝ์ ์ธ ์ฝ๋์ ์ ํฉํฉ๋๋ค.defer๋น๋๊ธฐ ๋ค์ด๋ก๋ ๋ฐฉ์์ด์ง๋ง, HTML์ด ์ ๋ถ ํ์ฑ๋ ์ดํ์ ๋ฌธ์ ์์๋๋ก ์คํ๋ฉ๋๋ค. HTML ํ์ฑ์ ๋ฉ์ถ์ง ์๊ธฐ ๋๋ฌธ์ ๋ ๋๋ง ์๋์ ๊ฑฐ์ ์ํฅ์ ์ฃผ์ง ์์ต๋๋ค. ๋ฉ์ธ ์ฝ๋์ ์ ํฉํฉ๋๋ค.type="module"๋ชจ๋ ์์คํ ์ ์ฌ์ฉํ๋ ์ต์ ๋ฐฉ์์ผ๋ก, ์๋์ผ๋ก defer์ฒ๋ผ ๋์ํ๋ฉฐ ์ฌ๋ฌ ํ์ผ์ ๋์์ ๋ค์ด๋ก๋ํฉ๋๋ค. importํ ์์๋๋ก ์คํ๋ฉ๋๋ค. ๋จ, async ์์ฑ์ ํจ๊ป ์ฃผ๋ฉด ๋์ฐฉ ์ฆ์ ์คํ๋ ์๋ ์์ต๋๋ค.์์ฝํ์๋ฉด, ๊ธฐ๋ณธ ์คํฌ๋ฆฝํธ๋ ์ฐจ๋จ์ด ์ฌํ๊ณ ๋๋ฆฌ๊ณ ,async๋ ๋น ๋ฅด์ง๋ง ์์๊ฐ ๋ถ์์ ํ๋ฉฐ,defer์ type="module"์ ์์ ์ ์ด๋ฉด์ ๋ ๋๋ง์ ๋ฐฉํดํ์ง ์์ต๋๋ค.ํ์์ ๋์๋ โ๋๊ธฐโ๋ ํ ๋ฒ์ ํ ๊ฐ์ง ์ผ๋ง ํ๋ ๊ฒ์ด๊ณ ,โ๋น๋๊ธฐโ๋ ์ฌ๋ฌ ๊ฐ์ง ์ผ์ ๋์์ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.โ์ฐจ๋จ ์์โ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฉ์ถ์ง ์๊ณ ๊ณ์ HTML์ ์ฝ์ ์ ์๋ค๋ ๋ป์ ๋๋ค.์ ๋ฆฌํ์๋ฉด, async์ defer๋ ๋จ์ํ ์์ ์ต์ ์ด ์๋๋ผ,๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ฒฝ๋ก๋ฅผ ์ต์ ํํ๋ ์์ฑ์ ๋๋ค.async๋ ๋ค๋ฅธ ์ฝ๋์ ์์กด์ฑ์ด ์๋ ์ธ๋ถ ์คํฌ๋ฆฝํธ(์: ๊ด๊ณ , ๋ถ์, ์ฑํ ์์ ฏ ๋ฑ)์ ์ ํฉํ๊ณ ,defer๋ type="module"์ ๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋์ ์ ํฉํฉ๋๋ค.์ด ์๋ฆฌ๋ฅผ ์ดํดํ๋ฉด,โ์ด๋ค ์คํฌ๋ฆฝํธ๋ฅผ ์ธ์ ์คํํด์ผ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ์ฌ์ฉ์์๊ฒ ์ฒซ ํ๋ฉด์ ๋ณด์ฌ์ค ์ ์์๊น?โ๋ผ๋ ์ง๋ฌธ์ ์ง์ ๋ต์ ๋ผ ์ ์๊ฒ ๋ฉ๋๋ค.๋ง์ง๋ง์ผ๋ก, Chrome DevTools์ Network ํญ์์์ค์ async/defer ์คํฌ๋ฆฝํธ์ ๋ค์ด๋ก๋ ํ์ด๋ฐ๊ณผ ์คํ ์์ ์ ๊ด์ฐฐํ ์ ์์ต๋๋ค.async ์คํฌ๋ฆฝํธ๋ โReceivedโ ์์ ์ ์ฆ์ ์คํ๋๋ฉฐ,defer ์คํฌ๋ฆฝํธ๋ DOMContentLoaded ์ง์ ์ ์คํ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.๋ง์ฝ ์ ์์ง๋๊ป์ ์ค์ ๋ก ์์ฑ ์ค์ธ ํ์ด์ง์ ๊ตฌ์กฐ๋ฅผ ๋ณด์ฌ์ฃผ์ ๋ค๋ฉด,์ด๋์ ์ด๋ค ์์ฑ์ ์ ์ฉํ๋ฉด ์ต์ ์ ์ฑ๋ฅ์ด ๋์ฌ์ง๊ตฌ์ฒด์ ์ธ ๋ฆฌํฉํฐ๋ง ์์๊น์ง ํจ๊ป ๋์๋๋ฆด ์ ์์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค๐๐
- 0
- 2
- 16
Q&A
json ๋์ ๋ก๊ทธ์ธ, ํ์๊ฐ์ ์ผ๋ db ์ฐ๊ฒฐ ๋ฐ data ์ฌ์ฉํ๋ ค๋ฉด ์ด๋ป๊ฒ ํ๋์?
์๋ ํ์ธ์ eju๋ ๐JSON ํ์ผ ๋์ ๋ฐ์ดํฐ๋ฒ ์ด์ค(DB)๋ฅผ ์ฌ์ฉํด ๋ก๊ทธ์ธ๊ณผ ํ์๊ฐ์ ๊ธฐ๋ฅ์ ๋ง๋ค๊ณ ์ถ์ผ์๋ค๋ฉด, ์ ์ฒด์ ์ธ ๊ทธ๋ฆผ์ ์ด๋ ๊ฒ ์ดํดํ์๋ฉด ๋ฉ๋๋ค.์ฐ์ JSON ํ์ผ์ ๋ฐ์ดํฐ๋ฅผ โ๊ทธ๋๊ทธ๋ ํ์ผ๋ก ์ง์ ์ ์ฅํ๋ ๋ฐฉ์โ์ด์์. ๊ฐ๋จํด์ ๋ฐฐ์ฐ๊ธฐ์๋ ์ข์ง๋ง, ์ฌ์ฉ์๊ฐ ๋ง์์ง๊ฑฐ๋ ์ฌ๋ฌ ์์ฒญ์ด ๋์์ ๋ค์ด์ค๋ฉด ๊ธ๋ฐฉ ํ๊ณ๊ฐ ์๊น๋๋ค. ๋ฐ๋ฉด DB(๋ฐ์ดํฐ๋ฒ ์ด์ค)๋ ์๋ง์ ๋ฐ์ดํฐ๋ฅผ ๋น ๋ฅด๊ณ ์์ ์ ์ผ๋ก ๋ณด๊ดํ๊ณ ๊บผ๋ด ์ธ ์ ์๋ ์ ์ฉ ์ ์ฅ์์์. ์ฝ๊ฒ ๋งํด, โ๋ฐ์ดํฐ๋ฅผ ์์ ํ๊ฒ ๊ด๋ฆฌํด์ฃผ๋ ๋๋ํ ๊ธ๊ณ โ๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.Node.js์ Express ํ๊ฒฝ์์ ์์ฃผ ์ฐ๋ DB์๋ ์ธ ๊ฐ์ง ๋ํ์ ์ธ ์ข ๋ฅ๊ฐ ์์ต๋๋ค.๋จผ์ MySQL๊ณผ PostgreSQL์ ํ(ํ ์ด๋ธ) ํํ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๊ด๊ณํ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋๋ค. ํ์ ์ ๋ณด, ๊ฒฐ์ ๋ด์ญ, ์ฃผ๋ฌธ ๊ธฐ๋ก์ฒ๋ผ ๊ตฌ์กฐ๊ฐ ์ ํด์ง ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋ ๊ฐ๋ ฅํ๊ณ ์์ ์ ์ด์์.๋ฐ๋ฉด MongoDB๋ NoSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก, JSON์ฒ๋ผ ์๊ธด ๋ฌธ์(document) ๋จ์๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํฉ๋๋ค. ๊ตฌ์กฐ๊ฐ ์์ ๋กญ๊ณ ๋ณ๊ฒฝ์ด ์ฆ์ ์๋น์ค, ์๋ฅผ ๋ค์ด SNS, ๊ฒ์ํ, ๋ก๊ทธ ๊ธฐ๋ก ์์ ํนํ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค. ์ค๋ฌด์์๋ ์ฌ์ ํ PostgreSQL์ด๋ MySQL์ด ๊ฐ์ฅ ๋ง์ด ์ฐ์ด๊ณ , ๋น ๋ฅด๊ฒ ๊ธฐ๋ฅ์ ๋ง๋ค์ด์ผ ํ๋ ์คํํธ์ ์ด๋ ํ์ต์ฉ ํ๋ก์ ํธ์์๋ MongoDB๋ ์ธ๊ธฐ๊ฐ ๋ง์ต๋๋ค.Node.js + Express์์๋ ์ด๋ฐ DB์ ์ฐ๊ฒฐํ๊ธฐ ์ํด ์ค๊ฐ ๋๊ตฌ(๋ผ์ด๋ธ๋ฌ๋ฆฌ)๋ฅผ ์ฌ์ฉํฉ๋๋ค.PostgreSQL์ด๋ MySQL์ Prisma๋ Sequelize, MongoDB๋ Mongoose๋ฅผ ๊ฐ์ฅ ๋ง์ด ์จ์.์ด ๋๊ตฌ๋ค์ด โDB์ ๋ฐ์ดํฐ ๋ฃ๊ธฐ / ๊บผ๋ด๊ธฐโ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ๋ช ์ค๋ก ๊ฐ๋จํ๊ฒ ๋ฐ๊ฟ ์ค๋๋ค.๊ฐ๋จํ ํ์๊ฐ์ ์ ์๋ก ๋ค๋ฉด, ์ฌ์ฉ์๊ฐ ์ด๋ฆยท์ด๋ฉ์ผยท๋น๋ฐ๋ฒํธ๋ฅผ ์ ๋ ฅํ์ ๋ ์๋ฒ๋ ๋ค์ ์์๋ก ๋์ํฉ๋๋ค.์ ๋ ฅ๊ฐ์ด ๋น์ด ์์ง ์์์ง, ์ด๋ฉ์ผ ํ์์ด ๋ง๋์ง ๊ฒ์ฌํฉ๋๋ค.๋น๋ฐ๋ฒํธ๋ฅผ bcrypt ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ํธํ(ํด์)ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ค์ ๋น๋ฐ๋ฒํธ๊ฐ ๋ ธ์ถ๋์ง ์๊ณ ๋ ๋ก๊ทธ์ธ ๊ฒ์ฆ์ด ๊ฐ๋ฅํฉ๋๋ค.์ํธํ๋ ๋น๋ฐ๋ฒํธ์ ํจ๊ป DB์ ์์ ํ๊ฒ ์ ์ฅํฉ๋๋ค.๋ก๊ทธ์ธ ๊ณผ์ ์ ๋ฐ๋๋ก,์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ด๋ฉ์ผ์ DB์์ ์ฐพ์๋ณด๊ณ ,์ ์ฅ๋ ์ํธํ๋ ๋น๋ฐ๋ฒํธ์ ์ ๋ ฅ๋ ๋น๋ฐ๋ฒํธ๋ฅผ bcrypt.compare()๋ก ๋น๊ตํฉ๋๋ค.๋ ๊ฐ์ด ์ผ์นํ๋ฉด ๋ก๊ทธ์ธ ์ฑ๊ณต์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค.๋ก๊ทธ์ธ์ด ์ฑ๊ณตํ๋ฉด ์๋ฒ๋ ์ธ์ /์ฟ ํค ๋ฐฉ์์ด๋ JWT ํ ํฐ์ ์ฌ์ฉํด ๋ก๊ทธ์ธ ์ํ๋ฅผ ์ ์งํฉ๋๋ค. ์ธ์ ์ โ์๋ฒ๊ฐ ๋ก๊ทธ์ธํ๋ฅผ ๋ค๊ณ ์๋ ๋ฐฉ์โ์ด๊ณ , JWT๋ โ์๋ฒ๊ฐ ์๋ช ๋ ์ถ์ ์ฆ์ ๋ง๋ค์ด ํด๋ผ์ด์ธํธ๊ฐ ์ง์ ๋ค๊ณ ์๋ ๋ฐฉ์โ์ด์์.๋ณด์์ ์ฌ๊ธฐ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.1. ๋น๋ฐ๋ฒํธ๋ ์ ๋๋ก ์๋ฌธ ๊ทธ๋๋ก ์ ์ฅํ์ง ์๊ณ ๋ฐ๋์ ํด์ ํํ๋ก ์ ์ฅํด์ผ ํฉ๋๋ค.2. DB ์ฃผ์์ ๊ณ์ ์ ๋ณด๋ ์ฝ๋์ ์ง์ ์ฐ์ง ๋ง๊ณ .env ํ์ผ์ ๋ฐ๋ก ์จ๊ฒจ์ผ ํฉ๋๋ค.3. ์ ๋ ฅ๊ฐ์ ๊ผผ๊ผผํ ๊ฒ์ฌํด์ ๋น์ ์์ ์ธ ๋ฐ์ดํฐ(๋น์นธ, ์ด์ํ ํ์ ๋ฑ)๋ ๋ฐ๋ก ๊ฑฐ์ ํด์ผ ํฉ๋๋ค.์ด ์ธ ๊ฐ์ง๋ง ์ง์ผ๋, JSON ํ์ผ ๋์ DB๋ฅผ ์ฌ์ฉํด๋ ํจ์ฌ ์์ ํ๊ณ , ์ค์ ์๋น์ค์ ๊ฐ๊น์ด ๊ตฌ์กฐ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.๋ง์ง๋ง์ผ๋ก, ์ค๋ฌด์์๋ PostgreSQL์ด๋ MySQL์ด ํ์ค์ผ๋ก ๊ฐ์ฅ ๋๋ฆฌ ์ฐ์ด๊ณ ,MongoDB๋ ๋น ๋ฅด๊ฒ ๋ฐ๋๋ ๋ฐ์ดํฐ๋ JSON ๊ตฌ์กฐ์ ์๋น์ค์ ์ ๋ฆฌํฉ๋๋ค.์ฒ์ ๊ณต๋ถํ์ค ๋๋ MongoDB๊ฐ ์ดํดํ๊ธฐ ์ฌ์์ ์ ๋ฌธ์ฉ์ผ๋ก ์ข๊ณ ,๋์ค์ ํ์ฌ๋ ํ๋ก์ ํธ ๋จ์๋ก๋ PostgreSQL์ ์ฐ์ตํด๋์๋ฉด ์ค๋ฌด์ ํจ์ฌ ๋์์ด ๋ฉ๋๋ค.์ด ๋ถ๋ถ์ ์์ผ๋ก ์ ๊ฐ ์ค๋น ์ค์ธ Node.js + Express ์ค์ ๊ฐ์์์ ๋ค๋ฃฐ ์์ ์ ๋๋ค.JSON ์ ์ฅ์์ DB ์ฐ๊ฒฐ๋ก ๋์ด๊ฐ๋ ๊ณผ์ , PrismaยทMongoose ์ฌ์ฉ๋ฒ, ๋น๋ฐ๋ฒํธ ์ํธํ์ ๋ก๊ทธ์ธ ์ธ์ ๊ด๋ฆฌ๊น์ง ์ ๋ถ ํ๋์ฉ ๋ณด์ฌ๋๋ฆด ๊ณํ์ด์์. ํ์ฌ ๊ต์ฌ์ ํจ๊ป ์ค์ต ์ค์ฌ ๊ฐ์๋ก ์ค๋น ์ค์ด๋ฉฐ, ๊ฐ๋ฅํ ํ ๋น ๋ฅธ ์์ผ ๋ด์ ์ถ์ํ๊ฒ ์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 12
Q&A
๋ณด์์ ์ทจ์ฝ ํ๊ฐ์?
์๋ ํ์ธ์ eju๋ ๐,์ด๋ค ์ํฉ์์์ ๋ณด์์ ๋ง์ํ์๋์ง, ๊ทธ๋ฆฌ๊ณ ์๋ฒ ๋ณด์, ๋ฐ์ดํฐ ์ ์ก ๋ณด์, ์ฌ์ฉ์ ์ธ์ฆ ๋ณด์ ๋ฑ ์ด๋ค ์ข ๋ฅ์ ๋ณด์์ ์๋ฏธํ์๋์ง ๊ตฌ์ฒด์ ์ผ๋ก ์๋ ค์ฃผ์๋ฉด ๋ณด๋ค ์ ํํ๊ฒ ์๋ด๋๋ฆด ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 17
Q&A
ํ ์คํธ์ ํฌ์คํธ๋งจ ์ธ ํ ์คํธ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
์๋ ํ์ธ์ eju๋ ๐Postman์ ์ด๋ฏธ ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์ด ํ์ค์ฒ๋ผ ์ฌ์ฉํ๋ ๋งค์ฐ ์ข์ ํ ์คํธ ๋๊ตฌ์ ๋๋ค. ์ง๊ด์ ์ด๊ณ ์์ ์ ์ด๋ฉฐ, ํ ๋จ์๋ก๋ ํ์ ํ๊ธฐ ์ฌ์์ ์ง๊ธ๋ ์ค๋ฌด์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋ฉ๋๋ค. ๊ทธ๋์ ์๋ก์ด ๋๊ตฌ๋ฅผ ์ฐพ๊ธฐ๋ณด๋ค๋, Postman์ ๊ธฐ๋ณธ์ผ๋ก ๊พธ์คํ ์ฐ๋ ๊ฒ ์์ฒด๊ฐ ์ข์ ์ ํ์ด์์. ๋ค๋ง ์ํฉ์ ๋ฐ๋ผ โPostman์ด ์์ด๋ ํ ์คํธํ ์ ์๋ ๋ฐฉ๋ฒโ์ด ์ฌ๋ฌ ๊ฐ์ง ์์ผ๋, ๊ทธ ๋ฐฐ๊ฒฝ์ ํจ๊ป ์ค๋ช ๋๋ฆด๊ฒ์.๋จผ์ , Postman๊ณผ ๊ฐ์ฅ ๋น์ทํ ๋์ฒด ๋๊ตฌ๋ Insomnia์ ๋๋ค.Insomnia๋ ์ธํฐํ์ด์ค๊ฐ ์กฐ๊ธ ๋ ๋จ์ํ๊ณ ๊ฐ๋ณ๊ธฐ ๋๋ฌธ์, ์ฒ์ ๋ฐฐ์ฐ๋ ๋ถ๋ค์ด ๋ถ๋ด ์์ด ์ธ ์ ์์ต๋๋ค. REST API๋ฟ ์๋๋ผ GraphQL์ด๋ gRPC ๊ฐ์ ์ต์ ๊ธฐ์ ๋ ์ง์ํ๊ธฐ ๋๋ฌธ์, ๋์ค์ ํ๋ก์ ํธ ๊ท๋ชจ๊ฐ ์ปค์ ธ๋ ๊ทธ๋๋ก ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค. Postman์ด ์กฐ๊ธ ๋ณต์กํ๊ฑฐ๋ ๋ฌด๊ฒ๊ฒ ๋๊ปด์ง ๋ ์ข์ ์ ํ์ ๋๋ค.๋ค์์ ๋ธ๋ผ์ฐ์ ๋ ํฐ๋ฏธ๋(๋ช ๋ น์ค)์ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.๊ฐ๋จํ ํ ์คํธ๋ผ๋ฉด ๋ธ๋ผ์ฐ์ ์ฃผ์์ฐฝ์ API ์ฃผ์๋ฅผ ์ง์ ์ ๋ ฅํด๋ ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด http://localhost:3000/api/users๋ฅผ ์ ๋ ฅํ๋ฉด ์๋ฒ๊ฐ ์ฃผ๋ ์๋ต์ ๋ฐ๋ก ๋ณผ ์ ์์ต๋๋ค. ์กฐ๊ธ ๋ ๊ธฐ์ ์ ์ผ๋ก๋ curl์ด๋ผ๋ ๋ช ๋ น์ด ๋๊ตฌ๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. ์ด๊ฑด ๋๋ถ๋ถ์ ์ปดํจํฐ์ ๊ธฐ๋ณธ์ผ๋ก ๋ค์ด ์์ด์, ๋ณ๋ค๋ฅธ ์ค์น ์์ด ํฐ๋ฏธ๋์ ํ ์ค๋ง ์ ๋ ฅํด๋ ์๋ฒ์ ์๋ต์ ํ์ธํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด โ์ด API๊ฐ ์ค์ ๋ก ์ ๋์ํ๋์งโ๋ โ์๋ฒ๊ฐ ์๋ต์ ๋ณด๋ด๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐโ์ ๊ฐ๋จํ ์ ๊ฒํ ๋ ์ข์ต๋๋ค.์ข ๋ ์ฒด๊ณ์ ์ผ๋ก, ์ฝ๋๋ก ํ ์คํธ๋ฅผ ์๋ํํ๋ ๋ฐฉ์๋ ์์ต๋๋ค.Node.js์ Express.js ํ๊ฒฝ์์๋ Jest, Mocha, Supertest ๊ฐ์ ๋๊ตฌ๋ฅผ ๋ง์ด ์๋๋ค.์ด ๋ฐฉ๋ฒ์ ์ฌ๋์ด ์ง์ ํด๋ฆญํ์ง ์๊ณ , โ์ด API๋ฅผ ํธ์ถํ์ ๋ ์๋ต์ด ์ด๋ฐ ๋ชจ์์ด๋ฉด ์ฑ๊ณต์ด๋คโ๋ฅผ ๋ฏธ๋ฆฌ ์ฝ๋๋ก ์ ์ด๋๋ ๋ฐฉ์์ด์์. ๋ฒํผ ํ ๋ฒ์ผ๋ก ์ ์ฒด API๋ฅผ ๋์์ ํ์ธํ ์ ์์ด์, ๊ฐ๋ฐ์ด ์ด๋ ์ ๋ ์ต์ํด์ก์ ๋ ๋์ ํ๋ฉด ์ข์ต๋๋ค. ์๋ฅผ ๋ค์ด ๋ก๊ทธ์ธ, ํ์๊ฐ์ , ์ํ๋ชฉ๋ก API ๊ฐ์ ๊ฑธ ํ๊บผ๋ฒ์ ๋๋ ค์ โ์ด๋์ ์คํจํ๋์งโ๋ฅผ ์๋์ผ๋ก ์๋ ค์ค๋๋ค. ๊ธฐ์ ํ๊ฒฝ์์๋ ์ด๋ฐ ์๋ํ ํ ์คํธ๋ ๋ฐฐํฌ ์ ์ ๊ฑฐ์ ํ์๋ก ์ฌ์ฉ๋ฉ๋๋ค.๋ ํ๋ ๊ธฐ์ตํ์๋ฉด ์ข์ ๊ฑด ์๋ฒ ์ํ๋ฅผ ์ฃผ๊ธฐ์ ์ผ๋ก ์๋ ๊ฒ์ฌํด ์ฃผ๋ ๋ชจ๋ํฐ๋ง ๋๊ตฌ์ ๋๋ค.Postman๋ โMonitorโ ๊ธฐ๋ฅ์ ์์ฒด์ ์ผ๋ก ์ ๊ณตํฉ๋๋ค. ์ด๊ฑธ ์ค์ ํด ๋๋ฉด, ์๋ฅผ ๋ค์ด โ10๋ถ๋ง๋ค /api/health ์๋ํฌ์ธํธ๋ฅผ ๊ฒ์ฌํด์ ์๋ฒ๊ฐ ์ด์ ์๋์ง ํ์ธโ ๊ฐ์ ์์ ์ ์๋์ผ๋ก ํด ์ค๋๋ค.๋ง์ฝ ์๋ฒ๊ฐ ๋ฉ์ถ๋ฉด ๋ฐ๋ก ์ด๋ฉ์ผ์ด๋ ์ฌ๋์ผ๋ก ์๋ ค์ค์ ๋น ๋ฅด๊ฒ ๋์ํ ์ ์์ต๋๋ค.์ด์ธ์๋ Hoppscotch, Paw, K6, Newman ๊ฐ์ ๋ชจ๋ํฐ๋งยทํ ์คํธ ๋๊ตฌ๋ค๋ ์์ต๋๋ค.ํนํ Newman์ Postman์์ ๋ง๋ ํ ์คํธ ์คํฌ๋ฆฝํธ๋ฅผ ๊ทธ๋๋ก ๊ฐ์ ธ์์ ํฐ๋ฏธ๋์์ ์๋์ผ๋ก ๋๋ฆด ์ ์๊ฒ ํด ์ฃผ๊ธฐ ๋๋ฌธ์, Postman์ ๊ทธ๋๋ก ํ์ฅํด์ ์ฐ๋ ๋๋์ ๊ฐ๊น์ต๋๋ค.์ ๋ฆฌํ๋ฉด, Postman์ ์ง๊ธ๋ ์ถฉ๋ถํ ํ๋ฅญํ ๋๊ตฌ์ด๊ณ ๊ทธ๋๋ก ์ฌ์ฉํ์ ๋ ์ ํ ๋ฌธ์ ์์ต๋๋ค.๋ค๋ง ํ์์ ๋ฐ๋ผ ๋ค์๊ณผ ๊ฐ์ ์ ํ์ง๋ฅผ ์๊ณ ๊ณ์๋ฉด ์ข์ต๋๋ค.Insomnia โ Postman๋ณด๋ค ๊ฐ๋ณ๊ณ ๋จ์ํ ๋์ฒด ๋๊ตฌ๋ธ๋ผ์ฐ์ ์ฃผ์์ฐฝ ๋๋ curl โ ๊ฐ์ฅ ๋น ๋ฅด๊ณ ์ค์น ์์ด ๊ฐ๋ฅํ ๊ฐ๋จ ํ ์คํธJest, Supertest, Mocha โ ์ฝ๋๋ก ์๋ ํ ์คํธ๋ฅผ ๋๋ฆด ์ ์๋ ์ค๋ฌดํ ๋ฐฉ์K6, Hoppscotch, Newman, Postman Monitor โ ์๋ฒ๋ฅผ ์ฃผ๊ธฐ์ ์ผ๋ก ์๋ ๊ฒ์ฌํ๋ ๋ฐฉ์๊ฒฐ๊ตญ Postman์ ๊ธฐ๋ณธ์ด์ ์ค์ฌ ๋๊ตฌ์ ๋๋ค.๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด์ ์์ ๋ฐฉ๋ฒ๋ค์ โ๋ณด์กฐ ์๋จโ์ผ๋ก ์กฐ๊ธ์ฉ ์ตํ๋ฉด, ํ ์คํธ ํจ์จ์ด ํจ์ฌ ๋์์ง๋๋ค.์ฆ, โPostman์ ๋ฒ๋ฆฌ๋ ๊ฒ ์๋๋ผ, Postman์ ์ค์ฌ์ผ๋ก ํ์ฅํ๋คโ๋ ์๊ฐ์ผ๋ก ์ ๊ทผํ์๋ฉด ๊ฐ์ฅ ์ข์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค.
- 1
- 1
- 15
Q&A
404, 500 ์๋ฌ ์ฒ๋ฆฌ ์ธ์ ํน์ ๊ฐ๋ฐ ๊ตฌ๋ฌธ์์ ์๋ฌ ๋ฐ์ํ์๋ ์ฐพ๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
์๋ ํ์ธ์ eju๋ ๐,404๋ 500 ๊ฐ์ ์๋ฌ๋ โํ์ด์ง๋ฅผ ์ฐพ์ ์ ์์โ, โ์๋ฒ ๋ด๋ถ ๋ฌธ์ โ์ฒ๋ผ ์ด๋ฏธ Express๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฒ๋ฆฌํด ์ฃผ๋ ์๋ฌ์ ๋๋ค. ํ์ง๋ง ์ค์ ๊ฐ๋ฐ ์ค์๋ โํน์ ์ฝ๋ ์ค์์ ๊ฐ์๊ธฐ ํฐ์ง๋ ์๋ฌโ๋ฅผ ์ฐพ์์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ํจ์ฌ ๋ง์ต๋๋ค. ์ด๋ฐ ์ํฉ์ ์ฝ๊ฒ ์ฐพ๋ ์ค๋ฌด์ฉ ๋ฐฉ๋ฒ์ ์์ฃผ ๊ธฐ์ด๋ถํฐ ์ค๋ช ๋๋ฆด๊ฒ์.๊ฐ์ฅ ๋จผ์ ์์๋์ค ๊ฑด โ๋ก๊ทธ(log)โ์ ๋๋ค. ๋ก๊ทธ๋ ํ๋ก๊ทธ๋จ์ด ์คํ๋๋ฉด์ ๋จ๊ธฐ๋ ์ผ๊ธฐ๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค. Node.js์ Express์์๋ ๋ณดํต Winston์ด๋ Pino ๊ฐ์ ๋๊ตฌ๋ฅผ ์จ์ ๋ก๊ทธ๋ฅผ ๋จ๊น๋๋ค.์ด๊ฑธ ์ผ ๋๋ฉด, ์๋ฌ๊ฐ ๋ฌ์ ๋ โ์ด๋ ํ์ผ์ ๋ช ๋ฒ์งธ ์ค์์ ์ด๋ค ์์ฒญ์ด ๋ค์ด์์ ๋ ํฐ์ก๋์งโ๋ฅผ ๋ฐ๋ก ๋ณผ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด โ/login ํ์ด์ง๋ก ์์ฒญ์ด ๋ค์ด์๋๋ฐ, username์ด ๋น์ด ์์ด์ ์ค๋ฅ ๋ฐ์โ ๊ฐ์ ์์ผ๋ก ๋จ์ฃ .์ด ๋ก๊ทธ๋ ๋์ค์ ์ฝ์์ด๋ ํ์ผ์์ ๊ทธ๋๋ก ์ฝ์ด๋ณผ ์ ์์ต๋๋ค.๋ค์์ โ๋๋ฒ๊น (debugging)โ์ด์์.๋๋ฒ๊น ์ ์ฝ๋์ ์คํ์ ์ ๊น ๋ฉ์ถฐ์, ๋ณ์ ์์ ๋ฌด์จ ๊ฐ์ด ๋ค์ด ์๋์ง ์ง์ ํ์ธํ๋ ์์ ์ด์์.Node.js๋ --inspect ๋ชจ๋๋ผ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.์ด๊ฑธ ์ผ๋ฉด ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ VS Code์์ ํ๋ก๊ทธ๋จ์ โ์ผ์์ ์งโํ๊ณ , ํน์ ์ฝ๋ ์ค์ ํ์ธํ๊ฑฐ๋ ๋ณ์๊ฐ์ ๋ฐ๋ก ๋ณผ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด โ์ด if๋ฌธ ์์ด ์คํ๋๋์ง?โ ํน์ โ์ฌ๊ธฐ์ ๋ฐ์ ๋ฐ์ดํฐ๊ฐ ๋น์ด ์๋์ง?โ ๊ฐ์ ๊ฑธ ๋์ผ๋ก ํ์ธํ ์ ์์ด์. ์ด๋ณด ๋จ๊ณ์์๋ console.log( )๋ก ์ค๊ฐ์ค๊ฐ ์ถ๋ ฅํด ๋ณด๋ ๊ฒ๋ ๋๋ฒ๊น ์ ํ ํํ์ด์ง๋ง, ๋์ค์๋ ์ด๋ ๊ฒ ํ๋ก๊ทธ๋จ์ ๋ฉ์ถฐ์ ๋ณด๋ ๋ฐฉ์์ด ํจ์ฌ ํจ์จ์ ์ ๋๋ค.์ธ ๋ฒ์งธ๋ โ์๋ฌ ์ถ์ ์๋น์คโ์ ๋๋ค.์ด๊ฑด ์กฐ๊ธ ๋ ์๋ํ๋ ๋ฐฉ๋ฒ์ธ๋ฐ, Sentry, Bugsnag, Rollbar ๊ฐ์ ์๋น์ค๊ฐ ๋ํ์ ์ด์์.์ด ๋๊ตฌ๋ค์ Express์ ํ ์ค๋ง ์ฐ๊ฒฐํด ๋๋ฉด, ์๋ฌ๊ฐ ๋ฐ์ํ ๋๋ง๋ค ์๋์ผ๋ก ์๋ฒ์์ ์ ๋ณด๋ฅผ ๋ชจ์์ ์น์ฌ์ดํธ๋ก ๋ณด๋ด์ค๋๋ค. ๊ทธ๋ผ ๋์ค์ ๋ธ๋ผ์ฐ์ ์์ โ์ธ์ , ์ด๋ค ์์ฒญ์์, ๋ฌด์จ ์ด์ ๋ก ์๋ฌ๊ฐ ๋ฌ๋์งโ๋ฅผ ํ๋์ ๋ณผ ์ ์๊ณ , ์๋ฌ๊ฐ ๋ฐ๋ณต๋๋ฉด ๊ทธ ๋น๋๋ ๊ฒฝํฅ๊น์ง ๋ถ์ํด ์ค๋๋ค. ์ฆ, ์ง์ ์ฝ์์ ๋ณด์ง ์์๋ ์๋์ผ๋ก ์๋ ค์ฃผ๋ โ์๋ฌ ์๋ฆผ ์์คํ โ์ด๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.๊ทธ๋ฆฌ๊ณ ๋ค ๋ฒ์งธ๋ก๋ โ์ ๋ ฅ๊ฐ ๊ฒ์ฆ(validation)โ์ ๋๋ค.์ฌ์ค ๋ง์ ์๋ฌ๋ ์๋ฒ ๋ก์ง ์์ฒด๋ณด๋ค, ์ฌ์ฉ์๊ฐ ์๋ชป๋ ๊ฐ์ ๋ณด๋ด์ ์๊น๋๋ค.์ด๊ฑธ ๋ฏธ๋ฆฌ ์ก์์ฃผ๋ ๋ฐฉ๋ฒ์ด โ์์ฒญ ๊ฒ์ฆ ๋ผ์ด๋ธ๋ฌ๋ฆฌโ์ ๋๋ค.๋ํ์ ์ผ๋ก Joi, Celebrate, Zod ๊ฐ์ ๋๊ตฌ๊ฐ ์์ด์.์๋ฅผ ๋ค์ด โ์ซ์์ฌ์ผ ํ๋๋ฐ ๋ฌธ์์ด์ด ๋ค์ด์ค๋ฉด ์์ ์คํํ์ง ์๊ณ 400 ์ค๋ฅ๋ก ๊น๋ํ๊ฒ ๋๋ ค์ฃผ๋โ ์์ด์ฃ . `์ด๋ ๊ฒ ํ๋ฉด โ๋ด ์ฝ๋ ๋ด๋ถ ๋ฒ๊ทธโ์ โ์ ๋ ฅ ์๋ชป์ผ๋ก ์ธํ ์ค๋ฅโ๋ฅผ ๊ตฌ๋ถํ๊ธฐ ์ฌ์์ง๋๋ค.๋ง์ง๋ง์ผ๋ก โ์๋ฌ ํธ๋ค๋ฌโ๋ผ๋ ๊ฑธ ๊ผญ ํ๋ ๋ง๋ค์ด ๋์๋ฉด ์ข์ต๋๋ค.Express๋ ์ฝ๋ ์ด๋์์๋ ์๋ฌ๊ฐ ์๊ธฐ๋ฉด ๋ง์ง๋ง์ ์๋ ์๋ฌ ์ฒ๋ฆฌ ๊ตฌ๋ฌธ์ผ๋ก ๋ชจ์์ค๋๋ค.๊ทธ๊ณณ์์ ์๋ฌ ๋ฉ์์ง์ ์คํ(์ด๋ ํ์ผ ๋ช ์ค์์ ๋ฌ๋์ง)์ ์ถ๋ ฅํ๊ฑฐ๋, ์ฌ์ฉ์์๊ฒ ๋ณด๊ธฐ ์ข์ ๋ฉ์์ง๋ฅผ ๋ณด๋ผ ์ ์์ต๋๋ค. ์ด๊ฑธ ์จ๋๋ฉด ๊ฐ์์ค๋ฌ์ด ์ค๋ฅ๊ฐ ๋ฐ์ํด๋ ํ๋ก๊ทธ๋จ ์ ์ฒด๊ฐ ๋ฉ์ถ์ง ์๊ณ , ์์ธ์ ์์ ํ๊ฒ ๊ธฐ๋กํ ์ ์์ต๋๋ค.์ ๋ฆฌํ์๋ฉด,๋ก๊ทธ ๋๊ตฌ๋ก ์ผ๊ธฐ์ฒ๋ผ ์คํ ์ํฉ์ ๋จ๊ธฐ๊ณ ,๋๋ฒ๊น ๋ชจ๋๋ก ์ฝ๋ ์ค๊ฐ์ ์ง์ ๋ค์ฌ๋ค๋ณด๋ฉฐ,Sentry ๊ฐ์ ์๋ฌ ์ถ์ ์๋น์ค๋ก ์๋ ๊ธฐ๋ก์ ๋ฐ๊ณ ,์ ๋ ฅ ๊ฒ์ฆ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์๋ชป๋ ์์ฒญ์ ๋ฏธ๋ฆฌ ๋ง๊ณ ,์๋ฌ ํธ๋ค๋ฌ๋ก ์์ธ๋ฅผ ํ๊ณณ์์ ๊ด๋ฆฌํ๋ฉด,โํน์ ์ฝ๋์์ ์ด๋ค ์ด์ ๋ก ์๋ฌ๊ฐ ๋ฐ์ํ๋์งโ๋ฅผ ์ฝ๊ฒ ์ฐพ์๋ผ ์ ์์ต๋๋ค.์ง๊ธ์ ๋ณต์กํด ๋ณด์ฌ๋, ์ฌ์ค ๊ฐ๊ฐ์ ๋๊ตฌ๋ โ๋ก๊ทธ๋ฅผ ์ ๋จ๊ธฐ๊ณ , ์๋ฌ๋ฅผ ๋ณด๊ธฐ ์ฝ๊ฒ ๋ง๋ค์โ๋ผ๋ ๊ฐ์ ์๋ฆฌ๋ฅผ ๊ณต์ ํฉ๋๋ค. ์ฒ์์๋ console.log๋ก ์์ํ์๊ณ , ์ต์ํด์ง๋ฉด Sentry๋ Winston์ฒ๋ผ ์กฐ๊ธ์ฉ ์๋ํ๋ ๋๊ตฌ๋ก ํ์ฅํ์๋ฉด ๋ฉ๋๋ค.๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 19
Q&A
ejs ์ ์ด๋ค ๊ฐ๋ฐ์ธ์ด๋ก ์กฐํฉํด์ ์ฌ์ฉํ์๋ ์ฑ๋ฅ์ด ์ข์๊น์?
์๋ ํ์ธ์ eju๋ ๐,EJS๋ Embedded JavaScript Templates์ ์ฝ์๋ก, HTML ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ผ์ ๋ฃ์ด ๋์ ์ผ๋ก ์์ฑ๋ ์นํ์ด์ง๋ฅผ ๋ง๋๋ ํ ํ๋ฆฟ ์์ง์ ๋๋ค. ์๋ฅผ ๋ค์ด ์ฒ๋ผ ์์ฑํ๋ฉด, EJS๊ฐ ํด๋น ๊ตฌ๋ฌธ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์ ํ๊ฐํด ์ค์ ๊ฐ์ผ๋ก ์นํํ HTML์ ๋ง๋ค์ด ์ค๋๋ค. ์ด ๊ณผ์ ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ์๋ฒ์์ ์ด๋ฃจ์ด์ง๋ฉฐ, Node.js ํ๊ฒฝ์์ ์คํ๋ฉ๋๋ค. Node.js๋ ๋ธ๋ผ์ฐ์ ์ธ๋ถ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์ ์๋๋ก ๋ง๋ ๋ฐํ์ ํ๊ฒฝ์ผ๋ก, ๊ตฌ๊ธ ํฌ๋กฌ์ V8 ์์ง์ ๊ทธ๋๋ก ์ฌ์ฉํฉ๋๋ค. ๋ฐ๋ผ์ EJS๊ฐ ์์ฑํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ Node.js์์ ๋ณ๋์ ๋ณํ ๊ณผ์ ์์ด ๋ฐ๋ก ์คํ๋ฉ๋๋ค.EJS๋ ๋จ์ํ HTML ๋ฌธ์์ด์ ์ถ๋ ฅํ๋ ๋๊ตฌ๊ฐ ์๋๋ผ, ๋ด๋ถ์ ์ผ๋ก ํ ํ๋ฆฟ์ ํ ๋ฒ ํ์ฑํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์ ํํ๋ก ๋ณํํ ๋ค ์คํํฉ๋๋ค. ์ฆ, ์ฌ๋์ด ์์ฑํ .ejs ํ์ผ์ ๋ด๋ถ์ ์ผ๋ก ํ๋์ ํจ์๋ก ์ปดํ์ผ๋์ด ์คํ๋๋ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ด ๊ณผ์ ์ ์ธ์ด ๋ฒ์ญ์ ์ํ ํธ๋์คํ์ผ ๊ณผ์ ์ด ์๋๋ผ, HTML๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์์ ๊ฒฐํฉํ๊ธฐ ์ํ ๋จ์ํ ํ ์คํธ ๋ณํ ๋จ๊ณ์ ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ Babel ๊ฐ์ ๋ณ๋์ ๋ฒ์ญ ๋๊ตฌ๋ ํ์ํ์ง ์์ต๋๋ค. ์ฆ, ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์์ฑ๋ ํ ํ๋ฆฟ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ทธ๋๋ก ์คํ๋๋ค๋ ์ ์์ ๋งค์ฐ ํจ์จ์ ์ ๋๋ค.Node.js์ EJS๊ฐ ์์ฐ์ค๋ฝ๊ฒ ํจ๊ป ๋์ํ๋ ์ด์ ๋ JSON๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ์์ ํ ํธํ์ฑ ๋๋ถ์ด๊ธฐ๋ ํฉ๋๋ค. ์๋ฒ์์ res.render('profile', { name: 'ํ๊ธธ๋' })์ฒ๋ผ ๋จ์ํ ๊ฐ์ฒด๋ฅผ ์ ๋ฌํ๋ฉด, EJS ๋ด๋ถ์์๋ ๊ทธ ๋ฐ์ดํฐ๋ฅผ ๋ณํ ์์ด ๋ฐ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. JSON ๋ฌธ๋ฒ์ด ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ๋ฆฌํฐ๋ด๊ณผ ๋์ผํ๊ธฐ ๋๋ฌธ์ ๋ณ๋์ ์ง๋ ฌํ๋ ์ญ์ง๋ ฌํ ๊ณผ์ ์ด ํ์ํ์ง ์์ต๋๋ค. ์ด๋ฐ ๊ตฌ์กฐ ๋๋ถ์ ์๋ฒ์์ ์์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ํ ํ๋ฆฟ์ผ๋ก ์ ๋ฌํ ๋ ์ค๊ฐ ๋จ๊ณ๊ฐ ์๋ต๋์ด ์ฝ๋๊ฐ ๋จ์ํ๊ณ ์ฒ๋ฆฌ ์๋๋ ๋น ๋ฆ ๋๋ค.Node.js์ ํต์ฌ ์์ง์ธ V8์ JIT(Just-In-Time) ์ปดํ์ผ๋ฌ๋ฅผ ๋ด์ฅํ๊ณ ์์ต๋๋ค. ์ด๋ ์์ฃผ ์คํ๋๋ ์ฝ๋๋ฅผ ๊ธฐ๊ณ์ด ์์ค์ผ๋ก ์ต์ ํํ์ฌ ์คํ ์๋๋ฅผ ๋์ด๋ ๊ธฐ์ ๋ก, EJS์ฒ๋ผ ์๋ฒ์์ ๋ฐ๋ณต์ ์ผ๋ก ์คํ๋๋ ์ฝ๋์์๋ ์ฑ๋ฅ ์ด์ ์ ์ ๊ณตํฉ๋๋ค. ๋ํ Express.js๋ EJS ํ ํ๋ฆฟ ๋ ๋๋ง์ ์ํ ์บ์ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค. ํ ๋ฒ ์ปดํ์ผ๋ EJS ํ ํ๋ฆฟ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋์ด ๋ค์ ์์ฒญ ์ ์ฌ์ฌ์ฉ๋๋ฉฐ, ํ๋ก๋์ ๋ชจ๋์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ด ์บ์๊ฐ ํ์ฑํ๋ฉ๋๋ค. ์ฆ, ์๋น์ค ํ๊ฒฝ์์๋ ํ ๋ฒ ํ์ฑ๋ ํ ํ๋ฆฟ ํจ์๊ฐ ๊ทธ๋๋ก ์ฌ์ฌ์ฉ๋์ด ๋ ๋๋ง ์๋๊ฐ ์ ์ ๋ ๋นจ๋ผ์ง๋๋ค.๊ฒฐ๊ณผ์ ์ผ๋ก EJS์ Node.js์ ์กฐํฉ์ ๊ฐ์ ์ธ์ด ์์์ ์์ง์ด๋ฏ๋ก ๋ถํ์ํ ๋ณํ์ด ์๊ณ , JSON ๋ฐ์ดํฐ๊ฐ ์์ฐ์ค๋ฝ๊ฒ ์ฐ๊ฒฐ๋๋ฉฐ, V8 ์์ง์ ์ต์ ํ์ Express์ ์บ์ ๊ธฐ๋ฅ ๋๋ถ์ ๋น ๋ฅด๊ณ ์์ ์ ์ผ๋ก ๋์ํฉ๋๋ค. ์ด๋ฐ ์ด์ ๋ก EJS๋ Node.js ํ๊ฒฝ์์ ๊ฐ์ฅ ์์ฐ์ค๋ฝ๊ณ ํจ์จ์ ์ธ ํ ํ๋ฆฟ ์์ง ์ค ํ๋๋ก ํ๊ฐ๋ฉ๋๋ค. ๋ค๋ง EJS๋ Node.js ์ ์ฉ์ผ๋ก ๋ง๋ค์ด์ง ๊ฒ์ ์๋๋ฉฐ, ๋ธ๋ผ์ฐ์ ์์๋ ๋ ๋ฆฝ์ ์ผ๋ก ์คํํ ์ ์๋ ๋ฒ์ฉ ์๋ฐ์คํฌ๋ฆฝํธ ํ ํ๋ฆฟ ์์ง์ด๋ผ๋ ์ ์ ํจ๊ป ๊ธฐ์ตํ์ ์ผ ํฉ๋๋ค.๋ํ, ๋ค๋ฅธ ์ธ์ด๋ค์์๋ ์ด์ ์ ์ฌํ ๋ฐฉ์์ ํ ํ๋ฆฟ ์์ง์ด ์กด์ฌํฉ๋๋ค. ์๋ฅผ ๋ค์ด Python์ Jinja2, PHP์ Twig, Ruby์ ERB(Embedded Ruby), ๊ทธ๋ฆฌ๊ณ Java์ JSP(JavaServer Pages) ๋ฑ์ด ๊ทธ ๋ํ์ ์ธ ์์ ๋๋ค. ์ด๋ค์ ๋ชจ๋ โ์ฝ๋์ ๋งํฌ์ ์ ์์ด ์ต์ข HTML์ ์์ฑํ๋โ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๋ฉฐ, ๊ฐ ์ธ์ด ํ๊ฒฝ์์ EJS์ ๋์ผํ ์ญํ ์ ์ํํฉ๋๋ค. ์ฆ, ์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ์์๋ EJS๊ฐ ์ด ์ญํ ์ ๋งก๊ณ , Python์์๋ Jinja2๊ฐ, Ruby์์๋ ERB๊ฐ, Java์์๋ JSP๊ฐ ๊ฐ์ ๊ธฐ๋ฅ์ ๋ด๋นํ๋ค๊ณ ๋ณด์ค ์ ์์ต๋๋ค. ์ด๋ฌํ ํ ํ๋ฆฟ ์์ง๋ค์ ๋ชจ๋ ์ธ์ด๋ณ ๋ฐํ์๊ณผ ๊ธด๋ฐํ ์ฐ๊ฒฐ๋์ด ์๋ํ๊ธฐ ๋๋ฌธ์, EJS๊ฐ Node.js์ ์์ฐ์ค๋ฝ๊ฒ ์ด์ฐ๋ฌ์ง๋ ๊ฒ์ฒ๋ผ ๋ค๋ฅธ ์ธ์ด์ ํ ํ๋ฆฟ ์์ง๋ค๋ ๊ฐ์์ ํ๊ฒฝ์์ ์ต์ ํ๋ ํํ๋ก ์คํ๋ฉ๋๋ค.๊ฐ์ฌํฉ๋๋ค.
- 0
- 1
- 17