profile
์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ์„ฑ์žฅ๊ธฐ๐Ÿ˜Ž
post-thumbnail

Webpack ๊ธฐ์ดˆ ๊ฐ„๋‹จ ์ •๋ฆฌโœจ - ์‘์šฉํŽธ

์ด๋ฒˆ์—๋Š” ์ง€๋‚œ ๋ฒˆ์— ์ž‘์„ฑํ•œ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ๋ฆฌ์•กํŠธ ๊ธฐ๋ฐ˜์˜ ์ฝ”๋“œ๋กœ ๋ฐ”๊ฟ”๋ณผ ์˜ˆ์ •์ด๋‹ค!๐Ÿ˜™ ๊ทธ๋Ÿผ ๋ฐ”๋กœ ์‹œ์ž‘ํ•ด๋ณด์ž๐Ÿ”ฅ

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

Intersection Observer API๋ฅผ ์ด์šฉํ•œ infinite scroll ๋งŒ๋“ค๊ธฐ!

Intersection Observer API๋ฅผ ์ด์šฉํ•œ Inifinite scroll ๊ตฌํ˜„์ž…๋‹ˆ๋‹ค.

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

AWS S3 presignedURL์„ ์ด์šฉํ•ด์„œ image Upload ํ•˜๊ธฐ

presigned URL์„ ์ด์šฉํ•œ S3 image ๋™์  ์—…๋กœ๋“œ ๊ฐ€์ด๋“œ์ž…๋‹ˆ๋‹ค. ๐Ÿ˜

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

Redux Toolkit ์•Œ์•„๋ณด๊ธฐ

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” redux toolkit์— ๋Œ€ํ•˜์—ฌ ์•Œ์•„๋ณด๊ณ , redux saga์™€ redux thunk๋ฅผ ์ ์šฉํ•˜์—ฌ ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ํ•˜๋Š” ๊ณผ์ •์„ ์•Œ์•„๋ณด์ž๐Ÿ˜Š

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

ContextAPI๋ฅผ ์ด์šฉํ•œ ๋กœ๊ทธ์ธ ์ƒํƒœ ๊ด€๋ฆฌ

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” React Router์™€ ContextAPI๋ฅผ ์ด์šฉํ•ด์„œ ๋กœ๊ทธ์ธ ๋œ ์‚ฌ์šฉ์ž์—๊ฒŒ๋งŒ ์ œํ•œ๋œ ํŽ˜์ด์ง€๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ๋” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์ž. ๐Ÿ˜Š

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

React App - Youtube Clone

google์—์„œ ์ œ๊ณตํ•˜๋Š” youtube data api๋ฅผ ์ด์šฉํ•ด์„œ ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” youtube๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค! react hooks์„ ์ด์šฉํ•ด์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ณ  ์Šคํƒ€์ผ๋ง์€ postCSS๋ฅผ ์ด์šฉํ•ด์„œ ๊ตฌํ˜„ํ•˜์˜€๋‹ค.

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

React App - Habit Tracker

react๋ฅผ ์ด์šฉํ•ด์„œ ์ œ์ž‘ํ•ด๋ณธ ์ฒซ Web app์ด๋‹ค!Tracking ํ•˜๊ณ ์‹ถ์€ Habit ๊ด€๋ฆฌ(์ถ”๊ฐ€, ์‚ญ์ œ)๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ณ , ๊ฐ Habit๋‹น ๋ช‡๋ฒˆ ํ–ˆ๋Š”์ง€ Countํ•ด ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฐ„๋‹จํ•œ ์•ฑ์ด๋‹ค

2020๋…„ 12์›” 24์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

ํด๋ž˜์Šค Component vs ํ•จ์ˆ˜ํ˜• Component

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” react component์— ๋Œ€ํ•ด ์•Œ์•„๋ณธ๋‹ค.์ด ํฌ์ŠคํŒ…์€ ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.component๋Š” ๊ฐ€์žฅ ์ตœ์†Œ์˜ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” UI๋กœ, ๋…๋ฆฝ์ ์ด๊ณ , ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ์„ค๊ณ„ํ•ด์•ผ ํ•œ๋‹ค. component๋Š” ํด๋ž˜์Šคํ˜• component์™€ ํ•จ์ˆ˜ํ˜•

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

Virtual DOM๊ณผ JSX

์ด๋ฒˆ ํฌ์ŠคํŒ…์—๋Š” React์˜ Virtual DOM๊ณผ JSX์— ๋Œ€ํ•ด ์•Œ์•„๋ณธ๋‹ค.๋ฆฌ์•กํŠธ๋Š” virtual DOM ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜์—ฌ DOM ์—…๋ฐ์ดํŠธ๋ฅผ ์ถ”์ƒํ™” ํ•จ์œผ๋กœ์จ DOM ์ฒ˜๋ฆฌ ํšŸ์ˆ˜๋ฅผ ์ตœ์†Œํ™”ํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ง„ํ–‰ํ•œ๋‹ค.Virtual DOM (VDOM)์€ UI์˜ ์ด์ƒ์ ์ธ ๋˜๋Š” โ€œ๊ฐ€์ƒ

2020๋…„ 12์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€

๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ 

velog์˜ ๊ฐœ๋ฐœ์ž๊ธฐ๋„ ํ•œ VELOPORT ๊น€๋ฏผ์ค€๋‹˜์˜ '๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ' ์ฑ…์„ ๊ตฌ์ž…ํ–ˆ๋‹ค. ๋ณผ ์ฑ…์ด ์‚ฐ๋”๋ฏธ์ฒ˜๋Ÿผ ์Œ“์—ฌ๊ฐ€๋Š” ๋Š๋‚Œ์ด๋ผ ์กฐ๊ธˆ ๊ฑฑ์ •๋„ ๋˜์ง€๋งŒ... ๋ธ”๋กœ๊ทธ์— ์ •๋ฆฌํ•˜๋ฉฐ ๊ณต๋ถ€๋ฅผ ์ง„ํ–‰ํ•ด ๋ณผ๊นŒ ํ•œ๋‹ค.ํ”„๋ก ํŠธ์—”๋“œ๋Š” ๊ณต๋ถ€ ํ•˜๋ฉด ํ• ์ˆ˜๋ก ์•Œ์•„์•ผ ํ• ๊ฒŒ ์ •๋ง ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค. ์—ด์‹ฌ

2020๋…„ 12์›” 4์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€