- ๋๋์๋ก ์ด์ํ ์๋์ปต ๋ฐ๋ก๊ฐ๊ธฐ
- ํ ๋๋จผํธ ํ์์ผ๋ก ๋๋์๋ก ์ถ์ฐ์ง ์ค ์์ ์ ์ด์ํ์ ๊ณ ๋ฅด๋ ๊ฒ์
ํ ํ๋ฉด | ๊ฒ์ ์งํ | ์ต์ข ๊ฒฐ๊ณผ | ์นดํก ๊ณต์ |
---|---|---|---|
- ๊ฐ์ธ ํ๋ก์ ํธ
- ๊ธฐํ, ์ ์: 2022๋ 11์ 5์ผ ~ 9์ผ
- ์ ๋ฐ์ดํธ: 2023๋ 4์ 24์ผ ~ 26์ผ
-
๊ฒ์ ์งํ๋ฐฉ์ ์ ํ
- ์ด ๋ผ์ด๋ ์ ํ (32๊ฐ, 16๊ฐ, 8๊ฐ)
- ์ถ์ฐ์ง(์ด์ํ) ์ฑ๋ณ ์ ํ (์ฌ์, ๋จ์, ์ฑ๋ณ๋ฌด๊ด)
- ์ฌ์ฉ์ ๋๋ค์ ์ ๋ ฅ ๊ฐ๋ฅ
-
์ด์ํ ์๋์ปต ๊ฒ์
- ๋๋์๋ก ์ถ์ฐ์ง์ ๋๋ค ์ถ์ถํ์ฌ 1:1 ๋งค์น
- ํ์ฌ ๋ผ์ด๋, ์งํ์ค์ธ ๋จ๊ณ ํ์
- ์ต์ข
๊ฒฐ๊ณผ ํ์ธ ๋ฐ ๊ณต์
- ์ด์ํ ์ด๋ฏธ์ง ์ ์ฅ ๊ฐ๋ฅ
- ์นด์นด์คํก ๋งํฌ ๊ณต์ ๊ฐ๋ฅ
- ์ต์ข
๊ฒฐ๊ณผ ํ์ด์ง์ ์์ข
์ด ํํฐํด ํจ๊ณผ ์ถ๊ฐ (11/15 ์๋ฃ)
- react-canvas-confetti ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ
- ์ด๋ฏธ์ง ๋ก๋ฉ ์๋ ๊ฐ์ (4/24 ์๋ฃ)
- png -> jpg ํ์ผ๋ก ๋ณํํ์ฌ ์ฉ๋ ์ค์ด๊ธฐ
- ๋ค์ ๋ผ์ด๋ ์ง์ถ ์ ํ๋จ์ ์๋ฆผ ํ์ (4/24 ์๋ฃ)
- react-toastify๋ก ํ ์คํธ ๋ฉ์์ง ํ์
- ๊ฒ์ ์งํ ๋จ๊ณ ๋ง๋ bar๋ก ํํ (4/24 ์๋ฃ)
- ์ด๋ฏธ์ง ๋ค์ด๋ก๋ ๊ธฐ๋ฅ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ฒดํฌ (4/24 ์๋ฃ)
html-to-image
๋ safari์์ ์ด๋ฏธ์ง ๋ ๋๋ง ๊ธฐ๋ฅ์ ์ง์ํ์ง ์์- ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ํ์ธ ํ safari์์๋ ๋ค์ด๋ก๋ ๋ฒํผ์ ์จ๊น
- ๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค ์ ์ฉ (4/25 ์๋ฃ)
- ํ์ด์ง๋ณ ๋ฐฉ๋ฌธ์์ ์ง๊ณ
- ์ด๋ฏธ์ง ์ ์ฅ, ์นดํก ๊ณต์ ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ ์ง๊ณ
- ์๋ธ์
ํฐํธ ์ ์ฉํ์ฌ ์นํฐํธ ์ต์ ํ (4/26 ์๋ฃ)
- ํฐํธ ํ์ผ์์ ๋ถํ์ํ ๊ธ์ ์ ๊ฑฐ
- GmarketSans์ฒด ๊ธฐ์กด 869KB -> 119KB๋ก ์ฉ๋ ๊ฐ์
- Pretendard์ฒด ๊ธฐ์กด 1,104KB -> 175KB๋ก ์ฉ๋ ๊ฐ์
- React.js
- react-router-dom
- styled-components
- html-to-image
- react-canvas-confetti
- react-ga
- react-toastify
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ
Radio
์ปดํฌ๋ํธ๋ฅผ ๊ตฌํํ์ฌ ๊ฒ์ ์งํ๋ฐฉ์์ ์ ๋ ฅ ๋ฐ์ useContext
๋ฅผ ์ด์ฉํ์ฌ ์ด ๋ผ์ด๋, ์ถ์ฐ์ง ์ฑ๋ณ, ๋๋ค์ state๋ฅผ ์ ์ญ์ ์ผ๋ก ๊ด๋ฆฌuseEffect
๋ฅผ ์ด์ฉํ์ฌ ๋ผ์ด๋๊ฐ ์์๋๋ฉด ๋๋ค์ผ๋ก ํ๋ณด ์ถ์ถuseState
๋ฅผ ์ด์ฉํ์ฌ ํ๋ณด, ๋ ๋๋ง ๋ ํ๋ณด, ์น์ ๋ฐฐ์ด์ state ๊ด๋ฆฌ์นด์นด์คํก ๊ณต์ API
๋ฅผ ํตํด ๋งํฌ ๊ณต์ ๊ธฐ๋ฅ ๊ตฌํhtml-to-image
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉํ์ฌ DOM์ ์ด๋ฏธ์ง๋ก ์ ์ฅreact-ga
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉํ์ฌ ํ์ด์ง๋ณ ๋ทฐ, ํด๋ฆญ ์ด๋ฒคํธ ์ง๊ณ
-
๊นํ๋ธ ๋ฐฐํฌํ์ผ๋ ๋น ํ๋ฉด๋ง ๋จ๋ ๋ฌธ์
- ์์ธ: BrowserRouter์ ๊ธฐ๋ณธ URL์ ์ง์ ํด์ฃผ์ง ์์
- ํด๊ฒฐ: createBrowserRouter์ basename ์ถ๊ฐ
-
์๋ธํ์ด์ง์์ ์๋ก๊ณ ์นจ ํ๋ ๊ฒฝ์ฐ 404 not found ์๋ฌ ๋ฐ์
- ์์ธ: ๊นํ๋ธ ๋ฐฐํฌ๋ SPA๋ฅผ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ์๋ฒ๊ฐ index.html ์ธ ๋ค๋ฅธ ํ์ด์ง๋ ์ธ์ํ์ง ๋ชปํจ
- ํด๊ฒฐ: ์๋ธํ์ด์ง url์ ๋ณํํ์ฌ index.html๋ก redirect ์์ผ์ฃผ๋ ์คํฌ๋ฆฝํธ๋ฅผ 404.html์ ์ถ๊ฐ
-
html-to-image
์ ํตํ ์ด๋ฏธ์ง ๋ค์ด๋ก๋ ์๋๊ฐ ๋๋ฌด ๋๋ฆผ
-
์์ธ: ์ด๋ฏธ์ง๋ก ๋ณํํ DOM์ CSS๋ฅผ ์ ์ฉํ๊ธฐ ์ํด ํ๋ก์ ํธ ๋ด ๋ชจ๋ ์นํฐํธ๋ฅผ ๋ค์ด๋ฐ๊ฒ ๋๋๋ฐ, CDN์ ํตํด ํด๋น ํฐํธ๋ค์ ๊ฐ์ ธ์ฌ ๋ ์ค๋ ์๊ฐ์ด ์์๋จ (์ฝ 10์ด)
-
ํด๊ฒฐ: ๊ธฐ๋ณธ ํฐํธ ์ฌ์ฉ (์ถํ ์๋ธ์ ํฐํธ ๋ค์ด ๋ฐ์ css ์ ์ฉ ์์ )
-
- Winner ํ์ด์ง์์ GET ์์ฒญ undefined 404 ์๋ฌ ๋ฐ์
- ์์ธ
- winner ์ด๋ฏธ์ง GET ์์ฒญ์ ๋ํ 404 ์๋ฌ๋ก ํ์ธ๋จ
- ์ปดํฌ๋ํธ๊ฐ ์ด๊ธฐ ๋ ๋๋ง ๋ ์ดํ์ useEffect๋ฅผ ํตํด winner ์ํ๊ฐ์ ์ค์ ํ๋ฏ๋ก, ์ฒ์์ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋๋ winner ์ํ๊ฐ์ด undefined์
- ํด๊ฒฐ
- winner ๊ฐ์ด falsy์ธ ๊ฒฝ์ฐ, ๋ก๋ฉ ๋ฌธ๊ตฌ๋ฅผ ๋ ๋๋งํ๋๋ก ์ฝ๋ ์์
- winner ๊ฐ์ด ์ค์ ๋ ์ดํ GET ์์ฒญ์ ํ๊ธฐ ๋๋ฌธ์ ์๋ฌ ๋ฐ์X
-
๋ชจ๋ฐ์ผ ํ๊ฒฝ(์ผ์ฑ ์ธํฐ๋ท ๋ธ๋ผ์ฐ์ )์์ ์ด๋ฏธ์ง ๋ค์ด๋ก๋๊ฐ ๋์ง ์์
- ์์ธ
- USB ๋๋ฒ๊น ํ์ธ ๊ฒฐ๊ณผ, ์ด๋ฏธ์ง ํ์ผ์ ์ ์์ด์์ผ๋
- ๋ธ๋ผ์ฐ์ ์ ์๋ ๋ค์ด๋ก๋ ์ฐจ๋จ ๊ธฐ๋ฅ์ด ์ค์ ๋์ด ์์์
- ํด๊ฒฐ: ์๋ ๋ค์ด๋ก๋ ์ฐจ๋จ ํด์ ํ ์ ์ ๋ค์ด๋ก๋ ํ์ธ
- ์์ธ
-
๋ชจ๋ฐ์ผ์์ ๋ฒํผ ํด๋ฆญ ์ hover ์คํ์ผ์ด ๋จ์ ์๋ ๋ฌธ์
- ์์ธ: ๋ชจ๋ฐ์ผ ๋ฑ ํฐ์น์คํฌ๋ฆฐ ํ๊ฒฝ์์๋ ์์๋ฅผ ํฐ์นํ ํ ๋ค๋ฅธ ์์๋ฅผ ํฐ์นํ๊ธฐ ์ ๊น์ง ๊ณ์ hover ์ํ๊ฐ ์ ์ง๋จ
- ํด๊ฒฐ
- ์ต์์ ์ปดํฌ๋ํธ์์ ํฐ์น์คํฌ๋ฆฐ ์ฌ๋ถ๋ฅผ ํ๋จ(isTouchScreen)
- useContext๋ฅผ ํตํด isTouchScreen ๊ฐ์ ๋ค๋ฅธ ์ปดํฌ๋ํธ์์๋ ์ฐธ์กฐ
- isTouchScreen์ styled-component์ props๋ก ์ ๋ฌํ์ฌ ํฐ์น์คํฌ๋ฆฐ์ผ ๊ฒฝ์ฐ์๋ง hover ์คํ์ผ์ ์ ์ฉํจ