๐ ์์ธ ํ์ด์ง ๊ตฌํ ์์งค
BODYLIKE project
์ด 5๋ช ์ด์ ๊ตฌ์ฑ๋ Team coner ( FE : 3, BE : 2 )์์
2์ฃผ๊ฐ ์ค๋ก์ง ํ์ต์ฉ์ผ๋ก bodylike๋ฅผ ๊ตฌํํ์ต๋๋ค.
๊ทธ ์ค ๋ก๊ทธ์ธ, ํ์๊ฐ์ ์ฐฝ / ์์ธ ํ์ด์ง๋ฅผ ๋งก์์ต๋๋ค.
์์ธ ํ์ด์ง ์ฐฝ
๊ตฌํํ ๊ธฐ๋ฅ
- ์ํ ์ ๋ณด ์ ๋ฆฌ๋ทฐ ๋ฒํผ ๋๋ฅด๋ฉด ํ๋จ ๋ฆฌ๋ทฐ๋ก ์ฌ๋ผ์ด๋
- ์ํ ์นด์ดํธ ์์๋ก ๋ด๋ ค๊ฐ ์, ์ฌ๊ณ ์ด์ ๋๋ฅผ ์ ์๋ฆผ์ฐฝ ๋ธ
- ์ํ ์นด์ดํธ ๋๋ฅธ ํ ์ฅ๋ฐ๊ตฌ๋ ํด๋ฆญ ์ ๋ก๊ทธ์ธ ๋์ด ์์ ์ ๋ชจ๋ฌ์ฐฝ ๋จ๋ฉด์ ์ฅ๋ฐ๊ตฌ๋/์ผํํ๊ธฐ ๋ฒํผ ๋ธ, ๋ก๊ทธ์ธ ์ ๋์ด ์์ ์ ์๋์ฐฝ ๋จ๋ฉฐ ๋ก๊ทธ์ธ ์ฐฝ์ผ๋ก ์ด๋
- ๋ชจ๋ฌ ์ฐฝ์์ ์ฅ๋ฐ๊ตฌ๋ ๊ฐ๊ธฐ ํด๋ฆญ์ ์ ํ์ด ์ฅ๋ฐ๊ตฌ๋์ ๋ด๊ธฐ๋ฉฐ ์ฅ๋ฐ๊ตฌ๋๋ก ์ด๋ (๋ชจ๋ฌ์ฐฝ ๊ตฌํ x)
์์ธ ํ์ด์ง๋ฅผ ๋ง๋ค๋ฉด์ ๊ฐ์ฅ ์ค์ํ๊ฒ ์๊ฐํ๋ ๊ฒ์
data๋ฅผ ๋ฐ์์ค๋ fetch ํจ์์๋ค
์ด 3๊ฐ์ fetch ํจ์๊ฐ ํ์ํ๋๋ฐ
์์ธ ์ ๋ณด๋ฅผ ๋ฐ์์ค๋ (๋์ ๋ฐ์ดํฐ ์ฌ์ฉ, method : GET) ํจ์์ ์ฅ๋ฐ๊ตฌ๋๋ก ๊ฐ๊ธฐ ๋ฒํผ๊ณผ ๊ตฌ๋งคํ๊ธฐ ๋ฒํผ์ ๋ค์ด๊ฐ ํจ์์๋ค
์ ํ ์์ธ ์ ๋ณด ๋ฐ๋ fetch ํจ์
์ด๋ ๊ฒ ์งฐ๋ค
params ๋ฅผ ์ด์ฉํด ์ ๋ณด๋ฅผ ๋ฐ๊ณ params.id๋ฅผ productId ๋ผ๋ ๋ณ์์ ๋ฃ์ด url ๋์ ๋ฃ์ด์ฃผ์๋ค
product ๋ฐ์ดํฐ๋ ๊ฐ์ฒด ์์ ๋ฐฐ์ด๋ก ์ค๊ธฐ ๋๋ฌธ์ useState์ ([]) ๋น ๋ฐฐ์ด์ ๋ฃ์ด ์ฃผ์๊ณ
๋ฐ์ดํฐ ํ์์ ๋ฐ๋ผ ๊ฐ๊ฐ name, thumbnail_image_url, price, detail, stock ์ ๊ตฌ์กฐ ๋ถํด ํ ๋นํด ๊ฐ๊ฐ ํ์ํ ๊ณณ์ ๋ฃ์๋ค
๐ ๋ฐ์ดํฐ ํ์, ์ฒ์์ ๋ชฉ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด ์ผ๋ค
์ฅ๋ฐ๊ตฌ๋ ๋ฒํผ / ๊ตฌ๋งคํ๊ธฐ ๋ฒํผ ๊ด๋ จ fetch
์ด๋ฐ์ ๊ตฌํํ์ ๋ ๋ก๊ทธ์ธ / ํ์๊ฐ์ ์ฐฝ๊ณผ ๊ฐ์ด merge ๋์ง ์์
๋ฐฑ์๋๋ถ๊ป ๋ฐ๋ก ํ ํฐ์ ๋ฐ๊ธ ๋ถํ๋๋ ค
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjYsImV4cCI6MTY2MTQ0MzI2NSwiaWF0IjoxNjYxMDgzMjY1fQ.KmF-Jp46fdHKwxS01SJ8PtF5yD1SkQP8rwQFA6tU9rQ"
๋ฅผ ๋ณ์์ ๋ด์ ์ผ์๋ค ๐
๊ทธ๋ก์ธํด ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ํ ํฐ์ด ์๋์ง ์๋์ง ํ๋ณํ๋ ๋ถ๋ถ์ ํต์ ์ด ๋ฆ์๋๋ฐ
์ด๋ Token ํค ๊ฐ์ ํ์ธํ์ง ์์์ ๊ธด ์๊ฐ ๊ณ ์์ ๋ง์ด ํ๋ค
๊ดํ ๋ก์ง ๋ค์ ์จ๋ณด๊ณ ๋ฏ์ด๊ณ ์น๊ณ ... ๋๋ถ์ fetch ํจ์๋ฅผ ์ ๋ง ์ค๋์๊ฐ ๋ค์ฌ๋ค๋ณด์๋ค
์ฅ๋ฐ๊ตฌ๋ / ๊ตฌ๋งคํ๊ธฐ fetch ํจ์ ๐
๐ token ๋ณ์๋ ์ฅ๋ฐ๊ตฌ๋์ ๊ตฌ๋งคํ๊ธฐ ๋ฒํผ ๋ ๋ค ์ฌ์ฉํ๋ฏ๋ก ์๋จ์ ์ฌ๋ ค๋์๋ค
์ผ๋ฆฌ ๋ฆฌํด์ ์ํด token์ด ์์ ๊ฒฝ์ฐ๋ฅผ ๋จผ์ ์งฐ๋ค
์ด๋ ๊ฒ ์ง๋ฉด ๊ตณ์ด ์๋ฒ์ ํต์ ํ์ง ์์๋ ํ ํฐ ์ฌ๋ถ๋ฅผ ํ๋ก ํธ์๋์์ ๋จผ์ ํ์ธํด ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค ์ ์๋ค
method : post ๋ก ์๋ฒ์ ์๋์ ๋ด์ ๋ณด๋ด์ฃผ์๊ณ
์๋์ด ์ฌ๊ณ ๊ฐ ๋์ ์ (status 401๋ฒ) ์ฌ๊ณ ์๋์ด ๋ถ์กฑํ๋ค๋ ์๋ฆผ์ด ๋จ๊ฒ ํ๋ค
์ฌ๊ณ ์๋ ๊ด๋ จํด์ ์ ํ ์นด์ดํธ ํ ์ ์๋ฆผ์ฐฝ์ ๋จ๊ฒ๋ ๋ง์๋๊ธด ํ์ผ๋
์๋ฒ์ ํจ๊ป ์ด์ค์ผ๋ก ๋ง์ ์ข ๋ ์ฒ ์ ํ๊ฒ ๋ณด์์ ํ๋ค
( + ์์๊ฐ ๋์ง ๋ชปํ๊ฒ ๋ก์ง ์งฌ)
๋ก๊ทธ์ธ ํ ํฐ์ด ์ ๋๋ก ์๋ ์ํ์์ ์ฌ๊ณ ์ดํ์ ๋ฌผ๊ฑด์ ๋ด์ ์ฅ๋ฐ๊ตฌ๋ ๋ฒํผ๋ฅผ ํด๋ฆญํ ์
์ฅ๋ฐ๊ตฌ๋๋ก ๊ฐ๊ธฐ / ์ผํ ๊ณ์ํ๊ธฐ ๋ฒํผ์ด ๋์ค๋ ๋ชจ๋ฌ์ฐฝ์ด ๋จ๊ฒ ํ๋๋ฐ
ํ์์ด ๊ตฌํํ ๋ชจ๋ฌ์ฐฝ ๊ด๋ จ ํจ์๋ฅผ (false)๋ก ์ง์ ํด๋๊ณ (true)๋ก ๋ฐ๊พธ์ด ๋ชจ๋ฌ์ฐฝ์ด ๋จ๊ฒ๋ ํ๋ค
์์ธ ํ์ด์ง ๋ด ๋ฆฌ๋ทฐ ์นธ์ผ๋ก ์ฌ๋ผ์ด๋ ํ๋ ๊ธฐ๋ฅ
๊ธฐ๋ฅ์ ๊ตฌํํ๋ฉฐ useRef hooks์ ์ฒ์ ์ ํด๋ณด์๋ค
๋ ๋๋ง ํ์ง ์๊ณ ๋ ์ปดํฌ๋ํธ๊ฐ ์์นํ ๊ณณ์ผ๋ก ์ฌ๋ผ์ด๋ ํ ์ ์์๋๋ฐ
useRef ๋ฅผ homeRef ๋ณ์์ ๋ด์
์ด๋ฅผ ๊ฐ์ฅ ๋ง์ง๋ง์ ์๋ ๋ฆฌ๋ทฐ์ฐฝ์ ๊ทผ์ ํ div์ ๋ฃ์ด์ฃผ์๋ค
์ค๋ฅด๋ฅต ๋์ด๊ฐ ์ ์๋๋ก ๋ฐ๋ก {behavior : 'smooth'} ์คํ์ผ๋ ๊ฑธ์ด์ฃผ์๋ค
์ฒ์ ์ ํ ํ ์ด๋ผ ์ด๋ ต๋ค๊ณ ๋ง ๋๊ผ๋๋ฐ ๊ธฐ๋ฅ ๊ตฌํ์ด ์๊ฐ๋ณด๋ค ์ด๋ ต์ง ์์ ์ฆ๊ฒ๊ฒ ๊ตฌํํ ์ ์์๋ค โบ๏ธ
๋๋์
์ฒซ ํ๋ก์ ํธ์๋ ๋งํผ ์์ฌ์์ด ๋ง์ด ๋จ๋๋ค
ํนํ fetch ํจ์ ๊ด๋ จํด์ ์ฅ๋ฐ๊ตฌ๋์ ๋๋ฌด ์ง์คํ ๋๋จธ์ง ๊ตฌ๋งคํ๊ธฐ fetch๊ฐ ์กฐ๊ธ ํ์ ํ ๊ฒ ์๋์๋ํ๋ค
๊ทธ๋ฌ๋ ์์ธ ํ์ด์ง๋ฅผ ๊ตฌํํ๋ฉด์ ๊นจ๋ฌ์ ๊ฒ์
data ํ์์ ์ ๋ณด๊ณ ํจ์๋ฅผ ์ง์ผํ๋ค๋ ๊ฒ๊ณผ
๊ผญ ๋ฐฑ์๋๋ถ๊ณผ ๊ฐ์ด ๋ง์ถ์ด์ผ ์ค๋ฅ๋ฅผ ๋นจ๋ฆฌ ์ฐพ์ ์ ์๋ค๋ ๊ฒ์ด์๋ค
์ค๋ฅ๊ฐ ๋ ์ ๊ฐ์ด ์ฝ์์ ์ฐ์ด๋ณด๋ฉฐ
ํ๋ก ํธ, ๋ฐฑ์๋ ์ค ์ด๋ ์ชฝ์ ๋ฌธ์ ๊ฐ ์๋์ง
ํ๋ก ํธ ์๋ ํจ์์ ๋ฌธ์ ๋ผ๋ฉด ์ด๋๊น์ง ๋ฐ์ดํฐ๊ฐ ๋ค์ด์๋์ง, ์ด์ ๊ฐ ๋ฌด์์ธ์ง
๋ฐ์ดํฐ๋ฅผ ์ฃผ๋ ์ชฝ๊ณผ ๋ฐ๋ ์ชฝ ๋ชจ๋ ๊ฐ์ด ๊ณ ๋ฏผํ๋ ๊ณผ์ ์ด ๋งค์ฐ ์ฆ๊ฑฐ์ ๊ณ
๋ ์๋ก์ ์ ๋ฌด์ ๋ํ ์ดํด๋๋ ๋์์ ธ ์ ์ตํ ์๊ฐ์ด์๋ค ๋๋๋ค
'BODYLIKE Project' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
BODYLIKE Project ํ๊ณ ๋ก (2) | 2022.08.27 |
---|---|
BODYLIKE ๋ก๊ทธ์ธ/ํ์๊ฐ์ ์ฐฝ ๊ตฌํ (0) | 2022.08.26 |
BODYLIKE ๋ก๊ณ ๊ด๋ จ (0) | 2022.08.24 |
๋๊ธ