๋ฒ์จ ์น์ 2๊ฐ ๋๋ฌ๋ค๋โฆ? ์ ๊ฐ์๋ก ์๊ฐ์ด ๋นจ๋ฆฌ ์ง๋๊ฐ๋ ๊ฒ ๊ฐ์์ง ์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ๋ค. ๐ค์น์ 2์์๋ ๊ณ ์ฐจํจ์์ OOP, ๋น๋๊ธฐ, React, ๋คํธ์ํฌ, Node.js, Express ๋ฑ๋ฑ ๊ต์ฅํ ๋ง์ ๋ด์ฉ์ ๋ฐฐ์ ๋๋ฐ, ์ง๊ธ ์์ ์์๋ ๋ ์์ ์ ๋ฐฐ์ด๊ฒ ๊ฐ๋ฌผ๊ฐ๋ฌผํ
๐ฑ SOP(Same-Origin Policy) ์ ์ : Same-Origin Policy์ ์ฝ์๋ก ๋์ผ ์ถ์ฒ ์ ์ฑ ์ ๋ปํ๋ค. ํ ๋ง๋๋ก โ๊ฐ์ ์ถ์ฒ์ ๋ฆฌ์์ค๋ง ๊ณต์ ๊ฐ ๊ฐ๋ฅํ๋คโ๋ผ๋ ์ ์ฑ !
์ ์ : REST API๋ ์น์์ ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ(data)๋ ์์(Resource)์ HTTP URI๋ก ํํํ๊ณ HTTP ํ๋กํ ์ฝ์ ํตํด ์์ฒญ๊ณผ ์๋ต์ ์ ์ํ๋ ๋ฐฉ์์ด๋ค.REST๋ Representational State Transfer์ ์ฝ์๋ก ๋ก์ด ํ๋ฉ์ ๋ ผ๋ฌธ์์
์ธํฐ๋ท ์ผํ๋ชฐ์์ ์ท์ ์ฃผ๋ฌธํ ๋, ์ํ๋ ์ท์ ์ฅ๋ฐ๊ตฌ๋์ ๋ด๊ณ ๊ฒฐ์ ๋ฅผ ํ๋ ค๊ณ ๋ณด๋ ๋ค๋ฅธ ์ท์ด ๋ ๋ง์์ ๋ค์ด์ ์ฒ์ ๋ด์ ์ท์ ๋นผ๊ณ ์๋ก์ด ์ท์ ๋ด์ผ๋ฉด ๋ด๊ฐ ๊ฒฐ์ ํด์ผ ํ ๊ธ์ก๋ ์ฆ๊ฐ์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ค. ์ด๋ ์ฅ๋ฐ๊ตฌ๋์ ์ํ๊ฐ ๋ณํ๋ค๊ณ ๋งํ ์ ์๋ค! ๐ฑ State &
๐ฑ React SPA (Single Page Application) ์ ์ : ์๋ฒ๋ก๋ถํฐ ์์ ํ ์๋ก์ด ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค์ง ์๊ณ ํ์ด์ง ๊ฐฑ์ ์ ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ์์ ์ ๋ฌ๋ฐ์ ๋ธ๋ผ์ฐ์ ์์ ํด๋นํ๋ ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธํ๋ ๋ฐฉ์์ผ๋ก ์๋ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ ์น ์ฌ์ดํธ
๐ฑ React ๊ธฐ์ด ๊ฐ๋ ์ ์ : ๋ฆฌ์กํธ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ํ JavaScript ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๐ฟ ํน์ง ์ ์ธํ(Declarative)์ด๋ค. HTML, CSS, JS๋ก ๋๋ ์ ์ ๊ธฐ ๋ณด๋ค๋ ํ๋์ ํ์ผ์ ๋ช ์์ ์ผ๋ก ์์ฑํ ์ ์๊ฒ JSX๋ฅผ ํ์ฉ
๐ฑ ๋๊ธฐ(Synchronous) vs ๋น๋๊ธฐ(Asynchronous) ๋๊ธฐ์ (Synchronous) : ์์ ์์ ๊ณผ ์๋ฃ ์์ ์ด ๊ฐ์ ์ํฉ ๋น๋๊ธฐ์ (Asynchronous) : ๋๊ธฐ์ ์ ๋ฐ๋, non-blocking > JavaScript is synchronou
๐ฑ ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ (OOP) ์ ์ : ํ๋์ ๋ชจ๋ธ์ด ๋๋ ์ฒญ์ฌ์ง(blueprint, class)์ ๋ง๋ค๊ณ , ๊ทธ ์ฒญ์ฌ์ง์ ๋ฐํ์ผ๋ก ํ ๊ฐ์ฒด(instance object)๋ฅผ ๋ง๋๋ ํ๋ก๊ทธ๋๋ฐ ํจํด. >์ ์ฐจ ์งํฅ ํ๋ก๊ทธ๋๋ฐ๊ณผ๋ ๋ค๋ฅด๊ฒ ๋ฐ์ดํฐ์ ๊ธฐ๋ฅ์ ํ๊ณณ์ ๋ฌถ์ด
๐ฑ ๊ธฐ์ ๋ฉด์ ์ด๋? - ์ ์ : ๊ฐ๋ฐ์๋ก์ ๊ธฐ์ ์ ์ง๋ฌด ์ญ๋์ ์ถฉ๋ถํ ๊ฐ์ถ์๋์ง ํ๋จํ๋ ๋ชจ๋ ๋ฉด์ ํํ - ๋ชฉํ : ๊ถ๊ทน์ ์ผ๋ก ๋ฉด์ ๊ด์ด โ๋๋ ๊ฐ์ด ๊ฐ๋ฐํ ์ ์์๊น?โ๋ฅผ ํ์ธํ๋ ๊ณผ์ ์ด๋ค. ๋ฉด์ ์๊ฐ โ์ ๋ง ์ ์๋๊ฐ?โ, โ์ ๋ง ์
๐ฑ Git ์ฉ์ด ์ ๋ฆฌ ๋ก์ปฌ ์ ์ฅ์(Local Repository) : ์์ ์ ์ปดํจํฐ(๋ก์ปฌ ํ๊ฒฝ)์ ์์ ๊ณต๊ฐ์ ์์นํ Git repository์ด๋ค. ์ปดํจํฐ ํ๋ ๋๋ผ์ด๋ธ์ ์ํ๋ ๋๋ ํ ๋ฆฌ๋ก ์ด๋ํด์ ๋ก์ปฌ Git ๋ฆฌํฌ์งํ ๋ฆฌ๋ฅผ ์ถ๊ฐํ๋ฉด ํด๋น ๋๋ ํ ๋ฆฌ์ ํ์ผ ๋ณํ๋ฅผ
์ ์ : ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(Document Object Model)์ ์ฝ์๋ก, HTML ์์๋ฅผ Object(JavaScript Object)์ฒ๋ผ ์กฐ์(Manipulation)ํ ์ ์๋ Model, HTML์ ๋ถ์ํ์ฌ HTML์ ์์ฃผ ์์ ๋ถ๋ถ๊น์ง ์ ๊ทผํ ์ ์๋ ํธ๋ฆฌ
๐ฑ ์์ ์๋ฃํ & ์ฐธ์กฐ ์๋ฃํ ์์ ์๋ฃํ(primitive data type) : ๊ฐ์ฒด๊ฐ ์๋๋ฉด์ ๋ฉ์๋๋ฅผ ๊ฐ์ง์ง ์๋ ํ์ . ๊ฐ ๋ณ์ ๊ฐ ๋ฐ์ดํฐ ๊ฐ์ ๋ณต์ฌํ๊ธฐ ๋๋ฌธ์ ๊ธฐ์กด ๋ฐ์ดํฐ์๋ ์ํฅ์ด ๊ฐ์ง ์๋๋ค. (string, number, bigint, boolea
๐ฑ์ฉ์ด ์ ๋ฆฌ ๋ฐฐ์ด(Array) : ์์(index)๊ฐ ์๋ ๊ฐ(element) ๋ฉ์๋(Method) : ๐ฑ๋ฐฐ์ด ๊ธฐ๋ณธ ์กฐ์ ๐ฟ์์ ์ ๊ทผ & ๊ธธ์ด & ์ถ๊ฐ/์ญ์ ๐ฟ๋ฐ๋ณต ๐ฑ ๐ฟ ๐ฟ ๐ฑ์๊ฒ๋ ์ & ๋๋ ์ ๐ฑ์ถ๊ฐ ํ์ต | ์ฐธ๊ณ ์๋ฃ | > -
๐ฑ ๋๋ ์ HTML๊ณผ CSS๋ฅผ ์ฌ์ฉํด ๊ณ์ฐ๊ธฐ Mockup์ ๋ง๋ค์๋ค. ์ด๋ฒ ํ์ด๋ถ๊ณผ๋ ๊ณตํต ๊ด์ฌ์ฌ๊ฐ ๋ง์์ ๋งค์ฐ ์ฆ๊ฒ๊ฒ ์งํํ๋ค!๐ flexbox์ ์ต์ํด ์ง ํ์๊ฐ ์๋ค....์ฐ์ต ๋ง์ด ํ์ ()
๐ฑ์ฉ์ด ์ ๋ฆฌ CSS(Cascading Style Sheets) : ์น ํ์ด์ง์ ์คํ์ผ ๋ฐ ๋ ์ด์์์ ์ ์ํ๋ ์คํ์ผ์ํธ ์ธ์ด์ด์ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ์ ๊ณตํ๊ธฐ ์ํ ๋๊ตฌ (์ฌ์ฉ์๊ฐ HTML๋ฌธ์๋ฅผ ์ ์ดํดํ ์ ์๋๋ก ๋๋ ์ญํ ) UI(User Interfac
HTML(HyperText Markup Language) : ์นํ์ด์ง์ ๊ตฌ์กฐ(Structure), ๋ด์ฉ, ํ์ ๋ด๋นํ๋ ๋งํฌ์ ์ธ์ดCSS(Cascading Style Sheets) : ๋์์ธ ์์๋ฅผ ์๊ฐํ(Presentation)ํ๋ ์คํ์ผ ์ํธ ์ธ์ดJavaScript
1 == null == undefined true https://dorey.github.io/JavaScript-Equality-Table/ ๋ฌธ์์ด ๋ค๋ฃจ๊ธฐ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ accessing a character ๋ฌธ์์ด์ index๋ก ์ ๊ทผ์ ๊ฐ๋ฅํ์ง๋ง ์ธ ์๋ ์์,
๋ฉ๋ชจ๋ฆฌ(memory) : ๋ฐ์ดํฐ ๋ณด๊ดํจ, ๊ฐ๊ฐ์ ํฌ๊ธฐ๋ ๋์ผ๋ณ์(variable) : ๊ฐ ๋ฉ๋ชจ๋ฆฌ์ ๋ถ์ธ ์ด๋ฆ(Label), ์ํฉ์ ๋ฐ๋ผ ๋ณํ ์ ์๋ ๊ฐ์ ์ธ(declaration) : ๋ฉ๋ชจ๋ฆฌ ํ๋ณดํ ๋น(assignment) : ๋ฉ๋ชจ๋ฆฌ์ ๋ฐ์ดํฐ ์ ์ฅํํ์(expressio
๋ ธ๋ง๋ ์ฝ๋, ์ํ์ฝ๋ฉ, ๋๋ฆผ์ฝ๋ฉ, ์ธํ๋ฐ, ์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ ๋ฑ ๊ฐ์ ์๊ฐ๋๊ณ ํ์ฅ์ค์ต์บก์คํค ๋์์ธ (์กธ์ ์ํ) - ์์์ฆ ์ธ์์ ํตํ ๋์ฅ๊ณ ๊ด๋ฆฌ App ๊ฐ๋ฐ ๋ฐ ํ์ ์ปดํจํฐ๊ณตํ๋ถ ์กธ์ ์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ ์น๊ฐ๋ฐ ์ข ํฉ๋ฐ (๊ตญ๋น์ง์ 5์ฃผ ๊ต์ก ๊ณผ์ ) - 15์ผ ๋ฉ์ดํน ์ฑ