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

~๊ฐœ๋ฐœ ๊ณต๊ฐ ์งค ๊ตฌ๊ฒฝํ•˜๊ณ  ๊ฐ€์„ธ์š”~

๊ทธ๋ฆผ์Ÿ์ด ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ทธ๋ฆฐ ๊ฐœ๋ฐœ ๊ณต๊ฐ ์งค ์ž…๋‹ˆ๋‹ค. ์ €์žฅํ•˜์‹œ๊ณ  ๋งˆ์Œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค. (์ƒ์—…์šฉ์€ ์•ˆ๋จ)

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

์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ | 3์žฅ ํƒ€์ž…์ถ”๋ก 

๋ณธ ๋ฌธ์€ ์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ๊ณ  ์•Œ๊ฒŒ๋œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ๋งŽ์€ ํƒ€์ž… ๊ตฌ๋ฌธ์€ ์‚ฌ์‹ค ๋ถˆํ•„์š”ํ•˜๋‹ค. ์ฝ”๋“œ์˜ ๋ชจ๋“  ๋ณ€์ˆ˜์— ํƒ€์ž…์„ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์€ ๋น„์ƒ์‚ฐ์ ์ด๋ฉฐ ํ˜•ํŽธ์—†๋Š” ์Šคํƒ€์ผ์ด๋‹ค.ํƒ€์ž… ์Šคํฌ๋ฆฝํŠธ๋Š” ์ž…๋ ฅ์„ ๋ฐ›์•„ ์—ฐ์‚ฐํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ค ํƒ€์ž…์„ ๋ฐ˜ํ™˜ํ•˜๋Š”์ง€ ์ •ํ™•ํžˆ ์•Œ

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

์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์“ฐ๋Š” Frontend Clean Code ์ •๋ฆฌ

๋ณธ๋ฌธ์€ ํ† ์Šค SLASH 21 - ์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์“ฐ๋Š” Frontend Clean Code ์˜์ƒ์„ ๋ณด๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ๋‚ด์šฉ์€ ํ•ด๋‹น ์˜์ƒ์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.ํด๋ฆฐ์ฝ”๋“œ๋Š” '๋ช…ํ™•ํ•œ ์ด๋ฆ„', '์ค‘๋ณต ์ค„์ด๊ธฐ'์™€ ์„ฌ์„ธํ•˜๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•˜๋Š” ์Šคํ‚ฌ์„ ์š”๊ตฌํ•ฉ๋‹ˆ๋‹ค.์ง€๋ขฐ์ฝ”๋“œ๋Š” ํ๋ฆ„ ํŒŒ

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

์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ | 2์žฅ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ํƒ€์ž…์‹œ์Šคํ…œ

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

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

์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ | 1์žฅ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์•Œ์•„๋ณด๊ธฐ

๋ณธ ๋ฌธ์€ ์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ๊ณ  ์•Œ๊ฒŒ๋œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ƒ์œ„ ์ง‘ํ•ฉ(superset)์ด๋‹ค.ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํƒ€์ž…์ด ์ •์˜๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ƒ์œ„์ง‘ํ•ฉ์ด๋‹ค..js ํŒŒ์ผ์— ์žˆ๋Š” ์ฝ”๋“œ๋Š” ์ด๋ฏธ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์ด๋‹ค.์ฆ‰ main.js ๋ฅผ main.ts

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ๊ฐ€์ด๋“œ | 15์žฅ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

๋ณธ ๋ฌธ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ๊ฐ€์ด๋“œ๋ฅผ ์ฝ์œผ๋ฉฐ ๋ชฐ๋ž๋˜ ๋ถ€๋ถ„์„ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ (FrontEnd)์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ํ•˜๋„๋ก ์ž‘์„ฑ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์„œ๋ฒ„ ์‚ฌ์ด๋“œ (BackEnd)์›น ์„œ๋ฒ„์—์„œ ์‹คํ–‰๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์‚ฌ์ด๋“œ์›น ์„œ๋ฒ„์™€ ์›น ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์ด์— ์žˆ๋Š” ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ์˜

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ๊ฐ€์ด๋“œ | 13์žฅ ๋น„๋™๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

๋น„๋™๊ธฐ์ ์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค= ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์˜ค๊ฑฐ๋‚˜, ์–ด๋–ค ์ด๋ฒคํŠธ๊ฐ€ ์ผ์–ด๋‚  ๋•Œ ๊นŒ์ง€ ๊ณ„์‚ฐ์„ ๋ฉˆ์ถ”๊ณ  ๋Œ€๊ธฐํ•˜๋Š” ์ผ์ด ์žฆ๋‹ค.์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋žจ์€ ์ด๋ฒคํŠธ ์ฃผ๋„์ ์ด๋‹ค.ํ”„๋กœ๊ทธ๋žจ์ด ์‹ค์ œ๋กœ ๋ฌด์—‡์ธ๊ฐ€ ์‹คํ–‰ํ•˜๊ธฐ ์ „์— ์‚ฌ์šฉ์ž๊ฐ€ ๋ฌด์–ธ๊ฐ€ ํด๋ฆญํ•˜๊ณ  ํƒญํ•˜์—ฌ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ์•ผํ•œ๋‹ค.์ž๋ฐ”์Šคํฌ

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ๊ฐ€์ด๋“œ | 2์žฅ ์–ดํœ˜๊ตฌ์กฐ

๋ณธ๋ฌธ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ๊ฐ€์ด๋“œ๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

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

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

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

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

AOS ๋Œ€์‘ | webview scroll memo - ์›น๋ทฐ ์Šคํฌ๋กค ๊ธฐ์–ต ๋ชปํ•จ ์ด์Šˆ

AOS ์›น๋ทฐ์—์„œ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ํ–ˆ์„ ๊ฒฝ์šฐ, ์›น ํŽ˜์ด์ง€ ์Šคํฌ๋กค์ด ๋งจ ์œ„๋กœ ์˜ฌ๋ผ๊ฐ€๋ฉด์„œ ์ „์ฒด์ ์œผ๋กœ refresh ๋˜์—ˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— ์Šคํฌ๋กค์ด ๊ธฐ์–ต๋˜์ง€ ๋ชปํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.webview ์—์„œ ์‚ฌ์šฉํ•˜๋Š” App ์˜ ์ •๋ณด๋“ค์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” getAppinfo ์ธํ„ฐํŽ˜์ด์Šค ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด์„œ

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

NextJS | useRouter() params undefined issue

์ถœ์„ ์ด๋ฒคํŠธ ํŽ˜์ด์ง€์—์„œ URL์˜ params์˜ date ๊ฐ’์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ด๋‹น ๋‚ ์งœ์˜ ์ด๋ฒคํŠธ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋ง ํ•˜๊ณ  ์žˆ๋‹ค. ๋งŒ์•ฝ date ๊ฐ’์ด ์ง€๊ธˆ ์ง„ํ–‰ํ•˜๋Š” ์ด๋ฒคํŠธ์˜ ๋‚ ์งœ์™€ ์ผ์น˜ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ง„ํ–‰์ค‘์ธ ์ด๋ฒคํŠธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋ผ๋Š” ๊ฒฝ๊ณ ๋ฅผ ๋„์šฐ๊ณ  ํŽ˜์ด์ง€ ์ ‘๊ทผ์„ ์ œํ•œํ•œ๋‹ค.ํ•˜์ง€๋งŒ ์ •์ƒ

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

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

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

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

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

NextJS ๊ณต์‹ ๋ฌธ์„œ ์ •๋ฆฌ (12๋ฒ„์ „ ๊ธฐ์ค€)

๊ณต์‹ ๋ฌธ์„œ: Next.js by Vercel - The React FrameworkLearn | Next.js๋ Œ๋”๋ง: ๋ฆฌ์•กํŠธ์—์„œ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ HTML ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒSSR ๊ณผ ์ •์  ์‚ฌ์ดํŠธ๋Š” Pre-Rendering ์ด๋ผ๊ณ ๋„ ๋ถ€๋ฅธ๋‹ค.์™ธ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ fetchํ•ด์„œ ๋ฆฌ์•กํŠธ์˜

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

์•ฑ ์บ์‹ฑ | ์›น ๋ทฐ์—์„œ ์—…๋ฐ์ดํŠธ๋œ ํŽ˜์ด์ง€๋ฅผ ์—ด์ง€ ๋ชปํ•˜๋Š” ์ด์Šˆ

4์›” ์ถœ์„ ์ด๋ฒคํŠธ ํŽ˜์ด์ง€๋ฅผ ๋ฐฐํฌํ•˜์—ฌ ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ ์›น ๋ทฐ๋กœ ์—ด์—ˆ๋Š”๋ฐ, ๊ธฐ์กด์˜ 3์›” ์ถœ์„ ์ด๋ฒคํŠธ ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.์•ฑ์—์„œ๋Š” ์บ์‹ฑ์„ ํ†ตํ•ด์„œ ํ•œ๋ฒˆ ๋ฐฉ๋ฌธํ•œ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ๋ฆฌ์†Œ์Šค๋“ค์„ ์ €์žฅํ•œ๋‹ค.๋”ฐ๋ผ์„œ ๊ธฐ์กด 3์›” ์ด๋ฒคํŠธ ํŽ˜์ด์ง€์˜ ๋ฆฌ์†Œ์Šค๋“ค์„ ์บ์‹ฑํ•œ ์ฑ„, ์ƒˆ๋กœ ์—…๋ฐ์ดํŠธ

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

NextJS ์‹œ์ž‘ํ•˜๊ธฐ - ๋…ธ๋งˆ๋“œ์ฝ”๋” ์ •๋ฆฌ

node ๋ฒ„์ „์ด 14 ์ดํ•˜๋ฉด next app์ด ๋™์ž‘ํ•˜์ง€ ์•Š์Œ.M1 ๋…ธํŠธ๋ถ์˜ ๊ฒฝ์šฐ์—” node_modules๋ฅผ ๋‹ค์‹œ์„ค์น˜ํ•ด์•ผํ•  ์ˆ˜๋„ ์žˆ์Œ...๊ฐœ๋ฐœ์ž๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•จ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋จํด๋” ๊ตฌ์กฐ, ์–ธ์ œ ์–ด๋–ค ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ฌ์ง€ ๊ฐœ๋ฐœ์ž๊ฐ€

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

403 Error | img ํƒœ๊ทธ ์™ธ๋ถ€ ์ด๋ฏธ์ง€ ์š”์ฒญ forbidden ๋˜๋Š” ์˜ค๋ฅ˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

๋„ค์ด์ปค ์นดํŽ˜์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ฐ›์•„์™€์„œ ์ค‘๊ณ ๋‚˜๋ผ ์„œ๋ฒ„์—์„œ img ๋กœ ๋ณด์—ฌ์ฃผ๋ ค๊ณ  ํ•˜๋‹ˆ ์•„๋ž˜์™€ ๊ฐ™์ด ์ „๋ถ€ ์ •์ƒ์ ์œผ๋กœ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ์˜ค์ง€ ๋ชปํ–ˆ๋‹ค.๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ๋„คํŠธ์›Œํฌ ์ฑ„๋„์—์„œ ํ™•์ธํ•œ ๊ฒฐ๊ณผ 403 ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.403 ์—๋Ÿฌ๋Š” ๋ณดํ†ต ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์—์„œ ํ˜ธ์ถœํ•  ๋•Œ ๋ฐœ์ƒํ•œ๋‹ค. ๋„๋ฉ”์ธ์ด ๋‹ค๋ฅธ

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

Sourcetree ์˜ค๋ฅ˜ | Clone/Pull/Push์‹œ ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜ -permission denied (publickey).

์›๊ฒฉ ์ €์žฅ์†Œ์—์„œ Clone/Pull/Push ๋ฅผ ํ•˜๋ ค๊ณ  ์‹œ๋„ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.Bitbucket๊ณผ Sourcetree ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ™˜๊ฒฝ์ž…๋‹ˆ๋‹คplease make sure you have the correct access rights and the re

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