์์ค ๋งต์ด๋?
์์ค ๋งต(Source Map)์ ์ปดํ์ผ๋ JavaScript ์ฝ๋๋ฅผ ์๋ณธ TypeScript ์ฝ๋๋ก ๋งคํํ๋ ํ์ผ์ ๋๋ค. ์ด๋ฅผ ํตํด ์๋ฌ ์คํ ํธ๋ ์ด์ค์ ๋๋ฒ๊ฑฐ์์ ์๋ณธ TypeScript ์ฝ๋๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ํ์ฉ:- ์๋ฌ ์คํ ํธ๋ ์ด์ค์์ ์๋ณธ TypeScript ์์น ํ์ธ
- ๋๋ฒ๊ฑฐ์์ TypeScript ์ฝ๋์ ๋ธ๋ ์ดํฌํฌ์ธํธ ์ค์
- ํ๋ก๋์ ์๋ฌ๋ฅผ ์๋ณธ ์ฝ๋์ ๋งคํ
์์ค ๋งต ํ์ฑํ
tsconfig.json ์ค์
dist/JS
index.jsMAP
index.js.map - ์์ค ๋งต ํ์ผmodels/JS
user.model.jsMAP
user.model.js.mapinlineSourceMap vs sourceMap
์๋ฌ ์คํ ํธ๋ ์ด์ค
์์ค ๋งต ์์ด
์์ค ๋งต ์์ ๋
Node.js์์ ์์ค ๋งต ์ฌ์ฉ
โenable-source-maps ํ๋๊ทธ
package.json:
tsx ์ฌ์ฉ (๊ถ์ฅ)
VSCode ๋๋ฒ๊ฑฐ ์ค์
launch.json
๋๋ฒ๊น ๋จ๊ณ
-
๋ธ๋ ์ดํฌํฌ์ธํธ ์ค์
- TypeScript ํ์ผ(
.ts)์์ ์ค ๋ฒํธ ์ผ์ชฝ ํด๋ฆญ
- TypeScript ํ์ผ(
-
๋๋ฒ๊ฑฐ ์์
- F5 ๋๋ โRun and Debugโ ํจ๋์์ ์คํ
-
๋ณ์ ๊ฒ์ฌ
- ๋ธ๋ ์ดํฌํฌ์ธํธ์์ ๋ฉ์ถ๋ฉด ๋ณ์ ๊ฐ ํ์ธ
- Watch ํจ๋์์ ํํ์ ํ๊ฐ
-
๋จ๊ณ๋ณ ์คํ
- F10: Step Over (๋ค์ ์ค)
- F11: Step Into (ํจ์ ๋ด๋ถ๋ก)
- Shift+F11: Step Out (ํจ์ ๋ฐ์ผ๋ก)
ํ๋ก๋์ ์์ค ๋งต
๋ณด์ ๊ณ ๋ ค์ฌํญ
์๋ฌ ์ถ์ ์๋น์ค ์ฐ๋
์์ค ๋งต์ Sentry ๊ฐ์ ์๋ฌ ์ถ์ ์๋น์ค์ ์ ๋ก๋:์์ค ๋งต ๋ฌธ์ ํด๊ฒฐ
1. ์์ค ๋งต์ด ์์ฑ๋์ง ์์
ํ์ธ ์ฌํญ:2. ์คํ ํธ๋ ์ด์ค๊ฐ ์ฌ์ ํ .js ํ์ผ์ ๊ฐ๋ฆฌํด
์์ธ: Node.js๊ฐ ์์ค ๋งต์ ์ธ์ํ์ง ๋ชปํจ ํด๊ฒฐ:3. VSCode ๋๋ฒ๊ฑฐ๊ฐ ์๋ํ์ง ์์
ํ์ธ ์ฌํญ:.vscode/launch.json์ฌ์ค์ - TypeScript ์๋ฒ ์ฌ์์:
Cmd+Shift+Pโ โTypeScript: Restart TS Serverโ - ๋๋ฒ๊ฑฐ ์ฌ์์
4. ์๋ชป๋ ๋ผ์ธ ๋ฒํธ
์์ธ: ์์ค ๋งต๊ณผ ์ฝ๋๊ฐ ๋๊ธฐํ๋์ง ์์ ํด๊ฒฐ:์์ค ๋งต ๊ฒ์ฆ
์๋ ๊ฒ์ฆ
source-map ํจํค์ง๋ก ๊ฒ์ฆ
๋ธ๋ผ์ฐ์ ์์ ์์ค ๋งต
Vite ๊ฐ๋ฐ ์๋ฒ
Vite๋ ์๋์ผ๋ก ์์ค ๋งต์ ์์ฑํ๊ณ ์ ๊ณตํฉ๋๋ค:Chrome DevTools
-
์์ค ํญ ์ด๊ธฐ
- F12 โ Sources ํญ
-
TypeScript ํ์ผ ํ์ธ
webpack://๋๋src/์๋.tsํ์ผ
-
๋ธ๋ ์ดํฌํฌ์ธํธ ์ค์
- TypeScript ํ์ผ์์ ์ค ๋ฒํธ ํด๋ฆญ
-
๋๋ฒ๊น
- ํ์ด์ง ์๋ก๊ณ ์นจํ์ฌ ๋ธ๋ ์ดํฌํฌ์ธํธ ๋๋ฌ
Best Practices
1. ํญ์ ๊ฐ๋ฐ ํ๊ฒฝ์์ ํ์ฑํ
2. Git์์ .map ํ์ผ ์ ์ธ
3. ํ๋ก๋์ ์์ ์ ํ์ ์ฌ์ฉ
4. ์๋ฌ ๋ชจ๋ํฐ๋ง ํตํฉ
ํ๋ก๋์ ์์๋ ์์ค ๋งต์ ์๋ฌ ์ถ์ ์๋น์ค์๋ง ์ ๊ณต:๊ด๋ จ ๋๊ตฌ
1. source-map-support
๋ฐํ์์ ์์ค ๋งต ์๋ ์ ์ฉ:2. @esbuild-kit/core-utils
esbuild ๊ธฐ๋ฐ ๋น๋ ๋๊ตฌ์ ์์ค ๋งต ์ง์:3. Chrome DevTools
- Elements ํญ์์ ์ปดํ์ผ๋ CSS๋ฅผ ์๋ณธ SCSS/LESS๋ก ๋งคํ
- Network ํญ์์ ์์ค ๋งต ๋ค์ด๋ก๋ ํ์ธ
- Console์์ ์๋ณธ ํ์ผ ๋งํฌ ํด๋ฆญ