๐ DIARY ์ธ๋ค์ผํ ๋ฆฌ์คํธํ 10์ 5์ฃผ์ฐจ ์ฃผ๊ฐํ๊ณ 22.10.24 ์์์ผ ๐จ ๐ฃ ๐ โ TODAY I DONE #1 CoStudo Project ์ฃผ๊ฐํ์ ์์์ผ ์์์ ์ด์ ์ต์ํด์ง CoStudo ์ฃผ๊ฐํ์๋ก ์์ํ๋ค. ์ฃผ์ ๋ ผ์ ์ฌํญ์ Flex ์คํ์ผ ์ค๋ณต ํด๊ฒฐ ๋ฐฉ๋ฒ, Row ์ปดํฌ๋ํธ ์ฉ๋ ์ ํ, Input ์ validation ์ด์๋ค. Flex ์คํ์ผ์ ์ค๋ณต ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ง๊ธ๊น์ง๋ sass ์์๋ mixin, styled components ์์๋ mixin๊ณผ ๋น์ทํ๊ฒ css ๊ฐ์ฒด๋ฅผ ์์ฑํด ์ถ๊ฐํ๋ ๋ฐฉ์์ผ๋ก ํด๊ฒฐํ์๋๋ฐ ํํฌ๊ป์ flex ์คํ์ผ์ ์ง์ ํ ์ ์๋ ์ปดํฌ๋ํธ๋ก ๊ตฌํํ์๊ณ ์ ์ํด์ฃผ์ ์ ์ ์ ํ๋ค. ๋ ผ์ ๋์ mixin ๋ฐฉ์์ผ๋ก ๊ฐ๋ ค๋ค๊ฐ ํด๋น ์คํ์ผ์ ์์น๋ฅผ ์ด๋ค ๋ ํฌ์ ๋ฌ์ผ ํ๋์ง์ ๋ํด ์๊ฒฌ์ด ๋์์ ์ข ๋ ๋ ผ์๋ฅผ ํด์ผํ ์ฌ์ง๊ฐ ์์ ๊ฒ .. ๋๋ณด๊ธฐ 10์ 3์ฃผ์ฐจ ์ฃผ๊ฐํ๊ณ 22.10.10 ์์์ผ ๐ฌ๐คฏ๐ค โ TODAY I DONE #1 CoStudo Project ์ฃผ๊ฐํ์ ์์์ผ์ CoStudo Project์ ์ฃผ๊ฐํ์๊ฐ ์๋ ๋ ์ด๋ค. ์คํ 2์์ ๋ชจ์ด๊ณ ๋๋๋ ์๊ฐ์ ๋ฏธ์ ์ธ ํ์๋ก ํ ์ฃผ์ ๊ณํ๊ณผ ๊ตฌ๋๋ก ํด์ผํ๋ ์ฃผ์ ๋ ผ์ ์ฌํญ์ ๋ํด ํ ์ํ๋ ํ์๋ค. ์ฃผ์ ๋ ผ์ ์ฌํญ์ ์ ๋ฆฌํด๋ณด๋ฉด.... 1. ํ์ ๋ฐฉ์ ํํฌ์ ๊ฑด์๋ก Discussion ์ด๋ PR ๋ฆฌ๋ทฐ์ ๋ง๊ฐ์๊ธฐ, ๋ค๋ฅธ ํ์์ด ๊ตฌํํ ์ปดํฌ๋ํธ์ ์๋ฌธ์ด๋ ๊ฐ์ ๋ฐฉ์์ด ์๊ธธ ๊ฒฝ์ฐ ๊ทธ ์๊ฒฌ์ ์ด๋ค ์์ผ๋ก ์ ๋ฌํ ์ง์ ๊ฐ์ ํ์ ๋ฐฉ์์ ๋ํด ๋ ผ์ํ๋ค. ์ด์ฐ๋ณด๋ฉด ์ฌ์ํ๊ณ ๋ณ๊ฑฐ ์๋ ๊ฒ ๊ฐ์ง๋ง ๊ฐ์ ํ๋ก ํธ ๋ถ์ผ์ 4๋ช ์ด ํ๋์ ์ฝ๋๋ฅผ ๊ณต์ ํ์ฌ ๊ฐ๋ฐํ๋ค๋ณด๋ ์ํํ ํ๋ก์ ํธ์ ์งํ์ ์ํด์๋ ์ด๋ฐ ์ธ์ธํ ํ์ ๋ฐฉ์์ ๊ท์น์ผ๋ก ๋ฑ ์ ํด๋๋.. ๋๋ณด๊ธฐ 10์ 2์ฃผ์ฐจ ์ฃผ๊ฐํ๊ณ : CoStudo Project 22.10.03 ์์์ผ ๐ง ๐ ๐ โ TODAY I DONE #1 CoStudo - RadioGroup Components ์ฐ ์ต์ข ์ง๋ ์ผ์ฃผ์ผ ๋์ Headless Component๋ฅผ ๊ตฌํํด๋ณด๋ฉฐ Style ๊ณผ ๊ด๋ จ๋ ๋ถ๋ถ๋ณด๋จ ๊ธฐ๋ฅ์ ์ง์คํ๋ค๊ณ ์ ๋๋ก ๊น๊ฒ ๊ณ ๋ฏผ์ ํ์ง ์์๋๋ ์ปดํฌ๋ํธ ์ฌ์ฉ์์๊ฒ input๊ณผ label์ ๊ฐ์ง๊ณ ์๋ Option ์ปดํฌ๋ํธ์ ์ด๋ป๊ฒ Custom Styling์ ํ ์ ์๊ฒ ํ ์ง์ ๋ํด ํผ๋๋ฐฑ์ ํผ๋๋ฐฑ์ ๋ฐ์๋ค. ์ง๋ ์ฃผ ์, ๋ชฉ ๋์ ํด๋น ๋ถ๋ถ์ ๋ํด์ ์ด๊ฒ ์ ๊ฒ props๋ฅผ ์ถ๊ฐํด๋ณด๊ณ ์ฝ๋๋ฅผ ๋ถ๋ฆฌํด๋ณด๊ณ ์์ค์ฝ๋๋ฅผ ์์ด๋ผ ๋ค์ง์ด๋ผ ํ๋ฉฐ ๊ฐ์ ์ ์๋ํด๋ดค์ง๋ง ์ฉ ๋ง์์ ๋ค์ง ์๊ณ ์คํ๋ ค ์ฝ๋๋ง ๋ณต์กํด์ก๋ค. ๊ทธ๋ฌ๋ ์ด๋ฏธ ์ผ์ ์ ๋๋ ์ด ๋์๊ณ , ๊ธ์์ผ๊น์ง๋ ๋ง๋ฌด๋ฆฌ ํด์ผ๊ฒ ๋ค ์ถ์ด์.. ๋๋ณด๊ธฐ [220617] ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ผ์ผ ํ๊ณ # ์ ์ ์ ....์ ์ ์๊ณ ์ถ๋ค.... ์ค๋ ํ๋ฃจ์ข ์ผ ํ ์๊ฐ์ด๋ค. ์ด์ PR ์ ์ถ์ ์ํด ๋๋์ ์๋ฒฝ๊น์ง ์ฝ๋ฉ์ ํ๋ค. ๋ฆ๊ฒ ์๊ฑฐ๋ผ๊ณ ๋ ์์ํ๊ธด ํ์ง๋ง 5์๊ฐ ๋์ด์ ์์ ์ด ์ผ์ถ ๋ง๋ฌด๋ฆฌ๊ฐ ๋๊ณ ์ผ์ผํ๊ณ ๋ฅผ ๋๋ต์ ์ผ๋ก ์์ฑํ๊ณ ๋๋ 6์๊ฐ ๋์ด์์ผ ์ ์ ์์๋ค. ๋๋๋ ๋๋ ๋๋ค ์์์ผ๋ถํฐ ์ด์ด์ ธ์จ ํ๊ท ์๋ฒฝ 4 ~ 5์ ์ทจ์นจ์ผ๋ก ์ธํ ํผ๋ก ๋์ ์ผ๋ก ๋ฐฑ์๋์ ์๋ฏธ์๊ฒ ์ํด๋ฅผ ๊ตฌํ๊ณ ์ค์ 11์๊น์ง, ํ์๋ณด๋ค 1์๊ฐ ๋ ์๊ณ ์๋๋ฐ๋ ์ ์ ์ ๊ฒ ๊ฐ์ง๊ฐ ์๊ณ ์ง์ง ๊ทธ๋ฅ ๋๋ฌด ์กธ๋ ธ๋ค. ๊ทธ๋๋ ์ฝ๋๋ฅผ ์ง๋ฉด์ ์กธ์ง๋ ์์ ๋คํ์ด์๋ค. ๋ด์ผ์ ๋๋์ด ๊ธ์์ผ! ์ฝ์ฟผ ๊ฐ๋จ ์ผํฐ์ ๋๊ฐ๋ ๋ ์ธ๋ฐ ๋ด์ผ์ ์ข ์ผ์ฐ ์ง์ ๋ค์ด์ฌ๊น ํ๋ค. ๋์ด๋ฌด ํผ๊ณคํด~~~ # ์ค๋ ํ ์ผ์.... ์ด์ ์์ ํ๋ ๋ฒํผ ์ปดํฌ๋ํธ๋ฅผ ๋ง์ ๋ง๋ฌด๋ฆฌ.. ๋๋ณด๊ธฐ [220614] ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ผ์ผ ํ๊ณ # ๊ฐ๋ฐ ํ๋ก์ธ์ค ์ด์ ํ๊ณ ์ฐ๊ณ ๋ ๋ค์ Agile ๋ฐฉ๋ฒ๋ก ์ ๋ํด์ ์ฐพ์๋ดค๋ค. Agile ๋ฐฉ๋ฒ๋ก ์ ๋ํด์ ์ข ๋ ์์ธํ ์๊ณ ๋๋ ์ฝ๋์ค์ฟผ๋ ๊ต์ก ๊ณผ์ ์ด ์ผ๋ง๋ Agile ํจ์ ์งํฅํ๊ณ ์์๋์ง ์ ์ ์์๋ค. ๊ทธ๋ฌ๋ฉด์ ์ด๋ฒ 3์ฃผ ํ๋ก์ ํธ๋ฅผ ์ด๋ป๊ฒ ํ๋ฉด ์กฐ๊ธ ๋ Agile ์ค๋ฝ๊ฒ ์งํ ํ ์ ์์์ง๋ฅผ ํจ๊ป ๊ณ ๋ฏผ์ ์ข ํด๋ดค๋๋ฐ ์ฐ์ ์ผ๋จ ์ง๊ธ๊น์ง ํ๋ก์ ํธ์์ ์๊ตฌ์ฌํญ ๋ถ์์ ํ๋ฉฐ ์์ฑํ๋ User Story๋ฅผ Product Backlog ๋ผ๋ ๋ช ์นญ์ผ๋ก ์์ฑํ๊ณ Story ๋ณ Task ๋ชฉ๋ก์ ์์ฑํ๋๊ฑธ Sprint Backlog ๋ก ์ด๋ฒ ์ฃผ์ ์คํ๋ฆฐํธ์์ ์์ ํ ์คํ ๋ฆฌ๋ง ์ ์ ํ์ฌ ์์ฑํ๋ฉด ์ข์๊ฑฐ ๊ฐ์๋ค. Story ๋ณ ๊ตฌ์ฒด์ ์ธ Task ๋ชฉ๋ก ๋ํ ํด๋น ์คํ๋ฆฐํธ๋ฅผ ์์ ํ ๋ ์์ฑํ๋ ๊ฑธ๋ก! ๊ฑฐ๊ธฐ์ ์ด์ ํ.. ๋๋ณด๊ธฐ [220613] ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ผ์ผ ํ๊ณ # ๋ง์ง๋ง ํ๋ก์ ํธ๊ฐ ์์๋๋ค. ๋ฒ์จ ๋ง์ง๋ง 3์ฃผ์ง๋ฆฌ ํ๋ก์ ํธ๊ฐ ์์๋๋ค. ์ด ๋ง์ ์ฆ ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์๋ฃ๊น์ง 3์ฃผ๋ฐ์ ๋จ์ง ์์๋ค๋ ๋ป...! ๋ง๋ ์๋๋๊ฑฐ ์๋๊ฐ...! ์ด๋ป๊ฒ ์ด๋ฌ์ง ํํ ์๊ฐ์ด ๋๋ฌด ๋น ๋ฅด๋ค. ๋๋์ง ์์์ผ๋ฉด ํ๋ฉด์๋ ๋นจ๋ฆฌ ๋๋ด๊ณ ์ถ์ ๋ง์์ด ๋ค์ด์ ์ฌ๋ํด์ง๋ค. ์์ง ๊ณต๋ถ๊ฐ ์ ๋๋ก ๋์ง ์๊ณ , ์ค๋น๊ฐ ๋ ๋ ๊ฑฐ ๊ฐ์์ ๋นจ๋ฆฌ ๋๋์ง ์์์ผ๋ฉด ์ถ๊ณ , ๋งค์ฃผ ๋งค์ผ ์งง์ ๋จ์๋ก ๊ณ์ํด์ ๋ฏธ์ ์ ์ํํ๋ ๊ณผ์ ์ ์ข ์ง์ณ์ ๋นจ๋ฆฌ ๋๋๊ณ ์ง๊ธ๊น์ง ํ์ตํ๊ฑธ ์ ๋ฐ์ ์ผ๋ก ๋์ง๊ณ ์ถ์ด์ ๋นจ๋ฆฌ ๋๋ฌ์ผ๋ฉด ์ถ๋ค. # ๋ง์ง๋ง ํ๋ก์ ํธ๋...?! Dony์ ํจ๊ป ํ๊ฒ ๋๋ค! ์ํธ์ฐ! ๋ง์ง๋ง ํ๋ก์ ํธ๋ผ๊ณ ๊ฐ์ด ํ๊ณ ์ถ์ ์ฌ๋์ ์ค๋ฌธ ์กฐ์ฌํด์ ํด๋ก์ด๊ป์ ๋งค์นญ ์์ผ์ฃผ์ จ๋ค! Dony ๋์ ์ ๋ง ์ฝ์ฝ์ ๋๋ถํฐ ์๊ฐ๋ณด.. ๋๋ณด๊ธฐ [220516 ~ 20] ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฃผ๊ฐ ํ๊ณ # ๊ฐ์๊ธฐ ์ฃผ๊ฐ ํ๊ณ ใ ใ ใ ใ ใ ใ ใ ...์ผ์ผํ๊ณ ์ด์ฌํ ์ฐ์๊ณ ๋ค์งํ ๊ฒ ๋ฌด์ํ๊ฒ... ๋ฐ๋ก ๋ฐ๋ ค๋ฒ๋ ธ๋ค. ์์ ์์ด๊ฑด ์๋๊ณ ์ด๋ฒ ์ฃผ ๋์ ๋ฐ๋ฆฐ ๋ฏธ์ ์ง๋ ๋นผ๋๋ผ ์ ์ ์ด ์์ด์ ๋ ธ์ ์๋ค ์ฃผ์ ๋ด์ฉ๋ง ๋์ถฉ ์จ๋จ๋ค. ๊ทธ๋ฌ๋๋ฐ ์ด์ ์์ ์ ๋ฆฌํ ๊ฒ๋ค์ ๋ฐ๋ก๋ฐ๋ก ์ผ์ผ ํ๊ณ ๋ผ๊ณ ์จ ์ฌ๋ฆฌ๊ธฐ๋ ๋ญํด์ ๊ทธ๋ฅ ํ๊บผ๋ฒ์ ์ฃผ๊ฐ ํ๊ณ ๋ฅผ ํ๊ธฐ๋ก ํ๋ค. # ์์ผ๋ณ ์ฃผ์ ํ๋ ์ : Atomic Component ๋ง๋ฌด๋ฆฌ ์์ ํ : ์ง๋ ๊ธ์์ผ PR ํผ๋๋ฐฑ ๋ฐ์ + ์ฝ์ฟผ ๊ฐ๋จ ์ผํฐ ๋ฐฉ๋ฌธ ์ : react Router v6 + react transition group ๋ป์ง ๋ชฉ : Context API ๊ธ : useReducer + Axios + ํผ์ด์ธ์ # Atomic Design ์ด๋ฒ ๋ด ๋ฏธ์ ํ๋ก์ ํธ๋ฅผ ๋์ด์ผ ๋ณด๋ฉด ๊ทธ๋ฅ Atomi.. ๋๋ณด๊ธฐ [220512] ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ผ์ผ ํ๊ณ # ๋ฆ์ ์ค๋ค! ์ ๋ Atomic์ ๊ธฐ์ค์ ์ค์ ์ผ๋ก ํ์ตํ๋ค๊ฐ ์๋ฒฝ 6์๊ฐ ๋์ด์ ์ ๋ค์๋ค. ๊ทธ ํ์ ๋ ๋จ๋๊น 10์ ๋ฐ...! O oO)! ์ผ๋จ ์ธ์๊ณ ๋ญ๊ณ ์ค๋ถํฐ ์ผ์ ๋ค์ด๊ฐ๋ฉฐ ํ๋ฃจ๋ฅผ ์์ํ๋ค. # ์ค์ ์๋ ์๋ฒฝ ๋์ ์ฐธ๊ณ ํ๋ ๊ธ์ ์ ๋ฆฌํ๋ฉฐ ์๊ฐ ์ ๋ฆฌ๋ฅผ ํ๋ค. Effective Atomic Design | kciter.so ๊ตฌ๊ธ๋ง์ผ๋ก ์ฐพ์ ์ฝ์ Atomic Design ๊ด๋ จ ๊ธ ์ค ์ ์ผ ์์ธํ๊ฒ ์ค๋ช ์ด ๋์ด ์๋ ๊ฒ ๊ฐ๋ค. ๋ํ ๊ธ์ ์ ์ ๋ถ์ด ๋ณด์ํ๊ณ ์๋กญ๊ฒ ์ ์ํ Atomic Design์ ํ์ค ๊ท์น์ ๋ช ํํ๊ณ ํ๋นํ ์ด์ ์ ํจ๊ป ์ ๋ฆฌ๋ฅผ ํด์ฃผ์ ์ ์ฐธ๊ณ ๊ฐ ๋ง์ด ๋๋ค. ๋ด์ฉ ์ค์ Atomic Design์ ์ค์ ๊ตฌํ์ ํ๋ค ๋ณด๋ฉด ์ ๋งค๋ชจํธํ ๋ถ๋ถ์ด ์๊ธฐ๋ ์์ธ์ผ๋ก Atomic Design์ ๋ฐฉ๋ฒ๋ก ์ด.. ๋๋ณด๊ธฐ ์ด์ 1 ๋ค์