profile
๐ŸŽจ๊ทธ๋ฆผ์„ ์ข‹์•„ํ•˜๋Š” FE ๊ฐœ๋ฐœ์ž๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (42)JavaScript(18)์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(17)์•Œ๊ณ ๋ฆฌ์ฆ˜(7)React(6)nextjs(3)์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ๊ฐ€์ด๋“œ(3)๋ฆฌ์•กํŠธ(3)ํ”„๋ก ํŠธ์—”๋“œ(3)๋น„๋™๊ธฐ(2)DFS(2)๊ทธ๋ž˜ํ”„(2)์ฑ…์ •๋ฆฌ(2)socket.io(2)ํ”„๋กœ์ ํŠธ(2)๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ(2)aos(2)algorithm(2)์˜ค๋ฅ˜(2)์›น ์ ‘๊ทผ์„ฑ(1)undefined(1)๊ธฐ์–ต๋ชปํ•จ(1)cors(1)front end(1)web(1)์Šค์ผˆ๋ ˆํ†ค UI(1)์›น๋ฐ”์ดํƒˆ(1)promise(1)๋ฆฌํŽ˜์ธํŠธ(1)๋™๊ธฐ(1)currentColor(1)URI(1)๋ฐฑํŠธ๋ ˆํ‚น(1)์˜ฌ๋ฐ”๋ฅธ ์›๋ณธ ๊ฒฝ๋กœ/URL์ด ์•„๋‹™๋‹ˆ๋‹ค(1)์™ธ๋ถ€ ์ด๋ฏธ์ง€(1)referer(1)403(1)์•ฑ ์บ์‹ฑ(1)๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง(1)์ƒํƒœ(1)์›น ๋ทฐ(1)์Šค์ผˆ๋ ˆํ†ค(1)sourcetree(1)์ด๋ฏธ์ง€(1)ํ”„๋กœ๋ฏธ์Šค(1)ํ”Œ๋กœ์ด๋“œ-์™€์ƒฌ(1)ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ(1)์†Œ์ˆ˜์ฐพ๊ธฐ(1)๋ธŒ๋ผ์šฐ์ €(1)url(1)color(1)sourcetree ์˜ค๋ฅ˜(1)N Queens(1)permission denied(1)floyd-warshall(1)์›น๊ณผ ๋„คํŠธ์›Œํฌ(1)pre-rendering(1)useRouter(1)์–ดํœ˜๊ตฌ์กฐ(1)CLS(1)์ฝœ๋ฐฑ ํ•จ์ˆ˜(1)์ด๋ถ„ํƒ์ƒ‰(1)union and find(1)webview(1)ํƒ€์ž… ๊ฐ’ ๋ณ€์ˆ˜(1)useState(1)referrer-policy(1)์•ˆ๋“œ๋กœ์ด๋“œ(1)ํ•จ์ˆ˜์„ ์–ธ๋ฌธ(1)์ปดํฌ๋„ŒํŠธ ๋™์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ(1)useInfiniteQuery(1)oauth2(1)img(1)๋ฐฑ์—”๋“œ ์„œ๋ฒ„(1)isReady(1)๋„คํŠธ์›Œํฌ(1)ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ(1)์ฝœ๋ฐฑ ์ง€์˜ฅ(1)๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ(1)ํ•จ์ˆ˜๋ฆฌํ„ฐ๋Ÿด(1)์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด(1)์‹ค์‹œ๊ฐ„์ฑ„ํŒ…(1)google oauth2(1)setState ๋น„๋™๊ธฐ(1)2์žฅ(1)3์žฅ(1)๊ณต์‹๋ฌธ์„œ(1)scroll(1)iOS(1)์†Œ์ผ“(1)ํ”„๋ก ํŠธ ์„œ๋ฒ„(1)BFS(1)์ด์Šˆ(1)react-query(1)local storage(1)useInView(1)useRef(1)CSS(1)๋ฆฌํ”Œ๋กœ์šฐ(1)html(1)์ธํ„ด(1)webvital(1)๋ฌดํ•œ ์Šคํฌ๋กค(1)๋ฒ„ํŠผ(1)๋ฆฌ๋ Œ๋”๋ง(1)Backtraking(1)CSR(1)SSR(1)ํ•™์ ์—ฐ๊ณ„(1)localstorage(1)์—๋Ÿฌ(1)issue(1)๊ฒŒ์ž„(1)bitbucket(1)ssh ํ‚ค(1)infinite scroll(1)regexp(1)๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€(1)referrer(1)setState(1)์‹คํ–‰ ์ปจํ…์ŠคํŠธ(1)์ด๋ฏธ์ง€ ๋™์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ(1)icon(1)seo(1)Binary Search(1)ssg(1)์ด๋ฏธ์ง€ ์ตœ์ ํ™”(1)์•„ํ† ๋ฏน ๋””์ž์ธ(1)atomic design(1)svg(1)params(1)react intersection observer(1)13์žฅ(1)Stroke(1)์›น๋ทฐ(1)FE(1)reflow(1)๋ฆฌ๋ Œ๋”๋ง ์•ˆ๋จ(1)์›น ํ‘œ์ค€(1)Spring(1)์Šคํฌ๋กค(1)ํ•ฉ์ง‘ํ•ฉ ์ฐพ๊ธฐ(1)no-referrer(1)WAI-ARIA(1)sop(1)๋…ธ๋งˆ๋“œ์ฝ”๋”(1)์ •๊ทœํ‘œํ˜„์‹(1)์„ ์–ธํ˜•(1)
post-thumbnail

React | ์ด๋ฏธ์ง€ ์Šค์ผˆ๋ ˆํ†ค UI ์ ์šฉํ•˜๊ธฐ (CLS ๊ฐœ์„ ํ•˜๊ธฐ, webvital ์ ์ˆ˜ ๊ฐœ์„ )

์Šค์ผˆ๋ ˆํ†ค UI๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋™์•ˆ, ์•ž์œผ๋กœ ๋ณด์—ฌ์งˆ ์ปจํ…์ธ ๋ฅผ ๋Œ€๋žต์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๋Š” UI์ด๋‹ค.์‚ฌ์šฉ์ž๋Š” ๋นˆ ํ™”๋ฉด์„ ๋ณด๋ฉฐ ํ•˜์—ผ์—†์ด ๊ธฐ๋‹ค๋ฆฌ๋Š” ๊ฒƒ ๋ณด๋‹ค, ์Šค์ผˆ๋ ˆํ†ค UI ๋ฅผ ํ†ตํ•ด ์ง€๋ฃจํ•จ์„ ํ•ด์†Œํ•  ์ˆ˜ ์žˆ๋‹ค.์Šค์ผˆ๋ ˆํ†ค UI ๋Š” ์ผ๋ฐ˜์ ์ธ ๋กœ๋”ฉ ์Šคํ”ผ๋„ˆ๋ณด๋‹ค ์ปจํ…์ธ ๋ฅผ ๊ตฌ์ฒด์ ์œผ๋กœ

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

Google Oauth2 ๋กœ๊ทธ์ธ ํ”„๋กœ์ ํŠธ(React, Spring)

https://github.com/jinwoo-Bae/spring-react-google-oauth2Googgle Oauth2 ๋ฅผ ์‚ฌ์šฉํ•œ ๋กœ๊ทธ์ธ ์‹œ๋‚˜๋ฆฌ์˜ค์ž…๋‹ˆ๋‹ค.ํด๋ผ์ด์–ธํŠธ๋Š” ๋ฆฌ์•กํŠธ๋ฅผ, ์„œ๋ฒ„๋Š” ์Šคํ”„๋ง๋ถ€ํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.flow chart๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™

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

React | ๋ฒ„ํŠผ ํ™œ์„ฑ/๋น„ํ™œ์„ฑํ™” ์ด์Šˆ (feat. ๋ฆฌ๋ Œ๋”๋ง)

์ด๋ฒคํŠธ ์ฐธ์—ฌ ๋ฒ„ํŠผ์—๋Š” ํด๋ฆญ์‹œ ์ด๋ฒคํŠธ ์ฐธ์—ฌ API๋ฅผ ์š”์ฒญํ•˜๋Š” ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ๋“ฑ๋ก๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.API ์š”์ฒญ์„ ๋ณด๋‚ด๊ธฐ ์ „์— ๋ฒ„ํŠผ์„ ๋น„ํ™œ์„ฑํ™” ํ•˜๊ณ , ์‘๋‹ต์„ ๋ฐ›๊ณ  ๋‚˜์„œ ํ™œ์„ฑํ™” ํ•˜๋„๋ก ๋กœ์ง์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ์›ํ•˜๋Š” ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.์•„๋ž˜์˜ ์ฝ”๋“œ๋Š” ์ด๋ฒคํŠธ ์ฐธ์—ฌ

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

React | Infinite Scroll ๊ตฌํ˜„ํ•˜๊ธฐ (react-query, react-intersection-observer)

๋ฌดํ•œ ์Šคํฌ๋กค์ด๋ž€ ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€ ํ•˜๋‹จ์— ๋„๋‹ฌํ–ˆ์„ ๋•Œ, ์ปจํ…์ธ ๊ฐ€ ๊ณ„์† ๋กœ๋“œ๋˜๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX) ์ž…๋‹ˆ๋‹ค. ๋ฌดํ•œ ์Šคํฌ๋กค์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ธฐ์ˆ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.์ปจํ…์ธ  fetch APIํŽ˜์ด์ง€ ํ•˜๋‹จ ์š”์†Œ ๊ด€์ฐฐ์ƒˆ๋กœ์šด ์ปจํ…์ธ  ์ถ”๊ฐ€์ปจํ…์ธ ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” data fetch ๋Š”

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

React | Icon ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ (with SVG stroke) + ์ด๋ฏธ์ง€/์ปดํฌ๋„ŒํŠธ ๋™์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ

์•„์ด์ฝ˜ SVG ์ด๋ฏธ์ง€์˜ ์ˆ˜๊ฐ€ ๋งŽ์€ ๊ฒฝ์šฐ์— ๋ชจ๋“  SVG ํŒŒ์ผ์„ ๊ธฐ์–ตํ•˜๊ธฐ๋„ ์‰ฝ์ง€ ์•Š๊ณ , ์Šคํƒ€์ผ๋ง๊ณผ props๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ์— ๋ฒˆ๊ฑฐ๋กœ์›€์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์•„์ด์ฝ˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๋‹ค.SVG๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ์ƒ‰์ƒ๊ฐ’๊ณผ ํฌ๊ธฐ ๊ฐ’๋“ฑ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ์ €์žฅ

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

React | ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์˜ setState์˜ ๋น„๋™๊ธฐ

๋ฆฌ์•กํŠธ์˜ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ ๊ฐ’์„ ์—…๋ฐ์ดํŠธํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๋ฉ”์„œ๋“œ์ธ setState๋Š” ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ์ ์œผ๋กœ setState๊ฐ€ ๋™์ž‘ํ•œ๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ์–ด๋–ค ์˜๋ฏธ์ธ์ง€ ๋‹ค์Œ Counter ์˜ˆ์ œ๋ฅผ ๋“ค๋ฉฐ ์„ค๋ช…ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด 1์”ฉ ์ฆ๊ฐ€ํ•œ๋‹ค.์œ„์˜ ํด๋ž˜์Šคํ˜•

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

React | Atomic Design

๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด ์ž์ฃผ ๋“ฃ๋Š” ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์— ๋Œ€ํ•ด์„œ ์–˜๊ธฐํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.์•„ํ† ๋ฏน ๋””์ž์ธ์€ ๋””์ž์ธ ํŒจํ„ด์ค‘์— ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ž‘์€ ์›์ž๋ถ€ํ„ฐ, ์›์ž๊ฐ€ ๋ชจ์—ฌ์„œ ๋ถ„์ž๋ฅผ ์ด๋ฃจ๊ณ , ๋ถ„์ž๋“ค์„ ๋ชจ์•„์„œ ์œ ๊ธฐ์ฒด๋ฅผ ํ˜•์„ฑํ•˜๊ณ , ์œ ๊ธฐ์ฒด๋ฅผ ๋ชจ์•„ ํ•˜๋‚˜์˜ ํ…œํ”Œ๋ฆฟ์œผ๋กœ

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