Study_Develop/ํฌ์ค์ฝ X ์ฝ๋ฉ์จ ๋ถํธ์บ ํ(17)
-
ํฌ์ค์ฝ X ์ฝ๋ฉ์จ 7๊ธฐ ํฌํญ์ฌํ [feat. ํฌ์ค์ฝ ๊ฒฌํ]
7์ 17์ผ ~ 19์ผ ๊น์ง 2๋ฐ 3์ผ ๋ค๋ ์จ ํฌํญ ์ฌํ ๊ฒธ ํฌ์ค์ฝ ๊ฒฌํ!! ์ฐจ๋, ์์, ์๋น๊น์ง ๋ชจ๋ ์ง์ํด์ฃผ์ ์ ์์ฃผ ํธ์ํ๊ฒ ๋ค๋ ์๋ค ใ ใ ๋งํ์ ๋ค๋ค ์นํด์ ธ์ ๊ทธ๋ฅ ๋๋๋ฉด ๋งค์ฐ๋งค์ฐ ์์ฌ์ ์ ๊ฒ ๊ฐ์๋๋ฐ ์ฌํ์ด ์์ด์ ์์ฃผ ์ ๋๋ก ๋ท ํ์ด ํ๊ณ ์จ ๋๋!! ๋๋ถ์ ์์ฃผ ๋ง ํธํ๊ฒ ~ ์ฆ๊ฒ๊ฒ ~ ๋ค๋ ์๋น ใ ใ ๋ถ๋ช ํ ๊ทธ ์ ๋ ๊น์ง๋ง ํด๋ ๋น๊ฐ ์ ~~ ์ฒญ ๋ด๋ ธ๋๋ฐ ์ฌํ ๊ฐ๋ ๋น์ผ์ ํด๊ฐ ์จ์จํ๋ค โ๏ธ ์ฒซ์งธ๋ ๋จน์ ์ ๋ ! ์ ์ ์์์ง๋ง ์์ฃผ ๋ง๋๊ฒ ๋จน๊ณ ์๋ค ใ ใ ์ด๊ณณ ํฌ์คํ ์ Cooomming Sooon ๊ทธ๋ฆฌ๊ณ ์ผ์ฐ ์ ๋ค๊ธฐ ์์ฌ์ด ๋ฉค๋ฒ๋ค๋ผ๋ฆฌ~ ์์ผ๋๋ก ๋๋ฌ๊ฐ๋ค ใ ใ ใ ใ ๋ฏธ๋๋๊ณผ ์ฐ์ธ ๋์ด..^^ ใ ใ ์ค๋๋ง์ ๋ฐ๋ค๋ด์ ์กฐ์ค์๋ค ๊ทธ.. ๋ชจ์์ดํฌ ๋ ๊ท์ฐฎ์๋ฐ.. ์ด์๊ถ์ด ํ์ํ์ ๋ถ์.. ๋๊ธ.. ใ ..
2023.07.21 -
ํฌ์ค์ฝ X ์ฝ๋ฉ์จ 7๊ธฐ 3์ฐจ ํ๋ก์ ํธ ํ๊ณ ! ch. 1
๊ธธ๋ค๋ฉด ๊ธธ์๊ณ , ์งง์๋ค๋ฉด ์งง์๋ ํฌ์ค์ฝ X ์ฝ๋ฉ์จ ํ์คํ ์น๊ฐ๋ฐ์ 7๊ธฐ๊ฐ ๋๋์ด ๋์ด ๋ฌ๋ค! ์ฒ์์ ์ด๊ฒ ํ๋ฃจ๋ผ๋ ๋นจ๋ฆฌ ๋๋๋ฉด ์์์ด ์๊ฒ ๋ค ์ถ์๋๋ฐ, ๋ง์ ๋๋๋ ์์ ์ญ์ญ.. ๋ง์ง๋ง์ ์์ฌ์ธ ์ ์์๋ ์ด์ ๋ ๋ง์ง๋ง ํ ํ๋ก์ ํธ์์ ๋ง๋ ํ์๋ค๊ณผ์ ์ผ๋ฏธ๊ฐ ์ข์๋ ๋๋ถ์ด ์๋๊น.. ์ถ๋ค ใ ใ 3์ฐจ ํํ๋ก์ ํธ๋ ๋ง๋ ํ์๋ค ๋๋ถ์ ํ๋ก์ ํธ๋ ๋ฌด์ฌํ ๋๋๋ค! ํ์๋ค ๋ฟ๋ง ์๋๋ผ ๋ฌด์ฌํ ์๋ฃํ ์ ์๊ฒ ๋์์ฃผ์ ๋ชจ๋์๊ฒ ๊ฐ์ฌ์ธ์ฌ.. ๊ทธ๋ฆฌ๊ณ ๋ฐ์๋ค, ํผ๊ณคํ๋ค๋ ํ๊ณ๋ก ํ๊ณ ๋ก์ด ์์์์์ฃผ ๋ง์ด ๋ฐ๋ ค ๋ฒ๋ ธ๋ค ์ฐ์ .. 3์ฐจ ํ ํ๋ก์ ํธ ๋จผ์ .. ์ฐจ๊ทผ์ฐจ๊ทผ... ํ๊ณ ํด๋ณด๊ณ ๋ก ํ๊ฒ ๋ค.. ์ฃผ์ ์ ์ ? ํ์์ด ๋ฐํ ๋๊ณ , ์ฃผ์ ๋ฅผ ์ ์ ํ๋๋ฐ ๋๋๋๋ ์ฃผ์ ๊ฐ ๋ค ๋น์ทํ๋ค ๋ญ ํ๋งค ์ฌ์ดํธ๋ผ๋์ง, ๋ชจ์ ์ฌ์ดํธ ๋ผ๋์ง ์์ฒญ๋๊ฒ..
2023.07.16 -
ํฌ์ค์ฝ X ์ฝ๋ฉ์จ 7๊ธฐ 9์ฃผ์ฐจ ch3. React (Hooks - useMemo, useCallback)
- react state์ ์๋ช ์ฃผ๊ธฐ ๊ธฐ๋ฅ์ ์ฐ๋ํ ์ ์๊ฒ ํด์ฃผ๋ ํจ์ (ํด๋์ค ์ปดํฌ๋ํธ์์๋ง ๊ฐ๋ฅํ๋ state(์ํ๊ด๋ฆฌ) ์ lifecycle(๋ผ์ดํ์ฌ์ดํด)์ด ๊ฐ๋ฅํ๋๋ก ๋๋ ๊ธฐ๋ฅ) - class ์์์๋ ๋์X ๋์ , class์์ด react๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ๊ฒ - ํ์ง๋ง, ์ด๋ฏธ ์ง๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ชจ์กฐ๋ฆฌ ์ฌ์์ฑํ๋ ๊ฒ์ ๊ถ์ฅ X - ์ต์์ ๋จ๊ณ์์๋ง ํธ์ถ ๊ฐ๋ฅ (์ต์์ ์ปดํฌ๋ํธ X, ๋ฐ๋ณต๋ฌธ, ์กฐ๊ฑด๋ฌธ, ์ค์ฒฉ๋ ํจ์ ๋ด๋ถ์์ ํธ์ถํ๋ฉด ์๋๋ ๊ฒ!) - Hook์ ์ค๋ก์ง Reactํจ์ํ ์ปดํฌ๋ํธ ์์์๋ง ํธ์ถ ๊ฐ๋ฅ ์ข ๋ฅ - useState() : ํจ์ํ ์ปดํฌ๋ํธ์์ ์ํ๊ด๋ฆฌ๋ฅผ ์ํด ์ฌ์ฉ : ๋์ ์ํ ๊ด๋ฆฌ : ํด๋์ค ํ ์ปดํฌ๋ํธ์ state - useEffect() : sideEffect๋ฅผ ์ํ..
2023.06.26 -
ํฌ์ค์ฝ X ์ฝ๋ฉ์จ 7๊ธฐ 9์ฃผ์ฐจ ch2. React map, ref, lifecycle
9์ฃผ์ฐจ๋ ๋ ๊ฐ์๋ค ๋จ๋ ๋๋ฌ๋ค. ์๋๋ ๊ทธ๋ฌ์ง๋ง ์์ฆ๋ฐ๋ผ.. ๋์ฑ์ด ๊ณต๋ถํ๊ธฐ ์ซ๋ค. ใ ใ ์ด์ฉ์ง.. ํด์ผํ ๊ฒ ๋๋ฌด ๋ง์์ ์๋ฌด๊ฒ๋ ์ํ๋ ์ค ใ ํ์ง๋ง.. ์ค๋ ๋๊ฐ ์์ ์ ๊ผญ ๋ณต์ต์ ํด์ผ๋ง ๋ด์ผ์์ ์ ๋ค์ ์ ์๋ค ๊ทธ๋ฐ์๋ฏธ์์ ์ค๋ ๋ฐฐ์ด ๋ด์ฉ ๊พธ์ญ ๊พธ์ญ ๋ณต์ต์ ํด๋ณธ๋ค.. map() ์ผ๋ฐ for ๋ฐ๋ณต๋ฌธ - map()์ ์ธ์๋ก ๋๊ฒจ์ง๋ callback ํจ์๋ฅผ ์คํํ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ง๊ณ ์๋ก์ด ๋ฐฐ์ด์ ๋ง๋ค ๋ ์ฌ์ฉ - map()ํจ์๋ฅผ ํ์์ ๋ฐ๋ผ ๋ฐ๋ณต๋ฌธ์ฒ๋ผ ์ฌ์ฉํ ์๋ ์์ ๋ฌธ๋ฒ arr.map( callbackFunction, [thisArg] ) callbackFunction : ์๋ก์ด ๋ฐฐ์ด์ ์์๋ฅผ ์์ฑํ๋ ํจ์๋ก, currentValue, index, array 3๊ฐ์ ์ธ์๋ฅผ ๊ฐ์ง ์ ์๋ค. [this.A..
2023.06.25 -
ํฌ์ค์ฝ X ์ฝ๋ฉ์จ 7๊ธฐ 9์ฃผ์ฐจ ch.1 React( jsx, props, state, useState)(feat. ๊ทธ๋ฆฌ๊ณ ์์ฆ์...)
๋ฒ์จ 9์ฃผ์ฐจ๋ค! ๋ญ๊ฐ ์๊ฐ์ด ๋น ๋ฅด๊ฒ ๊ฐ๋๋ฏ ๋๋๊ณ 2๋ฌ์ ์ด ํ 1๋ ์ ๊ฐ์ผ๋ฉด์๋ ์๊ทธ์ ๊ฐ๊ธฐ๋ ํ๊ณ (๋ญ๋..) ๋์ถฉ ์ ์ ์ ๋๊ณ ์ด์๋ค๋ ๋ป ๊ฐ๋ค. ๊ทธ๋์ ์ฐธ ๋ง์ ์ผ์ด ์์์ง~ ์ง๋๊ณ ๋ณด๋ ์ฐธ์ผ๋ก๋ ์์คํ ์๊ฐ๋ค... ์ด์ฉ๊ณ .. ์๋ก ์ ์ง์ด์น์ฐ๊ณ , ์ค๋๋ถํฐ React์ง๋๋ฅผ ๋๊ฐ๋ค! ๊ทธ๋ผ ๋ฐ๋ก ๋ฐฐ์ด ๋ด์ฉ ๋ณต์ต์ ํ๋๋ก ํ๊ฒ ๋ค! React ๋? - ํ๋ฉด์ ๋ง๋ค๊ธฐ ์ํ js๋ผ์ด๋ธ๋ฌ๋ฆฌ - ์ฌ์ฉ์์ ์ํธ ์์ฉ์ด ๊ฐ๋ฅํ ๋์ UI์ ์ ๊ฐ๋ฅ ํน์ง! 1. Data Flow - ์๋ฐฉํฅ์ด ์๋, ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ด๋ค 2. Component ๊ธฐ๋ฐ ๊ตฌ์กฐ - ๋ ๋ฆฝ์ ์ธ ๋จ์์ ์ํํธ์จ์ด ๋ชจ๋๋ก ์ํํธ์จ์ด๋ฅผ ๋ ๋ฆฝ์ ์ธ ํ๋์ ๋ถํ์ผ๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ด๋ค. - React๋ UI๋ฅผ ์ฌ๋ฌ Component๋ฅผ ์ชผ๊ฐ์ ๋ง๋ ๋ค. - ํ ํ..
2023.06.20 -
ํฌ์ค์ฝ X ์ฝ๋ฉ์จ 7๊ธฐ 8์ฃผ์ฐจ ch2. ์น์์ผ
์์ ์ ๋ฃ๊ธฐ ์ ์๋ ์ฑํ ์ฑ์ ๋ง๋๋ ๊ฒ์ด ๋๊ฒ ์ด๋ ค์ด ์์ ์ด๋ผ๊ณ ์๊ฐํ๋๋ฐ! socket.io๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ์๊ฐ๋ณด๋ค ์ด๋ ค์ด ์์ ์ด ์๋๋ผ์ ์ ๊ธฐํ๋ค! ๊ทธ๋์ ์ฌ๋ฏธ๋๊ฒ ์์ ์ ๋ค์๋ค ใ ใ ๐ ๊ทธ๋ฌํ๋ฉด ๋ฐฐ์ด ๋ด์ฉ ๋ณต์ต์ ํด๋ณด์ ! ์์ผ ์ด๋? ํ๊ต ์ ๊ณต์์ ์ค์ ๋ฐฐ์ด ์ฉ์ด๊ฐ ๋์ ์กฐ๊ธ์ ๋ฐ๊ฐ์ ๋ค ๊ทธ๋๋ ๋ ์ ๊ณต์๊ตฌ๋~ ใ ใ (๊ทผ๋ฐ ์ฌ์ค ๊ธฐ์ต์ ์ ์๋จ,,) ์์ผ ! (Socket) - ํ๋ก์ธ์ค๊ฐ ๋คํธ์ํฌ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ด๋ณด๋ด๊ฑฐ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๊ธฐ ์ํ ์ค์ ์ ์ธ ์ฐฝ๊ตฌ์ญํ ์ ํ๋ ๊ฒ - ์๋ฒ์ ํด๋ผ์ด์ธํธ๋ฅผ ์ฐ๊ฒฐํด์ฃผ๋ ๋๊ตฌ๋ก์จ ์ธํฐํ์ด์ค ์ญํ ์ ํ๋ ๊ฒ - ์์ผ์ ํ๋กํ ์ฝ, ip์ฃผ์, ํฌํธ ๋๋ฒ๋ก ์ ์๋๋ค Socket.io WebSocket์ด๋? - ์๋ฐฉํฅ ์ํต์ ์ํ ํ๋กํ ์ฝ (์ฝ์) - html5 ์น ํ์ค..
2023.06.18