![]() |
![]() |
![]() |
![]() |
---|---|---|---|
๊น์ง์ | ์ด์์ | ์กฐ์นํ | ํํ์ |
๋ฉ์ธํ์ด์ง | ํค๋ ๋ฐ ์ฌ์ด๋๋ฐ ๋ ์ด์์ |
์์ ์์ธ ํ์ด์ง | ๊ฒ์ ํ์ด์ง |
1์ฐจ : 2023.01.23(์) ~ 2023.01.20(๊ธ)
2์ฐจ : 2023.01.25(์) ~ 2023.02.03(๊ธ)
[๋ฉ์ธํ์ด์ง]
- ๋น๋์ค์นด๋ ์์ฑ
- ๋น๋์ค์นด๋ ํธ๋ฒ๋ง ์ 3์ด ํ ๋น๋์ค ์ฌ์
- ๋ฌดํ ์คํฌ๋กค ๊ฐ๋ฅ
[๋ ์ด์์]
- ์์ ๋ํ ์ผ ํ์ด์ง : ์ฌ์ด๋๋ฐ ๋ชจ๋ฌ ํํ
- ๊ทธ์ธ ํ์ด์ง
- ์ฌ์ด๋๋ฐ ๋ฐ์ํ์ ๋ฐ๋ผ, main ์์ญ ์ฌ์ด์ฆ ๋ณ๊ฒฝ๋จ
- ์คํฌ๋กค ๋์์ธ
[ํค๋]
- ๊ฒ์๋ฐ ๋ฐ์ํ
[์ฌ์ด๋๋ฐ]
- ๋ฐ์คํฌํ ์ฌ์ด์ฆ์์๋ ๋ฒํผ ํด๋ฆญ์, ํ ๊ธ๋ก ์ด๋ฆผ
- ํ๋ธ๋ฆฟ๊ณผ ๋ชจ๋ฐ์ผ ์ฌ์ด์ฆ์์๋ ๋ฒํผ ํด๋ฆญ์, ๋ชจ๋ฌ๋ก ์ด๋ฆผ
- ๋ชจ๋ฌ์ผ ๋
- ์ฌ์ด๋๋ฐ ์ธ ์์ญ ํด๋ฆญ์, ๋ชจ๋ฌ ๋ซ๊ธฐ
- ๋ฒํผ์ผ๋ก ๋ชจ๋ฌ ๋ซ๊ธฐ
- hover ์์๋ง ์คํฌ๋กค ๋ณด์
- ์์ํ๋ ์ด์ด
- ๋๊ธ๋ฆฌ์คํธ
- ๊ด๋ จ์์๋ฆฌ์คํธ
๊ฒ์ํ์ด์ง
- ํด๋น ํค์๋์ ๊ดํ ์์ ๋์ค๊ธฐ
- header ์ปดํฌ๋ํธ input์์ value๊ฐ ๋ฐ์์ค๊ธฐ
- ์ฑ๋ ์ด๋ฏธ์ง ๋ถ๋ฌ์ค๊ธฐ
- ๋์์ ์กฐํ์ ๋ถ๋ฌ์ค๊ธฐ
- ๋ ์ด์์ ๋์์ธ
- ๋ค๋น๊ฒ์ด์ ํ ๊ธ ๋ฉ๋ด ๊ตฌํ
- hover์ ๋์์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋ฅ ๊ตฌํ
์์ธํ์ด์ง
- ์ฐ๊ด ๋์์ ๋ถ๋ฌ์ค๊ธฐ
- ๋๊ธ ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ์ปดํฌ๋ํธํ
๐ฉโ๐ป๊น์ง์
- ๋์์ ์๊ฐ์ด ๋ฌด์กฐ๊ฑด 2์ซ์์ฉ ๋๊ฒ ํ์ต๋๋ค. ํ์ง๋ง, 10๋ถ ์ดํ์ธ ๋์์์ธ ๊ฒฝ์ฐ, ๋ถ์ด 2๊ธ์์ผ ํ์๊ฐ ์๋๋ฐ ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์์์ง ๊ถ๊ธํฉ๋๋ค.
- ์กฐํ์ ํจ์๋ฅผ ๋ ์ข๊ฒ ๋ง๋ค ๋ฐฉ๋ฒ์ด ์์ ์ง ๊ถ๊ธํฉ๋๋ค.
- ์๊ฐ ๊ด๊ณ ์ ํํฐ์ ๋ฏธ๋ ํ๋ ์ด์ด๋ฅผ ๋ฃ์ง ๋ชปํด์ ์์ฝ์ต๋๋ค.
- ๋ฌดํ ์คํฌ๋กค๋ฅผ ์ํด axios๋ฅผ ๋ถ๋ฌ์ ๋ฐ์ดํฐ๋ฅผ usestate์ ๋ฃ์๋๋ฐ, ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์์์ง ๊ณ ๋ฏผ์ด ๋ฉ๋๋ค.
๐ฉโ๐ป์ด์์
[ํผ๋๋ฐฑ ๋ฐ๊ณ ์ถ์ ์ ]
- ํ์ด์ง ๊ณตํต ๋ ์ด์์
- ํค๋์ ์ฌ์ด๋๋ฐ๋ฅผ fixed๋ก ์ค์ ํ๊ณ outlet์ ํค๋์ ์ฌ์ด๋๋ฐ๋งํผ ๋ฐ์ํ๋ง๋ค ๋ค๋ฅด๊ฒ margin์ ์คฌ์ต๋๋ค. ๊ด์ฐฎ์ ๋ฐฉ๋ฒ์ธ์ง ๊ถ๊ธํฉ๋๋ค. ํน์ fixed๋ ๊ณตํต ์ปดํฌ๋ํธ์ ์์๋ ์ margin์ ์ฃผ์ง ์๊ณ ๋ ๊ฒน์น์ง ์๊ฒ ์ค์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋์ง ๊ถ๊ธํฉ๋๋ค.
- img src ๋์ import๋ก ์ด๋ฏธ์ง ๋ถ๋ฌ์ค๊ธฐ
- ์ด๋ฏธ์ง๋ฅผ img src๋ก ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋ผ์ import ํ์์ต๋๋ค. ํน์ ์์ธ์ ๋ํด ์์๋ ๊ฒ์ด ์์ผ๋ฉด ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.
- ์ฌ์ด๋๋ฐ
- ์ฐฝํฌ๊ธฐ๋ณ๋ก ๋ฐ์ํ์ ๋ง๋ค๊ณ , ์ฐฝํฌ๊ธฐ๋ณ๋ก ๋ฒํผ์ ๋ค๋ฅธ ๋ชจ์ ์ ์ฃผ๋ ๊ฒ์ด ์ด๋ ค์ ์ต๋๋ค. ๋ฒํผ์ ๋๋ฅด๋ฉด ํ์ฅํ ์ฌ์ด๋๋ฐ๊ฐ ์์ด์ง๊ฑฐ๋ ๋ชจ๋ฌ ์ฌ์ด๋๋ฐ๊ฐ ๋จ๋ ๊ฒ์ ๋ํด, state๋ฅผ ํ๋๋ก ํ์ฌ ์์ ํ๋ค๊ฐ ๋ ๊ฐ๋ก ๋ณ๊ฒฝํ์ฌ ์์ ํ์ต๋๋ค. ์ด ๊ณผ์ ์์ ํค๋์ ์ฌ์ด๋๋ฐ, app.js ์ ์ฒด ๋ ์ด์์ ๋ฑ ๊ณ ๋ คํด์ผํ ๊ฒ์ด ๋ง์ ์ด๋ ค์ ์ต๋๋ค. useContext๋ฅผ ์ฌ์ฉํด์ผ ํ๋์ง ๊ถ๊ธํฉ๋๋ค.
[์ด๋ ค์ ๋ ์ ]
-
useRef ์ฌ์ฉ
-
์ฌ์ด๋๋ฐ ์ฌ๋ผ์ด๋ transition
- ์ปดํฌ๋ํธ ๊ณ์ธต์ ์๋ชป ์ค๊ณํด transition ์ ์ฉ์ด ๋์ง ์์์. ์์ ํ ์ปดํฌ๋ํธ๋ฅผ ๋๋์ ์ผ๋ก ์์ ํด์ผํ์.
-
๋ฐ์ํ, ํค๋์ ๋ฒํผ ํด๋ฆญ์ ์ํฉ๋ณ๋ก ์ฌ์ด๋๋ฐ ํํ๊ฐ ๋ฌ๋ผ์ผํ๋ ์
๐ฉโ๐ป์กฐ์นํ
์ค๋ช 1
์ค๋ช 2
๐ฉโ๐ปํํ์
- ์ค๋ช 1
- ์ค๋ช 2