profile
Frontend Engineer ๐ŸŒฑ
post-thumbnail

[TIL] AJAX, Callbackํ•จ์ˆ˜, Promise, Async/await

๐Ÿ‘ฉโ€๐Ÿ’ป ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” ๋น„๋™๊ธฐ์™€ ๊ด€๋ จ๋œ ๊ฐœ๋…๋“ค์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(- ๋น„๋™๊ธฐ ๋ฐฉ์‹(- AJAX(- ์ฝœ๋ฐฑํ•จ์ˆ˜(- Promise(- async / await(๋™๊ธฐ์‹ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ด๋– ํ•œ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ณ  ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋‹ค์Œ ์ฝ”๋“œ๊ฐ€ ์ˆœ์ฐจ์ ์œผ๋กœ ์ฒ˜

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

[TIL] React - Virtual DOM

๐Ÿ‘ฉโ€๐Ÿ’ป ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” Virtual DOM์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค. Virtual DOM? ๐Ÿ“ ์‹ค์ œ DOM ๋ณ€ํ™”๋ฅผ ์ตœ์†Œํ™” ์‹œ์ผœ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” HTMLํŒŒ์ผ์„ ๋ณด์—ฌ์ฃผ๊ธฐ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ • DOM ํŠธ๋ฆฌ ์ƒ์„ฑ โ†’ ๋ Œ๋” ํŠธ๋ฆฌ ์ƒ์„ฑ โ†’ Layout โ†’

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

[Project] Quest101

ํด๋ž˜์Šค๋ฅผ ํ†ตํ•ด ์ž์‹ ์„ ํ‚ค์šฐ๋Š” ํ˜„์‹ค ์บ๋ฆญํ„ฐ ๋นŒ๋“œ์—… ์„œ๋น„์Šคํด๋ž˜์Šค101 ์‚ฌ์ดํŠธ๋ฅผ ๋ชจํ‹ฐ๋ธŒ๋กœ ํ•œ ํ”„๋กœ์ ํŠธuseNavigate ์ฟผ๋ฆฌ ์ŠคํŠธ๋ง ํŽ˜์ด์ง€ ์ด๋™2์ฐจ ํ”„๋กœ์ ํŠธ์—์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณด์•˜๋‹ค! slick ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•ด์„œ ๋ฉ”์ธ ํŽ˜์ด์ง€์— ๋‚˜ํƒ€๋‚˜๋Š” ๋ฐฐ๋„ˆ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด๋ฒˆ์—

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

[TIL] React - Styled Components

์Šคํƒ€์ผ์„ ์ œ๊ณตํ•˜๋Š” CSS-in-JS ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•œ ํ”„๋ ˆ์ž„์›Œํฌstyled-components ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ , CSS๊ตฌ์„ฑ ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.css-in-js๋Š” 2018๋…„ ์ดํ›„ ํญ๋ฐœ์ ์œผ๋กœ ์„ฑ์žฅํ•ด์™”๊ณ , ๊ทธ ์ค‘ S

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

[React] useLocation ์‚ฌ์šฉ

baGETTT ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๊ฒฐ์ œ์™„๋ฃŒ ํŽ˜์ด์ง€ ๊ตฌํ˜„์„ ๋‹ด๋‹นํ–ˆ๋‹ค.์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€์—์„œ ๊ฒฐ์ œํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด,๊ตฌ๋งค ์ •๋ณด ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒฐ์ œ ์™„๋ฃŒ ํŽ˜์ด์ง€๋กœ ์ด๋™์„ ํ•˜๊ฒŒ ๋œ๋‹ค.๊ทธ ๊ณผ์ •์—์„œ ๊ตฌ๋งค ์ •๋ณด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€์•ผ ํ•˜๋Š”๋ฐ ๋ฐฑ์—”๋“œ์—์„œ GETํ•˜๋Š” ๋ฐฉ์‹์ด ์•„๋‹Œ,์žฅ๋ฐ”๊ตฌ๋‹ˆ์—

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

[React] useEffect hook

์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๋‹ค ๋ณด๋ฉด ํ™”๋ฉด์— ๋ณด์ผ ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜ค๊ธฐ๋„ ํ•ด์•ผ ํ•˜๊ณ , state๊ฐ€ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๊ฑฐ๋‚˜, ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ on off ํ•˜๋Š” ๋™์ž‘์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋•Œ useEffect hook์ด ํ•„์š”ํ•˜๋‹ค!๊ณต์‹ ๋ฌธ์„œ์—์„œ useEffect๋ฅผ

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

[React] map ํ•จ์ˆ˜ ์ ์šฉ์‹œ key props๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ์ด์œ 

์œ„์Šคํƒ€๊ทธ๋žจ ํŽ˜์ด์ง€์˜ ๋Œ“๊ธ€ ๋ถ€๋ถ„์„ ์ปดํฌ๋„ŒํŠธํ™” ์‹œํ‚ค๋ฉด์„œ map ํ•จ์ˆ˜๋กœ ๋Œ“๊ธ€ ๋ชฉ๋ก์œผ๋กœ ๊ตฌํ˜„ํ•˜์˜€๋‹ค.โœ”๏ธ mapํ•จ์ˆ˜๋ฅผ ์ ์šฉํ•  ๋•Œ๋Š” key๊ฐ’์„ ๋ถ€์—ฌํ•ด์•ผํ•œ๋‹ค. ๋งŒ์•ฝ key ๊ฐ’์„ ์ฃผ์ง€ ์•Š์•„๋„ ํ™”๋ฉด์—๋Š” ๋ฌธ์ œ์—†์ด ํ™”๋ฉด์— ์ถœ๋ ฅ ๋˜์ง€๋งŒ ํ„ฐ๋ฏธ๋„์— ์•„๋ž˜์™€ ๊ฐ™์€ ์˜ค๋ฅ˜ ๋ฉ”์„ธ์ง€๊ฐ€ ๋œจ๊ฒŒ ๋œ๋‹ค.Key๋Š”

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

[React] State, Props, Event

ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜๋Š” ์ปดํฌ๋„ŒํŠธ์˜ UI ์ •๋ณด์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๊ฐ’์ปดํฌ๋„ŒํŠธ ์•ˆ์˜ ์š”์†Œ์— ์ƒํƒœ๊ฐ’์„ ๋ฐ˜์˜ํ•ด์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”๋€” ๋•Œ ๋งˆ๋‹ค ํšจ์œจ์ ์œผ๋กœ UI์— ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด State๋ฅผ ์„ค์ •ํ•œ๋‹ค.useState ํ•จ์ˆ˜๋ฅผ import ํ•œ ํ›„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.useState ํ•จ์ˆ˜๋Š” function St

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

[React] Basic

Facebook์—์„œ ๊ฐœ๋ฐœํ•œ Libraryโ€œ์ง€์†์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€ํ™”ํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์ถœํ•˜๋Š” ๊ฒƒโ€์„ ๋ชฉํ‘œ๋กœ ๊ฐœ๋ฐœ์˜ค๋กœ์ง€ View๋งŒ ๋‹ด๋‹นํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. ๊ทธ๋งŒํผ ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ๋ถ€์กฑํ•ด third-party ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์„ ๊ทธ๋Œ€๋กœ ์‚ฌ

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