์๋น์ค์ ๊ท๋ชจ๊ฐ ๋ณต์กํด์ง๊ณ ์ปค์ง์๋ก ์๋น์ค๋ฅผ ๋ฐฐํฌํ๋ ๊ณผ์ ์ด ๋ณต์กํด์ง๊ณ ์์๋๋ ์๊ฐ์ด ๋์ด๋๊ฒ ๋๋๋ฐ ์๋น์ค์ ๋ณ๊ฒฝ ์ฌํญ์ด ์๊ธธ ๋ ๋ง๋ค ๋ฐฐํฌ ๊ณผ์ ์ ๋งค๋ฒ ์๋์ผ๋ก ์งํํ๋ค๋ฉด ๋ฐฐํฌ ๊ณผ์ ์ ๋ง์ ์๊ฐ์ด ํ๋น ๋ ๊ฒ์ด๋ค. ์ ์ฒด ๋ฐฐํฌ ๊ณผ์ ์ ์๋์ผ๋ก ์งํ๋๊ธฐ ๋ง๋ค๊ธฐ ์ํด
EC2 ์ธ์คํด์ค ์์ฑ ํ ํฐ๋ฏธ๋์ ํตํด ์ฐ๊ฒฐ ์ํ๋ฅผ ํ์ธํ๊ณ , EC2 ์ธ์คํด์ค๋ฅผ ์ด์ฉํ์ฌ ์๋ฒ๋ฅผ ์คํํด๋ณด๋ ค๊ณ ํฉ๋๋ค.ย EC2 ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ ๊ฒ์ด ๊ฐ์ PC ํ ๋๋ฅผ ์๋ํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ฉฐ ๋๋ค. ์ปดํจํฐ๋ฅผ ๊ตฌ์ ํ๋ฉด ํ์ํ ํ๋ก๊ทธ๋จ์ ์ค์นํด์ผ ํ๋ฏ์ด EC2 ์ธ์ค
TypeScript์ ์ด๊ฑฐํ - Enum TypeScript์ Interface TypeScript์ ํ์ ๋ณ์นญ - Type Aliases TypeScript์ ํ์ ์ถ๋ก - Type Interface TypeScript์ ํด๋์ค - Class
TypeScript๋ JavaScript์ ํ๊ณ๋ฅผ TypeScript๊ฐ ๋ณด์ํ ์์ ์งํฉ(Superset) ์ธ์ด์ด๋ค.
OSI 7 ๊ณ์ธต๊ณผ TCP/IP 4๊ณ์ธต ๋คํธ์ํฌ๋ OSI 7 ๊ณ์ธต ๋๋ TCP/IP 4๊ณ์ธต์ผ๋ก ๊ตฌ๋ถํ๋ค. ๋คํธ์ํฌ์ ์์ ARPANET ์ธํฐ๋ท ํ๋กํ ์ฝ, ์ฆ IP ๊ธฐ๋ฐ์ ๋คํธ์ํฌ๋ ์ํ๋ท(ARPAnet) - ๋ฏธ๊ตญ ๊ตญ๋ฐฉ๋ถ์ ๊ณ ๋ฑ ์ฐ๊ตฌ ๊ณํ๊ตญ์ ์ฃผ๋ํ์ ๋ง๋ค์ด์ง ์ธ๊ณ ์ต
mdn ๋์ผ ์ถ์ฒ ์ ์ฑ - ์น ๋ณด์mdn CORSconsole ์ฐฝ์์ CORS ๊ด๋ จ ์๋ฌ๋ฅผ ๋ง๋๊ฒ ๋ ๋๊ฐ ์๋๋ฐ CORS๊ฐ ๋ฌด์์ด๊ณ , ์ด๋ฐ ์๋ฌ๊ฐ ๋ฐ์ํ๋ ์ง ์์๋ณด๊ธฐ ์ ์ CORS๊ฐ ํ์ํ๊ฒ ๋ ๋ฐฐ๊ฒฝ์ธ SOP์ ๋ํด์ ๋จผ์ ์์๋ณผ ๊ฒ์ด๋ค.
HTTP ๊ฐ์ HTTP ์์ฒญ ๋ฉ์๋URLํด๋ผ์ด์ธํธ - ์๋ฒ ์ํคํ ์ฒ๋ ๋ค๋ฅธ ๋ง๋ก๋ 2 Tier Architecture๋ผ๊ณ ๋ ๋ถ๋ฆฌ๋ ์ค๊ณ ๋ฐฉ์์ด๋ค.
react + typescript ํ๊ฒฝ์ผ๋ก ์ค์ ํ ํ๋ก์ ํธ์์ ๋ฆฌ๋์ค devtools๋ฅผ ์ค์ ํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.TypeScript ์ปดํ์ผ๋ฌ๊ฐ 'REDUX_DEVTOOLS_EXTENSION' ์์ฑ์ด Window or globalThis ํ์ ์ ์กด์ฌํ์ง ์๋๋ค๋ ๊ฒ์
UI๋ ์ฌ๋๋ค์ด ์ปดํจํฐ์ ์ํธ ์์ฉํ๋ ์์คํ ์ ์๋ฏธํ๋ค. ํด๋ํฐ, ๋ชจ๋ํฐ ํ๋ฉด์์ ๊ทธ๋ํฝ ์์ ์ธ์๋ ํค๋ณด๋, ๋ง์ฐ์ค ๋ฑ์ ๋ฌผ๋ฆฌ์ ์์๋ ์ปดํจํฐ์ ์ํธ์์ฉํ๊ธฐ ์ํ ์์คํ ์ด๋ฏ๋ก UI๋ผ๊ณ ๋ณผ ์ ์๋ค.
RESTful API๋ ๋ฌด์์ธ๊ฐ์? aws API๋? API: Application Programming Interface ์ ํ๋ฆฌ์ผ์ด์ ํ๋ก๊ทธ๋๋ฐ ์ธํฐํ์ด์ค๋ ๋ค๋ฅธ ์ํํธ์จ์ด ์์คํ ๊ณผ ํต์ ํ๊ธฐ ์ํด ๋ฐ๋ผ์ผ ํ๋ ๊ท์น์ ์ ์ํฉ๋๋ค.
JavaScript๋ ํํ ํ๋กํ ํ์ ๊ธฐ๋ฐ ์ธ์ด(prototype-based language)๋ผ๊ณ ์๊ธฐ๋๋ค.์ด ๋ง์ ๋ชจ๋ ๊ฐ์ฒด๋ค์ ๋ฉ์๋์ ์์ฑ๋ค์ ์์ ๋ฐ๊ธฐ ์ํ ํ ํ๋ฆฟ์ผ๋ก์จ ํ๋กํ ํ์ ๊ฐ์ฒด(prototype object)๋ฅผ ๊ฐ์ง๋ค๋ ์๋ฏธ์ด๋ค.
์ ์ฐจ ์งํฅ ํ๋ก๊ทธ๋๋ฐ vs ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ, ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์ 4๊ฐ์ง ์ฃผ์ ๊ฐ๋ ์๋ ์บก์ํ(Encapsulation), ์ถ์ํ(Abstraction), ์์(Inheritance), ๋คํ์ฑ(Polymorphism)์ด ์์ต๋๋ค.
๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ํด๋์ค์ ์ธ์คํด์ค์ ๋ํด์ ํ์ตํ์์ต๋๋ค.
๊ดํ ํ ๋ฒ๋ ์ํ๋ ํ๊ธ๋ก ๋ณ์๋ฅผ ์ ์ธํด๋ณด์์ต๋๋ค. ์ฝ๋๋ฅผ ์์ฑํ๋ค๊ฐ (์ด๊ฑด ์ญ์ ์๋ ๊ฑฐ ๊ฐ์..) ๋ค์ ์์ด๋ก ๋ณ์๋ช ์ ๋ฐ๊พธ๊ณ ์ฝ๋ ์คํ์ ํ๋ ์๊ฐ๋ง๋ ์๋ฌ `Uncaught SyntaxError: Invalid or unexpected token`
let, const, var, block level scope, TDZ, Closure์ ๋ํ ๊ฐ๋ ํ์ต ๋ฐ ๊ฐ๋จํ ์์ ๋ฅผ ํตํ ๋ณต์ต
git์ ์ฌ๋ฆฌ๋ฉด ์๋๋ ํ์ผ์ .gitignore์ ์ค์ ํ๋๋ฐ๋ ignore ์ฒ๋ฆฌํ ํ์ผ๋ค์ด changes file๋ก ๋์ฌ ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ
create react app Netlify๋ก ๋ฐฐํฌํ๊ธฐ & CD (์ง์์ ์ธ ๋ฐฐํฌ) ํด๋ณด๊ธฐ
yarn create react-app ์ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ์ค์ ํ styled-components ์ฌ์ฉํ๋ ค๋ค ๋ถ๋ชํ ์ค๋ฅ, ์ข ์์ฑ ์ค์ ์ ํตํ ์ค๋ฅ ํด๊ฒฐ์ ๋ํด ์ ๋ฆฌํ ๊ธ์ ๋๋ค.
JavaScript์์ ์๋ฃํ(type)์ด๋ ๊ฐ(value)์ ์ข ๋ฅ๋ฅผ ๋งํ๋๋ฐ ๊ฐ๊ฐ์ ์๋ฃํ์๋ ๊ณ ์ ํ ์์ฑ๊ณผ ๋ฉ์๋๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ์๋ฃํ์ ํฌ๊ฒ ๋ ๊ฐ์ง๋ก ๊ตฌ๋ถํ ์ ์๋๋ฐ ์์ ์๋ฃํ(primitive type)๊ณผ ์ฐธ์กฐ ์๋ฃํ(reference type)์ด ์๋ค.
HTML, CSS๋ก ๊ณ์ฐ๊ธฐ ๋ชฉ์ ๋ง๋๋ ์ฐ์ต์ ํด ๋ณด์์ต๋๋ค.๋งฅ๋ถ ๊ณ์ฐ๊ธฐ, ๋ ๋ค๋ฅธ ๊ณ์ฐ๊ธฐ ๋์์ธ์ ๋ฐ๋ผ ๋ง๋ค์ด๋ณด์๋๋ฐ์.๋งจ ์ฒซ๋ฒ์งธ๋ก ๋ง๋ค์๋ ๊ณ์ฐ๊ธฐ์ ๋ฒํผ๋ค์ width๋ฅผ ์ ์ฉํ์ฌ ํฌ๊ธฐ๋ฅผ ์ก์๊ณ , ๋์ธ๋ฒ์งธ์ ์งํํ ๊ณ์ฐ๊ธฐ๋ flex๋ค๋ก ํฌ๊ธฐ๋ฅผ ์ก๊ณ ๊ตฌ์กฐ๋ฅผ ๋ง์ท์ต๋๋ค.