Movie
ํ๋ก์ ํธ ์๊ฐ
TMDB(The Movie DataBase) API๋ฅผ ํ์ฉํด์ ๋ง๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ก API๋ฅผ ํ์ฉํ์ฌ ์ํ๋ฅผ ๊ฒ์ํ๊ณ ์ฐพ์๋ณด๋ฉฐ, ์ํ์ ์์ธ ์ ๋ณด๋ฅผ ํ์ธํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์น์ฌ์ดํธ ํ๋ฉด
ํ
๋๋ฌ๋ณด๊ธฐ
์ํ์์ธ
์ข์์
๊ฒ์
์๊ฐ
๊ธฐ์ ์คํ
UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ผ์ฐํ
์ํ๊ด๋ฆฌ
๋น๋๊ธฐ ์ํ ๊ด๋ฆฌ
์คํ์ผ๋ง
ํ
์คํ
ํ๋ ์์ํฌ
DOM ํ
์คํ
UI ํ
์คํ
ํ๋กํ ํ์ดํ
์คํ API
ํ๋กํ ํ์ดํ
ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ์ , ์ ์ผ ๋จผ์ Figma ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฒด์ ์ธ ํ๋กํ ํ์ดํ์ ํ์์ต๋๋ค. Mobile-first๋ก ์งํํ ๊ฒ์ด์๊ธฐ ๋๋ฌธ์ ๋ชจ๋ฐ์ผ ํ๋ฉด์์ ๋ฐ์คํฌํ ํ๋ฉด ์์ผ๋ก ๋ง๋ค์ด๋๊ฐ์ต๋๋ค. ์ค์ ๋ก ๋ง๋ค์ด์ง ๊ฒฐ๊ณผ๋ฌผ๊ณผ ์์ ํ ๋๊ฐ์ง๋ ์์ง๋ง ๊ทธ๋๋ ํ๋ฉด์ด ์๋ ์ํ์์ ์ฝ๋๋ฅผ ์ง๋ ๊ฒ์ ํจ์ฌ ํธํ์ต๋๋ค.
Figma ํ๋กํ ํ์
์์ ํ์ธํ ์ ์์ต๋๋ค.
ํ
์คํ
ํ๋ก์ ํธ๋ฅผ ์งํํด๋๊ฐ์ ์์ด์, ์ฒ์์ผ๋ก ํ
์คํ
์ ์ ์ฉํด๋ณด์์ต๋๋ค. ๋ค๋ฅธ ํ๋ก์ ํธ๋ค์ ํตํด์ ํ
์คํธ ์ฝ๋๊ฐ ์๋ ์ฝ๋๋ค์ ๊ต์ฅํ ๋ถ์์ ํ๋ค๋ ๊ฒ์ ๋๊ผ๊ธฐ ๋๋ฌธ์ ์๋ก์ด ํ์ด์ง ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋๋ง๋ค ๊ทธ์ ํด๋นํ๋ ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํ์์ต๋๋ค. TDD(Test-Driven Development)๋ฅผ ์ํํ์ง ๋ชปํ์ ์ด ์์ฝ์ง๋ง ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ผ๋ก ํ๋ก์ ํธ๊ฐ ํ
์คํธ๋ฅผ ํ์ง ์์์ ๋๋ณด๋ค ๊ฒฌ๊ณ ํด์ง๋ค๋ ๊ฒ์ ๋๊ผ์ต๋๋ค. ํ
์คํธ ํ๋ ์์ํฌ๋ก Jest๋ฅผ ์ฌ์ฉํ์๊ณ ํ๋ฉด์ ์ ๋ ๋๋ง๋์๋๊ฐ๋ฅผ ํ
์คํธํ๊ธฐ ์ํด react testing library๋ฅผ ์ฌ์ฉํ์์ต๋๋ค. ์ ๊ฐ ํ
์คํธ๋ฅผ ์ ์ฉํ ๊ฒฝ์ฐ๋ ์๋์ ๊ฐ์ต๋๋ค.
ํน์ ๊ธฐ๋ฅ์ ์คํ์์ผฐ์ ๋ ํด๋น ์ปดํฌ๋ํธ๊ฐ ์๋ง๊ฒ ๋ ๋๋ง๋๋๊ฐ?
๋ผ์ฐํ
์ด ์ ๋๋ก ๋์ํ๋๊ฐ?
๋ฆฌ๋์๊ฐ ๋์คํจ์น๋๋ ์ก์
์ ๋ฐ๋ผ์ ์๋ง์ ์ํ๋ฅผ ์
๋ฐ์ดํธํ๋๊ฐ?
๋ฆฌ๋์๊ฐ ์
๋ฐ์ดํธ ํ ์ํ์ ๋ฐ๋ผ ํ๋ฉด์ ์ ๋ ๋๋งํ๋๊ฐ?
DOM ํ
์คํ
๋ง๊ณ ๋ UI ๊ฒ์ฆ์ ์ํ ํ
์คํธ ๋๊ตฌ๋ก Storybook์ ์ฌ์ฉํ์์ต๋๋ค. ์ด๋ฅผ ํตํด์ Redux์ ์ํ ๋ฐ props์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ๋ ๋๋ง๋๋ ํ๋ฉด์ ํธํ๊ฒ ํ
์คํธํ ์ ์์์ต๋๋ค. (์๋ ์ฌ์ง)
ํ๋ก์ ํธ๋ฅผ ํตํด ๋ฐฐ์ด ๊ฒ๋ค
Redux๋ฅผ ์ฌ์ฉํด์ ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ ๋ฐฉ๋ฒ
Redux-Saga๋ฅผ ์ฌ์ฉํด์ ๋น๋๊ธฐ๋ก ๋ณํ๋ ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ ๋ฐฉ๋ฒ
Styeld components๋ฅผ ์ฌ์ฉํด์ ๊ฐ ์ปดํฌ๋ํธ๋ฅผ CSS-in-JS ๋ฐฉ์์ผ๋ก ์คํ์ผ๋ง ํ๋ ๋ฐฉ๋ฒ
React testing library๋ฅผ ์ฌ์ฉํด์ DOM์ ํ
์คํธํ๋ ๋ฐฉ๋ฒ
์คํ API์ axios๋ฅผ ์ฌ์ฉํด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ
LocalStorage๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ