profile
Web Front-End ๐Ÿ›ซ
post-thumbnail

[React + TS] ์ปค์Šคํ…€ Hooks ์ƒ์„ฑ ํ›„ TypeScript ํƒ€์ž… ์ง€์ •ํ•˜๊ธฐ

์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ๊ฐ’์„ ๋ฐ›๋Š” Hooks ์ƒ์„ฑํ•˜๊ณ  ํƒ€์ž… ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ• ๐Ÿค—

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

[Next.js + GA] Next ํ”„๋กœ์ ํŠธ์—์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด Google Analytics ์ ์šฉํ•˜๊ธฐ

ํ”„๋กœ์ ํŠธ์— Google Analytics ์ ์šฉํ•˜๊ณ  ์กฐํšŒ์ˆ˜ ์•Œ์•„๋ณด๋Š” ๋ฐฉ๋ฒ• ๐Ÿ“Š

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

[JavaScript] ๊ฐ์ฒด ์ƒ์„ฑํ•  ๋•Œ ๋™์ ์œผ๋กœ key ๊ฐ’ ํ• ๋‹นํ•˜๋Š” ๋ฐฉ๋ฒ• (feat.React)

JavaScript ์—์„œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ๋™์ ์œผ๋กœ key ๊ฐ’ ํ• ๋‹นํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿค”

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

[React + TS] TypeScript & styled-components ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

TypeScript & styled-components ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿค”

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

[React] react-virtualized ๋ฅผ ์‚ฌ์šฉํ•œ Infinity Scroll ์ตœ์ ํ™”

React ๊ณต์‹ ๋ฌธ์„œ์—์„œ ์†Œ๊ฐœํ•˜๋Š” react-virtualized ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ Infinity Scroll ์ตœ์ ํ™” ํฌ์ŠคํŒ…์ž…๋‹ˆ๋‹ค.

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

[Clean Code] ํ•จ์ˆ˜ (JS)

ํด๋ฆฐ ์ฝ”๋“œ ์ค‘ ํ•จ์ˆ˜ ๊ด€๋ จ ๋‚ด์šฉ์„ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿค”

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

[Gatsby] Gatsby ๊ฐœ๋… ์ดํ•ดํ•˜๊ณ  ํŠœํ† ๋ฆฌ์–ผ ์‹œ์ž‘ํ•˜๊ธฐ

Gatsby ๋ž€ ๋ฌด์—‡์ธ์ง€, ์–ด๋– ํ•œ ์žฅ์ ์ด ์žˆ๋Š”์ง€ ์ „๋ฐ˜์ ์ธ ๊ฐœ๋…์— ๋Œ€ํ•ด ์•Œ์•„๋ณธ ํ›„ ํŠœํ† ๋ฆฌ์–ผ์„ ํ†ตํ•ด Gatsby ๊ฐœ๋ฐœ ์‹œ์ž‘ํ•˜๋Š” ๊ณผ์ •์„ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ’ป

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

[React] useRef ๊ฐœ๋…๋ถ€ํ„ฐ ํ™œ์šฉ๊นŒ์ง€ ๐ŸŽก

useRef ๊ฐœ๋…์— ๋Œ€ํ•ด ์•Œ์•„๋ณธ ํ›„ ๋Œ€ํ‘œ์ ์ธ 3๊ฐ€์ง€ ํ™œ์šฉ ๋ฐฉ๋ฒ•์„ ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ”ฎ

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

[Clean Code] ๋‹จ์œ„ ํ…Œ์ŠคํŠธ (JS)

ํด๋ฆฐ ์ฝ”๋“œ ์ค‘ TDD ๊ด€๋ จ ๋‚ด์šฉ์„ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿค”

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

[Webpack] ์›นํŒฉ ๊ฐœ๋… ์•Œ์•„๋ณด๊ธฐ

์›นํŒฉ์ด๋ž€ ๋ฌด์—‡์ธ์ง€, ์–ด๋– ํ•œ ์žฅ์ ์ด ์žˆ๋Š”์ง€ ์ „๋ฐ˜์ ์ธ ๊ฐœ๋…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ  ์›นํŒฉ ๊ตฌ์„ฑ ์š”์†Œ ์ค‘ ๋กœ๋”์— ๋Œ€ํ•ด ์ƒ์„ธํ•˜๊ฒŒ ์ •๋ฆฌํ•ด๋ดค์Šต๋‹ˆ๋‹ค ๐Ÿค”

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

[React] useEffect ํ™œ์šฉํ•˜๊ธฐ

useEffect ๋ผ๋Š” Hook ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ๋์„ ๋•Œ (์ฒ˜์Œ ๋‚˜ํƒ€๋‚ฌ์„ ๋•Œ), ์–ธ๋งˆ์šดํŠธ ๋์„ ๋•Œ (์‚ฌ๋ผ์งˆ ๋•Œ), ๊ทธ๋ฆฌ๊ณ  ์—…๋ฐ์ดํŠธ๋  ๋•Œ (ํŠน์ • props๊ฐ€ ๋ฐ”๋€” ๋•Œ) ํŠน์ • ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

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

[JavaScript] Promise ํ†บ์•„๋ณด๊ธฐ ๐Ÿง

Promise ์˜ ๊ฐœ๋…๊ณผ resolve, reject ์—์„œ ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ• ์„ค๋ช… ๋ฐ Promise.all(), Promise.race(), Promise.finally() ์— ๋Œ€ํ•ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

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

[React] ๋ฐฐ์—ด ๊ฐ’ ์ถ”๊ฐ€, ์ œ๊ฑฐ, ์ˆ˜์ •ํ•˜๋ฉฐ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€ํ•˜๊ธฐ

"๋ฒจ๋กœํผํŠธ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ ๋ฆฌ์•กํŠธ"์˜ "๋ฐฐ์—ด์— ํ•ญ๋ชฉ ์ถ”๊ฐ€ํ•˜๊ธฐ", "๋ฐฐ์—ด์— ํ•ญ๋ชฉ ์ œ๊ฑฐํ•˜๊ธฐ"์™€ "๋ฐฐ์—ด ํ•ญ๋ชฉ ์ˆ˜์ •ํ•˜๊ธฐ"๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

[React] useRef๋กœ DOM ์„ ํƒํ•˜๊ณ  ๋ณ€์ˆ˜ ๊ด€๋ฆฌํ•˜๊ธฐ

"๋ฒจ๋กœํผํŠธ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ ๋ฆฌ์•กํŠธ"์˜ "useRef ๋กœ ํŠน์ • DOM ์„ ํƒํ•˜๊ธฐ", "useRef ๋กœ ์ปดํฌ๋„ŒํŠธ ์•ˆ์˜ ๋ณ€์ˆ˜ ๋งŒ๋“ค๊ธฐ"์™€ "๋ฐฐ์—ด์— ํ•ญ๋ชฉ ์ถ”๊ฐ€ํ•˜๊ธฐ"๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

[React] input ๊ฐ’ ๋ถˆ๋ณ€์„ฑ ์ง€ํ‚ค๋ฉฐ ๊ฐ์ฒด๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ

"๋ฒจ๋กœํผํŠธ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ ๋ฆฌ์•กํŠธ"์˜ "input ์ƒํƒœ ๊ด€๋ฆฌํ•˜๊ธฐ"์™€ "์—ฌ๋Ÿฌ๊ฐœ์˜ input ์ƒํƒœ ๊ด€๋ฆฌํ•˜๊ธฐ"๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

[React] ์ตœ์ ํ™”๋ฅผ ๊ณ ๋ คํ•˜๋ฉฐ useState ์‚ฌ์šฉํ•˜๊ธฐ

"๋ฒจ๋กœํผํŠธ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ ๋ฆฌ์•กํŠธ"์˜ "useState ๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ”๋€Œ๋Š” ๊ฐ’ ๊ด€๋ฆฌํ•˜๊ธฐ"๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

[React] ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์—์„œ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž์™€ && ์—ฐ์‚ฐ์ž ๋ชจ๋‘ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

"๋ฒจ๋กœํผํŠธ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ ๋ฆฌ์•กํŠธ"์˜ "์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง"๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

[React] props ํ™œ์šฉํ•˜๊ธฐ

"๋ฒจ๋กœํผํŠธ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๋ชจ๋˜ ๋ฆฌ์•กํŠธ"์˜ "props๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ๊ฐ’ ์ „๋‹ฌํ•˜๊ธฐ"๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

[CSS] Animation

CSS Animation์˜ ์†์„ฑ(name, duration, timing function, delay, interaction count, direction, fill mode, playstate) ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

2021๋…„ 02์›” ํšŒ๊ณ 

๋ฒŒ์จ 2021๋…„ 02์›” ํšŒ๊ณ 

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