๊ฐ๋ฐ์๋ก์ ๋ชจ๋ฐ์ผ ์ฒญ์ฒฉ์ฅ์ ์ง์ ๋ง๋ค์๋ ์๊ฐ๊ณผ ํ๋ก ํธ์๋๋ฅผ ์กฐ๊ธ์ด๋๋ง ์ฒดํํด๋ณผ ์ ์๋ ์ข์ ๊ธฐํ๋ผ ์ฌ๊ฒจ 10์ฌ์ผ๊ฐ(2023.10.07 ~ 2023.10.17)์ ๊ฑธ์น ํด๊ทผ ํ ๋ฐ ์ฃผ๋ง๋์ ํ์ํ ๊ธฐ๋ฅ๋ค์ ๋ฆฌ์คํธ์ ํ๊ณ ๊ฐ๋ฐํ์์ต๋๋ค.
- ๋ชจ๋ฐ์ผ UI
- ์คํฌ๋กค ์ ๋๋ฉ์ด์
- ์ด๋๋ง CANVAS
- ํธ๋ํฐ ์ฐ๋ฝ
- ์จ๋ฉ์ฌ์ง CAROUSEL
- ์ง๋์ฃผ์ COPY
- ๋ค์ด๋ฒ๋งต ์ฐ๋
- ์นด์นด์ค๋งต ์ฐ๋
- ํฐ๋งต ์ฐ๋
- ๊ณ์ข COPY
- ํ ๊ธ๋ฉ๋ด
- ์นด์นด์คํก ๊ณต์
- ๊ณต์ ๋งํฌ COPY
- OG TAG
- AWS EC2 -> s3
- react 18.2 version
- yarn 1.22 version
- Keep:
- ๋ฆฌ์กํธ ํ ์ ์ ๋๋ก ์ฌ์ฉํ์ง ๋ชปํด๋ดค์ง๋ง, ๋ฆฌ์กํธ๊ฐ ์ด๋ป๊ฒ ์ค๊ณ๋์ด ์๋์ง ์ ๋๋ ์ดํด๋ณผ ์ ์๋ ๊ธฐํ์์ต๋๋ค.
- ๋ค์๊ธ ์ด๊ธฐ ๊ธฐํ์ ์ค์์ฑ์ ๋์ง์ด๋ณด๊ฒ ๋๋ ์๊ฐ์ด์์ต๋๋ค.
- Problem:
- ์ฒ์ ๊ธฐํํ๋ ์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ locomotive๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ผ๋ถ๊ตฌํํ์ง๋ง ์ด๋ฏธ์ง resize์ ๋ฐ๋ฅธ quality๋ฌธ์ ๊ฐ ๋ฐ์ํ์์ต๋๋ค.
- ์ฌ์ง ๊ฐค๋ฌ๋ฆฌ๋ฅผ ๋ณด์ฌ์ฃผ๋ CAROUSEL์์ ๊ฐ ์ฌ์ง์ ์ด๋ฏธ์งํฌ๊ธฐ๊ฐ ๋ค๋ฅด๊ธฐ๋ ํ๊ณ CAROUSEL๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ต์ ์ ์์งํ์ง ๋ชปํ์ฌ ์ธ๊ณฝ ๊ฒฝ๊ณ์ ์ ์ผ๋ถ ์ฌ์ง์ด ๋ฒ์ด๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์์ต๋๋ค.
- ๊ณ์ข ํ ๊ธ๋ฉ๋ด๋ฅผ ์ด์์๋ ํ ๊ธ๋ฉ๋ด๊ฐ ๋ด๊ณ ์๋ ์ปจํ ์ธ ์ ๋์ด์ ์ ์ฐํ๊ฒ ์ ๋๋ฉ์ด์ ๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ๊ฒฌ๋์์ต๋๋ค.
- Try:
- locomotive๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ CANVAS์์ ํฝ์ ์ ๋ํ ์ค์ผ์ผ์ ์ ์ฉํ์ฌ ์ด๋ฏธ์ง quality๋ ์ํญ ๊ฐ์ ํ์์ง๋ง, ๋ชจ๋ฐ์ผํ๊ฒฝ์์ ๋ธ๋ผ์ฐ์ ์ url๋ถ๋ถ์ ๋ํ ๋ฌธ์ ๋ก ์คํฌ๋กค์ ๋ฐ๋ฅธ resizing์ด ๋ฐ์ํ์ฌ ์ผ๋ฐ์ ์ธ ๋๋ฌธ์ผ๋ก ๋ณ๊ฒฝํ์์ต๋๋ค.
- ์ฌ์ง ํฌ๊ธฐ๋ฅผ ์ผ์ ๋น์จ๋ก ํต์ผํ๊ณ CAROUSEL์ centerSlidePercentage์์ฑ์ ํตํด ์ธ๊ณฝ์ ์์ ์ฌ์ง์ด 100%๋ก ์ฐจ๋๋ก ์ ์ฉํ์์ต๋๋ค. ๋ํ ์ข์ฐ ์ด๋๋ฒํผ์ ๊ฐ์์ฑ ํ๋ณด๋ฅผ ์ํ์ฌ carousel css์์ฑ์ ์ ๊ทผํ์ฌ ์ฌ์ง๊ณผ ๋ฒํผ์ ๊ฐ๊ฒฉ์ ์กฐ์ ํ์์ต๋๋ค.
- ํ ๊ธ๋ฉ๋ด๋ฅผ ์ด์์๋ ๋์ ์ผ๋ก width๊ฐ ๋ณํ๋ฉด์ height์ ๋ํ margin์ด auto๋ก ์ ์ฉ๋๋๋ฐ ์ด๋์ ๊ณผ์ ์ด ๋งค๋๋ฝ์ง ์์๊ฒ์ผ๋ก ์ถ์ ๋์๊ณ transition์์ฑ์ ์ค์ ํ์ฌ ๊ฐ์ ํด๋ณผ ์ ์๋๊ฒ ๊ฐ์ ๊ฐ์ ๊ณผ์ ์ ์ ์ฉํด๋ณด๋์ค์ ๋๋ค.
- full์์: https://youtube.com/shorts/uXt39Wtb9QE