๐Ÿ‘€ ํŒ€ํ”„๋กœ์ ํŠธ ํšŒ๊ณ 

๋ฆผ๋ฏผ์ง€ยท2025๋…„ 2์›” 21์ผ

Today I Learn

๋ชฉ๋ก ๋ณด๊ธฐ
8/62

๐Ÿ—“๏ธ 2025.02.21

๋„ˆ๋ฌด๋‚˜๋„ ์งง์€ 3์ผ ๊ฐ„์˜ ํŒ€ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚ฌ๋‹ค.

๋น„๋ก 3์ผ์ด์ง€๋งŒ ๋…ธ์…˜์œผ๋กœ ์ผ์ •๊ด€๋ฆฌ๋„ ํ–ˆ๊ณ 
๋งค์ผ ์˜ค์ „ ์˜คํ›„์— ์งง๊ฒŒ ์ง„ํ–‰์ƒํ™ฉ์„ ์ฒดํฌํ–ˆ๋‹ค.

ํŒ€์›๋ถ„๊ป˜ ppt ์ดˆ์•ˆ์„ ๋ฐ›์•„์„œ ๋””์ž์ธ์„ ๋งก์•˜๋Š”๋ฐ, ๋ฐœํ‘œ ์ž๋ฃŒ๊นŒ์ง€ ์™„์„ฑํ•˜๊ณ  ๋‚˜๋‹ˆ ์ •๋ง ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚ฌ๊ตฌ๋‚˜ ์‹ค๊ฐ์ด ๋‚ฌ๋‹ค.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ์•„์‰ฌ์› ๋˜ ์ ์ด ๋ช‡๊ฐ€์ง€ ์žˆ์—ˆ๋‹ค.

๐Ÿฅน ์•„์‰ฌ์› ๋˜ ์  Problem

1. ๋‚ด๊ฐ€ ์•„์ง ์‹ค๋ ฅ์ด ๋ถ€์กฑํ–ˆ๋˜ ์ 
: ๋งŒ์•ฝ ์ข€ ๋” firestore๋‚˜ js๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฒ•์„ ์ข€ ๋” ์ž˜ ์•Œ์•˜๋”๋ผ๋ฉด ํŒ€์›๋ถ„๋“ค๊ป˜ ๋” ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๊ณ , ๋” ๋น ๋ฅด๊ณ  ์ข‹์€ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์—ˆ์„ํ…๋ฐ ์•„์‰ฌ์› ๋‹ค

2. github ๊ด€๋ฆฌ(ํŒŒ์ผ ๊ด€๋ฆฌ)๋ฅผ ์ œ๋Œ€๋กœ ํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ
: ๋ฏธ๋ฆฌ ํŒŒ์ผ ๊ตฌ์กฐ๋ฅผ ๋‹ค ์งœ๋‘๊ณ  ์‹œ์ž‘ํ–ˆ์œผ๋ฉด ์ข€ ๋” ์†Œํ†ต๋„ ์ž˜๋˜์—ˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋˜ ๋งˆ์ง€๋ง‰์— ํŒŒ์ผ ๊ตฌ์กฐ๋ฅผ ์ •๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ง‰ ๋’ค์—Ž์—ˆ๋Š”๋ฐ ๋ฏธ๋ฆฌ ํ•ด๋‘˜๊ป„ ํ–ˆ๋‹คใ… ใ… 

3. wireframe์„ ๋” ์ž์„ธํžˆ ๋งŒ๋“ค์ง€ ๋ชปํ•œ์ 
: 3์ผ์ด๋ผ๋Š” ์งง์€ ์‹œ๊ฐ„์ด์–ด์„œ ์ž์„ธํ•˜๊ฒŒ(๋ช‡ ํ”ฝ์…€, ๊ฐญ, ๋งˆ์ง„ ๋“ฑ๋“ฑ) ํ”ผ๊ทธ๋งˆ์— ํ‘œํ˜„ํ•˜์ง€ ๋ชปํ–ˆ๋˜๊ฒŒ ์•„์‰ฝ๋‹ค.
์ข€ ๋” ์ž์„ธํžˆ ํ‘œํ˜„ํ•ด๋‘์—ˆ๋”๋ผ๋ฉด ํŒ€์›๋“ค๋„ css์— ๋Œ€ํ•ด ์„œ๋กœ ๋ฌผ์–ด๋ณผ ํ•„์š” ์—†์ด ์ง„ํ–‰ํ• ์ˆ˜ ์žˆ์—ˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค.

4. ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ์„ ์ž์„ธํžˆ ์ ์ง€ ๋ชปํ•œ ์ 

5. ๊ธฐ๋Šฅ ๊ตฌํ˜„์˜ ์•„์‰ฌ์šด ์ 
(1) update & delete ๊ตฌํ˜„ ์•ˆํ•œ ๊ฒƒ.
โ†’ ํŒ”๋กœ์ž‰์ด๋‚˜ ๊ฒŒ์‹œ๊ธ€ ์ˆ˜์ •์„ ๋ชปํ–ˆ๋‹ค.
(2) ๊ฐœ์ธ ์ƒ์„ธ ํŽ˜์ด์ง€ ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๋ถˆ๋Ÿฌ์˜ค์ง€ ๋ชปํ•œ ๊ฒƒ
(3) ๊ฐœ์ธ ํŽ˜์ด์ง€๋ฅผ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ๊ด€๋ฆฌํ•˜์ง€ ๋ชปํ•œ๊ฒƒ


๐Ÿ˜Ž ์ข‹์•˜๋˜ ์  Keep

1. ํŒ€์›๋ถ„๋“ค๊ณผ ์†Œํ†ต์ด ์ž˜ ๋๋˜ ์ 
: ํŒ€์›๋ถ„๋“ค๊ณผ ๋น„๋Œ€๋ฉด์ด๊ธดํ–ˆ์ง€๋งŒ 9์‹œ๋ถ€ํ„ฐ 9์‹œ๊นŒ์ง€ ๊ณ„์† ์ƒํ™ฉ๋„ ๊ณต์œ ํ•˜๊ณ  ์„œ๋กœ์„œ๋กœ ๋„์™€์ฃผ๋‹ค๋ณด๋‹ˆ ๋น ๋ฅด๊ฒŒ ๋ฐœ์ „ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๋А๋‚Œ์„ ๋ฐ›์•˜๋‹ค. ๋˜ํ•œ ๊ฐ•์˜๋กœ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋„ ์ข‹์ง€๋งŒ, ๋‚ด๊ฐ€ ์•„๋Š” ๋‚ด์šฉ์„ ํŒ€์›์—๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ๊ณผ์ •์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด ํ›จ์”ฌ!! ๋งŽ์•˜๋˜ ๊ฒƒ ๊ฐ™์•„ ์•Œ์ฐฌ ์‹œ๊ฐ„์ด์—ˆ๋‹ค

2. โœจ ๊ฐ•์˜๋กœ ๋ฐฐ์šด ๋‚ด์šฉ์„ ๋ฐ”๋กœ ์ ์šฉํ•ด๋ณธ ๊ฒƒ
: ๊ฐ•์˜๋กœ ์›น ๊ฐœ๋ฐœ์˜ ์ „๋ฐ˜๊ณผ firestore ํ™œ์šฉ๋ฒ•์„ ๋ฐฐ์› ์—ˆ๋Š”๋ฐ, ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋๋‚˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๋ฐ”๋กœ ๊ฐœ๋ฐœ์— ํˆฌ์ž…๋˜๋‹ˆ ์ฒดํ™”ํ•  ์ˆ˜ ์žˆ์–ด ๋„ˆ๋ฌด๋„ˆ๋ฌด ์ข‹์•˜๋‹ค๐Ÿ’ช

3. ๋‹ค๋ฅธ ํŒ€๋“ค์˜ ๋ฐœํ‘œ๋ฅผ ๋ณด๊ณ  ์ž๊ทน ๋ฐ›์€ ์ 
: ๋‹ค๋ฅธ ํŒ€๋“ค์˜ ๋ฐœํ‘œ๋„ ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ, ์ด๋•Œ ์šฐ๋ฆฌ ํŒ€์ด ์ƒ๊ฐํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ ํƒ€ ํŒ€๋“ค์„ ๋ณด๊ณ  ์ข‹์€ ์˜ํ–ฅ๊ณผ ์ž๊ทน์„ ๋ฐ›์•˜๋‹ค!


๐Ÿ”ฎ ๋‹ค์Œ์—๋Š” ๊ผญ ์‹œ๋„ํ•ด๋ณผ ์  Try

1๏ธโƒฃ github์˜ ํŒŒ์ผ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๊ณ  ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด๊ฐ€๊ธฐ (branch๋„!)
2๏ธโƒฃ ํŒ€์›๋“ค๊ณผ ์กฐ๊ธˆ ๋” ์ง„ํ–‰์ƒํ™ฉ์„ ํ™œ๋ฐœํžˆ ๊ณต์œ ํ•  ๊ฒƒ
3๏ธโƒฃ figma ๊ธฐ๋Šฅ ์ค‘, wireframe ๋งŒ๋“œ๋Š” ๊ธฐ๋Šฅ์„ ๊ณต๋ถ€ํ•ด ๋” ์ž์„ธํ•œ wireframe์„ ํŒ€์›์—๊ฒŒ ์ œ๊ณตํ•  ๊ฒƒ (์ž์„ธํ•œ ๊ธฐ๋Šฅ๊นŒ์ง€ ๋‹ด์•„์„œ)
4๏ธโƒฃ ๋ฐฐํฌ๋ฅผ ๊ณ ๋ คํ•ด, ๊ฒฝ๋กœ๊ฐ€ ํ‹€์–ด์ง€๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ผญ!! ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ์„ค์ •ํ•˜๊ธฐ

0๊ฐœ์˜ ๋Œ“๊ธ€