๐ ๋ฐฐํฌ URL : https://ppoppimarket.web.app
๐ค '๋ฝ์๋ฝ์'๋ ์ ํฌ ํ์ด๋ฆ์ธ '4P(๋ฝํผ)'์ ์ฌ๋๋ค์ด ํํ ์ด๋ฆ์ง๋ ๊ฐ์์ง ์ด๋ฆ์ธ '๋ฝ์'์ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๐ก ๋ฝ์๋ฝ์๋ ๋ฐ๋ ค๋๋ฌผ์ ํค์ฐ๋ ๋ฐ๋ ค์ธ๋ค์ ๊ณ ๋ฏผ๊ณผ ๊ณต๊ฐ, ๊ฟํ์ ๋๋ ์ ์๋ SNS์ ๋ง์ผ ์๋น์ค๋ฅผ ์ ๊ณตํฉ๋๋ค.
๐ถ ์๋น์ค ์ฌ์ฉ์๋ค์ ํฌ์คํ
๊ธฐ๋ฅ์ ํตํด ์ฌ์ง๊ณผ ๊ธ์ ๊ธฐ๋กํ๋ฉฐ ๋ฐ๋ ค๋๋ฌผ์ ๊ท์ฝ๊ณ ๊น์ฐํ ์ผ์์ ๊ณต์ ํ ์ ์์ต๋๋ค.
๐ท ๋ค๋ฅธ ์ฌ์ฉ์๋ฅผ ํ๋ก์ฐํ๋ฉด ํผ๋์์ ์๋ก์ ๊ฒ์๋ฌผ์ ๋ณผ ์ ์๊ณ ์ข์์์ ๋๊ธ์ ํตํด ์ํตํ ์ ์์ต๋๋ค.
๐ฑ ๋๋ํ๊ณ ์ถ๊ฑฐ๋ ํ๋งคํ๊ณ ์ถ์ ๋ฌผ๊ฑด์ด ์๋ค๋ฉด ์ํ ํ๋งค๋ฅผ ๋ฑ๋กํ๊ณ ๋ณธ์ธ์ SNS์ ๋ฐ๋ก ํ๋ณดํ ์ ์์ต๋๋ค.
๐น ๋ค๋ฅธ ์ฌ์ฉ์๋ค๊ณผ ์ฑํ
์ ํตํด ๋ํ๋ฅผ ํ ์ ์์ต๋๋ค. ๋ํ ์ฑํ
์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์์ต๋๋ค.
๐ฐ ๋ฐ๋ ค๋๋ฌผ์ ํค์ฐ๋ ๋ฐ๋ ค์ธ์ด ์๋๋๋ผ๋ ํ๋ซํผ์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉ ํ๊ณ ํด๋น ํ๋ซํผ์ ์ฆ๊ธธ ์ ์์ต๋๋ค.
FE ๊น์ธํ | FE ๋ฐ์ํ | FE ์ด์๋น | FE ์ํ์ง |
---|---|---|---|
![]() |
![]() |
![]() |
|
blog: for-it-study github: Hun-Se |
blog: doridori-samsam github: Sohyun Park |
blog: waterbin.log github: Subin Lee |
blog: usablepaper.log github: Hyeonji Lim |
๐ FrontEnd: React, SASS
๐ BackEnd: ์ ๊ณต๋ API ์ฌ์ฉ
๐ Version:
react: `18.2.0`
react-router-dom: `6.3.0`
node-sass: `7.0.1`
scss-reset: `1.2.2`
axios: `0.27.2`
๐ GitHub : ๋ฝ์๋ฝ์ GitHub | ๋ฝ์๋ฝ์ Project Log | GitHub ์ ๋ต
๐ WorkPlace: ๋ฝ์๋ฝ์ Notion
๐ Design : ๋ฝ์๋ฝ์ Figma
๐ Conference: GatherTown | Discord | ํ์๋ก
- Coding Convention: ์ฝ๋ฉ ์ปจ๋ฒค์
-
๐ ๊ณ์
- ๋ก๊ทธ์ธ / ๋ก๊ทธ์์
- ํ์๊ฐ์
- ํ์ ์ ๋ณด ์์
- ์ ํจ์ฑ ๊ฒ์ฆ
- ํ ํฐ ๊ฒ์ฆ
-
๐ ํผ๋
- ์ ์ ๊ฒ์
- ํฌ์คํธ ๋ชฉ๋ก
- ๋ฌดํ ์คํฌ๋กค / ํ๋ฉด ์ต์๋จ ์ด๋
-
๐ฅ ํ๋กํ
- ํ๋ก์ฐ / ์ธํ๋ก์ฐ
- ํฌ์คํธ ๋ฑ๋ก / ์์ / ์ญ์ / ์ ๊ณ
-
๐ ํฌ์คํธ
- ๋ค์ค ์ด๋ฏธ์ง ํ์ผ ์ ๋ก๋ / ์์ / ๋ฏธ๋ฆฌ๋ณด๊ธฐ
- ํฌ์คํธ ์จ๋ฒ๋ทฐ / ๋ฆฌ์คํธ๋ทฐ
- ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
- ์ข์์
-
๐ฌ ๋๊ธ
- ๋๊ธ ์์ฑ / ์ญ์ / ์ ๊ณ
- ๋๊ธ ์๊ฐ ๋ณด๊ธฐ
-
๐ ์ํ
- ์ํ ๋ชฉ๋ก / ๋ฑ๋ก / ์์ / ์ญ์ / ์ ๊ณ
- ์ด๋ฏธ์ง ํ์ผ ์ ๋ก๋ / ์์ / ๋ฏธ๋ฆฌ๋ณด๊ธฐ
- ์ ํจ์ฑ ํ๊ฐ
- ์์ ํํฉ๊ด๋ฆฌ ๋ฆฌ๋
- ๋ฉ์ธ๋ณด๋ ๊ด๋ฆฌ
- Splash ํ์ด์ง, ๋ก๊ทธ์ธํ์ด์ง , ํ๋กํ ์์ ํ์ด์ง, ์ํ๋ฑ๋ก ํ์ด์ง, ๊ฒ์๋ฌผ๋ฑ๋ก ํ์ด์ง
- Splash ํ์ด์ง
- ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฐฉ์์ ์ฌ์ฉํ์ฌ Splash ํ๋ฉด ๊ตฌํ
- sessionstorage ์ฌ์ฉํ์ฌ ์ํ๊ด๋ฆฌ
- ์ํ๋ ๊ณณ์ ์ฌ์ฉ ํ ์ ์๋๋ก ์ปดํฌ๋ํธํ
- ๋ด ํ๋กํ ์์ ํ์ด์ง
- ๊ธฐ์กด ํ๋กตํ ๋ฐ์ดํฐ ์ ์ง ๊ธฐ๋ฅ ๊ตฌํ
- ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ์ ์ฅ ๋ฒํผ ํ์ฑํ ๊ธฐ๋ฅ
- FormDate ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ์ ๋ก๋ ๋ฐ ํ๋ฆฌ๋ทฐ ๊ธฐ๋ฅ ๊ตฌํ
- ํ๋จ ํญ ๋ฉ๋ด
- ํํผ๋ ํ์ด์ง ๊ฒฝ๋ก์ ํด๋นํ๋ ํ๋จํญ ํ์ฑํ ๊ธฐ๋ฅ
- ์ํ๋ฑ๋ก ํ์ด์ง
- ๊ฐ๊ฒฉ ์ ๋ ฅ ์ ์ฒ ๋จ์๋ก ,(์ฝค๋ง) ์๋ ์ ๋ ฅ ๋ฐ ์ญ์ ๊ธฐ๋ฅ
- FormDate์ FileReader ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ์ ๋ก๋ ๋ฐ ํ๋ฆฌ๋ทฐ ๊ธฐ๋ฅ ๊ตฌํ
- ์ ํจ์ฑ ๊ฒ์ฌ ํต๊ณผ์ ์ ์ฅ ๋ฒํผ ํ์ฑํ
- UserContext, Provider ์ฝ๋ ๋ฆฌํํ ๋ง
- ๋ฆฌ๋๋ฏธ ์์ฑ
- ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ์ ์ฉ
- ์ฝ๋ ๋ฆฌ๋
- ํ์๋ค์ ์ฝ๋๋ฅผ ๋ฆฌ๋ทฐํ๊ณ ๋ ์ข์ ๊ฒฐ๊ณผ๋ฅผ ์ํ ํผ๋๋ฐฑ ๊ตํ.
- ์ฌ์ฌ์ฉ์ฑ ๋์ ์ ์ ํ๋กํ ์ ๋ณด ์ปดํฌ๋ํธํ
- ์ด๋ฉ์ผ ํ์๊ฐ์ , ํ๋กํ ์ค์ , ์ด๋์ ํผ๋, ์ ์ ๊ฒ์ ํ์ด์ง ๋ฐ ๊ฒ์๊ฒฐ๊ณผ, ํฌ์คํธ ์์ธ๋ณด๊ธฐ ๋๊ธ ํ์ด์ง
- ์ ์ ํ๋กํ,๋๋ค์,๊ณ์ ์ด๋ฆ ์ปดํฌ๋ํธ, ํ์ด์ง ํค๋ ์ปดํฌ๋ํธ, ๋ค๋ก๊ฐ๊ธฐ/๊ฒ์/์ข์์/์ ์ฅ/๋ ๋ณด๊ธฐ/๋ก๊ทธ์ธ ๋ฒํผ ์ปดํฌ๋ํธ
- ํ์ด์ง ํค๋
- ํค๋ ๋ฒํผ์ ํตํ ํ์ด์ง ๋ค๋ก๊ฐ๊ธฐ ๊ธฐ๋ฅ ๊ตฌํ
- ํค๋์ ๊ฒ์ ๋ฒํผ์ ํตํ ์ ์ ๊ฒ์ ํ์ด์ง ์ด๋
- ์ ์ ๊ฒ์ ํ์ด์ง
- ์ฌ์ฉ์ ์ ๋ ฅ๊ฐ์ด ๋ฐ๋ ๋ ๋ง๋ค ์ ๋ ฅ๊ฐ๊ณผ ์ผ์นํ๋ ์ ์ ๊ฒ์ ๊ฒฐ๊ณผ ๊ตฌํ
- ๋ฑ๋ก๋ ์ฌ์ฉ์ ํ๋กํ ์ด๋ฏธ์ง ๋ ๋๋ง ์ค๋ฅ ์์ธ์ฒ๋ฆฌ
- ๊ฒ์๋ ์ฌ์ฉ์ ํด๋ฆญ ์ ํด๋น ์ฌ์ฉ์์ ํ๋กํ๋ก ์ด๋ํ๋ ๋งํฌ ๊ตฌํ
- ๊ฒ์๋ฌผ ์
๋ก๋ ํ์ด์ง
- ์ฌ์ฉ์ ์ ๋ ฅ ํ ์คํธ์ ์ด๋ฏธ์ง ํ์ผ ํฌ์คํธ ๊ธฐ๋ฅ ๊ตฌํ
- ํ ์คํธ ์ ๋ ฅ๊ฐ๊ณผ ์ ๋ก๋ ํ ์ด๋ฏธ์ง ํ์ผ ๋ฐ์ดํฐ๊ฐ ์์ ์ ํฌ์คํธ ๊ธฐ๋ฅ ๋นํ์ฑํ ๊ตฌํ
- ์ด๋ฏธ์ง ํ์ผ 3๊ฐ ์ด๊ณผ ์ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ alert ๊ตฌํ
- ํฌ์คํธ ํ ์ด๋ฏธ์ง ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ์์ ์ญ์ ๊ธฐ๋ฅ ๊ตฌํ
- ์ฌ์ฉ์ ํ๋กํ ํ์ด์ง
- ์ฌ์ฉ์์ ํ์ฌ ํ๋งค์ค์ธ ์ํ ๋ชฉ๋ก ๊ตฌํ
- ์ ๊ทํํ์์ ์ฌ์ฉํ์ฌ ์ํ ๊ฐ๊ฒฉ ํ์
- ์ข์์ ๊ธฐ๋ฅ
- ์ฌ์ฉ์์ ๊ฒ์๊ธ์ ํํธ ๋ฒํผ ํด๋ฆญ์ ํตํ ์ข์์ ๋ฐ ์ข์์ ์ทจ์ ๊ธฐ๋ฅ ๊ตฌํ
- ํ๋ก์ ํธ ์์ ๋งค๋์ง์ ์ํ ๊ณต์ ๋ ธ์ ํ์ด์ง ์์ฑ ๋ฐ ๊ฐ์ด๋ ๋ผ์ธ ์ ๊ณต
- ํด๋ํธ๋ฆฌ ๋ฐ ๊ธฐ๋ณธ ํ์ผ ๊ตฌ์ฑ์ ํฌํจํ ํ๋ก์ ํธ ๊ธฐ์ด ์์
- IR ๊ธฐ๋ฒ์ ํฌํจํ ์ ์ญ์ ์ฌ์ฉ๋๋ ์คํ์ผ ๋ณ์์ reset ์คํ์ผ์ ์ํ Sass(SCSS) ์ธํ
- ์ปจ๋ฒค์ ๋ฐ Git ์ปค๋ฐ ๋ฉ์ธ์ง ์ปจ๋ฒค์ ์ค์
- ํ๋ก์ ํธ ๊ธฐ๋ฅ ํํธ ๋ณ Branch๋ช ์ค์
- ์ปค๋ฎค๋์ผ์ด์ ๋ฆฌ๋
- ๊นํ Project Board ๊ด๋ฆฌ
- ์์ ์ ๋ํ ์ง์ฒ๋๋ฅผ ๊ฐ์์ ์ผ๋ก ํ์ํ๋ฉฐ ํ์ ๋ฅ๋ ฅ ์์น
- ํ์๋ก ์์ฑ ๋ฐ ํ ๋ ธ์ ์ ๋ฆฌ
- ํ์๋ค ๊ฐ์ ์ํํ ์ํต ํ๊ฒฝ ์ ๊ณต
- ๊ฒ๋ํ์ด ํ์ฉํ์ฌ ํ์๋ค๊ฐ ์ ๋๊ฐ ํ์ฑ
- ๋์ค์ฝ๋ '์ค๋ ํ ์ผ' ๊ฒ์ํ ์ด์(์๋ก์ ์งํ ์ํฉ, ํด์ผํ ์ผ ๊ณต์ , ์์ ํ๋ง๋)
- ๋ชจ๋ฌ์ฐฝ, ํ์ ์ฐฝ, ํ๋ก์, ํ๋ก์ ๋ชฉ๋ก, ์ฑํ ๋ชฉ๋ก, ์ฑํ ๋ฃธ, ์๋ฌํ์ด์ง UI ๊ตฌํ
- ํ ๋ก๊ณ ์ด๋ฏธ์ง์ ์ปฌ๋ฌ ์ ์ฉํ์ฌ ํผ๊ทธ๋ง ์์
-
๋ก๊ทธ์ธ ํ์ด์ง (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ๋ก๊ทธ์ธ ์ ํจ์ฑ ๊ฒ์ฌ
- ์ ๊ทํํ์์ผ๋ก ์ด๋ฉ์ผ ํํ ๋ฐ ๋น๋ฐ๋ฒํธ ์ ํจ์ฑ ๊ฒ์ฆ
- ์๋ฒ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ์๊ฐ์ ๋ ์ ๋ณด์ธ์ง ํ์ธ
- ํ์ ์ ๋ณด ๋ฐ์ดํฐ ์กด์ฌ ์ ๋ก๊ทธ์ธ ๋๊ฒ๋ ๊ตฌํ
-
์ํ๋ฑ๋ก ํ์ด์ง (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ์ํ ๋ฑ๋ก ํฌ์คํธ ์ ๋ก๋ ๊ตฌํ
- ์ ์ ๊ฐ ๋ฑ๋กํ ์น์ฌ์ดํธ๋ก ์ด๋๋๋๋ก ๊ตฌํ
- ์ ๊ทํํ์์ผ๋ก ์น์ฌ์ดํธ ์ฃผ์ ์ ํจ์ฑ ๊ฒ์ฆ
- ์ฒ๋ง ๋จ์ ์ด์์ ๊ฐ๊ฒฉ์ ์ ๋ ฅ ์ ๊ฒฝ๊ณ ํ์
- ์ด๋ฏธ์ง๋ฅผ ํฌํจํ ๋ชจ๋ ์ธํ ์ฐฝ ์ ๋ ฅ ์ ์ ๋ก๋ ๋ฒํผ ํ์ฑํ
-
์๋ฌ ํ์ด์ง
- ์๋ชป๋ ์ฃผ์ ์ ๋ ฅ ์ ์๋ฌํ์ด์ง๋ฅผ ๋์ฐ๋๋ก ๊ตฌํ
- ํ์ด์ง์ ๋ ๊ฐ์ง ๋ฒํผ(์ด์ ํ์ด์ง๋ก ์ด๋, ํ์ผ๋ก ์ด๋)์ ๋ง๋ค์ด ์ฌ์ฉ์์ ํ์ด์ง ์ด๋ ํธ์์ฑ ๊ณ ๋ ค
-
๋ชจ๋ฌ/์๋ฆผ์ฐฝ
- React portal ๋ก ๋ชจ๋ฌ์ฐฝ ๊ตฌํ
- ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํ๋ฉด ํ๋จ์ ๋ชจ๋ฌ์ฐฝ์ด ๋ํ๋๊ณ , ๋ฒํผ์ ํด๋ฆญํ์ ๋ ์๋ฆผ์ฐฝ์ด ๋จ๋๋ก ๊ตฌํ
- Account ์ ๋ฐ๋ผ ํ์ด์ง ๋ณ๋ก ๋ค๋ฅธ ๋ชจ๋ฌ์ฐฝ ํ๋ฉด ๊ตฌํ
- ๋ชจ๋ฌ์ฐฝ, ํ์ ์ฐฝ ๋ด ๋ชจ๋ ๊ธฐ๋ฅ ๊ตฌํ ( ๋ก๊ทธ์์, ์ญ์ , ์ ๊ณ , ์์ , ํ์ด์ง ์ด๋ - API ๋ช ์ธ์ ๋ฐ๋ฆ )
- ๋ก๊ทธ์์ ๊ธฐ๋ฅ
- localStorage ๋ด ์ ์ฅ๋ ์ ์ token clear
- ์ญ์ ๊ธฐ๋ฅ
- ์์ฑํ ๊ฒ์๊ธ, ์ํ, ๋๊ธ ์ญ์ ๊ธฐ๋ฅ ๊ตฌํ
- ์ญ์ ํ ํ์ด์ง๊ฐ ์ค์๊ฐ ์ ๋ฐ์ดํธ ๋๊ฒ๋ ๊ตฌํ
- ์ ๊ณ ๊ธฐ๋ฅ
- ๋ค๋ฅธ ์ ์ ์ ๊ฒ์๊ธ, ์ํ, ๋๊ธ ์ ๊ณ ๊ธฐ๋ฅ ๊ตฌํ
- ์ ๊ณ ๊ฐ ์๋ฃ๋๋ฉด ๊ฐ์์ ์ผ๋ก ํ์ธํ ์ ์๊ฒ๋ alert ์ฐฝ์ ๋์ฐ๋๋ก ๊ตฌํ
- ์์ ๊ธฐ๋ฅ
- ๊ฒ์๊ธ, ์ํ ์์ ๊ธฐ๋ฅ ๊ตฌํ
- ์๋ฒ์ ์ ์ฅ๋์ด ์๋, ๊ธฐ์กด์ ์์ฑ๋ ๋ฐ์ดํฐ๋ฅผ ๊ทธ๋๋ก ๋ถ๋ฌ์ ์์ ํ ์ ์๋๋ก ๊ตฌํ
-
Custom Hook
- ์ฌ๋ฌ ํ์ด์ง์์ ์ฌ์ฉ๋๋ ์ฝ๋(์ญ์ , ์ ๊ณ )๋ custom hook์ ๋ง๋ค์ด ์ฌ์ฉ
- ์ปดํฌ๋ํธ ๋ก์ง์ ์ฌ์ฌ์ฉํ์ฌ ๋ฐ๋ณต์ ์ด๊ณ ๋ถํ์ํ ์ฝ๋๋ฅผ ์ค์
- ๋ ๋น ๋ฅธ ์ฑ๋ฅ์ ๋์
-
ํ์ด์ง ์ง์ ์ ์ธํ์ฐฝ ํฌ์ปค์ค ๊ธฐ๋ฅ ๊ตฌํ
- ํด๋ฆญํ์ง ์์๋ input ์ฐฝ์ด ํ์ฑํ๋๊ฒ๋ UX ์ธก๋ฉด ๊ณ ๋ คํ์ฌ ๊ตฌํ
- ์ฝ๋ ๋ฆฌ๋
- ์ง์ ๊ฐ๋ฅํ ํต์ผ๋ ์น์ฌ์ดํธ๋ฅผ ์ํ ์ค๊ณ ๋ฐ ๊ฐ์ด๋๋ผ์ธ ์ ๊ณต
- ์ปจ๋ฒค์ , ํด๋ํธ๋ฆฌ, ์ปดํฌ๋ํธ ์ค๊ณ
- ์๋น์ค ์ ์ฒด ๋ผ์ฐํ ์ค๊ณ / ๊ตฌ์ถ ๋ฐ ์์ธ ์ฒ๋ฆฌ
- git branch ์ฌ์ฉ ๊ฐ์ด๋ ๋ผ์ธ ์ ๊ณต
- ์ ๋ฐ์ ์ธ ์น์ฌ์ดํธ ๊ฐ๋ฐ ๊ด๋ฆฌ
- ์ฃผ๊ธฐ์ ์ธ ์ฝ๋ ๋ฆฌ๋ทฐ / ๊ฐ์ ์ ์ ์
- ๊ธฐ๋ฅ ๊ตฌํ ์ญํ ๋ฐฐ๋ถ ๋ฐ ์ผ์ ์กฐ์จ
- ํ ํผ๋ ํ์ด์ง, ํ๋กํ ํ์ด์ง, ํฌ์คํธ ์ปดํฌ๋ํธ UI ๊ตฌํ
- ์น์ฌ์ดํธ ๋ก๊ณ ๋์์ธ, ํ์ด์ง ๋ด ๊ธฐ๋ณธ ์ด๋ฏธ์ง ์ ์
- CSS keyframes ๋ฅผ ํ์ฉํ ์คํ๋์ ์ ๋๋ฉ์ด์ ๊ตฌํ
- ํ์๊ฐ์
ํ์ด์ง
- ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ input ๋ฐ์ดํฐ๋ฅผ state๋ก ๊ด๋ฆฌํ์ฌ API ๋ช ์ธ์ ๋ง๊ฒ ํ๋ฒ์ ์ ๋ฌํ๋ ๊ธฐ๋ฅ ๊ตฌํ
- ํ์๊ฐ์
์ ๋ณด ์ ํจ์ฑ ๊ฒ์ฆ
- ๊ณ์ / ์ด๋ฉ์ผ ์ค๋ณต ๊ฒ์ฆ ๊ธฐ๋ฅ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ์ ๊ทํํ์์ผ๋ก ํํ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฆ
- ์ ํจ์ฑ ๊ฒ์ฆ์ ํต๊ณผํ์ง ๋ชป ํ ๊ฒฝ์ฐ ๋ฒํผ ๋นํ์ฑํ ๋ฐ ๊ฒฝ๊ณ ๋ฉ์ธ์ง ๋ก๋
- ํ๋กํ ์ฌ์ง ์ฒจ๋ถ ๋ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋ฅ ๊ตฌํ
- ํ์๊ฐ์ ์ ๋ก๊ทธ์ธ ์ํ ์ ํ ๊ธฐ๋ฅ ๊ตฌํํ์ฌ ์ฌ์ฉ์ฑ ๊ฐ์
- ํ ํผ๋ ํ์ด์ง
- ํผ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ ๊ธฐ๋ฅ ๊ตฌํ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ๋ก๊ทธ์ธ ์ฌ๋ถ์ ๋ฐ๋ฅธ ํ์ด์ง ๋ก๋ ๊ธฐ๋ฅ ๊ตฌํ
- ๋ก๊ทธ์์ ์ํ์ผ ๋ ๋ก๊ทธ์ธ ํ์ด์ง๊ฐ ๋ณด์ด๋๋ก / ๋ก๊ทธ์ธ ์ํ์ผ ๋ ํผ๋ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋๋ก ๊ตฌํ
- ์๊ฐ ๊ณ์ฐ ๋ก์ง์ ์ฌ์ฉํ์ฌ ๊ฒ์๋ฌผ ๋ฐ ๋๊ธ ์ ๋ก๋ ์๊ฐ UI ๊ฐ์
- ํ๋กํ ํ์ด์ง
- ์ ์ ์ ๋ณด ๋ฐ ํฌ์คํธ ๋ชฉ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ ๊ธฐ๋ฅ ๊ตฌํ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ํฌ์คํธ ๋ชฉ๋ก์ ๋ ์ด์์์ ๋ฆฌ์คํธ ํ์ / ์จ๋ฒ ํ์์ผ๋ก ์ ํํด ๋ณผ ์ ์๋ ๊ธฐ๋ฅ ๊ตฌํ
- ๋งํฌ ์ง์ ๊ณต์ ์ ๊ฐ์ ์ํฉ์์๋ ๋ชจ๋ ์ ์ ์ ํ๋กํ ํ์ด์ง์ ์ ์์ ์ผ๋ก url๋ก ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก useParams์ ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ์์ฒญ ๊ธฐ๋ฅ ๊ตฌํ ๋ฐ ์ฌ์ฉ์ฑ ๊ฐ์
- ํ๋ก์ฐ / ํ๋ก์ ํ์ด์ง
- ํ๋ก์ฐ / ํ๋ก์ ๋ชฉ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ ๊ธฐ๋ฅ ๊ตฌํ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ํ๋ก์ฐ / ์ธํ๋ก์ฐ ๊ธฐ๋ฅ ๊ตฌํ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ํฌ์คํธ ์์ธํ์ด์ง
- ํฌ์คํธ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ ๊ธฐ๋ฅ ๊ตฌํ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ๋๊ธ ๋ชฉ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ ๊ธฐ๋ฅ ๊ตฌํ (API ๋ช ์ธ์ ๋ฐ๋ฆ)
- ๋๊ธ ์์ฑ ๊ธฐ๋ฅ ๋ฐ ์ค์๊ฐ ์ ๋ฐ์ดํธ ๊ธฐ๋ฅ ๊ตฌํ
- ๋ฌดํ์คํฌ๋กค ๊ธฐ๋ฅ ๊ตฌํํ์ฌ ์น ์ต์ ํ ๋ฐ ์ฌ์ฉ์ฑ ๊ฐ์ (ํผ๋, ๋๊ธ, ํ๋ก์ฐ ํ์ด์ง)
- ์คํฌ๋กค์ด ์์ฑ๋๋ฉด, ๊ทธ ๋ค์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋๋ก ๊ตฌํ
- ์ถ๊ฐ ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ์ปจํ ์ด๋์ ๋ฆฌ์คํธ์ ๋๋๋ก ์คํ๋ ๋ ๋ฌธ๋ฒ ์ฌ์ฉํ์ฌ ๊ตฌํ
- ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉ๋๋ ์ด๋ฏธ์ง ์์ธ์ฒ๋ฆฌ ๋ก์ง์ custom hook์ ๋ง๋ค์ด ๋ถํ์ํ ์ค๋ณต ์ฝ๋ ์ ๊ฑฐ
- ์ ์ญ์์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ useContext ๊ฐ์ฒด๋ก ๊ด๋ฆฌํ์ฌ ํ์ด์ง ์ด๋ ์์๋ ์๋ฒ์ ๋ถํ์ํ ๋ฐ์ดํฐ ์์ฒญํ์ง ์๋๋ก ๊ตฌํ
- API ํต์ ์ค pending status๋ฅผ ๊ฐ์งํ์ฌ ๋ก๋ฉ์ค ์ํ์์ ํ์ํ๋ ๊ธฐ๋ฅ ์ถ๊ฐ ๋ฐ ์ฌ์ฉ์ฑ ๊ฐ์
- token ๊ฒ์ฆ ๊ธฐ๋ฅ ๊ตฌํ(API ๋ช ์ธ์ ๋ฐ๋ฆ)
- token์ด ์ ํจํ์ง ์๊ฑฐ๋ ์๋ ๊ฒฝ์ฐ ์ ๊ทผ ์ฐจ๋จ ๊ธฐ๋ฅ ๊ตฌํ
- firebase ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ ๋ฐฐํฌ
0. Splash | 1. ํ์๊ฐ์ , ํ๋กํ ์ค์ |
---|---|
![]() |
![]() |
2. ๋ก๊ทธ์ธ | 3. ๋ก๊ทธ์์ |
---|---|
![]() |
![]() |
4. ํ ํผ๋ | 5. ๊ณ์ ๊ฒ์ |
---|---|
![]() |
![]() |
6. ๋ง์ด ํ๋กํ | 6-1. ๋ง์ด ํ๋กํ ์์ |
---|---|
![]() |
![]() |
7. ์ ์ ํ๋กํ | 7-1. ๋๊ธ ๋ฑ๋ก / ์ญ์ / ์ข์์ |
---|---|
![]() |
![]() |
9. ๊ฒ์๋ฌผ ๋ฑ๋ก | 9-1. ๊ฒ์๊ธ ์์ | 9-2. ๊ฒ์๊ธ ์ญ์ |
---|---|---|
![]() |
![]() |
![]() |
10. ์ํ ๋ฑ๋ก | 10-1. ์ํ ๋ฑ๋ก ์์ | 10-2. ์ํ ์ญ์ |
---|---|---|
![]() |
![]() |
![]() |
11. ํ๋ก์ / ํ๋ก์ฐ | 12. ์ฑํ | 13. ์ ๊ณ |
---|---|---|
![]() |
![]() |
![]() |
- ์ ์ญ์์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ useContext ๊ฐ์ฒด๋ก ๊ด๋ฆฌ
- ํ์ด์ง ์ด๋ ์ ์๋ฒ์ ๋ถํ์ํ ๋ฐ์ดํฐ ์์ฒญํ์ง ์๋๋ก ๊ตฌํ
- ์ญ์ , ์ ๊ณ , ์ด๋ฏธ์ง ์์ธ์ฒ๋ฆฌ ๋ก์ง custom hook ์์ฑ
- ๋ฐ๋ณต๋๋ ๋ก์ง์ ํฉ์ณ์ค์ผ๋ก์จ ๋ถํ์ํ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ณ ์ฌ์ฌ์ฉ์ฑ ๋์
- ๋ณ์ ์ ์ธ์ผ๋ก ์ ์ง๋ณด์ ํธ์์ฑ ํฅ์
- ์ ํ์ ์ค์ฒฉ ๊ธฐ๋ฅ์ผ๋ก ์ฝ๋์ ๊ฐ๋ ์ฑ ๋ฐ ์ ์ง๋ณด์ ํธ์์ฑ ํฅ์
- className
- ๋ณ์๋ช , ํจ์๋ช
- Import ์์
- ํ์ผ๋ช , ํด๋ํธ๋ฆฌ
- ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
- ๋ฌดํ ์คํฌ๋กค, ์คํฌ๋กค top ๋ฒํผ
- ๋ค๋ก๊ฐ๊ธฐ๋ก ์ ์ ๊ฒ์ํ์ด์ง ์ด๋ ์ ๊ฒ์ํ ๋ฐ์ดํฐ ์ ์ง ๊ธฐ๋ฅ
- ๋ก๋ฉ์ด๋ฏธ์ง
- ์ ์ฑ ์ฌ์ฉ์ ์์ธ์ฒ๋ฆฌ: ํ์์ ๋ง์ง ์๋ ๋ฐ์ดํฐ๋ก ํ์ด์ง์ ์ค๋ฅ๋ฅผ ์ผ์ผํค๊ฑฐ๋ UI๋ฅผ ํด์น๋ ์ฌ์ฉ์ ์์ธ์ฒ๋ฆฌ
- ๋ผ์ฐํฐ ์์ธ์ฒ๋ฆฌ: ์๋ชป๋ ๋ผ์ฐํฐ ๋ฐ ํ์์ ๋ง์ง ์๋ url ์์ธ ์ฒ๋ฆฌ
- ์๋ฌ์ด๋ฏธ์ง ์์ธ์ฒ๋ฆฌ: ์ด๋ฏธ์ง ํ์์ ๋ง์ง ์๊ฑฐ๋ ์ค๋ฅ๊ฐ ์๋ ์ด๋ฏธ์ง๋ ๋์ฒด ์ด๋ฏธ์ง ์ถ๋ ฅ
- ํ๋ก์ ํธ ์ด๊ธฐ ํด๋ํธ๋ฆฌ ๊ตฌ์กฐ ํ๋ฆฝ
- ์์ธํ ์ปจ๋ฒค์ ๊ท์น์ผ๋ก ์ผ๊ด์ฑ ์๋ ์์
- ๋น ๋ฅด๊ณ ์ ๊ทน์ ์ธ ํผ๋๋ฐฑ๊ณผ ์๊ตฌ์ฌํญ ์์ฒญ
๐ฆ src
โฃ๐ assets
โฃ๐ components
โ โฃ๐ button
โ โฃ๐ footer
โ โฃ๐ header
โ โฃ๐ modal
โ โ โฃ๐ alert
โ โ โ โฃ๐ alertBase
โ โ โ โ๐ alerts
โ โ โฃ๐ modalBase
โ โ โ๐ modals
โ โฃ๐ notFound
โ โฃ๐ post
โ โฃ๐ splash
โ โ โ๐ logo
โ โฃ๐ style
โ โ๐ user
โฃ๐ context
โฃ๐ hooks
โฃ๐ pages
โ โฃ๐ chatPage
โ โ โ๐ chatPageItem
โ โฃ๐ chatRoomPage
โ โ โ๐ chatRoomInput
โ โฃ๐ emailLoginPage
โ โฃ๐ followPage
โ โ โ๐ followList
โ โฃ๐ homePage
โ โ โ๐ initialFeed
โ โฃ๐ logInPage
โ โ โฃ๐ loginSection
โ โ โ๐ userAccount
โ โฃ๐ postDetailPage
โ โ โ๐ comment
โ โฃ๐ profileEditPage
โ โ โฃ๐ profileEditImg
โ โ โ๐ profileEditInfo
โ โฃ๐ profilePage
โ โ โฃ๐ userHeader
โ โ โฃ๐ userPost
โ โ โ๐ userProduct
โ โฃ๐ searchUserPage
โ โ โ๐ searchResult
โ โฃ๐ signUpPage
โ โ โฃ๐ emailSignUp
โ โ โ ๐ profileSet
โ โฃ๐ updatePostPage
โ โฃ๐ updateProductPage
โ โฃ๐ uploadPostPage
โ โ๐ uploadProductPage
โ โฃ๐ uploadProductImg
โ โ๐ uploadProductInput
โฃ๐ App.jsx
โฃ๐ App.scss
โ๐ index.js