profile
Junior FrontEnd Developer ๐Ÿ˜Ž
post-thumbnail

10์ผ๊ฐ„์˜ ๋ฐ”๋‹๋ผ JS๋กœ Notion ํด๋ก  ์ฝ”๋”ฉ ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  ( + Vuex, EventBus ๋”ฐ๋ผํ•ด๋ณด๊ธฐ )

ํ•ด๋‹น ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์œผ๋กœ 08์›” 29์ผ TIL์˜ ๋‚ด์šฉ ์ค‘ ์ผ๋ถ€๋ฅผ ๊ฐ€์ ธ์™”๋‹ค.์ด ๋•Œ๋Š” ์ด ์ „์— ์ง„ํ–‰ํ–ˆ๋˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ์ •๋„์˜ ์ŠคํŽ™๋งŒ ์ƒ๊ฐ์„ ํ•˜๊ณ  CSS๋ฅผ ์‹ ๊ฒฝ ์“ฐ์ง€ ์•Š๊ณ  ๊ธฐ๋Šฅ ๊ตฌํ˜„์—๋งŒ ์ดˆ์ ์„ ๋‘๊ณ  ๊ตฌํ˜„์„ ์‹œ์ž‘ํ•˜์˜€๋‹ค!์‹ค์ œ๋กœ ๊ตฌํ˜„์„ ๋งŽ์ด ํ–ˆ๋‹ค๊ณ  ํ–ˆ์ง€๋งŒ.. API ์š”์ฒญ ๋ถ€๋ถ„ ๊ณผ ํŠธ

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

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค 9์›” 1์ฃผ์ฐจ ํšŒ๊ณ  ๐Ÿฅณ ( + notion ํด๋กœ๋‹ ํ”„๋กœ์ ํŠธ)

9์›”์ด ์‹œ์ž‘๋๋‹ค!! ํ”„๋กœ์ ํŠธ๋กœ ์‹œ๊ฐ„์ด ๋ฉœํŒ…๋˜์—ˆ๋‹ค... ๊ทธ๋ž˜๋„ ํšŒ๊ณ ๋Š” ์ ์–ด๋ณด์ž...๋ฌด๋ ค 6์‹œ๊ฐ„์ด๋‚˜ ๊ฑธ๋ฆฐ ํŒ€์›๋“ค์˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ..๐Ÿง์ด ๋‹ฌ์˜ ๋ฐฐ์›€ ๊ธฐ๋ก ์™• ์„ ์ •!!!!! ๐ŸฅณํŒ€์›๋“ค์—๊ฒŒ์„œ ๋ฐ›์€ ์‚ฌ๋ž‘์˜ ํŽธ์ง€ ๐Ÿฅฐnotion ํด๋ก  ํ”„๋กœ์ ํŠธ ์™„์„ฑ ๐Ÿ˜์ด๋ฒˆ์ฃผ๋Š” ํ˜ธ๊ธฐ๋กญ๊ฒŒ ๋ชจ๋“  ํŒ€์›๋“ค์˜

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

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค 4์ฃผ์ฐจ ํšŒ๊ณ  ๐Ÿ”ฅ ( + ๊ฐœ๋ฐœ์ž ๋ธ”๋กœ๊ทธ ๊ด€๋ฆฌ)

๋ฒŒ์จ ์•ฝ ํ•œ๋‹ฌ์ด ์ง€๋‚ฌ๋‹ค.. ์‹œ๊ฐ„ ์™œ์ด๋ฆฌ ๋นจ๋ผ..ใ… \_ใ…  ์ด๋ฒˆ์ฃผ์—๋„ ๋‹ค์–‘ํ•œ ์ผ๋“ค์ด ๋งŽ์•˜๋Š”๋ฐ ๊ธฐ์–ต์— ๋‚จ๋Š” ์ผ๋“ค์„ ํ‚ค์›Œ๋“œ๋กœ ์š”์•ฝํ•˜์ž๋ฉด..์ด ์ •๋„..?ใ…Ž (์š”์•ฝ X, ์ด๋ฒˆ์ฃผ ์žˆ์—ˆ๋˜ ์ผ ๋‚˜์—ด O) ๊ณผ์ œ ๊ตฌํ˜„๋กœํ† ๋‹˜์˜ ์˜จ๋ผ์ธ ์„ธ์…˜๊ต์œก ๋งค๋‹ˆ์ €๋‹˜์˜ ์ง„์ง„๊ฑฐ๊ต์œก๋งค๋‹ˆ์ €๋‹˜๊ณผ์˜ ๋ฉด๋‹ด์•„๊ธฐ๋‹ค๋ฆฌ๊ณ ๊ธฐ

2021๋…„ 8์›” 27์ผ
ยท
15๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

์ƒ์„ฑ์ž ํ•จ์ˆ˜ vs ํด๋ž˜์Šค โš–๏ธ

# ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ž€? ๐Ÿง ## ์ •์˜ ๐Ÿ“‹ - ์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ๊ฐ์ฒด(์ธ์Šคํ„ด์Šค)๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜ ## ํŠน์ง• ๐Ÿ™Œ - ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋™์ผํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ •์˜ - `new` ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•ด์•ผ๋งŒ `์ƒ์„ฑ์ž ํ•จ์ˆ˜`๋กœ ๋™์ž‘ - `new` ์—ฐ์‚ฐ์ž ์—†์ด ํ˜ธ์ถœํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ,

2021๋…„ 8์›” 23์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

CSR ๋ Œ๋”๋ง, SSR ๋ Œ๋”๋ง ๊ณผ์ •์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž! โš–๏ธ

์˜ค๋Š˜ ๋ฐ๋ธŒ์ฝ”์Šค์—์„œ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง์— ๋Œ€ํ•œ ์ข‹์€ ์งˆ๋ฌธ ์ฃผ์ œ๊ฐ€ ๋‚˜์™”๋‹ค!์งˆ๋ฌธ์— ๋Œ€ํ•œ ๋ฐฐ๊ฒฝ์„ ๊ฑฐ์ณ ์œ„์™€ ๊ฐ™์€ ์งˆ๋ฌธ์ด ๋‚˜์™”๊ณ , ๊ฒฐ๊ณผ์ ์œผ๋กœ๋Š” "๋ Œ๋”๋ง"์ด๋ผ๋Š” ์šฉ์–ด๊ฐ€ ํฐ ํ˜ผ๋ž€์„ ์ฃผ์–ด ์ƒ๊ธด ์งˆ๋ฌธ์ด์—ˆ๋‹ค! ๋ Œ๋”๋ง์ด ์ž˜๋ชปํ–ˆ๋„ค..์งˆ๋ฌธ์— ๋Œ€ํ•œ ๊ถ๊ธˆ์ฆ์€ ํ•ด์†Œ๋˜์—ˆ์ง€๋งŒ, ํ•ด๋‹ต์„ ์–ป๋Š” ๊ณผ์ •์—์„œ ์‹ค

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

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค 3์ฃผ์ฐจ ํšŒ๊ณ  ๐Ÿฅ” ( feat. 2๊ด€์™•, ํŒŒํ”„๋ฆฌ์นดtv ๋ฐ๋ท”)

๋ˆˆ ๊ฐ์•˜๋‹ค ๋œจ๋‹ˆ ๋ฒŒ์จ 3์ฃผ์ฐจ๋‹คโ€ฆ ์‹œ๊ฐ„์ด ์™œ์ด๋ฆฌ ๋ฐ”์˜๊ฒŒ ํ˜๋Ÿฌ๊ฐ€๋Š”์ง€,,์ง€๋‚œ์ฃผ ์‹œ๊ฐ„์— ์ซ“๊ฒจ ๋†“์ณค๋˜ ์ธ๋™ ๊ฐ•์‚ฌ๋‹˜์˜ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฒ„์Šค๋Š” ๊ฒจ์šฐ ์ซ“์•„๊ฐ€์„œ ํƒ€์ž๋งˆ์ž ๋‚ด๋ ค์กŒ๋‹คโ€ฆ ์ด์ œ ์ดํ•ดํ–ˆ๋Š”๋ฐ ๋๋‚œ๊ฑฐ๋ƒ๊ณ ..์ด๋ฒˆ์ฃผ๋Š” ์Šฌํ”„๋ฉด์„œ๋„ ๋„ˆ๋ฌด ์›ƒ๊ธฐ๊ณ  ์žฌ๋ฐŒ๋Š” ์ผ์ด ๋งŽ์•˜๋Š”๋ฐ ๊ทธ ์ค‘์— ํ•˜๋‚˜๋กœ๋Š” ๋‚˜

2021๋…„ 8์›” 21์ผ
ยท
16๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค 2์ฃผ์ฐจ ํšŒ๊ณ  ๐Ÿงฆ ( + ๋„๋น„ ํƒˆ์ถœ๊ณผ ํ•จ์ˆ˜ํ˜•,,? )

2์ฃผ์ฐจ๋Š” ํŠนํžˆ๋‚˜ ํšŒ์‚ฌ์—์„œ ์ธ์ˆ˜์ธ๊ณ„๋กœ ๋งŽ์ด ํž˜๋“ค์—ˆ๊ณ ..(ใ…‚ใ„ทใ…‚ใ„ท) ํ•˜ํ•„ ๋ฐฐ์šฐ๋Š” ๊ฐœ๋…๋„ ๋‚œ์ด๋„๊ฐ€ ๊ทน!์•…!์ธ ๊ฐœ๋…(ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ)์„ ๋ฐฐ์›Œ์„œ ์ •๋ง ์ •๋ง ํž˜๋“ค์—ˆ์ง€๋งŒ.. ์ง€๊ธˆ์€ ์•„๋ฌด๊ฒƒ๋„ ์•ˆํ•ด๋„ ๊ธฐ๋ถ„์ด ์ข‹์•„์„œ ์ž…๊ผฌ๋ฆฌ๊ฐ€ ์”ฐ๋ฃฉ ์Œœ๋ฃฉโ€ฆโ€ฆ\*v\*๋‚ด ๋ง˜๋Œ€๋กœ ์ž‘์„ฑํ•˜๋Š” ํšŒ๊ณ ์ผ๊ธฐ! 1์ฃผ์ฐจ์—

2021๋…„ 8์›” 16์ผ
ยท
13๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

2์ฃผ์ฐจ๊ฐ€ ๋‹ค ๋˜์–ด์„œ ์ž‘์„ฑํ•˜๋Š” ๋ฐ๋ธŒ์ฝ”์Šค 1์ฃผ์ฐจ ํšŒ๊ณ  ๐Ÿคซ

๋น„๋ก ์ž‘์„ฑ์€ 2์ฃผ์ฐจ์— ํ–ˆ์ง€๋งŒ..ใ…Žใ…Ž ๋น„๋ฐ€์ธ๊ฑธ๋กœ ๐Ÿคซ (ํ•‘๊ณ„๋ฅผ ๋Œ€๋ณด์ž๋ฉด ์—…๋ฌด + ํ•™์Šต + ๊ณผ์ œ + ์Šคํ„ฐ๋”” ๋ณ‘ํ–‰..์ด๋ž„๊นŒ) "๋‚˜๋ฆ„.. ๋ธ”๋กœ๊ทธ๋„ ์ž˜ ์“ฐ๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋„ ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•ด์งœ๋‚˜! ์—…๋ฌด๋ž‘ ๋ณ‘ํ–‰ํ•ด๋„ ์ž˜ ํ•  ์ˆ˜ ์žˆ์„๊ฑฐ์•ผ!"๋ผ๋Š” ๊ทผ์ž๊ฐ์— ๋น ์ ธ์žˆ์—ˆ๋‹ค..ํด๋กœ์ €์™€ ์Šค์ฝ”ํ”„ ๊ด€๋ จ

2021๋…„ 8์›” 15์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

๋ธŒ๋ผ์šฐ์ €์˜ ๋™์ž‘์›๋ฆฌ โš™๏ธ

ํ†ต์‹  โžก๏ธ ๋ Œ๋”๋ง โžก๏ธ ์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰๋ธŒ๋ผ์šฐ์ €์˜ ๋™์ž‘ ๋‹จ๊ณ„๋Š” ํฌ๊ฒŒ 3๋‹จ๊ณ„๋กœ ๋‚˜๋‰˜์–ด์ง„๋‹ค.์„œ๋ฒ„์™€์˜ ํ†ต์‹ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋ƒ„์„œ๋ฒ„๋Š” ์š”์ฒญ์— ๋”ฐ๋ฅธ ํŠน์ •๊ฐ’์„ ์‘๋‹ตํ•œ๋ฒˆ์— ํ•˜๋‚˜์”ฉ || ๋™์‹œ์— ํ†ต์‹  ๊ฐ€๋Šฅ์›น ๋ Œ๋”๋ง ์—”์ง„ ์ฒ˜๋ฆฌ๊ณผ์ • ์ž์„ธํžˆ๋ณด๊ธฐDOM์ด๋ผ ๋ถˆ๋ฆฌ์šฐ๋Š” ๊ฐ์ฒด๋ฅผ ํ™”๋ฉด์— ๊ทธ๋ฆผDO

2021๋…„ 8์›” 14์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

์›น ๋ Œ๋”๋ง ์—”์ง„ ์ฒ˜๋ฆฌ๊ณผ์ •์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž ๐Ÿง

DOM ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด HTML์„ ํŒŒ์‹ฑHTML์€ ๊ตฌ์กฐํ™”๋œ ์ •๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— DOM(Document Object Model), ์ผ์ข…์˜ ํŠธ๋ฆฌ ๊ตฌ์กฐ ํ˜•ํƒœ๋กœ HTML ํƒœ๊ทธ๋“ค์„ ๋ฐ์ดํ„ฐ๋กœ ํ•ด์„ํ•ด์„œ ๋‹ค์‹œ ๊ฐ€์ง€๊ณ  ์žˆ๊ฒŒ ๋จํŒŒ์‹ฑ? ๋ฌธ์ž ๋‹จ์œ„๋กœ ํ•˜๋‚˜ํ•˜๋‚˜ ํ•ด์„์„ ํ•ด์„œ ํ•ด๋‹น ๋‚ด์šฉ์ด ๊ฐ€์ง„

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

๊ฐ€๋ณ๊ฒŒ ์•Œ์•„๋ณด๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ ๐Ÿ˜‰

ํŒ€ ๋ฒ„๋„ˆ์Šค๋ฆฌ๊ฐ€ ์ตœ์ดˆ์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ฐœ๋ฐœ๋„ท ์Šค์ผ€์ดํ”„๊ฐ€ ๋„ค๋น„๊ฒŒ์ดํ„ฐ๋ฅผ ์ถœ์‹œํ•˜๋ฉด์„œ ์ตœ์ดˆ์˜ ์ƒ์šฉ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋“ฑ์žฅ1995๋…„ ์ฆˆ์Œ, ๋„ค๋น„๊ฒŒ์ดํ„ฐ๋Š” ํฐ ์ธ๊ธฐ๋ฅผ ์–ป์–ด ๋น ๋ฅด๊ฒŒ ์‹œ์žฅ ์ ์œ ์œจ 90%๋ฅผ ์ฐจ์ง€์ด๋•Œ์˜ ์›น์€ HTML๋กœ๋งŒ ์ด๋ฃจ์–ด์ ธ ์ •์ ์ธ ๊ธฐ๋Šฅ๋งŒ ์ œ๊ณตํ•˜์—ฌ ๋งํฌ๋งŒ ์กด์žฌํ•˜๋Š” ์›Œ๋“œ ๋ฌธ์„œ์™€ ๋ณ„

2021๋…„ 8์›” 14์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

[๋ฐ๋ธŒ์ฝ”์Šค] ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค ํ”„๋ก ํŠธ์—”๋“œ ํ•ฉ๊ฒฉ ํ›„๊ธฐ ๐Ÿ”ฅ + ๋ฉด์ ‘ ๊ฟ€ํŒ!๐Ÿฏ

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

2021๋…„ 8์›” 2์ผ
ยท
16๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

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

ํ•˜์œ„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ๋“ค์„ ์ง€์›๋  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๋„๊ตฌbabel์ด ์‹คํ–‰๋  ๋•Œ ํ•„์š”ํ•œ ์ปดํŒŒ์ผ๋Ÿฌ (babel-cli)๊ฐ€ ํ•„์š”babel์ด ์‹คํ–‰๋  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ๋งŒ๋“ค์–ด์คŒjavascript ํŒŒ์ผ์„ ๋ณ€ํ™˜์‹œํ‚ค๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ธฐ๋Šฅ๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” ๋ชจ๋“ˆ๋ณ€ํ™˜์„ ์œ„ํ•ด ์‹ค

2021๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
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๊ฐœ์˜ ๋Œ“๊ธ€