Today, What I learned ํํฐ๋์ ์์ธํ!.. ๊ฑฐ์ ์ ์ ํ ์คํธ ๊ธ์ ํผ๋๋ฐฑ์ ํตํด ๋ฐ๊ฒฌํ ๋ฒ๊ทธ.. ๋ฒ๊ทธ ํด๊ฒฐ ๊ณผ์ ์ ๊ธฐ๋กํด ๋ณธ๋ค. ํ์ฌ ๋ด๊ฐ ์์ ํ ๋ง์ดํ์ด์ง์๋ ์ด๋ฐ ๋ฒ๊ทธ๊ฐ ์๋ค. ๊ธฐ์กด ์ ์ ์ ๋ณด์ ๋ฌ๋ผ์ก์ ๋๋ง ๋ฒํผ์ ํ์ฑํ์์ผ์ผ ํ๋๋ฐ, ์ ํจ์ฑ ๊ฒ์ฌ์ ๊ทธ ๋ถ๋ถ์ ๋นผ๋จน์ด์.. ์์ ํ๋๋์ ์ฌ๋ถ์ ์๊ด์์ด ๊ณ์ํด์ ์๋ฒ์๊ฒ ์์ฒญ์ ํ ์ ์๋ ์ํ์๋ค!!... ((OMG)) ์ด๋ฐ ์๋ฏธ ์๋ ๋ฆฌ์์ค ๋ญ๋น๋ฅผ ๋ง๋ ์ผ์ด์ผ๋ง๋ก ํ๋ก ํธ์๋๋ก์ ํด์ผ ํ ์ผ... ๐ State ์ถ๊ฐํ๊ธฐ ํด๊ฒฐ์ ์ํด ์ด๊ธฐ ๋ ๋๋ง ์ ์ ์ฅ๋ ์ ์ ์ ์ ๋ณด๋ฅผ ๋ฐ์์ฌ state๋ฅผ ํ๋ ๋ง๋ค์๋ค. const [defaultUserInfo, setDefaultUserInfo] = useState(defaultInfo); ์ข ์ฌ..
Today, What I learned? ์ฐ๋ฆฌ ํ๋ก์ ํธ์ ์ ์ฉ๋์ด ์๋ ์ฝ๋๋ถํ ์ ๋ํด์ ์์๋ณด๋ ค ํ๋ค. ๋ด๊ฐ ์ ์ฉํ ๋ถ๋ถ์ด ์๋์๊ณ , ๋๋ ์ฒ์ ์ ํ ๊ฒ์ด๋ผ ์์ง ์์ํ ๋ถ๋ถ!... ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์๋ ์ด ๋ถ๋ถ์ด ์ ์ค๋ช ๋์ด ์๋ค. https://ko.reactjs.org/docs/code-splitting.html ์ฝ๋ ๋ถํ – React A JavaScript library for building user interfaces ko.reactjs.org ์ฝ๋ ๋ถํ ์ ์ฑ์ ์ง์ฐ๋ก๋ฉ(lazy loading) ํ ์ ์๋๋ก ๋์์ค๋ค. ์ฌ์ฉ์๊ฐ ํ์ํ ์ฝ๋๋ฅผ ๊ทธ๋๊ทธ๋ ๋ถ๋ฌ์ค๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ๋ก๋ฉ์ ํ์ํ ์ฝ๋๊ฐ ์ค์ด๋ค๊ณ , ์ฑ๋ฅ ํฅ์์ ๋ง์ ๋์์ด ๋๋ค. React.lazy React.lazy ํจ์๋ฅผ ์ด์ฉํด์ ..
2์ ์ ์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ MVP ๊ธฐ๋ฅ ๊ตฌํ์ ์ ์ ์์๋ ํ ์ฃผ๊ฐ ์ง๋ฌ๋ค ๐ ๊ฐ์ฅ ๋ถํ์ด ํ ์ฃผ์๋ ๊ฒ ๊ฐ๋ค.. ๐ Fact firebase CORS ์๋ฌ๋ฅผ ํด๊ฒฐํ๋ค. ๋ง์ดํ์ด์ง UI๋ฅผ ๊ฝค ์์ ํ๋ค. ๋ง์ดํ์ด์ง ํ๋กํ ์์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค. ๋ง์ดํ์ด์ง ํ๋ก์ ํธ ๋ฆฌ์คํธ ์กฐํ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค. ์ต์ํ์ MVP ๊ตฌํ์ด ๊ฑฐ์(!) ๋๋ฌ๋ค. ๋ฒ๊ทธ๋ฅผ ์์ ํ๊ณ ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋งํ๊ณ ์๋ค. ๐ Feeling ์ ํด๋ดค๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ฉฐ ์ฝ์ง์ ๋ง์ด ํ๋ค ๐ ๊ทธ๋๋ ๊ตฌํ๋์ ๋ ์ฆ๊ฑฐ์.. ์์ ๋ถ์ฉ ๋ฐค์ ์ง์ค์ด ์ ๋์ด์ ํฐ์ผ์ด๋ค.. ์๋ฉดํจํด ์ง์ผ.. ์ปค์คํ ํ ์ ์ด์ ์์ ๋กญ๊ฒ ๋ค๋ฃฐ ์ ์๊ฒ ๋ ๊ฒ ๊ฐ๋ค ์ข๋ค. ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐ๋ ์ด์ ๋ฅผ ์์ง ๋ง์.. ๐ Finding input ํ๊ทธ์ radio, checkbox ๋ฅผ ..
Today, What I learned? ์ง๋ ๊ธ์ด ๊ธธ์ด์ ธ์ ์ด์ด์ ์์ฑํ๋ ํ๋ก์ ํธ ๋ฆฌ์คํธ ํํฐ๋ง ์ฌ์ ~ ์ค๋์ 3์ค ์ค์ฒฉ ๊ฐ์ฒด์ ๊ฐ์ ํตํด ํ๋ก์ ํธ๋ฅผ ํํฐ๋งํ๋ ๊ณผ์ ์ ๋ํด ๊ธฐ๋กํ๋ค. ์ฌํ๊ป.. ์ค์ฒฉ ๊ฐ์ฒด๊น์ง ๊ฒช์ด๋ดค์ง๋ง 3์ค์ผ๋ก ์ค์ฒฉ๋.. ๊ทธ๋ฌ๋๊น ์ค์ฒฉ์ ์ค์ฒฉ์ ์ค์ฒฉ ๊ฐ์ฒด๋ ์ฒ์์ด๋ผ ์ฝ์ง์ ์ข ํ๋ค. ๊ทธ๋๋ Promise ๋ฐฐ์ด๋ณด๋จ ๋นจ๋ฆฌ ํด๊ฒฐํจ ใ ์ผ๋จ ์ต์ข ๋ณธ์ ์ด๋ ๋ค. ๊ธฐ์ ๋ง์์ผ๋ก gif๋ฅผ ๋ง๋ค์๋ค ^^.. ์ด ๋ ์์ 3 ์ค์ฒฉ ๊ฐ์ฒด ์ง์ํ, ์ฐธ์ฌํ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ํ๋ก์ ํธ ์์ด๋๋ก ๋ฌธ์(๊ฐ์ฒด)๊ฐ ๋ง๋ค์ด์ง๊ณ , ๊ทธ ์ ๊ฐ์ฒด์ recruited ๋ผ๋ ํค๊ฐ์ ํตํด ํ๋ณ๋๋ค. ์๋์ฒ๋ผ true/false์ ๋ฐ๋ผ ๊ฐ๋ฆฐ๋ค. appliedProjects๋ผ๋ ๊ฐ์ฒด ์์ ๊ฐ ๋ฌธ์ ์์ด๋๋ผ๋ ๊ฐ์ฒด ์์ recruite..
Today, What I learned? ๋ง์ดํ์ด์ง์ ํด๋น ์ ์ ํ๋ก์ ํธ ๋ฆฌ์คํธ๋ฅผ ํํฐ๋งํ๊ธฐ ์ํ ๊ธด ์ฌ์ .... ๋๋ฅผ ๋น๊ธ ๋์๋ฒ๋ฆฌ๊ฒ ๋ง๋ค์๋ Promise์ ํด๊ฒฐํ ์ ์์๋ Promise.all์ ๋ํด ์์๋ณธ๋ค. ๋ฐ๋จ, Promise ๋ฐฐ์ด ์ฐ๋ฆฌ ํ๋ก์ ํธ์ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ ์กฐ๊ธ ๋ณต์กํ ํธ์ธ๋ฐ.. ๋ง์ดํ์ด์ง์์์ ํ๋ก์ ํธ ๋ฆฌ์คํธ๋ ํ์ฑํ๋ ์นดํ ๊ณ ๋ฆฌ์ ๋ฐ๋ผ์ ๊ทธ์ ํด๋นํ๋ ํ๋ก์ ํธ๋ค์ ๋ณด์ฌ์ฃผ์ด์ผ ํ๋ค. ์ฐธ์ฌํ ํ๋ก์ ํธ๋ผ๋ฉด ์ง์ํ ํ๋ก์ ํธ๋ง ๋ณด์ฌ์ฃผ๋ ์.. ๋ญ ์ฌ๊ธฐ๊น์ง์ผ ๋ณดํต์ ํํฐ๋ง์ด์ง ์๋? ์ถ์ ์ ์์ง๋ง ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด์๋ ์ป์ด์จ ๊ฐ๊ฐ์ ๋ฌธ์์์ด๋ ๋ฆฌ์คํธ๋ฅผ ํตํด์ ๊ฐ๊ฐ์ ํ๋ก์ ํธ ์ ๋ณด๋ฅผ ๋ค์ ์กฐํํด์ผ ํ๋.. ๊ณผ์ ์ ๊ฑฐ์ณ์ผ ํ๋ค. ์ ๋ฐ์ดํฐ ๊ตฌ์กฐ๊ฐ ์ด๋ฐ๊ฐ์?๋ผ๊ณ ๋ฌป๋๋ค๋ฉด ์ฐ๋ฆฌ ํ์ ๋ชจ๋ ํ..
Today, What I learned? ํ๋ก์ ํธ์ ๊ณต์ฉ ๋ชจ๋ฌ์ ํ์ฉํ๋ ค๊ณ ํ์ง๋ง ๐ ๊ทธ๋๋ ํ์ฉํ ์ ์๋ ํํ๋ผ ๋ ๋ค๋ฅธ ์ปค์คํ ๋ชจ๋ฌ์ ๋ง๋ค์ด ๋ณด๊ธฐ๋ก ํ๋ค. ๋๋ถ์ด ๊ณต์ฉ ๋ชจ๋ฌ์ ์ด๋ป๊ฒ ๋ง๋ค ์ ์์์ง?? ์ง๋ ํ๋ก์ ํธ์์ ๋ง์ด ๊ณ ๋ฏผํ์๋๋ฐ ์ด๋ฒ ํ๋ก์ ํธ์์๋ ๋ฉ์ง๊ฒ ๊ตฌํํด ์ค ํ์ ๋ถ์ด ์์ด์!.. ๋ง์ด ๋ฐฐ์ ๋ค ๐ ๊ทธ๋์ ์ค๋์ ๋ชจ๋ฌ์ ๋ํด ์ ๋ฆฌํด ๋ณธ๋ค. useModal hook ๋ชจ๋ฌ์ ๊ณตํต์ ์ผ๋ก ์ฐ๋ ค๋ฉด ์ผ๋จ ๋ชจ๋ฌ์ด ์ด๋ฆฌ๊ณ ๋ซํ๋ ์ํ๋ฅผ ๊ด๋ฆฌํด์ฃผ์ด์ผ ํ๋ค. ์ด๋ฅผ ์ํด์ ๋ณดํต ์ปค์คํ ํ ์ผ๋ก ๋ชจ๋ฌ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ค. ์ํ๋ฅผ ๋ณ๊ฒฝํด ์ฃผ๋ ํจ์ ๊ฐ์ ๊ฒ์ ๋ง๋ค์ด์ฃผ์ด ๊ด๋ฆฌํ๋ค. ๋ ์ฌ๊ธฐ์ onClick ์ด๋ฒคํธ๋ onChange ์ด๋ฒคํธ์ฒ๋ผ ํ์ํ ๊ฒ๋ค์ ์ถ๊ฐํด ์ค๋ค. const useModal = (initial..
Today, What I learned? ๋ผ๋์ค ๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค์ ์ํ ์ ์ง๋ฅผ ์ํ ๊ณ ๋ฏผ์ ๊ณผ์ ์ ๊ธฐ๋กํด ๋ณธ๋ค!.. ๋จ์ํ ๊ฐ์ ๋ฃ์ด state๋ฅผ ๋ณ๊ฒฝํด ์ฃผ๋ ๊ฒ์ด ์๋๋ผ, ์ด์ ์ํ ์ค๋ ์ท์ ์ด์ฉํด์ state๋ฅผ ๋ณ๊ฒฝํ๋ ๋ก์ง์ ์จ๋ณด๊ฒ ๋์ด ์ข์๋ค. ์ฒซ ๋ฒ์งธ ์๋ ๋ผ๋์ค ๋ฒํผ const [isJuniorChecked, setIsJuniorChecked] = useState( user?.isJunior, ); const [checkedPositions, setCheckedPositions] = useState( user?.positions, ); ๋ผ๋์ค ๋ฒํผ์ ๋ค์ด๊ฐ onChange ์ด๋ฒคํธ. const handleCheckedRadioChange = useCallback( (e: React.ChangeE..
์ด๋ค ์๋ฌ? ํ์ด์ด๋ฒ ์ด์ค ์คํ ๋ฆฌ์ง์ ์ด๋ฏธ์ง ์ ๋ก๋๋ฅผ ๊ตฌํํ๋ ์ค CORS ์๋ฌ๋ฅผ ๋ง๋๊ฒ ๋์๋ค. Access to XMLHttpRequest at '~~' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ์์ธ ํ์ ๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ (Cross-origin resource sharing)๊ฐ ํ์ฉ์ด ๋์ด์์ง ์์์ ์๊ธด ์ค๋ฅ!.. CORS ์๋ฌ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ํด๋ผ์ด์ธํธ ..
2์ ๋์งธ ์ฃผ๋ฅผ ๋ณด๋ด๋ฉฐ ๋ฒ์จ 2์ ์ค์์ด๋ค. ์์ง?... ์บ ํ๋ฅผ ์งํํ๋ฉฐ ๊ฐ์ฅ ๋ง์ด ๋ ์๊ฐ์ด ์ ๋ฒ์จ ์ด๋ ๊ฒ ์๊ฐ์ด ์ง๋ฌ๋๊ฐ?.. ์ธ ๋ฏํ๋ค. ํ ์๋ฃ๊น์ง ๋ฑ ํ ๋ฌ ์ ๋ ๋จ์๋ค ^^... ๐ Fact ์ต์ข ํ๋ก์ ํธ๊ฐ ์์๋์๋ค. ๋์์ด๋๋๊ณผ์ ํ์ !.. ๋ถ๋ฆฌ๋๋ฅผ ๋งก๊ฒ ๋ค๊ณ ์์ํ๋ค.. ๋ง์ดํ์ด์ง ๊ธฐ๋ฅ์ ๋งก์๋ค. ํ์๋ค๊ณผ ํ์์ ํ๋ค. UI๋ฅผ ์ผ์ฐจ์ ์ผ๋ก ๋ง์น๊ณ ๊ธฐ๋ฅ ๊ตฌํ ์ค์ด์ง๋ง UI๋ฅผ ๋ค์ ์์ ํ ๋ฏํ๋ค. ๐ Feeling ์ต์ข ํ๋ก์ ํธ๊ณ ์๋ฌด๋๋ ์ฑ๋ฆฐ์งํ์ด๋ค ๋ณด๋ ์ฝ๊ฐ์ ์๋ฐ๊ฐ(?) ๊ฐ์ ๊ฒ๋ ์๋ ๊ฒ ๊ฐ๋ค. ๋ถ๋ฆฌ๋.. ํ์ ์ผ์ดํ๋ ค ํ๊ณ , ๋์์ด๋์์ ์ํต์ ์ํ ๋ฌธ์ํ๋ฅผ ํ๊ณ .. ์ด๋ฐ ์ผ๋ค์ ํ๊ณ ์๋๋ฐ ์ํ๊ณ ์๋ ๊ฒ์ธ๊ฐ? ์ง๊ธ๊น์ง ๋งก์ ์ ์ด ์์๋ ๋ง์ดํ์ด์ง๋ฅผ ๋งก์ ์ข๋ค. ๋ฉ์ง ํ์๋ค์ ๋ง๋์..
Today, What I learned? ๋ง์ดํ์ด์ง ๊ตฌํ ์ค!.. ๋ง์ดํ์ด์ง ์ ์ ์ ๊ฐ์ ธ์ค๋ ์ ์ ์ ๋ณด๋ฅผ ๋ ๋๋ง ํด์ฃผ๋ ๊ณผ์ ์์ ๊ธฐ์ ์คํ ๋ฐ์ดํฐ๋ฅผ ํธ๋ค๋งํ๋ ์ค์ ๋งํ๊ณ ๋ง์๋ค. ๊ฐ๋ฐ ๊ธฐ์ ์คํ์ ์ ๋์ค๊ณ ์์ง๋ง ํฌ์ง์ ๊ณผ ์๊ด ์์ด ๊ธฐํ, ๋์์ธ ๋ถ๋ถ์ด ์ค๋ณต๋์ด ๋ํ๋ฌ๊ธฐ ๋๋ฌธ..๐จ๐จ๐จ (NOOOOOooo...) ์ ์ฌ์ง์์๋ ์๋ ธ์ง๋ง ๋์์ธ, ํ๋ก ํธ์๋๊ฐ ์ ํ๋์ด ์๋ ์ํ์๋ค. ์ํ๋ ๋๋ก ๋๋ ค๋ฉด ์ ์ ์ ์ ํ๋ ํฌ์ง์ ์ ๋ฐ๋ผ์ ๊ตฌ๋ถ๋ ํ์๊ฐ ์๊ณ , ์ ์ ๊ฐ ๊ธฐํ์ด๋ ๋์์ธ ๋ ์ค ํ๋๋ฅผ ์ ํํ๋ค๋ฉด ํด๋น ํฌ์ง์ ์ ์คํ์ด ํ์ฑํ๋๋๋ก ํด์ผ ํ๋ค!.. ๊ธฐ์กด ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์๋ค. {skills.map((skill: string) \=> { const isChecked \= checkedSkills?.inc..
Comment