profile
๊ธฐ๋กโœ๐Ÿป
post-thumbnail

Image preloading

์ตœ์ดˆ ์ง„์ž…์‹œ ๋ ˆ์ด์–ด ์ด๋ฏธ์ง€ ํŒ์—…์„ ๋ช‡์ดˆ๊ฐ„ ๋„์šฐ๋Š” ๊ธฐ๋Šฅ์„ ์ž‘์—…ํ•˜๋ฉด์„œ ์ด๋ฏธ์ง€๋ฅผ ๋‹ค์šด๋ฐ›๊ธฐ ์ „์—๋Š” ๋ ˆ์ด์–ด๋ฅผ ๋ณด์—ฌ์ฃผ์ง€ ์•Š๋„๋ก ์ฒ˜๋ฆฌ ํ–ˆ๋Š”๋ฐ ์ด๋กœ ์ธํ•ด ํŒ์—…์ด ๋Šฆ๊ฒŒ๋œจ๋ฉด์„œ ๊ธฐ์กดํ™”๋ฉด์ด ๋ณด์˜€๋‹ค๊ฐ€ ๋ ˆ์ด์–ด๊ฐ€ ๋„์›Œ์ง€๋Š” ์ƒํ™ฉ์ด ๋ฐœ์ƒํ–ˆ๋‹ค.

6์ผ ์ „
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

๊ฐœ๋ฐœ/์šด์˜ webpack SourceMap ์„ค์ •

๊ฐœ๋ฐœ/์šด์˜์šฉ webpack ์„ค์ •์„ ์–ด๋Š์ •๋„ ๋งˆ๋ฌด๋ฆฌ ํ•œ ๋’ค ๋งˆ์ง€๋ง‰ ๋‚จ์€ ์†Œ์Šค๋งต ์„ค์ •์„ ์ •๋ฆฌํ•˜๋ฉฐ ๊ธฐ๋กํ•œ๋‹ค.๋‚ด๊ฐ€ ๋งŒ๋“œ๋Š” ํ”„๋กœ์ ํŠธ์˜ ์›นํŒฉํ™˜๊ฒฝ์€ ํฌ๊ฒŒ ์„ธ๊ฐ€์ง€ ์ข…๋ฅ˜๋กœ ๋‚˜๋‰œ๋‹ค.webpack-dev-serve๋ฅผ ์ด์šฉํ•œ ๋กœ์ปฌ๊ฐœ๋ฐœ์šฉ ์„ค์ •๊ฐœ๋ฐœ์„œ๋ฒ„ ๋ฐฐํฌ์šฉ ์„ค์ •์šด์˜์„œ๋ฒ„ ๋ฐฐํฌ์šฉ ์„ค์ •(๋ฐฐํฌ์šฉ ์„ค

2022๋…„ 1์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

webpack devServer์—์„œ mock-service-worker ์‚ฌ์šฉํ•˜๊ธฐ

msw ๊ณต์‹๋ฌธ์„œ๊ฐ€ ์นœ์ ˆํ•ด์„œ ๊ทธ๋Œ€๋กœ ๋”ฐ๋ผํ•˜๋ฉด ๋œ๋‹ค.npm install msw --save-devํด๋”๋„ค์ด๋ฐ์€ ์ž์œ ๋กœ mocks ๋ผ๋Š” ํด๋”๋ฅผ ๋งŒ๋“ค์–ด์„œ handler.js๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ์„ฑํ–ˆ๋‹ค.npx msw init <PUBLIC_DIR> --save์œ„ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰

2022๋…„ 1์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

spring + react SPA router ๊ตฌ์„ฑ

ํšŒ์‚ฌ์—์„œ ๊ธฐ์กด jsp+vue+angular ์†Œ์Šค๋ฅผ ๊ฑท์–ด๋‚ด๊ณ , ์ ์ง„์ ์œผ๋กœ react ๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ–ˆ๋‹ค. ํ•œ ๋ฒˆ์— ๋ชจ๋“  ๊ฒƒ์„ ๊ฑท์–ด๋‚ผ ์ˆ˜ ์—†์—ˆ์œผ๋ฏ€๋กœ ๊ธฐ์กด mpa๋Š” ์œ ์ง€ํ•˜๊ณ , ์ƒˆ๋กœ ๋งŒ๋“œ๋Š”๊ฒƒ์€ spa๋กœ ์ž‘์—…ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” spa ์„œ๋ฒ„๋ฅผ ๋”ฐ๋กœ ๋„์šฐ๋ ค ํ–ˆ

2022๋…„ 1์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

Vue3 Composition API

์ปดํฌ์ง€์…˜ API์˜ ๋“ฑ์žฅ vue์—์„œ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์žˆ์ง€๋งŒ ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ์—ฌ๋Ÿฌ ์˜ต์…˜ ๋ธ”๋ก์— ํฉ์–ด์ ธ ์žˆ๋Š” ๋‹จ์ ์€ ํ•ด์†Œ ํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค์—ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ๊ด€๋ จ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ํ•จ๊ฒŒ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋Š” Composition API๊ฐ€ ๋“ฑ์žฅ

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

safari์—์„œ ๋’ค๋กœ๊ฐ€๊ธฐํ• ๋•Œ..? bfcache๋ฅผ ๋ณด์ž

์‚ฌํŒŒ๋ฆฌ์—์„œ ๋’ค๋กœ๊ฐ€๊ธฐ ํ–ˆ์„๋•Œ ์˜๋„ํ•˜์ง€ ์•Š์€ ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค๋ฉด bfcache๋ฅผ ๋จผ์ € ๋ณด์ž.bfcacheBack/forward cache๋Š” ๋ฐฉ๋ฌธ์ž๊ฐ€ ๋‹ค๋ฅธ ๊ณณ์œผ๋กœ ๋™ํ•˜๋Š” ์ˆœ๊ฐ„, ํŽ˜์ด์ง€์˜ ์ „์ฒด ์Šค๋ƒ…์ˆ(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํž™ ํฌํ•จ)์„ ์ €์žฅํ•ด์ฃผ๋Š” ๋ฉ”๋ชจ๋ฆฌ ๋‚ด๋ถ€์˜ ์บ์‹œ๋กœ ๋„คํŠธ์›Œํฌ๊ฐ€ ๋Š๋ฆฌ๊ฑฐ๋‚˜,

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

์›ํ•˜๋Š” ์œ„์น˜์— layer ๋ฐฐ์น˜ํ•˜๊ธฐ

ํด๋ฆญํ•œ ์˜์—ญ์˜ ๊ทผ์ฒ˜์— layer๋ฅผ ๋„์›Œ์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ๋ฐœ์ƒํ–ˆ๊ณ  ๊ธฐ์–ตํ•˜๊ธฐ์œ„ํ•ด ์ •๋ฆฌ ๐Ÿง ํŽ˜์ด์ง€ ๋‚ด์— container๊ฐ€ ์žˆ๊ณ  ๊ทธ์•ˆ์— item์ด ๋‚˜์—ด๋˜์–ด ์žˆ๋Š” ํ™”๋ฉด์—์„œ item์„ ํด๋ฆญํ•˜๋ฉด container์˜ ์ค‘์•™์— layer๊ฐ€ ๋œจ๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค. ํ•˜์ง€๋งŒ item์˜ ๊ฐœ์ˆ˜

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

scroll์ด ์žˆ๋Š”์ง€ ์ฒดํฌํ•˜๊ธฐ

์ƒ๊ฐ๋ณด๋‹ค ์ž˜ ๊นŒ๋จน์Œ ^\_\_\_^

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

React Native custom font ์ ์šฉ

์‚ฌ์šฉํ•  font๋ฅผ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ํด๋”๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ์„ฑํ•œ ํด๋”์— ๋งž๊ฒŒ ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ค€๋‹ค.์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•œ๋‹ค.์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ๋‚˜์˜จ๋‹ค๋ฉด ์„ฑ๊ณตiosํ”„๋กœ์ ํŠธ๋‚ด Info.plist ํŒŒ์ผ์„ ์—ด์–ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด font๊ฐ€ ์ ์šฉ๋˜์–ด ์žˆ๋‹ค.androidํ”„๋กœ

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

React Native ์•Œ์•„๋‘๋ฉด ์ข‹์€๊ฒƒ

์ž‘์—…ํ•˜๋ฉด์„œ ๊ธฐ์–ตํ• ๊ฒƒ๋“ค์„ ๊ณ„์† ์ •๋ฆฌํ•˜๋ ค ํ•œ๋‹ค. ๋””๋ฐ”์ด์Šค์—์„œ width, height ๋“ฑ์— ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ํ”ฝ์…€์ด ์žˆ๊ณ , ๊ฐ€์šฉํ•œ ์ง€ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ๋Š” API๋กœ ์ด๋ฅผ ์ด์šฉํ•ด ๋””๋ฐ”์ด์Šค๋ณ„๋กœ ์ ์ ˆํ•œ ์‚ฌ์ด์ฆˆ๋กœ ์Šคํƒ€์ผ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ex) Dimensions.get('window').w

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

Vue SFC ์‚ฌ์šฉํ•˜๊ธฐ (feat. Vue2)

์ง€๋‚œ๊ธ€์—์„œ ์ ์šฉํ•˜์ง€ ๋ชปํ–ˆ๋˜ SFC๋ฅผ ์ ์šฉํ•ด๋ดค๋‹ค.๊ทธ๋†ˆ์˜ ๋ฒ„์ „..๋ฒ„์ „..๋ฒ„์ „๋•Œ๋ฌธ์— ์‚ฝ์งˆ์„ ์ฒœ๋ฒˆํ•œ๊ฑฐ ๊ฐ™๋‹ค ๐Ÿคฌํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” vue๋ฒ„์ „์€ ~2.5.6๋กœ ์ ์šฉ๋˜์–ด์žˆ๊ณ ์‹ค์ œ๋กœ ์„ค์น˜๋œ ๋ฒ„์ „์€ 2.5.22์ด๋‹ค.package.json์˜ devDependencies์ •๋ณด๋Š” ์•„๋ž˜

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

Vue ์ ์šฉ๊ธฐ! ๊ทผ๋ฐ ์ด์ œ legacy๋ฅผ ๊ณ๋“ค์ธ..

์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋Š” MPA,SSR๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๊ณ ์ž‘์—…ํ•  ํŽ˜์ด์ง€์˜ ํ…œํ”Œ๋ฆฟ ์—”์ง„์€ jsp๋ฅผ js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” jquery๋ฅผ ์ด์šฉํ•˜๊ณ  ์žˆ๋‹ค.๋‹ค๋ฅธ ํŽ˜์ด์ง€์—์„œ ์ด๋ฏธ vue๋ฅผ ์ด์šฉํ•˜๊ณ  ์žˆ๋Š” ์ƒํƒœ๋ผ ๋ณ„๋„์˜ ํฐ ์„ค์ • ์ž‘์—…์ด ์—†๋‹ค.๋งˆํฌ์—…์„ jsp, js ๋‘๊ณณ์—์„œ ์ œ์–ด๋ฅผ ํ•˜๊ณ  ์žˆ์–ด

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

babel polyfill ์„ค์ •

babel 6 ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋˜ js ๋ชจ๋“ˆ์˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.babel-polyfill์„ ํŒŒ์ผ๋งˆ๋‹ค import ํ•ด์ฃผ๊ณ ์žˆ๋Š”๋ฐbabel7๋กœ ๋ณ€๊ฒฝํ•˜๊ฒŒ๋œ ์ด์ƒ ์ด๋ ‡๊ฒŒ ์“ฐ๊ณ  ์‹ถ์ง€ ์•Š๋‹ค ๐Ÿ˜กbabel7์˜ polyfill ํŒจํ‚ค์ง€๋Š” @babel/polyfill์ด๊ณ  ์•„๋ž˜์™€ ๊ฐ™์ด

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

Vue computed vs methods

data์— ์žˆ๋Š” ๊ฐ’์„ ๊ฐ€๊ณตํ•ด์„œ ๊ฐ’์„ ๋„์ถœํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ methods์™€ computed ๋ชจ๋‘ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๋‹ค.๊ฒฐ๊ณผ์ ์œผ๋กœ ๋ณด์•˜์„๋•Œ ์ฐจ์ด๊ฐ€ ์—†์–ด๋ณด์ด์ง€๋งŒ, ์„ฑ๋Šฅ์ƒ์˜ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. ๐Ÿงcomputed ๊ฐ’์€ ์บ์‹ฑ์ด ๋œ๋‹ค.์—ฌ๋Ÿฌ๋ฒˆ ํ˜ธ์ถœ ๋˜๋”๋ผ๋„ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ํ•จ์ˆ˜๋Š” ๋”ฑ ํ•œ๋ฒˆ

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

spread operator webpack babel-loader ์„ค์ • ํ•˜๊ธฐ

spread ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉ ํ–ˆ๋”๋‹ˆ ๋นŒ๋“œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. webpack์˜ babel ์„ค์ •์€ ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ • ๋˜์–ด์žˆ์—ˆ๋‹ค. ![](https://images.velog.io/images/ziyoonee/post/c3531883-37ff-449e-8713-d35bf

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

Vue code splitting with dynamic import

code splitting์„ ์œ„ํ•ด dynamic import๋ฅผ router์— ์ ์šฉํ•ด์ค€๋‹ค.ํ™•์‹คํžˆ ์‹ฌํ”Œํ•˜๋‹ค.์ฐธ๊ณ https://vuejs.org/v2/guide/components-dynamic-async.html#ad

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

Build Tool์— ๋Œ€ํ•ด

FE์˜ build tool์€ ๋งค์šฐ ๋‹ค์–‘ํ•˜๋‹ค. webpack ๋ฐ–์— ๋ชจ๋ฅด๋˜ ๋‚˜.. ๋ฐ˜์„ฑํ•ด๐Ÿฅต์‚ฌ์‹ค ์ด๊ฐ™์€ ์ฐจ์ด๋ผ๋ฉด,, ๋ชจ๋‘๊ฐ€ ์“ธ๋•Œ ์ฏค ๊ด€์‹ฌ์„ ๊ฐ€์กŒ๋˜ ๋‚˜๋กœ์„œ๋Š”.. ์–ด์ฉŒ๋ฉด build tool = webpack์ด ๋‹น์—ฐํ–ˆ๋‹ค. ใ…œํ”„๋กœ์ ํŠธ๋ฅผ ๋ถ„์„์ค‘..

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

React swipe effect (feat. react-swipeable-list)

๋ฆฌ์ŠคํŠธ์—์„œ ์•„์ดํ…œ์„ swipe ํ•˜๋ฉด ์•„์ดํ…œ์ด ์‚ญ์ œ๋˜๋Š” ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค.์ฒ˜์Œ์—๋Š” swipe์ด๋ฒคํŠธ๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋ ค ํ–ˆ์œผ๋‚˜ ๋ง˜์— ๋“œ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์•„๋ฒ„๋ ธ๋‹ค ๐Ÿ˜œ๊นƒํ—™ ๋ฐ๋ชจ๋ฅผ ๋ณด๊ณ  ์•„๋ž˜์™€ ๊ฐ™์ด ์†Œ์Šค๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค.import component & css edit JSX ์—ฌ๊ธฐ

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

safari width:100% not working

๋‹ฌ๋ ฅ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ๋ฐฐํฌ ํ–ˆ๋Š”๋ฐ ์•ฑ์—์„œ ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ๊ฒฌ๋˜์—ˆ๋‹ค.์›๋ž˜๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์™€์•ผ ์ •์ƒ์ธ๋ฐ safari์—์„œ๋Š” ๋‹ฌ๋ ฅ์— ์ ์šฉ๋œ width: 100%๊ฐ€ ์˜๋„ํ•œ๋Œ€๋กœ ์ ์šฉ์ด ์•ˆ๋œ ๊ฒƒ์ด๋‹ค.width์˜ ์†์„ฑ์ค‘ ์—ฌ๋Ÿฌ๊ฐ€์ง€๋ฅผ ์ ์šฉํ•ด๋ณด๋‹ค๊ฐ€ width: -webkit-fill-availa

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

react-day-picker custom ํ•ด๋ณด๊ธฐ

์ปค์Šคํ…€ํ•˜๊ธฐ ์ „์˜ ํ˜•ํƒœ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.day-picker๋ฅผ ์ปค์Šคํ…€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๊ธฐ์กด์—๋Š” modifiers,modifiersStyles ๊ฐ์ฒด๋ฅผ prop๋กœ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๋ฐฉ์‹์„ ์ด์šฉํ–ˆ๋‹ค. day-picker์˜ ํฌ๊ธฐ๋ฅผ ๋Š˜๋ฆฌ๋ฉด์„œ, ์•„๋ž˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผhove๋‚˜ select ๋˜์—ˆ์„๋•Œ ์ˆซ์ž์นธ

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