Pixellent๋ ํฝ์
์ํธ๋ฅผ ์ฝ๊ฒ ์ ์ํ ์ ์๋ ์น์ดํ๋ฆฌ์ผ์ด์
์
๋๋ค.
์์ ์ด ๋ง๋ ์ด๋ฏธ์ง๋ฅผ png ํ์ผ๋ก ๋ค์ด๋ฐ์ ์ ์์ต๋๋ค.
๋ํ, ์ ์ฅ๊ณผ ๋ถ๋ฌ์ค๊ธฐ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
Deploy
Portfolio
FrontEnd
Test
Deploy
npm install
npm start
- 2022๋ 6์ 27์ผ - 2022๋ 7์ 2์ผ: ์์ด๋์ด ์ ์ ๋ฐ ๊ธฐ์ ๊ฒ์ฆ, ๊ณํ (์นธ๋ฐ, ๋ชฉ์ ์์ฑ)
- 2022๋ 7์ 3์ผ - 2022๋ 7์ 15์ผ: ๊ฐ๋ฐ ๊ธฐ๋ฅ ๊ตฌํ
- 2022๋ 7์ 16์ผ - 2022๋ 7์ 22์ผ: Stand Up ๋ฐํ ์ค๋น ๋ฐ ๋ฆฌํฉํ ๋ง
- ๊ทธ๋ฆผํ๊ณผ ๊ฐ์ด ์ขํ๋ฅผ ํตํด ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๋ ์๋ํฐ์๋ ๋ฌ๋ฆฌ, Pixel ์์
์ ์งํํ ์ ์๋ Canvas๋ถํฐ ๊ทธ๋ฆฌ๊ธฐ ๋๊ตฌ ๊ธฐ๋ฅ๊น์ง ์ง์ ๊ตฌํํด์ผ ํ์ต๋๋ค. ๊ฐ๋ฐ ๊ธฐ๊ฐ์ด ์ผ์ฃผ์ผ ์ ๋ ๋จ์์ ๋, ์ค๊ณํด๋ Canvas๋ฅผ ๊ฐ์์์ด์ผ ํ๋ ์ํฉ์ด ๋ฐ์ํ์์ต๋๋ค. ์ฑ์ฐ๊ธฐ ๊ธฐ๋ฅ ๊ตฌํ์ ์ํด์ ๊ธฐ์กด์ ์์
ํด๋ Canvas ๊ตฌ์กฐ๋ก๋ ๋ถ๊ฐ๋ฅํ์๊ธฐ ๋๋ฌธ์
๋๋ค.
๋๊ตฌ๋ ๋์์ฃผ์ง ์๊ณ , ๋ชจ๋ ๊ฑธ ์ ํผ์ ํ๋จํด์ ๊ฒฐ์ ํ์ฌ์ผ ํ๋ ์ ํ๋ ์ํฉ ์์์ ๊ธฐ์กด ๋ฌธ์ ๊ฐ ๋ฌด์์ธ์ง ํ์ ํ๊ณ , ์ฒ์๋ถํฐ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ค ๋ณด๋ ๋ค๋ฅธ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๋ ๋์ฑ ์์ํ๊ฒ ์์ ํ ์ ์์์ต๋๋ค.
- ๊ธฐ์กด์๋ Pixel Component๋ฅผ ๋ฐฐ์ด์ ๋ด์ Canvas๋ฅผ ๋ง๋ค์์ต๋๋ค. ๋ํ, ๋ฐฐ์ด์ ์์๋ค์ด ์ผ๋ฐ์ ์ธ ๋ฐ์ดํฐ๊ฐ ์๋ Component์๊ธฐ ๋๋ฌธ์ Cell๋ค์ ํ์ํ๋ฉฐ ์์ ์
ํ๋ ๊ฒ์๋ ์ด๋ ค์์ด ์์์ต๋๋ค.
์ฐ์ , 1์ฐจ์ ๋ฐฐ์ด๋ก ์ด๋ฃจ์ด์ง Canvas์์๋ ์ํ์ข์ฐ ํ์์ ํตํด, ์์ ๊ณผ ๋ค๋ฅธ ์์ด ์น ํด์ ธ ์๋ Cell๋ค์ ํ๋จํ๊ธฐ๊ฐ ๋ถ๊ฐ๋ฅ ํ์ต๋๋ค. ๋ฐ๋ผ์ ๊ธฐ์กด์ ์ค๊ณ๋ฅผ ๊ฐ์์์ ํ์๊ฐ ์์์ต๋๋ค. 2์ฐจ์ ๋ฐฐ์ด์ ๋ง๋ค์ด์ฃผ๋ ์ ํธ ํจ์ ๋ก์ง ๋ถ๋ฆฌ๋ฅผ ํตํด Canvas ์ ์ ๋ฐ Grid -> Row -> Cell๋ก Component ์ธ๋ถํ๋ฅผ ์์ผ์ฃผ์์ต๋๋ค.
- Pixel Canvas ์์ฑ ํจ์, Local Storage, Color Palette ์์ฑ ํจ์, Bucket(์ฑ์ฐ๊ธฐ) ํจ์ ๋ฑ ์ฌ๋ฌ ๋น์ฆ๋์ค ๋ก์ง๋ค์ ๋๋ ์ฃผ๊ณ ์์ํ๊ฒ ํจ์๋ฅผ ์ง๋ฉฐ, ๊ด์ฌ์ฌ ๋ถ๋ฆฌํ๋ ๊ฒ์ด ์ญ์๋ ์ฝ์ง ์์์ต๋๋ค. ์๋ฒฝํ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ํ ์๋ ์์์ง๋ง, Side effect๋ ๋ฎ์ถฐ์ฃผ๊ณ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ์ฃผ๋ ๋ฐฉ์์ผ๋ก ์ฝ๋๋ฅผ ์ง๋ ค๊ณ ํ๋ค๋ณด๋ ํ์คํ ์ปดํฌ๋ํธ ์์ ์ฝ๋๋ ๊ฐ๊ฒฐํด์ง๊ณ ๊น๋ํด์ง๋ ๊ฒ์ ์ฒด๊ฐํ์ต๋๋ค.
๊ฐ์ธ ํ๋ก์ ํธ๊น์ง ์ค๋ ๊ธธ์ด ์ํ์น ๋ง์ ์์์ต๋๋ค. ์ ๋ง ๋งค ์๊ฐ ํฌ๊ธฐ๋ฅผ ์๊ฐํ๋ ์ ์ด ๋ง์์ต๋๋ค. ๊ทธ๋๋ ์ฌ๊ธฐ๊น์ง ์ด๋ป๊ฒ๋ ๋๊ณ ์จ ์ ์์ ์ด ์กฐ๊ธ์ด๋๋ง ๊ธฐํน (?) ํฉ๋๋ค.
ํํ๊ณผ๋ ๋ค๋ฅด๊ฒ ๋ชจ๋ ๊ฒ์ ์ ํผ์ ํ๋จํ๊ณ ์๋ํด ๋ณด์์ผ ํ๋ ์ ์ด ๋ฌด์ฒ์ด๋ ๋๋ ต๊ณ , ๋ง์ค์ฌ์ก์ต๋๋ค. ๋ ํผ๋ฐ์ค ์ฐธ๊ณ ํ ๊ฒ๋ค๋ ๊ฐ์๋ก ์ค์ด๋ค๊ณ , ๋ด๊ฐ ํ ์ ์์๊น ๋ผ๋ ์๋ฌธ์ ์์์ ๊ฒฐ๊ณผ๋ฌผ์ด ๋์ค๋ ๊ฒ์ ๋ณด๋ ํ๋ฉด ๋๋ ๊ตฌ๋ ๋ผ๋ ์์ ๊ฐ๋ ๋ถ๊ฒ ๋์์ต๋๋ค.
๋น๋ก ์์ฌ์ด ์ ๋ ๋ง๊ณ , ๋ฐ์ฑํ ์ ๋ ๋ง์ ํ๋ก์ ํธ์์ต๋๋ค. ํ์ง๋ง, ๋ถํธ์บ ํ 1์ฃผ์ฐจ ์์ ์ ์ ๋ฅผ ๋์ด์ผ ์๊ฐํด ๋ณด๋ฉด ๋ฏธ์ฝํ์ง๋ง, ์ฑ์ฅํ๋ค๊ณ ๋๊ปด์ง๋๋ค. ์์ง ๋งค์ฐ ๋ถ์กฑํ๋ค๋ ๊ฒ์ ์์ง๋ง, ์ด๋ฒ ํ๋ก์ ํธ๊ฐ ๋ง์ง๋ง์ด ์๋๊ณ ๋ค์์ ๋ง๋ค ์๋น์ค๋ ์ด๋ฒ ๊ฒ๋ณด๋ค ํจ์ฌ ๋ค๋ฌ์ด์ง ์๋น์ค๋ฅผ ๋ง๋ค ์ ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ต๋๋ค.
๊ฐ๋ฐ์ ํ๋ฉด ํ ์๋ก ๊ธฐ๋ณธ์ด ์ค์ํ๋ค๋ ๊ฑธ ๋ค์ ํ๋ฒ ๋๋ผ๊ณ ์์ต๋๋ค. ๋ฉ๋ฆฌ ๋์๊ฐ๋ ๊ธธ์ด๋ผ๋, ์ฒ์ฒํ ๋ฐ์๊ฐ๋ฉฐ ๊ฐ๋ฐ์ ํด๋๊ฐ๋๋ก ํ๊ฒ ์ต๋๋ค.