์ํ๋ ์ํ๋ฅผ ๊ฒ์ํ๊ณ , ๋๋ง์ ์ฆ๊ฒจ์ฐพ๊ธฐ์ ๋ฑ๋กํ ์ ์๋ ์ฑ์ ๋๋ค.
- Typescript
- React, React router, Recoil
- react-intersection-observer
- axios
- lodash, storejs, classnames
- SCSS, CSS Modules
- Recoil ํตํ ์ํ๊ด๋ฆฌ
- Infinite Scroll ๊ตฌํ
- axios ๋ก API ํต์ ๊ตฌํ
- lodash ๋ก ์ค๋ณต ๋ฐ์ดํฐ ์ ๊ฑฐ
- classnames ๋ก ์กฐ๊ฑด๋ถ ์คํ์ผ ์ ์
- eslint, prettier, stylelint ์ ์ฉ
- mediaQuery ๋ก ๋ฐ์ํ ์น ๊ตฌํ
Infinite Scroll ๊ตฌํ
- ํ์ฌ ํ์ด์ง๊ฐ ์ ์ฒด ํ์ด์ง๋ณด๋ค ์ ์ ๊ฒฝ์ฐ, ์คํฌ๋กค ์ ์๋์ผ๋ก ๋ค์ ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ต๋๋ค.
- ์๋ก์ด ๊ฒ์์ด๋ฅผ ์ ๋ ฅํ ๊ฒฝ์ฐ, scrollIntoView() ๋ฅผ ํตํด ๋ฆฌ์คํธ์ ์ต์๋จ์ผ๋ก ์ด๋ํฉ๋๋ค.
- useParams ๋ฅผ ํตํด ํ์ฌ ๊ฒ์์ด์ ํ์ด์ง๋ฅผ ํ์ํฉ๋๋ค.
์ฆ๊ฒจ ์ฐพ๊ธฐ ๋ฑ๋ก ๋ฐ ์ํ ์ ์ง
- ๋ฆฌ์คํธ ๋ชฉ๋ก์ ์ํ๋ฅผ ํด๋ฆญํ๋ฉด ์ฆ๊ฒจ์ฐพ๊ธฐ๋ฅผ ๋ฑ๋ก ๋ฐ ํด์ ํ ์ ์์ต๋๋ค.
- ์ฆ๊ฒจ์ฐพ๊ธฐ ์ํ๋ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋์ด ์ ์ง๋๋ฉฐ, ๊ฒ์ ์ ์ฆ๊ฒจ์ฐพ๊ธฐ ๋ฑ๋ก ์ ๋ฌด๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
- Favorites ํ์ด์ง์์ ์ฆ๊ฒจ์ฐพ๊ธฐ ๋ชฉ๋ก์ ํ์ธ ๋ฐ ์ญ์ ํ ์ ์์ต๋๋ค.
์๋ฌ ํธ๋ค๋ง
- ์๋ชป๋ ๊ฒฝ๋ก๋ก ์ง์ ํ๋ ๊ฒฝ์ฐ 404 ํ์ด์ง(NotFound)๋ฅผ ๋์๋๋ค.
- lodash ๋ฅผ ํตํด ์ค๋ณต ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํฉ๋๋ค.
- Poster ์ด๋ฏธ์ง๊ฐ ์กด์ฌํ์ง ์์ ๊ฒฝ์ฐ, ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
ํ |
---|
![]() |
๋ฌดํ ์คํฌ๋กค | ์ฆ๊ฒจ์ฐพ๊ธฐ ์ถ๊ฐ/ํด์ |
---|---|
![]() |
![]() |