
ì¬ì í ìë¬ê° ëë €ìŽ íë¡ ížìë ê°ë°ìë€ìê²
ì¬ì í ìë¬ê° ëë €ìŽ íë¡ ížìë ê°ë°ìë€ìê² êŽë š
íë¡ ížìë ê°ë°ì ì§ííë€ ë³Žë©Ž ìêž°ì¹ ëª»í ìë¬ê° ì죌 ë°ìí©ëë€. í¹í 죌ëìŽ ê°ë°ìëŒë©Ž ìë¬ ë©ìì§ë¥Œ ì íì ë, ë¹í©ì€ëœê³ ìŽëìë¶í° ìì ëìŒ í ì§ ë§ë§í ì ìì£ .
íì§ë§ ê±±ì í íìë ììµëë€. 겜íìŽ ìì¬ ìëìŽ ê°ë°ìê° ëë©Ž, ìë¬ ë©ìì§ë ì€íë € 묞ì 륌 ì¬ì ì ë°©ì§í ì ìë ì€ìí ì ížë¡ ì¬ê²šì§ëë€. ìë¬ ììŽ ëŠŽëŠ¬ìŠë ìíížìšìŽê° ëì€ì ë í° ë¬žì 륌 ìŒêž°í ì ìêž° ë묞ìŽì£ . ìëìŽ ê°ë°ìë ìë§ì ìë¬ë¥Œ 겪ìŽë³Žìêž°ì, ìë¡ìŽ ìë¬ê° ëíëëëŒë ë€ìí íŽê²° ë°©ë²ì ì°ŸìëŒ ì ììµëë€.
ì€ì ë¡ íë¡ê·žëš ê°ë° 곌ì ìì ìë¬ ì¡°ì¬ì ìì ì ëë ìê°ì ì 첎 ì 묎 ìê°ì ìœ 40%ì ë¬íë€ê³ ìë €ì ž ììµëë€. ë°ëŒì ìë¬ë¥Œ íšê³Œì ìŒë¡ ì²ëŠ¬íë ë¥ë ¥ì ê°ë°ììê² íìì ìž ìëì ëë€. ì묎늬 ë§ì 겜íì ìëëŒë 몚ë ì¢ ë¥ì ìë¬ë¥Œ ì§ì 겜íí ìë ììŒë¯ë¡, ìë¬ ë°ì ì ìŽë¥Œ ì ìíê² ë¶ìíê³ íŽê²°í ì ìë ë¥ë ¥ì í€ì°ë ê²ìŽ ì€ìíì£ . ìŽë² êžììë íë¡ ížìë ê°ë°ìê° ì죌 ë§ëë ìë¬ì ì í곌 íŽê²° ë°©ë² ë±ì ìŽíŽë³Žê² ìµëë€.

ìë¬ë¥Œ ë§ë¬ìµëë€

ìë¬ê° ë°ìíë©Ž ëë¶ë¶ì ê°ë° í겜ì âìë¬ê° ë°ìíìŽìâëŒê³ ì¹ì íê² ìë €ì€ëë€. ìë¬ë¥Œ íšê³Œì ìŒë¡ íŽê²°íë €ë©Ž, 뚌ì ìë¬ ë©ìì§ê° ìŽë»ê² 구ì±ëìŽ ìëì§ ìŽíŽíë ê²ìŽ ì€ìí©ëë€. ìë¬ ë©ìì§ë 묞ì ì ììžì íì í ì ìë íµì¬ ì 볎륌 ì ê³µíë©°, ìŽë¥Œ ë¶ìíë ê²ìŽ ìë¬ë¥Œ ë€ë£šë 첫걞ìì ëë€.
ëë¶ë¶ì íë¡ê·žëë° ìžìŽìì ìë¬ ë©ìì§ë ë€ì곌 ê°ì ììë¡ êµ¬ì±ë©ëë€.
- ìë¬ ì í(Error Type): ë°ìí ì€ë¥ì ì¢ ë¥ë¥Œ ëíë ëë€.
- ìë¬ ë©ìì§(Error Message): ì€ë¥ì ììžì ëí ì€ëª ì ì ê³µí©ëë€.
- ì€í ížë ìŽì€(Stack Trace): ì€ë¥ê° ë°ìí ìœë ì€í íëŠì 볎ì¬ì€ëë€.
ì륌 ë€ìŽ, ë€ì곌 ê°ì ìë¬ ë©ìì§ë¥Œ ìŽíŽëŽ ìë€.
TypeError: Cannot read properties of undefined (reading 'name') at Object.getUserName (app.js:10) at fetchUserData (app.js:25) at main (app.js:40)
ì ë©ìì§ë TypeErrorê° ë°ìíìŒë©°, undefinedìž ê°ì²Žìì name ìì±ì ìœìŒë € íì ë 묞ì ê° ë°ìíìì ì믞í©ëë€. ëí app.js íìŒì 10ë²ì§ž ì€ìì getUserName íšìê° ížì¶ë ë ìë¬ê° ë°ìíê³ , ê·ž ížì¶ìŽ fetchUserData íšì(25ë²ì§ž ì€)ì main íšì(40ë²ì§ž ì€)ìì ìŽë£šìŽì¡ìì ì ì ììµëë€. ë¬Žìš ë§ìžì§ ëªšë¥Žê² ëì? ê° ììì ëíŽ ì¢ ë ìì볌ê²ì.
íë¡ ížìë ê°ë°ìê° ë§ëë ìë¬ ì í

íë¡ ížìë ê°ë°ìì ë°ìíë ëíì ìž ìë¬ ì íì ë€ì곌 ê°ìµëë€.
1. JavaScript ì€ë¥
- ReferenceError: ì¡Žì¬íì§ ìë ë³ì륌 ì°žì¡°í ë ë°ì
- TypeError: ì못ë ë°ìŽí° íì ì ë€ë£° ë ë°ì
- SyntaxError: ë¬žë² ì€ë¥ë¡ ìžíŽ ìœëê° ì€íëì§ ìì ë ë°ì
- RangeError: ížì¶ ì€íìŽ ìŽê³Œëê±°ë ë°°ìŽì êžžìŽë¥Œ ìŽê³Œí ë ë°ì
2. ë€ížìí¬ ì€ë¥
- CORS ì€ë¥: ë€ë¥ž ëë©ìžìì ë°ìŽí°ë¥Œ ê°ì žì¬ ë ë°ìíë 볎ì êŽë š ì€ë¥
- Failed to fetch: ë€ížìí¬ ìì²ìŽ ì€íší ë ë°ì
- Timeout Error: ìì²ìŽ ìŒì ìê° ëŽì ìëµì ë°ì§ 못í ë ë°ì
3. ëžëŒì°ì êŽë š ì€ë¥
- DOM ìì ì°žì¡° ì€ë¥: null ëë undefinedìž ìì륌 ì¡°ìíë € í ë ë°ì
- CSS êŽë š 묞ì : ì€íìŒìŽ ììëë¡ ì ì©ëì§ ìê±°ë ë ìŽìììŽ ê¹šì§ë 겜ì°
- ë ëë§ ì±ë¥ 묞ì : UIê° ëë €ì§ê±°ë íë ì ëë¡ìŽ ë°ìíë 겜ì°
ìŽì²ëŒ ìë¬ ë©ìì§ì ëì€ë ì íì ëí ìŽíŽë§ ììŽë, ìë¬ê° ì ë°ìíëì§ ì ì ììµëë€. ìŽë¥Œ íµíŽ ì°ëŠ¬ê° ë§ë íë¡ê·žëšìì ìŽë€ ë¶ë¶ì ì§ì€íŽìŒ íëì§ íëší ì ìê² ë©ëë€.
ìŽëì ë°ìí ìë¬ìžê°?
ìë¬ ì íì ë³Žê³ ìŽëì ì§ì€íŽìŒ íëì§ ììë€ë©Ž, ìŽì ì íí ì°ëŠ¬ ìœë ìŽëìì ìë¬ê° ë°ìíëì§ë¥Œ ì¶ì íŽìŒ í©ëë€. ìŽë íìí ê²ìŽ ë°ë¡ ì€í ížë ìŽì€ì ëë€.
1. ì€í ížë ìŽì€ì Ʞ볞 구조
ì€í ížë ìŽì€ë ë³Žíµ ë€ì곌 ê°ì íììŒë¡ íìë©ëë€.
TypeError: Cannot read properties of undefined (reading 'name')
at Object.getUserName (app.js:10)
at fetchUserData (app.js:25)
at main (app.js:40)
ìì ìì륌 볎멎, main íšììì fetchUserData
륌 ížì¶íê³ , ê·ž ëŽë¶ìì getUserName
ì ížì¶íë€ê° ìë¬ê° ë°ìíìì ì ì ììµëë€. ìŽë¬í 구조륌 íì©íë©Ž ìŽë€ íšìê° ìë¬ì ììžìžì§ ì¶ì í ì ììµëë€.
2. ì€í ížë ìŽì€ë¥Œ íì©í ëë²ê¹ ë°©ë²
- ìë¬ê° ë°ìí 첫 ë²ì§ž ì€ì íìžíìžì: ê°ì¥ ìì íìë ìë¬ ë©ìì§ë¥Œ ìœê³ , ìŽë€ ì íì ì€ë¥ìžì§ íìží©ëë€.
- ì€íì íëŠì ë°ëŒê°ìžì: 첫 ë²ì§ž ížì¶ìì ë§ì§ë§ ížì¶ê¹ì§, íšìê° ìŽë€ 겜ë¡ë¡ ì€íëìëì§ë¥Œ ë¶ìí©ëë€.
- êŽë šë íìŒê³Œ ëŒìž ë²ížë¥Œ 첎í¬íìžì: ì륌 ë€ìŽ,
app.js:10
ìì 묞ì ê° ë°ìíë€ë©Ž íŽë¹ íìŒì 10ë²ì§ž ì€ì íìžíì¬ ìŽë€ ìœëê° ë¬žì 륌 ìŒìŒí€ëì§ ìŽíŽë³Žìžì. - ëžëŒì°ì ê°ë°ì ë구ì âCall Stackâ í íì©íêž°: Chrome DevToolsì âSourcesâ íìì ëžë ìŽí¬í¬ìžížë¥Œ ì€ì íê³ , âCall Stackâì íìžíë©Ž ì€í ížë ìŽì€ë¥Œ ìê°ì ìŒë¡ ë¶ìí ì ììµëë€.
- ìì¬ëë ë³ì륌 ìœììì ì§ì íìžíêž°:
console.log()
륌 ì¬ì©íì¬ í¹ì ë³ìê° ììí ê°ì ê°ì¡ëì§ ì ê²í©ëë€.
ìŽë ì€í ížë ìŽì€ì ì 첎륌 볌 íìë ììµëë€. ê°ì¥ ë§ì§ë§ ì¶ì ë§ìŒë¡ë ìë¬ê° ë°ìí ìì¹ë¥Œ ìœê² ì°Ÿì ì ìêž° ë묞ìŽì£ . ê·žë¬ë ê°í¹ ì¬ë¬ ìë¬ ìí©ìì ì¢ ë ì¶ì ì ë°ëŒê°ìŒë§ íë ìë¬ë ììµëë€. ì륌 ë€ìŽ, ì€ì ìë¬ê° getUserName
ìì ë°ìí ê²ìŽ ìëëŒ, fetchUserData
ê° getUserName
ì ížì¶íì§ ìììŒ íëë° ížì¶í 겜ì°ìŒ ìë ììµëë€. ìŽ ê²œì° ì°ëŠ¬ê° ìœëìì ìì íŽìŒ í ë¶ë¶ì ë§ì§ë§ ì¶ì ìž getUserName
ìŽ ìë fetchUserData
ì
ëë€.
ìë¬ë¥Œ íŽê²°íŽ ëŽ ìë€
ìŽì ì°ëŠ¬ë ìŽë€ ì íì ìë¬ê° ìŽëìì ë°ìíëì§ë¥Œ ìê² ëììµëë€. ìŽì ìŽ ìë¬ë¥Œ íŽê²°íŽ ëŽ ìë€. ìë¬ë¥Œ íŽê²°íêž° ìíŽìë ìì±í ìœëì ë ŒëŠ¬ë¥Œ ìì°šì ìŒë¡ ë°ëŒê°ë©Žì, ì°ëŠ¬ê° ìê°íë ë ŒëŠ¬ëë¡ íë¡ê·žëšì ëììŽ ìŒì¹íëì§ ë¶ìíŽìŒ í©ëë€. ìŽ ê³Œì ì âëë²ê¹ âìŽëŒê³ í©ëë€. ìŽ ëë²ê¹ ì ë€ìí ë구륌 ìŽì©íë©Ž ëì± íšê³Œì ì ëë€.
ëžëŒì°ì ê°ë°ì ë구(DevTools)륌 íì©í ëë²ê¹
íë¡ ížìë ê°ë°ìì ê°ì¥ ê°ë ¥í ëë²ê¹ ë구ë âëžëŒì°ì ê°ë°ì ë구(DevTools)âì ëë€. Chrome, Firefox, Edge ë±ì ëžëŒì°ì ìì ì ê³µíë ê°ë°ì ë구륌 íì©íë©Ž, ë³Žë€ íšê³Œì ìŒë¡ ìë¬ë¥Œ ë¶ìí ì ììµëë€.
1. ìœì(Console) íì©
console.log()
, console.warn()
, console.error()
륌 ì¬ì©íì¬ ì€í ì€ìž ìœëì ìí륌 íìží ì ììµëë€.
2. ë€ížìí¬ íšë(Network Tab) íì©
- API ìì²ìŽ ì ìì ìŒë¡ ìŽë£šìŽì§ëì§ íìž
- ìì²/ìëµ ë°ìŽí° ë° HTTP ìí ìœë íìž
- CORS ì ì± ìë° ì¬ë¶ íì
3. ìì ê²ì¬(Elements Tab)
- í¹ì HTML ììì 구조 íìž
- ì ì©ë CSS ê·ì¹ íìž ë° ì€ìê° ìì
4. ìì€ íšë(Sources Tab)ìì ëžë ìŽí¬í¬ìžíž ì€ì
- í¹ì ìœë ëŒìžìì ì€íì ë©ì¶ê³ ë³ì«ê°ì íìží ì ìì
- Call Stackì íµíŽ íšì ížì¶ ìì íìž ê°ë¥
5. ëžëŒì°ì ëë²ê±° íì©
- ìì€ì í¹ì ìì¹ìì ëììŽ ë©ì¶ê² breakpoint륌 ì¬ì©í ì ìì
- ëë¶ë¶ ì볞ì ìì€ê° ìë ë²ë€ìŽ ë ìì€ìŽë¯ë¡ í¬ê² ëììŽ ëì§ ìì ì ì¬ì©ëì§ ìì
VSCode ëë²ê±° íì©íêž°
ë€ììŒë¡ Visual Studio Code(VSCode)ì ëë²ê¹ êž°ë¥ì íì©íë©Ž, íë¡ ížìë ê°ë°ìì ë°ìíë 묞ì 륌 ëì± íšê³Œì ìŒë¡ íŽê²°í ì ììµëë€.
- Live Server: ê°ë° ì€ìž ì¹ ì í늬ìŒìŽì ì ì€ìê°ìŒë¡ íìž ê°ë¥
- ëžë ìŽí¬í¬ìžíž ì€ì : í¹ì ìœë ì€íì ì€ì§íê³ ìí륌 íìž
- Call Stack ë¶ì: íšì ì€í íëŠì ì¶ì íì¬ ë¬žì ë°ì ììž íì
- Watch ë³ì: í¹ì ë³ìì ê°ìŽ ìŽë»ê² ë³ê²œëëì§ ì€ìê°ìŒë¡ 몚ëí°ë§
ë§ì¹šëŽ ìë¬ë¥Œ íŽê²°íìµëë€
ìŽë ê² ëë²ê¹ ì íµíŽ ë ŒëŠ¬ì ì€íšê° íìžëìë€ë©Ž, ìœë륌 ìì íì¬ ìë¬ë¥Œ íŽê²°í ì ììµëë€. ê·žë ë€ë©Ž ìë¬ë¥Œ íŽê²°íê³ ëë©Ž ëìŒê¹ì? ìŽì ìë¬ë¥Œ íŽê²°íë ë°ì ê·žì¹ì§ ìê³ , ê°ì ìë¬ê° ì¬ë°íì§ ìëë¡ ìë°©íŽìŒ í©ëë€. ìë¬ë¥Œ ìì í íìë ìì í ìœëê° ìëí ëë¡ ìëíëì§ íìžíë 곌ì ìŽ íìì ìžë°ì. ëšìí ìë¬ ë©ìì§ê° ì¬ëŒì¡ë€ê³ íŽì, 묞ì ê° ìì í íŽê²°ëìë€ê³ íëšíŽìë ì ë©ëë€.
1. í ì€íž ìœë ìì±
ìì ë ìœëì êŽë šë êž°ë¥ìŽ ì ëë¡ ìëíëì§ íìžíêž° ìíŽ í ì€íž ìœë륌 ìì±íê³ ìííŽìŒ í©ëë€. ìì í ë¶ë¶ë§ìŽ ìëëŒ íê· í ì€ížë¥Œ íµíŽ ìì í ë¶ë¶ìŽ êž°ì¡Ž êž°ë¥ì ë¶ì ì ìž ìí¥ì 믞ì¹ì§ ììëì§ íìží©ëë€. íê· í ì€ížë ìë¬ ìì í ì 첎 ì í늬ìŒìŽì ì ìì ì±ì í볎íë ë° ì€ìí ìí ì í©ëë€.
2. ìë¬ ë¡ê·ž êž°ë¡ ë° ë¬žìí
ìë¬ë ê²°êµ ê°ë°ìê° ë°ììíš ê²ìŽêž° ë묞ì, ê°ì ìë¬ê° ë°ë³µë ì ììµëë€. ë°ëŒì ê°ì ìë¬ ë°ì ì íšê³Œì ìž íŽê²°ì ìíŽ ë°ìí ìë¬ì íŽê²° 곌ì ì êž°ë¡íŽìŒ í©ëë€. ì ì¬í ìë¬ê° ì¬ë°ìí ë 묞ì 륌 ë¹ ë¥Žê² íŽê²°í ì ìëë¡ ëìì€ëë€.
- ìë¬ ë¡ê·ž ìì±íêž°: ìŽë€ ìë¬ê° ë°ìíëì§, ìŽë€ ìí©ìì ë°ìíëì§, ê·žëŠ¬ê³ ìŽë»ê² íŽê²°íëì§ë¥Œ êž°ë¡í©ëë€. ìŽë¥Œ íµíŽ 묞ì íŽê²° 곌ì ì 첎ê³ì ìŒë¡ êŽëŠ¬í ì ììµëë€.
- ì§ì ê³µì ì í ëŽ ë¬žìííêž°: íŒìì íŽê²°í 묞ì ëŒë íìë€ê³Œ ê³µì íì¬ ê°ì 묞ì ê° ë€ì ë°ìí ë ë¹ ë¥Žê² ëìí ì ìëë¡ í©ëë€. ìí€, ëŽë¶ ëžë¡ê·ž, ëë ê³µì 묞ì륌 íì©íŽ êž°ë¡íë ê²ìŽ ì¢ìµëë€.

ìë¬, ë묎 ëë €ìíì§ ë§ìžì
íë¡ê·žëë°ìì ìë¬ë íŒí ì ìë ìììŽë©°, ìŽë¥Œ íµíŽ ë°°ì°ê³ ì±ì¥í êž°íë¡ ìŒë ê²ìŽ ì€ìí©ëë€. ìë¬ê° ë°ìíì ë ìë¬ ë©ìì§ì ì€í ížë ìŽì€ë¥Œ ë¶ìíë©Ž, ë¯žì² ëì¹ ë¶ë¶ìŽë ê°ì í ì ìë ì ì ì°Ÿë 곌ì ìì 묞ì íŽê²° ë¥ë ¥ìŽ í¥ìë©ëë€. ëë¡ ìë¬ê° ì¢ì ê°ì ì€ ìë ìì§ë§, 겜íìŽ ììŽë©Žì ìŽë¬í 묞ì ê° ê³§ ê°ë° ì€ë ¥ í¥ìì ë°íìŽ ë©ëë€. ì¬ë¬ë¶ìŽ ìë íë¥í ê°ë°ìë€ë ë¹ì·í ìŽë €ìì 겪ìê³ ì.
ê·žëŠ¬ê³ ê°ë° 곌ì ìì ë°ìíë ìë¬ë ëšìí 묞ì ìí©ìŽ ìëëŒ, ë ëì ìœë륌 ë§ë€êž° ìí ì€ìí ì ížì ëë€. ìë¬ ë©ìì§ë¥Œ íµíŽ 묞ì ì ììžì íì íê³ , ì€í ížë ìŽì€ë¥Œ íì©íŽ ëë²ê¹ ì ì§ííë©°, ì² ì í í ì€ížë¥Œ íµíŽ 묞ì 륌 íŽê²°í ì ììµëë€.
ëí ìë¬ ë¡ê·žë¥Œ êž°ë¡íê³ í ëŽìì ì§ìì ê³µì íšìŒë¡ìš, ë¹ì·í 묞ì ì ë¹ ë¥Žê² ëìí ì ìë 첎ê³ë¥Œ ë§ë šíŽ íì ì±ì¥ë ìŽëìŽ ëŒ ì ìì£ . ìë¬ë ê°ë°ìë¡ì ì±ì¥íë 곌ì ì ìŒë¶ìŽë©°, ìŽë¥Œ íšê³Œì ìŒë¡ êŽëŠ¬íë ë¥ë ¥ì íë¥í ê°ë°ìê° ëêž° ìí íì ìëì ëë€. ê·žë¬ë ìë¬ë¥Œ ëë €ìíì§ ë§ê³ , ì€íë € ê°ì 곌 íìµì êž°íë¡ ìŒì 볎멎 ìŽëšê¹ì?
©ïžììŠITì 몚ë ìœí ìž ë ì ìê¶ë²ì 볎ížë¥Œ ë°ë ë°, ë¬Žëš ì ì¬ì ë³µì¬, ë°°í¬ ë±ì êží©ëë€.