12์ ๋ท์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ ๋ ์จ๊ฐ ์ด๋ง๋ฌด์ํ๊ฒ ์ถ์์ง ์ด๋ฒ ์ฃผ.. ๋ชฉ์์ผ๋ถํฐ ํ๋ก์ ํธ๊ฐ ์์๋์๋ค. ํฌ๋ฆฌ์ค๋ง์ค์ ํ๋ก์ ํธ๊ฐ ๊ฒน์น๋ค๋ ๋๋ฌด๋... ๐ฅบ ๋ฒ์จ ์บ ํ ๊ธฐ๊ฐ์ ๋ฐ์ ์ด ๋์ด๊ฐ๋ค๋ ์๊ฐ์ด ์ ๋ง ๋ ์๊ฐ๋ ๊ฒ ๊ฐ๋ค.. ๐ Fact JSON-server๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ์ ๋ฐ๋ ์ํ๊ณผ์ ๋ฅผ ํด๋๋ค! ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค. ์ฌํ ์ฃผ์ฐจ ๊ฐ์๋ฅผ ๋ค์๋ค. ํ๋ก์ ํธ ์์๊น์ง ์๊ณ ๋ฆฌ์ฆ์ ํ์๋ค. ๐ Feeling ์ ๋ฐ๋ ๊ณผ์ ์ฝ๋๋ฆฌ๋ทฐ์์ '์ผํ๊ณ ์๋ ์ ์ ๊ฐ๋ฐ์๊ฐ๋ค'๋ ์นญ์ฐฌ์ ๋ค์๋ค. ์ฒ์ ๋ฐ์ ์ฝ๋๋ฆฌ๋ทฐ์๋๋ฐ ๋ฟ๋ฏ ๐ ์๋กญ๊ฒ ์๊ฒ ๋ ์ง์๋ค์ด ๋ง๋ค. ์ฌ๋ฐ๊ฒ ๋ฐฐ์ฐ๋ ์ค! ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ฅผ ๋ค์ ์ง์คํด์ ๊ณต๋ถํด๋ด์ผ๊ฒ ๋ค๋ ์๊ฐ.. ์ฝ์ง ์๋ค. ํ์ฅ์ผ๋ก์ ์ ํ๊ณ ์๋๊ฑธ๊น? ํ๋ ์๊ฐ์ด ์ข ์ข ๋ ๋ค. ๐ค ๐ Finding JSON..
ํ๋ก์ ํธ ์ ๋ 2์ผ ์ฐจ ํน๊ฐ์ด๋ ์บ ํ ๋ด ํฌ๋ฆฌ์ค๋ง์ค ์ด๋ฒคํธ ๋ฑ ์ผ์ ์ด ์ข ์๋ ํ๋ฃจ์ฌ์ ์๊ฐ๋ณด๋ค ์์ ์๊ฐ์ด ๊ธธ์ง ์์๋ ๊ฒ ๊ฐ์ ํ๋ฃจ! ์ฐ์ ์ค๋ ์คํ๊น์ง UI ์์ ์ ๋ง๋ฌด๋ฆฌํ๊ธฐ๋ก ํ์๊ณ , ์๋ฒฝํ๋ ์๋์ง๋ง ๋๋ถ๋ถ์ UI ์์ ์ด ๋ง๋ฌด๋ฆฌ๋์๋ค. UI ์์ ์ด ๋ง๋ฌด๋ฆฌ๋ ํ ๋ฐ๋ก ๊ธฐ๋ฅ ๊ตฌํ์ ๋ค๋ค ์์!.. ์ด๋ฒ ํ๋ก์ ํธ๋ gitflow ๋ฐฉ์์ผ๋ก ํ์ ํ๊ณ ์์ด์, dev ๋ธ๋์น์ ๊ฐ์์ ๋ธ๋์น์์ ์์ ํ ๊ฒ์ PR ๋ฃ๋ ๋ฐฉ์์ผ๋ก ์งํ๋๊ณ ์๋ค. 2์ผ ์ฐจ์ ์งํ๋ PR๋ค์ ์ด๋ ๋ค! ์ค๋์ ์ด์๊ฐ ์์๋ค๋ฉด, ๊ธฐ๋ฅ ๊ตฌํ์ด ๋ฒ ์ฐฌ ํ์๋ค์๊ฒ ๋ง์ ๊ธฐ๋ฅ์ด ๋ฐฐ๋ถ๋ ๊ฒ ์๋๊ฐ ์ถ์ด์ ์์๋ฅผ ํตํด ์ด์ง ๋์ด๋ธ ์ ์ด ์๊ฒ ๋ค. ๋ ์ฃผ๋ฅ๋ณ ๋ฆฌ์คํธ๋ฅผ ๋ ๋๋ง ํ๋ ๊ณผ์ ์์ UI ์ปดํฌ๋ํธ๊ฐ ์กฐ๊ธ ๋ณต์กํ๊ฒ ์ง์ฌ์ map์ ์ฌ๋ฌ ๋ฒ ๋๋ฆด ..
ํ๋ก์ ํธ ์ ๋ 1์ผ ์ฐจ ์๋ก์ด ํ๋ก์ ํธ๊ฐ ์์๋์๋ค. ์ด๋ฒ ํ๋ก์ ํธ๋ ๋ฆฌ์กํธ์ ๋ฆฌ๋์ค, JSON-server๋ฅผ ์ด์ฉํด์ CRUD๋ฅผ ๋ง๋๋ ๊ฒ~ ์ฃผ์ , ์ฃผ์ ๊ธฐ๋ฅ ์ฃผ์ ๋ ์ฌ๋ฌ ๊ฐ์ง๊ฐ ๋์์๋๋ฐ, ๋ด๊ฐ ์ ์ํ ์ฃผ๋ฅ ์ปค๋ฎค๋ํฐ๊ฐ ์ ํ๋์๋ค. ์ ์ฃผ๊ฐ๋ค์ ์ปค๋ฎค๋ํฐ! ์ฃผ์ ๊ธฐ๋ฅ์ ์ด๋ ๋ค. ์ ์ข ๋ฅ๋ฅผ ์ํฐํด๋ก ์๊ฐ ์ ์ ๋ํด ํ์ ์ ๋๊ธ๋ก ๋จ๊ธธ ์ ์์ ์ปค๋ฎค๋ํฐ ์ด์ฉ์๋ค๋ผ๋ฆฌ ๊ฒ์๊ธ๊ณผ ๋๊ธ์ ์์ฑํ ์ ์์ ์์ด์ด ํ๋ ์ ์์ฑ๋ ์์ด์ด ํ๋ ์์ ์ด๋ ๋ค. ํ๋ก์ ํธ ์ด๋ฆ ๊ฒธ ์๋น์ค ์ด๋ฆ์ ๊ดํด์๋ ๋ง์ ์์ด๋์ด๊ฐ ๋์๋ค๊ฐ, ์๋ฌด ์๊ฐ ์์ด ์ ๋ ฅํ ์ ๋ ์ ๋ ์ด ์ฑํ๋๋ค (ใ ใ ) ํ๋ค๋ฅ ๋น ๋ฅด๊ฒ ๋ง๋ค์ด๋ณธ ๋ก๊ณ 1์, 2์์ค 2์์ด ์ ํ๋์๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ, DB ์ฐ๋ฆฌ๋ ์ด๋ฒ์ ์ข ๋ ๊ธฐ๋ฅ ๊ตฌํ์ ์ง์คํ๊ธฐ ์ํด ๋ง์ด๋ค ์ฌ์ฉํ๋ค๋ Ma..
12์ ์ ์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ ์ ๊ทธ๋ ์ด๋๋ ํฌ๋ ๋ฆฌ์คํธ๋ฅผ ๋ค์ ๋ง๋ค์ด๋ณธ ํ ์ฃผ.. ๊ทธ ์ฌ์ด ๋๋ ๋ง์ด ์ค๊ณ ๋ ์จ๊ฐ ์ด๋ง ๋ฌด์ํ๊ฒ ์ถ์์ก๋ค. ์ด๋ด ๋์ผ์๋ก ๊ฑด๊ฐ๊ด๋ฆฌ์ ์ ์ํด์ ํ์ด์ค๋ฅผ ์์ง ๋ง์!.. ์ฐจ์ฃผ ๋ชฉ์์ผ๋ถํฐ๋ ํ๋ก์ ํธ ์์์ด๋ค. ๐ ํ๋ด๋ณด์!.. ๐ Fact ๋ฆฌ๋์ค๋ฅผ ์ด์ฉํ ํฌ๋ ๋ฆฌ์คํธ๋ฅผ ์์ฑํ๊ณ ๋ฆฌํฉํ ๋ง๊น์ง ํด๋ณด์๋ค. ํฌ๋ ๋ฆฌ์คํธ CRUD ๊ธฐ๋ฅ์ ๋ชจ๋ ๋ง๋ค์๋ค. ์๋ จ ์ฃผ์ฐจ ๋ช๋ช ํค์๋๋ค์ ๋๊น ํ๋ค. ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ฅผ ๋งค์ผ ๊พธ์คํ ํ์๋ค. ๐ Feeling ์์ ๊ธฐ๋ฅ๊น์ง ์์ฑํ๊ฒ ๋์ด ๋ฟ๋ฏํ๋ค. ํ์ ์ง๊ฐ๊ธ ์ ๋ฆฝ์ ๋์ ํ๋ค!.. ์ ์ง ๊ฒฝ๊ฐ์ฌ์ด ๋ ๋ค. ๐ Finding styled-components์ props ํ์ฉ๊ณผ ์ ์ญ CSS ์ค์ Query String๊ณผ Path variable ๋นํธ ์ฐ์ฐ์ | ..
12์ ๋์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ ๋ฆฌ์กํธ ํ์ต์ ๋ฐ์ ํ ์ฃผ์๋ค. ๋งค์ฃผ ๋๊ฐ์ด ์ฐ๋ ๊ฒ ๊ฐ๊ธด ํ๋ฐ ์ ๋ง ํ ์ฃผ๊ฐ ์ด๋ป๊ฒ ์ง๋๊ฐ๋์ง ๋ชจ๋ฅด๊ฒ ๋ค. ๋ ๊น์งํ๋ฉด ์ํด๊ฐ ๋ ๋ฏํ๋ค.. ๐ ๊ทธ๋ผ์๋ ๋ช ๋ฌ ์ ๊ณผ ๋น๊ตํด์ ๊พธ์คํ ์ฑ์ฅํ๊ณ ์๋ ๋.. ์นญ์ฐฌํด! ๐ ๐ Fact ๋ฆฌ์กํธ ๊ธฐ์ด์ ์ธ ํฌ๋ ๋ฆฌ์คํธ๋ฅผ ์์ฑํ๋ค. styled-components๊ฐ ์๊ฐ๋ณด๋ค ๋ ์ข์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์๊ฒ ๋์๋ค. redux์ ๋ํด ๋ณต์ตํ๋ค. ํจํค์ง ๊ด๋ฆฌ ํด์ธ yarn์ ์ฒ์ ์ฌ์ฉํด๋ณด์๋ค. ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ฅผ ๋งค์ผ ๊พธ์คํ ํ์๋ค. ๐ Feeling ์๊ตฌ์ฌํญ์ ์ ํ์ธํด์ผ ํจ์ ๋ค์ ํ๋ฒ ๋๊ผ๋ค. ๊ผผ๊ผผํ๊ฒ ์ฝ๊ณ ์ฒดํฌํ์! ๊ณผ์ ๋ฅผ ์ ๋๋ด์ ๋คํ์ด๋ค! ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ฅผ ํ๋ฉฐ ์ ๋ชฐ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ์ตํ ์ ์๋ ๊ฒ ๊ฐ์์ ์ข๋ค. ๐ Finding ..
12์ ์ฒซ์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ ๋ฐํ๋ ์ฑ๊ณต์ ์ผ๋ก ๋๋ง์น๊ณ , ์๋ก์ด ํ์ด ํธ์ฑ๋ ํ ์ฃผ์๋ค. ๋ฌด์๋ณด๋ค ๋ฒ์จ 12์์ด๋ผ๋... ์?....๐ฅบ ๐ Fact ์๋ฐ์คํฌ๋ฆฝํธ ์ฌํ ๊ฐ์๋ฅผ ๋ค์๋ค. ์๋กญ๊ฒ ํธ์ฑ๋ ํ์์๋ ํ์ฅ์ด ๋์๋ค. ๐ ํ๋ก์ ํธ ํ๊ฐ๋ฅผ ์ข๊ฒ ๋ฐ์๋ค. (์ผํธ!) ์๊ณ ๋ฆฌ์ฆ ์คํฐ๋๋ฅผ ์์ํ๋ค. ๐ Feeling ๋ฐํ๋ ์ธ์ ๋ ๋๋ฌด๋๋ฌด๋๋ฌด ๋จ๋ฆฐ๋ค.... ๐จ ์์ฑ๋ ๋์ ํ๋ก์ ํธ๋ผ๋ ํ๊ฐ๋ฅผ ๋ฐ์์ ๋๋ฌด ๊ธฐ๋ปค๋ค! ๋ ธ๋ ฅ์ ๊ฒฐ์ค ๐ ์๋ก์ด ํ์๋ค์ ๋ง๋ฌ๋ค.. ์ด๋ฒ ํ๋ก์ ํธ๋ ์.. ํด๋์ผ๋ฉด.... ๐ ํผ์ ๊ณต๋ถํ ๋๋ณด๋ค ํํฐ๋์ ๊ฐ์๋ก ๊น์ ์ดํด๋ฅผ ํ๊ฒ ๋์ด ๋๋ฌด ์ข๋ค.. ๐ ์๋กญ๊ฒ ์คํฐ๋๋ฅผ ์์ํ๋ค. ์์ง๊ฐ ๋ฟ๋ฟ!! ๐ Finding ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฐธ์กฐํ ๋ฐ์ดํฐ ํ ๋น์ ๋ํ ์ดํด!.. this์ ์ฉ๋ฒ.. ์คํ ์ปจํ ..
ํ๋ก์ ํธ swivee๋ฅผ ๊ฐ๋ฌด๋ฆฌํ๋ฉฐ ์ง๋ ๊ธ์์ผ๋ถํฐ ์์๋ ํ๋ก์ ํธ! ํ๋ก์ ํธ ๋ฐํ๊น์ง ๋ง์น๊ณ KPT ํ๊ณ ๋ฐฉ๋ฒ๋ก ์ ๋ฐ๋ผ ์์ฑํ ํ์ ๊ฐ์์ ํ๊ณ ๋ฅผ ์ทจํฉํด๋ณด์์ต๋๋ค. Keep ๋ ธ์ ์ผ๋ก ํ๋ก์ ํธ๋ฅผ ๋ฌธ์ํํ ๊ฒ ์์ด์ดํ๋ ์ ์ดํ ๊ตฌ์ฒด์ ์ธ UI๋ฅผ ์ก์์ HTML ๋งํฌ์ ์ ์์ํ๊ฒ ํ ๊ฒ ํ์๋ค๊ณผ์ ์ ์ฐํ ์ํต, ์๋ก ๋ฐฐ๋ คํด์ฃผ๋ ํ์ ๋ฐฉ์ ํ์๋ค ๊ฐ์ ์ฑ์ทจ๋๋ฅผ ๊ณ ๋ คํด์ ์ ๋ฌด๋ฅผ ๋ถ๋ดํ ๊ฒ ์งํ์ฌํญ ์ฒดํฌ๋ฅผ ์์ฃผ ํ๋ฉฐ ํ๋ก์ ํธ๋ฅผ ์งํํ ๊ฒ ํ์ ๊ฐ ์ํต์ด ์ํํ์ฌ ๊ตฌํ์ด ์ด๋ ค์ด ๋ถ๋ถ์ ํจ๊ป ๊ณต์ ํ๊ณ ํด๋ต์ ๋์ถํ๋ ๋ถ์๊ธฐ ์ฃผ์ด์ง ์๊ฐ ์์ ์ต์ ์ ๋คํด ์์ฑ๋๋ฅผ ๋์ธ ๋ถ๋ถ ๊ฐ์์ ๋ธ๋์น๋ก ์์ ํ ๋ถ๋ถ ๋๊น์ง ํฌ๊ธฐํ์ง ์๊ณ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ฒ ๋ค๋ ๋ง์๊ฐ์ง Problem ์ฑ์ทจ๋๋ฅผ ๊ณ ๋ คํ์์๋ ์ญ๋์ด ๋ถ์กฑํ ํ์๋ค์ ํ๋ก์ ํธ ์ฐธ์ฌ..
๊ธฐ์ด ํ๋ก์ ํธ๋ฅผ ๋ง์น๋ฉฐ ์์ฃผ ์ด์ฌํ ๋ฌ๋ฆฐ ๊ธฐ์ด ํ๋ก์ ํธ๊ฐ ๋์ด ๋ฌ๋ค!.. ํผ๊ณค๊ณผ ์คํธ๋ ์ค๋ก ์ธํด ์ธํ์ผ์ ์ป๊ณ ๋ง์์ง๋ง.. ๐ฅบ ์ง๋ ํ๋ก์ ํธ ํ๊ณ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ ๊ณํ์ ์ด๊ณ ์์ฑ๋ ๋์ ํ๋ก์ ํธ๋ฅผ ๋ฐํํด์ ๊ธฐ์๋ค. ๋ฏธ๋ ํ๋ก์ ํธ์ฒ๋ผ ํํฐ๋์ ํผ๋๋ฐฑ์ ๋ฐํ์ผ๋ก, ๋ ๊ฐ์ธ์ ์ผ๋ก ์ข์๋ ๋ถ๋ถ๊ณผ ์์ฌ์ด ๋ถ๋ถ์ ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค. ์์ฌ์ ๋ ๋ถ๋ถ ๋ค๋ก ๊ฐ๊ธฐ๊ฐ ์ ๋๋ ์ ์ด๋ฒ ํ๋ก์ ํธ์ ํน์ฑ์ SPA๋ก ๊ตฌํ์ ํ๊ธฐ ๋๋ฌธ์ hash URL์ ์ด์ฉํด์ผ๋ง ํ๋๋ฐ, ์ฐ๋ฆฌ ํ๋ก์ ํธ๋ ๋ธ๋๋๋ณ ์ ๋ฐ > ๊ฐ ์ ๋ฐ๋ค์ ๋ชจ๋ ๋ฆฌ๋ทฐ > ๋ฆฌ๋ทฐ ์์ธํ์ด์ง๋ก ์ด์ด์ง๋ ๊ตฌ์กฐ์๊ธฐ ๋๋ฌธ์?.. ์ด๋ฒคํธ ํ๊ฒ์ผ๋ก ๊ฐ์ ์ง์ ํด์ ๋์ด๊ฐ ์๋ฐ์ ์์๋ค. ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์์๊ฒ ์ง๋ง.. ๐ฅบ ์ง๊ธ์ ๋ชจ๋ฆ... ํ์ด์ด๋ฒ ์ด์ค ์๊ธ์ ์ฝ๊ธฐ ํ ๋น๋์ด ์ด๋ ๊ฒ ๋นจ๋ฆฌ ์ฑ..
11์ ๋ท์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ ํ๋ก์ ํธ๋ก ์ ์ ์์ด ๋ณด๋ธ ํ ์ฃผ.... ์ ๋ง ์๊ฐ์ด ์ด๋ป๊ฒ ๊ฐ๋์ง ๋ชจ๋ฅด๊ฒ ๋ค. ๐ซ ๋๋์ด ๋ฐํ๋ฅผ ์๋๊ณ ์๋ค!... ๋ฐํ๋ฅผ ๋นจ๋ฆฌ ํด์น์๋ฒ๋ฆฌ๊ณ ์ถ์ ๋งด.. ๐ Fact ํ์ด์ด๋ฒ ์ด์ค์ DB API๋ฅผ ๋ค๋ฃฐ ์ ์๊ฒ ๋์๋ค. ๊นํ๋ธ๋ก ํ์ ์ ์ํํ๊ฒ ์งํํ๊ณ ์๋ค. ํ๋ก์ ํธ ๋ ธ์ ๊ด๋ฆฌ๋ฅผ ์ด์ฌํ ํ๋ค. ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๋ ๋๋ง ํ๋ ์์ ์ ์งํํ๋ค. ํ์๋ค์๊ฒ ์ฝ๋๋ฅผ ์ค๋ช ํด์ฃผ๋ฉด์ ๋๋ ์ฝ๋์ ๋ํ ์ดํด๊ฐ ๋์ด๋ฌ๋ค. ๐ Feeling ํ์๋ค์ ์ ๋ง๋์ ๋๋ฌด๋ ์ข์๋ค. ์ด๋ ๊ฒ ์ ๊ตด๋ฌ๊ฐ๋ ํ๋ก์ ํธ๋ผ๋.. ๐ฅบ ์ฌ์ง์ด ์ฃผ๋ง์ ์์ธ์์ ๋ง๋๊ธฐ๊น์ง ํจ... ๋๋ฌด ์ฆ๊ฑฐ์ ๋ค! ๊นํ๋ธ์ ๋ํ ๋๋ ค์์ด ์ข ๋ ๊ฐ์ ๐ ๋ด๊ฐ ์ผ๋ ํ์ด์ด๋ฒ ์ด์ค ๊ธฐ๋ฅ๋ค์ ์ ๋ง ์ผ๋ถ์๊ตฌ๋... ๐ Finding ๊นํ๋ธ์์ ๋ด ๋ธ..
ํ๋ก์ ํธ 3~4์ผ์ฐจ ์ด์ฐ์ ์ฐ ์ ์ ์์ด ํ๋ค๋ณด๋ ์ผ์ง ์ธ ์งฌ์ด ์์๋ค ^^.. ๊ทธ๋๋ ์๊ฐ๋ณด๋ค ์๋ฃ๋ค์ด ์ฌ์ฌ ๋์ด๋๊ณ ์์ด์ ๋คํ์ด๋ผ๋ ์๊ฐ!.. ๋ ํ์ ๋ชจ๋๊ฐ ์ต์ 1๊ฐ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค. ๐๐๐ ๊ธฐ๋ฅ ์ถ๊ฐ ํ ๋น๋ ํ์๋ฅผ ํตํด ์ ์ด๋ฃจ์ด์ง๋ ์ค. ์์ง๊น์ง๋ ๊นํ๋ธ๋ ๋ฌธ์ ์๊ธด์ ์ด ์์ด์ ๋คํ์ด๋ค! PR๋ ๋ฆฌ๊ณ ๋ณํฉํ๋ ๊ฒ์ ์ต์ํด์ง๋ ์ค... ์ ๋ฒ ๊ทธ๋ด๋ฏํด~
Comment