Frontend Dev/๐ฅ ์ฝ๋์คํ ์ด์ธ FE ๋ถํธ์บ ํ (78) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ Section4 Unit3 [React] ์ฌํ - Virtual DOM๊ณผ React Hooks Section4 Unit3 [React] ์ฌํ - Virtual DOM๊ณผ React Hooks ๐ Chapter1. React ์ฌํ • React์ Virtual DOM React๋ UI์ ์ํ๋ฅผ ์ถ์ ํ๊ณ ๋ณํ๊ฐ ์ผ์ด๋ ์์๋ค์ ๋น ๋ฅด๊ฒ ์ ๋ฐ์ดํธํ ์ ์๋๋ก Virtual DOM์ด๋ผ๋ ๊ฐ์์ DOM ๊ฐ์ฒด๋ฅผ ํ์ฉํ๋ค. ์ด๋ ์ค์ DOM์ ์ฌ๋ณธ ๊ฐ์ ๊ฐ๋ ์ผ๋ก, React๋ ์ค์ DOM ๊ฐ์ฒด์ ์ ๊ทผํ์ฌ ์กฐ์ํ๋ ๋์ ์ด ๊ฐ์์ DOM ๊ฐ์ฒด์ ์ ๊ทผํ์ฌ ๋ณํ ์ ๊ณผ ๋ณํ ํ๋ฅผ ๋น๊ตํ๊ณ ๋ฐ๋ ๋ถ๋ถ์ ์ ์ฉํ๋ค. ๐ Chapter2. React Hooks • ๋ ๋๋ง ์ต์ ํ๋ฅผ ์ํ Hook์ผ๋ก useMemo์ uesCallback์ด ์๋ค. → useMemo๋ ๊ฐ์ ์ฌ์ฌ์ฉ์ ์ํด ์ฌ์ฉํ๋ Hook์ด๋ผ๋ฉด, useCallback.. Section4 Unit2 [์๋ก ํ๋ก์ ํธ] COZ Shopping Section4 Unit2 [์๋ก ํ๋ก์ ํธ] COZ Shopping ๐ Chapter1. ์๋ก ํ๋ก์ ํธ ๋ณธ ํ๋ก์ ํธ ์ ์ ๊ฐ๋จํ ์งํํ๋ ์๋ก ํ๋ก์ ํธ๊ฐ ์์๋์๋ค. • ์คํ๋ฆฐํธ ๊ธฐ๊ฐ์ 5์ผ (ํ์ผ๋ง / ์ค๋๋ถํฐ ๋ค์์ฃผ ์์์ผ๊น์ง) • ์ฒซ ๋ ์ ํ๋๋ ๋ฐ์ด, ๋ง์ง๋ง ๋ ์ ํ๊ณ ๋ฐ์ด • ์ด๋ฒ ๊ณผ์ ๋ ์ ์์ผ ๋ฐฉ๋ฒ๋ก ๊ณผ ์คํฌ๋ผ๋ณด๋๋ฅผ ํ์ฉํ ํ๋ก์ ํธ๋ก, ํผ์ ์์ ํ๋ ์๋ก ํ๋ก์ ํธ์ด์ง๋ง ๊น๊ณผ ๊นํ๋ธ๋ฅผ ์ ๊ทน ํ์ฉํ๋ค. • ๋, ์ด๋ฒ ๊ณผ์ ๋ React๋ฅผ ์ฌ์ฉํด ์ฃผ์ด์ง ์๊ตฌ์ฌํญ์ ๋ง์กฑํ๋ ์ํ๋ฆฌ์คํธ ํ์ด์ง, ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์๊ฐ ๋ถ๋งํฌ ํ ์ํ๋ค์ ์กฐํํ ์ ์๋ ๋ถ๋งํฌ ํ์ด์ง๋ฅผ ํฌํจํ๋ SPA ์ฑ์ ๊ตฌํํ๋ ๊ฒ์ด ๋ชฉ์ ์ด๋ค. • ์ด๋ฒ ์๋ก ํ๋ก์ ํธ์์์ ๋์ ๋ชฉํ๋, • ๊นํ๋ธ ์ฌ์ฉ ์ต์ํด์ง๊ธฐ (branch, push, p.. Section4 Unit1 [์๋ฃ๊ตฌ์กฐ/์๊ณ ๋ฆฌ์ฆ] ๊ธฐ์ด - Tree, Graph Section4 Unit1 [์๋ฃ๊ตฌ์กฐ/์๊ณ ๋ฆฌ์ฆ] ๊ธฐ์ด - Tree, Graph ๐ Chapter3. Tree์ Graph ์ง๋ ์ฑํฐ์ ๋ง์ฐฌ๊ฐ์ง๋ก Tree์ Graph๋ ๊ฐ์ธ ๋ ธ์ ์ ์ฐ์ ์ ๋ฆฌ๋ง ํด๋์๋ค. ๋ธ๋ก๊ทธ์๋ ์๋ฃ๊ตฌ์กฐ์ ๋ํด ์ข ๋ ๊ด์ฌ์ด ์๊ฒจ์ ๊ณต๋ถ๋ฅผ ํ๊ฒ ๋๋ฉด ์ ๋ฆฌ๋ฅผ ํด์ ๊ธฐ๋กํด๋ณผ๊น ์ถ์ด์ ์ด๋ฒ์๋ ์ญ์ ๊ฐ๋ ๋ง ์ ์ด๋ณผ๊น ํ๋ค. ํนํ ์ด๋ฒ์๋ ๊ทธ๋ํ์ ์ฌ๋ฌ ์ข ๋ฅ์ ํํ๋ฐฉ์ ๋ฑ์ด ๋๋ฌด ๋ง์์ ํท๊ฐ๋ฆฌ๊ณ ์ด๋ ค์ ๋ ๊ฒ ๊ฐ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๋ํ๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ ์ค ๋ํ์ ์ธ ๋ ๊ฐ์ง์ธ BFS์ DFS๋ ์ฝ์ง ์์๋ค. ์ฌ๋ฌ๋ฒ ๊ธ์ ์ฝ๋ค๋ณด๋ ์ดํด๋ ๋์๋๋ฐ, ์ด๊ฑธ ๋ด๊ฐ ์์ฉํ ์ ์์๊น? Tree๋ ๊ทธ๋ํ์ ์ฌ๋ฌ ๊ตฌ์กฐ ์ค ๋จ๋ฐฉํฅ ๊ทธ๋ํ์ ํ ๊ตฌ์กฐ๋ก, ํ๋์ ๋ฟ๋ฆฌ๋ก๋ถํฐ ๊ฐ์ง๊ฐ ์ฌ๋ฐฉ์ผ๋ก ๋ป์ ํํ๊ฐ ๋๋ฌด์ ๋ฎ์๋ค๊ณ ํด.. Section4 Unit1 [์๋ฃ๊ตฌ์กฐ/์๊ณ ๋ฆฌ์ฆ] ๊ธฐ์ด - Stack, Queue Section4 Unit1 [์๋ฃ๊ตฌ์กฐ/์๊ณ ๋ฆฌ์ฆ] ๊ธฐ์ด - Stack, Queue ๐ Chapter1. ์๋ฃ๊ตฌ์กฐ • ์๋ฃ๊ตฌ์กฐ๋ ์ฌ๋ฌ ๋ฐ์ดํฐ์ ๋ฌถ์์ ์ ์ฅํ๊ณ , ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ์ํ ๊ฒ • ์์ฃผ ๋ฑ์ฅํ๋ ๋ค ๊ฐ์ง์ ์๋ฃ๊ตฌ์กฐ: Stack, Queue, Tree, Graph ๐ Chapter2. Stack๊ณผ Queue ๋ถํธ์บ ํ๋ฅผ ํตํด Stack๊ณผ Queue๋ฅผ ๊ณต๋ถํ๋ฉฐ, ๋ ธ์ ์ ์ ๋ฆฌ๋ฅผ ํด๋จ๋๋ฐ ๋ธ๋ก๊ทธ์ ๋ฐ๋ก ๊ธ์ ์ธ๊น ํ๋ค๊ฐ ์ฐ์ ์ ๋ณด๋ฅํ๊ธฐ๋ก ํ๋ค. ์๋ฃ๊ตฌ์กฐ๋ฅผ ์ฒ์ ์ ํ๊ธฐ๋ ํ๊ณ , ์ต์์น ์์ ๊ฐ๋ ์ด๋ผ ์กฐ๊ธ ๋ ๊ฐ์ธ ๋ ธ์ ์ ์ ๋ฆฌ๋ฅผ ํด๋๊ณ ๊ณต๋ถ๋ฅผ ํ๋๊ฒ ์ข์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ค. ๊ฐ๋ ์ ๋๋ง ๊ธฐ๋กํด๋ณผ๊น ํ๋ค. Stack ๋ฐ์ดํฐ(data)๋ฅผ ์์๋๋ก ์๋ ์๋ฃ๊ตฌ์กฐ • Stack์ ์ ๋ ฅ๊ณผ ์ถ๋ ฅ์ด ํ๋์ ๋ฐฉํฅ, ์ฆ.. Section3 ํ๊ณ , ์ผ์ฃผ์ผ ๊ฐ์๋ ํ ๋ฌ Section3 ํ๊ณ , ์ผ์ฃผ์ผ ๊ฐ์๋ ํ ๋ฌ ์ ๋ง ์ผ์ฃผ์ผ ๊ฐ์๋ค. ๊ทธ ๊ธด ํ ๋ฌ ๋์ ๋ ๋ฌด์์ ํ๋๊ฐ. ์์ผ๋ก๋ ํ ๊ฒ์ด ๋๋ฌด ๋ง๋ค๋ ๊ฒ์ ๊ฑฑ์ ๊ณผ ํ์จ๊ณผ ํผ๋ก๊ฐ ๋ชฐ๋ ค์ค์ง๋ง ํํธ์ผ๋ก๋ ์๋๊ฐ์ด ๋ ๋ค. ์ฌ์ ํ ๋ฌ๋ฆฌ๊ณ ์ถ์์, ์์ง ์ง์น์ง ์์์์, ๊ทธ๋๋ ์ฌ๋ฏธ๊ฐ ์๊ณ , ์ฑ์ทจ๊ฐ์ ๋๋๋ค๋ ๊ฒ์ ๊ฐ์ฌํ๋ค. ๐ ๋ชฉํ: ๐ฉ๐ป๐ป 2023๋ ์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ปค๋ฆฌ์ด ์์ํ๊ธฐ โจ Keep _๋ง์กฑ์ค๋ฌ์ด ๋ถ๋ถ, ๊ณ์ ์ด์ด๊ฐ๋ฉด ์ข์ ๋ถ๋ถ • ๋งค์ผ ๊พธ์คํ ํ์ตํ๊ณ , ๊ณต๋ถํ๋ ๋ด์ฉ์ ์ ๋ฆฌํ๊ณ ๊ธฐ๋กํ๋ ์ต๊ด → ์ธ์ ๋ ํค์๋๋ก ๊ฒ์ํ ์ ์๋ ์ ์ฉํจ๊ณผ ํธ๋ฆฌํจ! → ์ดํด๊ฐ ์๋๋ ๋ถ๋ถ๋ ์ผ๋จ ๋ณต๋ถ ํ๋ฉด ๋์ค์๋ผ๋ ๋ค์ ๋ณด๊ฒ ๋จ ๐ • ํ๋ฃจ๋ฅผ ๋์๋ณด๋ ์์ฃผ ๊ฐ๋ตํ ํ๊ณ ์์ฑ • ์ ์๊ฐ์ ์ถ์ • ๋งค์ผ ์คํธ๋ ์นญ์ผ๋ก ๋ชธ ํ์ด์ฃผ.. Section3 Unit7 [Backend] ์ธ์ฆ / ๋ณด์ - Cookie/Session Section3 Unit7 [Backend] ์ธ์ฆ / ๋ณด์ - Cookie/Session ๐ Chapter1. Cookie/Session ์น์์๋ ์ฌ์ฉ์์ ์ ๋ณด๋ฅผ ์ด๋๊ฐ์ ์ ์ฅํด์ผ ํ๋๋ฐ HTTP๋ ์ํ๋ฅผ ์ ์ฅํ์ง ์๋๋ค. • Cookie ์๋ฒ์ ์ํด ํด๋ผ์ด์ธํธ์ ์ ์ฅ๋๋ ๋ฐ์ดํฐ ํ์ผ๋ก ์๋ฒ์์ ํด๋ผ์ด์ธํธ์ ์์์ฑ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์๋ฒ๋ ํด๋ผ์ด์ธํธ์ ์ฟ ํค๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ผ๋ฉฐ, ์ฟ ํค๋ฅผ ์ด์ฉํ๋ ๊ฒ์ ๋จ์ํ ์๋ฒ์์ ํด๋ผ์ด์ธํธ์ ์ฟ ํค๋ฅผ ์ ์กํ๋ ๊ฒ๋ง ์๋ฏธํ์ง ์๊ณ , ํด๋ผ์ด์ธํธ์์ ์๋ฒ๋ก ์ฟ ํค๋ฅผ ๋ค์ ์ ์กํ๋ ๊ฒ๋ ํฌํจ๋๋ค. ์ฟ ํค๋ ๋ก๊ทธ์ธ ์ํ ์ ์ง, ํ ๋ง ์ํ ์ ์ง ๋ฑ ์ฅ์๊ฐ ๋ณด์กดํด์ผ ํ๋ ์ ๋ณด ์ ์ฅ์ ์ ํฉํ๋ค. ์ฟ ํค๋ ํด๋ผ์ด์ธํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ธฐ ๋๋ฌธ์ ์๋ฒ์ ๋ถํ๊ฐ .. Section3 Unit6 [๋คํธ์ํฌ] ์ฌํ Section3 Unit6 [๋คํธ์ํฌ] ์ฌํ ๐ Chapter1. TCP/IP • TCP (Transmission Control Protocol) ์ ๋ขฐ์ฑ ์๋ ๋ฐ์ดํฐ ์ ์ก์ ์ง์ํ๋ ์ฐ๊ฒฐ ์งํฅํ ํ๋กํ ์ฝ. TCP๋ ํต์ ์ ํ๊ธฐ ์ ์ ๋จผ์ ์๋ก์ ์ปดํจํฐ์ ์ฐ๊ฒฐ์ ์ค์ ํ์ฌ ์ ์ก ๊ณผ์ ์์ ํจํท์ ์์ค์ ๊ฒ์ฌํ๊ณ ์์๊ฐ ๋ฐ๋์ง ์๋๋ก ๋ณด์ฅํ๋ค. → ์์ ์ฑ์ด ๋์ ํต์ ์ ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค. ์ฃผ๋ก ํ์ผ์ด๋ ์ด๋ฉ์ผ์ ์ ์กํ๋ ๋ฑ ์ ๋ขฐ์ฑ์ด ์ค์ํ ํต์ ์์ ์์ฃผ ์ฌ์ฉ๋๋ค. • UDP (User Datagram Protocol) ์ ํธ ์ ์ฐจ ์์ด ์ผ๋ฐฉ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๋น์ฐ๊ฒฐํ ํ๋กํ ์ฝ. ๋ฐ์ดํฐ์ ์ ๋ขฐ์ฑ์ ๋ฎ์ง๋ง ์๋๊ฐ ๋น ๋ฆ. (์ค์๊ฐ ์คํธ๋ฆฌ๋ฐ ๋ฑ์์ ๋ง์ด ์ฌ์ฉ๋๊ณ , ์ต๊ทผ http3 ๋ฒ์ ์ด ๋์ค๋ฉด์ ๊ธฐ์กด์ TCP ๋ฐฉ์์ผ.. Section3 Unit5 [์ฌ์ฉ์ ์นํ ์น] ์น ํ์ค & ์ ๊ทผ์ฑ- ๊ณผ์ ์น ํ์ค & ์ ๊ทผ์ฑ ๊ฐ์ 2 Section3 Unit5 [์ฌ์ฉ์ ์นํ ์น] ์น ํ์ค & ์ ๊ทผ์ฑ - ๊ณผ์ ์น ํ์ค & ์ ๊ทผ์ฑ ๊ฐ์ 2 โญ๏ธ ๊ณผ์ . ์น ํ์ค & ์ ๊ทผ์ฑ ๊ฐ์ - Cmarket Redux ๋ฆฌํฉํ ๋ง โ๏ธ Bare Minimum Requirement โ ๊ณผ์ ์๋ ์ด 8๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๋ฌธ์ ์ ๋ด์ฉ๊ณผ ๋ฌธ์ ๊ฐ์ด๋ ๋ด์ฉ์ ๋ฐ๋ผ ์ค์ต์ ์งํํ์๋ฉด ๋ฉ๋๋ค. โ Cmarket Redux ๋ฆฌํฉํ ๋ง์ Cmarket Redux ๋ ํผ๋ฐ์ค ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ํด๋ก ํ์ฌ ์งํํฉ๋๋ค. Cmarket Redux ๋ฆฌํฉํ ๋ง๋ ๊ณผ์ ์์ ๊ฐ์ด๋๊ฐ ์์ต๋๋ค. ๊ฐ์ด๋ ๋ด์ฉ์ ๋ฐ๋ผ ์งํํ์๋ฉด ๋ฉ๋๋ค. ๊ณผ์ : What I Learned Section3 Unit5 [์ฌ์ฉ์ ์นํ ์น] ์น ํ์ค & ์ ๊ทผ์ฑ - ๊ณผ์ ์น ํ์ค & ์ ๊ทผ์ฑ ๊ฐ์ Section3 Unit5 [.. ์ด์ 1 2 3 4 5 6 ยทยทยท 10 ๋ค์