profile
Junior FrontEnd Developer ๐Ÿ˜Ž
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (74)JavaScript(29)๋ฐ๋ธŒ์ฝ”์Šค(13)programmers(12)KDT(12)ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค(12)ํ”„๋ก ํŠธ์—”๋“œ๊ฐœ๋ฐœ์ž(11)webpack(10)ํšŒ๊ณ (7)๊ทธ๋ ™(6)๋ถ€ํŠธ์บ ํ”„(5)ํšŒ๊ณ ์ผ๊ธฐ(5)vanilla(5)jquery(5)typescript(5)component(5)React(5)vue.js(4)๊ฐœ๋ฐœ์ž์„ฑ์žฅ์ผ๊ธฐ(4)๋ฐ”๋‹๋ผ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(4)ํ† ์ดํ”„๋กœ์ ํŠธ(3)ํด๋ก ์ฝ”๋”ฉ(2)๋ธŒ๋ผ์šฐ์ €(2)ํ”„๋ก ํŠธ์—”๋“œ(2)programming(2)CSS(2)๊ฐœ๋ฐœ์ž๋ฉด์ ‘(1)ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค(1)ํ›„๊ธฐ(1)ํ”„๋ก ํŠธ์—”๋“œ๊ฐœ๋ฐœ์ฑ…์ถ”์ฒœ(1)๊ฐœ๋ฐœ๋…ํ›„๊ฐ(1)์ฝ”๋”ฉ ๋ถ€ํŠธ ์บ ํ”„(1)web(1)ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๊ตญ๋น„ ์ง€์› ํ›„๊ธฐ(1)ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค ํ›„๊ธฐ(1)์ฝ”๋”ฉ ๊ต์œก(1)K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹(1)ํ”„๋ก ํŠธ์—”๋“œ๊ฐœ๋ฐœ์ž๊ฐ€ํ•˜๋Š”์ผ(1)User Interface(1)DOM(1)babel(1)ํ”„๋ŸฐํŠธ์—”๋“œ์ฑ…์ถ”์ฒœ(1)html(1)๊ฐœ๋ฐœ์ž์ฑ…์ถ”์ฒœ(1)CSR(1)SSR(1)ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž(1)๋‚ด์ผ๋ฐฐ์›€์นด๋“œ(1)๋ฐ”๋‹๋ผํƒ€์ž…์Šคํฌ๋ฆฝํŠธ(1)
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #10 - Webpack ๊ธฐ๋ณธ ๊ฐœ๋… ์ •๋ฆฌ

Webpack์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๋“ค์„ ์•Œ์•„๋ณด์ž!

2022๋…„ 5์›” 5์ผ
ยท
4๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #9 - Webpack-dev-server๋ž€?

์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฆฌ๋กœ๋“œ๊ฐ€ ๋˜๋Š” ์›นํŒฉ์˜ ๊ฐœ๋ฐœ ์„œ๋ฒ„ํŒŒ์ผ์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ–ˆ์„ ๋•Œ ๋‹ค์‹œ ๋นŒ๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” watch๋ผ๋Š” ์˜ต์…˜์ด ์ ์šฉ๋˜์–ด ์žˆ์Œ๋ผ์ด๋ธŒ ๋ฆฌ๋กœ๋”ฉ ํ™˜๊ฒฝ ์ œ๊ณตโ†’ ์ˆ˜์ •์‚ฌํ•ญ ๋ฐ˜์˜๋  ๋•Œ๋งˆ๋‹ค ๋นŒ๋“œ + ๋ฆฌํ”„๋ ˆ์‹œ ์ž๋™ ์ ์šฉdev-server๋Š” dist ํด๋”์™€ ๊ด€๊ณ„์—†์ด ๋™์ž‘โ†’ ๋นŒ๋“œ ๊ฒฐ๊ณผ๋ฌผ์ด

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #8 - BrowserList๋ž€?

์ง€์›ํ•˜๊ณ ์ž ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋“ค์— ๋Œ€ํ•œ ์„ค์ •package.json์— ์ •์˜browserslist ๋ฌธ์„œ์—์„œ ๊ถŒ์žฅํ•˜๋Š” ๋ฐฉ์‹.browserslistrc ํŒŒ์ผ์— ์ •์˜๋ธŒ๋ผ์šฐ์ € ์ง€์› ๋ฒ”์œ„์— ๋Œ€ํ•œ ๊ฐ’์„ ์ž‘์„ฑbrowserslist์™€ ๊ด€๋ จ๋œ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ํ•ด๋‹น ํŒŒ์ผ์„ ์ฐธ์กฐํ•˜์—ฌ ์ž‘์„ฑ๋œ ๋ธŒ๋ผ์šฐ์ € ๋ฒ”

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #7 - Minification๋ž€?

๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ์ „์†ก๋˜๋Š” ๋ฆฌ์†Œ์Šค๋“ค์˜ ์–‘์ด ์ปค์ง€๋ฉด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ์ปจํ…์ธ ๋“ค์˜ ๋„์ฐฉ์‹œ๊ฐ„์ด ๊ธธ์–ด์งโ†’ ์ตœ์ข…์ ์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ๋ฆฌ์†Œ์Šค๋“ค์˜ ํ˜•ํƒœ๋Š” ๋ถˆํ•„์š”ํ•œ ์š”์†Œ๋“ค์„ ์ œ๊ฑฐํ•ด์ค€ ์ตœ์ ํ™”๋œ ์ƒํƒœ๊ฐ€ ๋˜์–ด ์žˆ์–ด์•ผ ํ•จ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋™์ž‘ํ•˜๋Š” ๊ณผ์ •์— ๊ด€์—ฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋“ค ์ œ๊ฑฐ โ†’ ์šฉ

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #6 - Loader๋ž€?

๋ชจ๋“ˆ์„ ์ž…๋ ฅ๋ฐ›์•„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ณผ์ •๊ณผ ๊ด€๋ จ๋œ ์†์„ฑ์›นํŒฉ์ด ์˜์กด์„ฑ ๊ทธ๋ž˜ํ”„๋ฅผ ์™„์„ฑ์‹œํ‚ค๋Š” ๊ณผ์ •์—์„œ ์˜์กด ๊ด€๊ณ„๋ฅผ ๊ฐ–๋Š” ๋‹ค์–‘ํ•œ ํƒ€์ž…์˜ ๋ชจ๋“ˆ๋“ค์„ ์ž…๋ ฅ๋ฐ›๊ณ  ์ฒ˜๋ฆฌํ•˜๋Š” ์—ญํ• ๋ชจ๋“ˆ์„ ํ•ด์„ํ•  ๋•Œ jsํŒŒ์ผ์ด๋‚˜ jsonํŒŒ์ผ์„ ๊ธฐ๋ณธ ๋ชจ๋“ˆ๋กœ ๋ด„๋งŒ์•ฝ ๋‹ค๋ฅธ ํŒŒ์ผ์„ ๋ชจ๋“ˆ๋กœ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ, load

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #5 - Plugin์ด๋ž€?

์›นํŒฉ์˜ ๊ธฐ๋ณธ์ ์ธ ๋™์ž‘์— ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ์†์„ฑWebpack์ด ๋™์ž‘ํ•˜๋Š” ์ „์ฒด์ ์ธ ๊ณผ์ •์— ๊ฐœ์ž… ๊ฐ€๋Šฅ, ๋ฒˆ๋“ค๋ง์˜ ์ „์ฒด์ ์ธ ๊ณผ์ •์— ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ผ๋“ค์„ ํ•  ์ˆ˜ ์žˆ์Œbundle ํŒŒ์ผ์˜ ๋ณ€ํ™”๋ฅผ ์คŒ๊ฐœ๋ฐœ ๋ชจ๋“œ์—์„œ ๊ฐœ๋ฐœ ํŽธ์˜์„ฑ์„ ์ œ๊ณตproduction ๋ชจ๋“œ์—์„œ ์ฝ”๋“œ์˜ ์ตœ์ ํ™”๋ฅผ ์ œ๊ณต์›น

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #4 - Chunk/ Hash๋ž€?

ํ•˜๋‚˜์˜ ๋ฒˆ๋“ค ํŒŒ์ผ์„ ํšจ๊ณผ์ ์œผ๋กœ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ๊ฐ€์ง€์˜ ํŒŒ์ผ๋กœ ๋‹ค์‹œ ๋‚˜๋ˆ„๋Š” ๊ฒƒ๋ฒˆ๋“ค๋ง์„ ํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ, ์ƒ์„ฑ๋˜๋Š” ๋ฒˆ๋“คํŒŒ์ผ์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ ์  ๋Š˜์–ด๋‚จ์žฅ์  : ํŒŒ์ผ์˜ ์š”์ฒญ์ˆ˜ ์ค„์–ด๋“ฌ๋‹จ์  : ํŒŒ์ผ ํฌ๊ธฐ๊ฐ€ ์ปค์ ธ ์ƒ๋Œ€์ ์œผ๋กœ ํŒŒ์ผ์ด ๋„์ฐฉํ•˜๋Š” ์‹œ๊ฐ„์ด ์ง€์—ฐ๋จ โ†’ Chunk!runtime ch

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #3 - Caching์ด๋ž€?

์‚ฌ์šฉ์ž๊ฐ€ ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ๋‹ค๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ์ตœ์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋“ค์˜ ๋ณต์‚ฌ๋ณธ์„œ๋ฒ„์— ์š”์ฒญํ•˜๋Š” ํšŸ์ˆ˜ ๊ฐ์†Œโ†’ ๋ฆฌ์†Œ์Šค์˜ ๋‚ด์šฉ์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๊ฐ™์€ ๋‚ด์šฉ์„ ์„œ๋ฒ„์— ์š”์ฒญํ•  ํ•„์š” ์—†์Œโ†’ ๋ฆฌ์†Œ์Šค ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“ค์–ด ์„œ๋ฒ„๋ณด๋‹ค ๋” ๊ฐ€๊นŒ์šด ์œ„์น˜์— ๋‘๊ณ  ์ด ๋ณต

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #2 - Module/ Bundle์ด๋ž€?

ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋‚ด๋ถ€์˜ ์ฝ”๋“œ๊ฐ€ ๊ธฐ๋Šฅ๋ณ„๋กœ ๋‚˜๋‰˜์–ด์ ธ ์žˆ๋Š” ํ˜•ํƒœ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ์ฝ”์–ด ๋ชจ๋“ˆ (Built-in Core Module)ex. Node.js Module์˜ require('path')์ปค๋ฎค๋‹ˆํ‹ฐ ๊ธฐ๋ฐ˜์˜ ๋ชจ๋“ˆ (Community-based Module)ex. NPM \

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[Webpack ์•Œ์•„๋ณด๊ธฐ] #1 - Webpack์ด๋ž€?

์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ(Module Bundler)๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ: ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์„ฑํ•˜๋Š” ์ž์›(HTML, CSS, Javscript, Images ๋“ฑ)์„ ๋ชจ๋‘ ๊ฐ๊ฐ์˜ ๋ชจ๋“ˆ๋กœ ๋ณด๊ณ  ์ด๋ฅผ ์กฐํ•ฉํ•ด์„œ ๋ณ‘ํ•ฉ๋œ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“œ๋Š” ๋„๊ตฌ

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€