๊ฐœ๋ฐœ๊ตฌ๋ฆฌ๐Ÿธ

๋…ธ๋“œ ํ•™์Šต 5์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ์ด๋ฒˆ์—” ๋…ธ๋“œ ๋‚ด์žฅ ๋ชจ๋“ˆ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ณ  ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ง€๋‚œ ๋ฒˆ์—๋Š” ๋‚ด์žฅ ๊ฐ์ฒด์— ๋Œ€ํ•ด ์•Œ์•„๋ดค์Šต๋‹ˆ๋‹ค. ๋ช…์นญ์ด ๋น„์Šทํ•ด์„œ ํ–ˆ๊ฐˆ๋ฆฌ๋„ค์š”. ๊ธ€์— ์•ž์„œ ๋‚ด์žฅ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์ •๋ณด๋Š” nodeJS ๊ณต์‹ ๋ฌธ์„œ์—์„œ๋„ ์ž์„ธํžˆ ๋‚˜์™€ ์žˆ์Šต๋‹ˆ๋‹ค https://nodejs.org/docs/latest/api/ ๋ชฉ์ฐจ os path url dns cryp...

๋…ธ๋“œ ํ•™์Šต 4์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ ! ๋…ธ๋“œ์—์„œ ๊ธฐ๋ณธ ์ œ๊ณตํ•˜๋Š” ๋‚ด์žฅ ๊ฐ์ฒด์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. global ๊ฐ€์žฅ ๋จผ์ € ์•Œ์•„๋ณผ ๋‚ด์žฅ ๊ฐ์ฒด๋Š” global ์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์˜ window ์—ญํ• ์„ ํ•ด์ฃผ๋Š” ๋…ธ๋“œ์˜ ๊ธฐ๋ณธ ์ „์—ญ ๊ฐ์ฒด ์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” window ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋…ธ๋“œ์—์„œ๋Š” global ์„ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ํ˜ผ์„ ์ด ์ƒ๊ธธ ์ˆ˜ ์žˆ์–ด globalThis ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์‚ฌ์šฉ...

๊ฐœ๋ฐœ์ž๋„๊ตฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„ํ™œ์„ฑํ™” ํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ! ๊ฐ€๋”์”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋น„ํ™œ์„ฑํ™” ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ €๋Š” ์—†์Šต๋‹ˆ๋‹ค. ๋น„ํ™œ์„ฑํ™”ํ•˜๋ฉด ์šฐํด๋ฆญ์ด๋‚˜ ๋ณต์‚ฌ๊ฐ€ ๊ธˆ์ง€๋œ ํŽ˜์ด์ง€์—์„œ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์–ด์ฐŒ๋˜์—ˆ๋˜ ํฌ๋กฌ์˜ ๊ฐœ๋ฐœ์ž๋„๊ตฌ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋น„ํ™œ์„ฑํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํฌ๋กฌ ๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ์—ด๊ณ  ์˜ต์…˜์„ ์—ฝ๋‹ˆ๋‹ค. ํ™˜๊ฒฝ์„ค์ • > ๋””๋ฒ„๊ฑฐ ...

SSR๊ณผ CSR

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ SSR๊ณผ CSR์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด์™€ ํ•จ๊ป˜ ๋งŽ์ด ์–ธ๊ธ‰๋˜๋Š” SPA, MPA ์— ๋Œ€ํ•ด์„œ๋„ ๊ฐ„๋žตํ•˜๊ฒŒ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Server Side Rendering(SSR) Server Side Rendering์€ Client Side Rendering ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ์ดˆ๊ธฐ ์ ‘๊ทผ ๋ถ€ํ„ฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค„ HTML ์ฝ”๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋•...

Next.js ๊ณต๋ถ€ํ•˜๊ธฐ 4์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ! ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด {์ด๋ฆ„:๊น€์‚ผ์ˆœ} ์ด๋ผ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์„ ๋•Œ ์ด ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…, ํ˜•์‹, ์ธ์ฝ”๋”ฉ, ๊ธธ์ด ๋“ฑ์˜ ์ •๋ณด๋ฅผ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ผ ํ•ฉ๋‹ˆ๋‹ค. Next.js๋ฅผ ํ†ตํ•ด ๋งŒ๋“œ๋Š” ์›น ์•ฑ์˜ ๊ฒฝ์šฐ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋Š” ์‚ฌ์ดํŠธ์˜ ํƒ€์ดํ‹€, ์„ค๋ช… ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ์˜ ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ...

Next.js ๊ณต๋ถ€ํ•˜๊ธฐ 4์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ! ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด {์ด๋ฆ„:๊น€์‚ผ์ˆœ} ์ด๋ผ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์„ ๋•Œ ์ด ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…, ํ˜•์‹, ์ธ์ฝ”๋”ฉ, ๊ธธ์ด ๋“ฑ์˜ ์ •๋ณด๋ฅผ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ผ ํ•ฉ๋‹ˆ๋‹ค. Next.js๋ฅผ ํ†ตํ•ด ๋งŒ๋“œ๋Š” ์›น ์•ฑ์˜ ๊ฒฝ์šฐ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋Š” ์‚ฌ์ดํŠธ์˜ ํƒ€์ดํ‹€, ์„ค๋ช… ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ์˜ ํŠน์ง•์œผ๋กœ ๋ ˆ์ด์•„์›ƒ, ํŽ˜์ด์ง€...

Next.js ๊ณต๋ถ€ํ•˜๊ธฐ 3์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ! Next.js 3์ผ์ฐจ ์ž…๋‹ˆ๋‹ค. ์ง€๋‚œ์ฃผ๋ถ€ํ„ฐ ์•ผ๊ทผ์ด ์žฆ์•„์„œ ๊ณต๋ถ€๋ฅผ ๋งŽ์ด ๋ชปํ–ˆ๋„ค์š” ๋‹ค์‹œ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค ์•„์ž! ํŠน๋ณ„ํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง€๋Š” ํŒŒ์ผ page layout not-found page URL์— ๋งคํ•‘๋˜์–ด ํ™”๋ฉด์— ๋ณด์—ฌ์งˆ ํŽ˜์ด์ง€ ํŒŒ์ผ์ž…๋‹ˆ๋‹ค. layout ํ™”๋ฉด์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๋Š” ํŒŒ์ผ์ž…๋‹ˆ๋‹ค. ์•ž์„œ Next.j...

Next.js ๊ณต๋ถ€ํ•˜๊ธฐ 2์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ ์˜ค๋Š˜์€ Next.js ์—์„œ ๋ผ์šฐํŒ…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด์˜ React ์—์„œ๋Š” react-router-dom ์ด๋ผ๋Š” ํŒจํ‚ค์ง€๋ฅผ ํ†ตํ•ด ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” url๊ณผ view๋ฅผ ์„œ๋กœ ๋งคํ•‘์‹œ์ผœ์ค˜์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ์Šต๋‹ˆ๋‹ค. Next.js ์—์„œ๋Š” ๋ณ„๋„์˜ ๋ผ์šฐํŒ…์„ ๊ตฌํ˜„ํ•  ํ•„์š” ์—†์ด ํŒŒ์ผ๊ตฌ์กฐ ํ˜•์‹์„ ๋”ฐ๋ฅด๋Š” ๊ฒƒ์œผ๋กœ ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ์„ ๊ตฌ...

๋…ธ๋“œ ํ•™์Šต 3์ผ์ฐจ

ECMAScript ๋ชจ๋“ˆ vs CommonJS ECMA์—์„œ ์ •ํ•œ ํ‘œ์ค€ ๋ชจ๋“ˆ ์‚ฌ์šฉ๋ฒ•์ด๋ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. CommonJS ์™€ ๋ฌธ๋ฒ•์ ์œผ๋กœ๋„ ์ฐจ์ด๊ฐ€ ์žˆ์œผ๋ฉฐ ๊ทผ๋ž˜์—๋Š” ECMAScript ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ ๋ฌธ๋ฒ•์œผ๋กœ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐจ์ด์  CommonJS ECMAScript ...

ES2015+(ES6) ๋ฌธ๋ฒ•

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ ์ตœ๊ทผ Node.js๋ฅผ ๊ณต๋ถ€ ์ค‘ ์ธ๋ฐ์š”. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋’ท๋ฐ›์นจ์ด ๋˜์–ด์•ผ Node.js๋„ ํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์•Œ๊ณ  ์žˆ์—ˆ๋˜ ๊ฒƒ๋„ ์žˆ์ง€๋งŒ ๋ชจ๋ฅด๋Š” ๊ฒƒ๋“ค๋„ ์žˆ๊ณ , ์•Œ๊ณ ๋Š” ์žˆ์ง€๋งŒ ํ˜„์—…์—์„œ ์ž˜ ์จ๋ณธ์ ์ด ์—†์–ด ๊นŒ๋จน๊ณ  ์žˆ์—ˆ๋˜ ๊ฒƒ๋“ค์„ ๋‹ค์‹œ ์ƒ๊ธฐ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋„ค์š”. ES2015(ES6) ์ดํ›„๋กœ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ๋“ค์— ๋Œ€ํ•ด ๊ฐ„๋žตํ•˜๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐ€๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค....

์ธ๊ธฐ ํƒœ๊ทธ