Frontend ๐Ÿ“š 65

[React] ๋ฉด์ ‘ ์˜ˆ์ƒ ์งˆ๋ฌธ & ๋‹ต๋ณ€

1. ๋ฆฌ์•กํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๐Ÿ“Œ ๋ฆฌ์•กํŠธ์—์„œ “์ปดํฌ๋„ŒํŠธ”์™€ “ํ”„๋กœํผํ‹ฐ(props)” ์— ๋Œ€ํ•ด ์„ค๋ช…๋”๋ณด๊ธฐ๋ฆฌ์•กํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ๋Š” UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋…๋ฆฝ์ ์ธ ๋‹จ์œ„์ž…๋‹ˆ๋‹ค. ๊ฐ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž์ฒด์ ์ธ ์ƒํƒœ(state)๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋“ค๊ณผ props๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์Šต๋‹ˆ๋‹ค. props๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•˜๋Š” ์ฝ๊ธฐ ์ „์šฉ ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ props๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฆฌ์•กํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ UI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค ๋•Œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.๐Ÿ“Œ ๋ฆฌ์•กํŠธ์—์„œ “์ƒํƒœ(state)”์™€ ์†์„ฑ(props)”์˜ ์ฐจ์ด์ ๋”๋ณด๊ธฐ์ƒํƒœ(state)๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ๊ด€๋ฆฌ๋˜๋Š” ๋™์ ์ธ ๋ฐ์ดํ„ฐ์ด๊ณ , ์†์„ฑ(props)์€ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„Œ..

[React] React์˜ ํ•ต์‹ฌ ๊ฐ€์น˜

๐Ÿ”น React ๋ž€?Facebook์—์„œ ๋งŒ๋“  JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ๋กœ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์ถ•์— ์‚ฌ์šฉ๋‹จ์ˆœํ•œ ์›น์‚ฌ์ดํŠธ๋ถ€ํ„ฐ ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊นŒ์ง€ ๋‹ค์–‘ํ•˜๊ฒŒ ํ™œ์šฉ ๊ฐ€๋Šฅ ๐Ÿ”น React์˜ ํ•ต์‹ฌ ๊ฐ€์น˜1. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜์ปดํฌ๋„ŒํŠธ๋ผ๋Š” ๋…๋ฆฝ์ ์ธ UI ๋‹จ์œ„๋กœ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์„ฑํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์€ ์ปดํฌ๋„ŒํŠธ๋กœ ๋‚˜๋ˆ„๋ฉด ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’์•„์ง€๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ์ง2. ๊ฐ€์ƒ DOM(Virtual DOM)์‹ค์ œ DOM์„ ์ง์ ‘ ์กฐ์ž‘ํ•˜๋Š” ๋Œ€์‹ , ๊ฐ€์ƒ DOM์„ ์‚ฌ์šฉํ•ด ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•จ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋ฉ”๋ชจ๋ฆฌ ์ƒ์—์„œ ๋น„๊ต(diffing)ํ•œ ํ›„, ์ตœ์†Œํ•œ์˜ ์—…๋ฐ์ดํŠธ๋งŒ ์‹ค์ œ DOM์— ๋ฐ˜์˜ํ•ด์„œ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ด(๋ฐ”๋€ ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธ)์˜ˆ๋ฅผ ๋“ค์–ด, ์‡ผํ•‘๋ชฐ์—์„œ ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ์ถ”๊ฐ€ํ•  ๋•Œ ์ „์ฒด ํŽ˜๋ฆฌ..

[React]Instagram Clone - 17. ํ”„๋กœ์ ํŠธ ์™„์„ฑ ๋ฐ ํšŒ๊ณ 

1. ํด๋ผ์ด์–ธํŠธ ๊ธฐ๋Šฅ ๋ช…์„ธ 2. ์ฃผ์š” ์›น ํ™”๋ฉด ๊ตฌํ˜„โ‘  ํšŒ์›๊ฐ€์ž…โ‘ก ์†Œ์…œ ๋กœ๊ทธ์ธโ‘ข ๋กœ๊ทธ์ธโ‘ฃ ํ™ˆ ํ™”๋ฉดโ‘ค ํ™ˆ ํ™”๋ฉด - ๊ฒŒ์‹œ๋ฌผ ์ˆ˜์ •/์‚ญ์ œโ‘ฅ ๋งˆ์ดํŽ˜์ด์ง€โ‘ฆ ๊ฒŒ์‹œ๋ฌผ ์—…๋กœ๋“œโ‘ง ๋ฉ”์„ธ์ง€ 3. ๋ฐฐํฌ ๋ฐ ๊ธฐ์ˆ  ๋ฌธ์„œ๐Ÿ“๋ฐฐํฌ urlhttps://instagram-clone-client-lr01.onrender.com/auth/login๐Ÿ“๊ธฐ์ˆ  ๋ฌธ์„œhttps://spectacled-azimuth-86e.notion.site/SSinstagram-18f05e45325f807fbbc2cbb8f0c20747?pvs=74๐Ÿ“๊นƒ ์ฃผ์†Œhttps://github.com/SeungjaeLee00/Instagram_Clone๐Ÿ“ํ”„๋กœ์ ํŠธ ํฌํŠธํด๋ฆฌ์˜ค 4. ํšŒ๊ณ 10์›” 4์ผ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ 1์›” 22์ผ๊นŒ์ง€. ์•ฝ 4๊ฐœ์›” ๋™์•ˆ์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚ฌ๋‹ค. ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž..

[React] TMDB API๋ฅผ ํ™œ์šฉํ•œ ๋„ทํ”Œ๋ฆญ์Šค ํด๋ก  ์ฝ”๋”ฉ - 8. GitHub Actions๋ฅผ ์ด์šฉํ•œ React ์•ฑ CI/CD ๋ฐฐํฌ ์ž๋™ํ™”

GitHub Actions๋ฅผ ์ด์šฉํ•œ React ์•ฑ CI/CD ๋ฐฐํฌ ์ž๋™ํ™”์ด ํฌ์ŠคํŠธ์—์„œ๋Š” GitHub Actions๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ React ์•ฑ์„ GitHub Pages์— ์ž๋™ ๋ฐฐํฌํ•˜๋Š” CI/CD ํŒŒ์ดํ”„๋ผ์ธ์„ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. GitHub Actions๋Š” ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์ž๋™ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ๋กœ, ๋‹ค์–‘ํ•œ ์ž‘์—…์„ ์ž๋™์œผ๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React ์•ฑ์„ GitHub Pages์— ๋ฐฐํฌํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ์ž๋™ํ™”ํ•˜์—ฌ, ๋งค๋ฒˆ ์ˆ˜๋™์œผ๋กœ ๋ฐฐํฌํ•  ํ•„์š” ์—†์ด, main ๋ธŒ๋žœ์น˜์— ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ํ‘ธ์‹œ๋  ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ๋นŒ๋“œ๋˜๊ณ  ๋ฐฐํฌ๋˜๋„๋ก ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.1. GitHub Actions ์›Œํฌํ”Œ๋กœ์šฐ ํŒŒ์ผ ์„ค์ •GitHub Actions ์›Œํฌํ”Œ๋กœ์šฐ๋Š” .github/workflows ํด๋” ๋‚ด์— YAML ํŒŒ์ผ๋กœ ์ •..

[React] TMDB API๋ฅผ ํ™œ์šฉํ•œ ๋„ทํ”Œ๋ฆญ์Šค ํด๋ก  ์ฝ”๋”ฉ - 7. ํ—ค๋” ๊ตฌํ˜„: ๋ฐ˜์‘ํ˜• ๋””์ž์ธ๊ณผ ๋กœ๊ทธ์ธ ์ƒํƒœ์— ๋”ฐ๋ฅธ ๋™์  ๋ฒ„ํŠผ

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฐ˜์‘ํ˜• ํ—ค๋”๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃจ๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ํ—ค๋”๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•œ ์ƒํƒœ์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ๋กœ๊ทธ์ธ/๋กœ๊ทธ์•„์›ƒ ๋ฒ„ํŠผ์„ ํ‘œ์‹œํ•˜๊ณ , ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์—์„œ๋Š” ํ–„๋ฒ„๊ฑฐ ๋ฉ”๋‰ด๋ฅผ ํ†ตํ•ด ๋ฉ”๋‰ด ํ•ญ๋ชฉ์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. 1. ํ”„๋กœ์ ํŠธ ๊ฐœ์š”์ด๋ฒˆ์— ๊ตฌํ˜„ํ•  ํ—ค๋”๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ 2๊ฐ€์ง€ ์ค‘์š”ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค:๋ฐ˜์‘ํ˜• ๋””์ž์ธ: ํ™”๋ฉด ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋ฉ”๋‰ด๋ฅผ ํ–„๋ฒ„๊ฑฐ ๋ฉ”๋‰ด๋กœ ์ „ํ™˜ํ•ด ๋ชจ๋ฐ”์ผ์—์„œ๋„ ๊น”๋”ํ•˜๊ฒŒ ํ‘œ์‹œ๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.๋กœ๊ทธ์ธ ์ƒํƒœ์— ๋”ฐ๋ฅธ ๋™์  ๋ฒ„ํŠผ: ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธํ•œ ์ƒํƒœ์— ๋”ฐ๋ผ ํ—ค๋”์— ๋กœ๊ทธ์•„์›ƒ ๋ฒ„ํŠผ์„ ๋™์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋ฉฐ, ๋กœ๊ทธ์ธํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ์œ ๋„ํ•ฉ๋‹ˆ๋‹ค.2. ์ฃผ์š” ๊ธฐ๋Šฅ2.1 ๋ฐ˜์‘ํ˜• ๋””์ž์ธํ—ค๋”๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฐ์Šคํฌํƒ‘ ํ™”๋ฉด์—์„œ ๋ชจ๋“  ๋ฉ”๋‰ด ํ•ญ๋ชฉ์„ ์ˆ˜ํ‰์œผ๋กœ ๋ฐฐ์น˜ํ•˜๋ฉฐ, ํ™”๋ฉด ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“ค๋ฉด..