CORS(Cross-origin Resource Sharing)
๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ ๋ ๋์ผํ URL์ด ์๋ ๋ค๋ฅธ ์ถ์ฒ์์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๊ฒ์ ํ์ฉํ๋ ์ ์ฑ
์ด๋ค.
ํ๋กํ ์ฝ, ํธ์คํธ, ํฌํธ๊ฐ ๋ชจ๋ ๊ฐ์์ผ ๋์ผํ ์ถ์ฒ์ด๋ค.
์ค์ ๋ก ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ CORS ์ด์๋ฅผ ๊ฒช์๋๋ฐ, ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด package.json
์์ proxy
์ค์ ์ผ๋ก ํด๊ฒฐํ๋ค.
//package.json
"proxy": "http://localhost:8888"
CSR(Client Side Rendring) SSR(Server Side Rendering)
CSR ๋์
์๋ฒ์์ HTML/CSS ๋ฆฌ์์ค ๋ค์ด ํ ๋น HTML ๋
ธ์ถ
์ ์ ์ธํฐ๋ ์
๊ฐ๋ฅ
SSR
์๋ฒ์์ ๋ง๋ค์ด์ง HTML ํ์ผ์ ๋ค์ด๋ก๋ ํ ์์ฑ๋ ํ๋ฉด ๋
ธ์ถ
์ ์ ์ธํฐ๋ ์
๊ฐ๋ฅ
์งํํ๋ ํ๋ก์ ํธ๋ ์ปค๋จธ์ค ๋น์ฆ๋์ค์ด๊ธฐ ๋๋ฌธ์ SEO๊ฐ ์ค์ํ ํ๋ซํผ์ด๊ณ ์ด๋ฅผ ์ํด Next.js๋ฅผ ๋์
ํ๋ค.
REST API
REST(Representational State Transfer)๋ ์๋ฒ์ ํต์ ํ ๋์ ๋ง๋ ํ๋์ ์ธํฐํ์ด์ค์ด๋ค. ์ผ๊ด์ ์ธ ์ธํฐํ์ด์ค๋ฅผ ์ ์งํ ์ ์๋ค. ์์ ๊ธฐ๋ฐ์ผ๋ก ์ค๊ณ๋๊ธฐ ๋๋ฌธ์ ๋งํ๋ ค๋ ๋ฐ๋ฅผ ๋ฉ์์ง๋ฅผ ํตํด ์ฝ๊ฒ ์ ์ ์๋ค. ๋ค๋ง HTTP Method๊ฐ ํ์ ์ ์ธ ๋จ์ ๋ ์๋ค.
์์ Resource -> HTTP URI(Uniform Resource Identifier)
ํ์ Verb -> HTTP Method(POST, GET, PUT, DELETE)์ ํตํด ์์์ CRUD ๊ธฐ๋ฅ์ ์ํํ ์ ์๋ค.
ํํ Representations -> HTTP Message Pay Load
GET api/team
GET api/team/:id
POST api/team
PUT api/team
DELETE api/team
์๋ฌธ์๋ก๋ง, ํ์ดํ(-)์ผ๋ก, ๋ง์ง๋ง์๋ ์ฌ๋์(/) ์์ด ๊ทธ๋ฆฌ๊ณ ํ์๋ฅผ ํฌํจํ์ง ์๋ ๋ฐฉ์ ๋ฑ์ผ๋ก ์ค๊ณ๋์ด์ผ ํ๋ค.
*URI vs URL
๋ธ๋ผ์ฐ์ ์ ์ฅ์
๋ ์ ์ฅ์ key: value
ํํ์ ๋ฌธ์์ด string ๊ฐ์ผ๋ก ์ ์ฅํ๋ค.
Cookie
Cookie๋ 4KB๋ก ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์๊ณ , ์๋ฒ์ ํต์ ํ๋ค. ์ฟ ํค๋ ์ฃผ๋ก ์๋ฒ๊ฐ ์ ์ ๋ฅผ ๊ธฐ์ตํ๊ธฐ ์ํ ์ฉ๋๋ก ์ฌ์ฉ๋๋ค. HTTP ํ๋กํ ์ฝ์ stateless์ด๊ธฐ ๋๋ฌธ์ request > response
๊ฐ ๋๋๊ณ ๋๋ฉด ํต์ ์ ๋๊ณ ๊ทธ ๋ค์ ํต์ ์ ํด๋ ์ด์ ๋ด์ฉ์ ๊ธฐ์ตํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค. (์ฃผ๋ก ์ฌ์ฉ์์ ์ธ์ด, ๋คํฌ๋ชจ๋ ๋ฑ์ ๋ด์ฉ์ ์ ์ฅ)
Web Storage
Web Storage๋ Local, Session์ผ๋ก ๋๋์ด์ ธ ์๋ค. 5MB ์ ๋๋ก ์ฟ ํค์ ๋นํด์ ํฐ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ ํ ์ ์๊ณ , ์๋ฒ๋ก ์ ์ก๋์ง ์๋๋ค. ๊ตณ์ด ์๋ฒ๋ก ์ ์กํ ํ์๊ฐ ์๋ ๋ฐ์ดํฐ๋ผ๋ฉด ๋ณด์๊ณผ ์๋๋ฅผ ์ํด ์ด์ฉํ๋ฉฐ, ์น ์ฑ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์๊ณ ํฐ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์๋ค. Local Storage๋ ์ ํจ๊ธฐ๊ฐ์ด ์์ง๋ง, Session Storage๋ ์ฐฝ์ ๋ซ์ผ๋ฉด ์ด๊ธฐํ๋๋ค.4)
์ค์ ๋ก ํ๋ก์ ํธ์์๋ Local Storage๋ฅผ ์ฌ์ฉํ์๊ณ , ์ผํ์ฑ ๋ชจ๋ฌ๊ณผ ๋ก๊ทธ์ธ ์ฌ๋ถ๋ฅผ ํ์ธํ๊ธฐ ์ํด ์ ์ฅํ๋ค.
Browser Cache
Browser Cache๋ ๋ธ๋ผ์ฐ์ ์์ ์น ๋ฆฌ์์ค์ ์ฌ๋ณธ์ ์ ์ฅํ๋ ๋ฐฉ์์ผ๋ก ์ด๋ฏธ์ง, HTML, CSS, JS ๋ฑ์ ์์
์ด ์๋ค. ์๋ฒ์ ํด๋ผ์ด์ธํธ๊ฐ ํต์ ์ ํ๋ค๋ณด๋ฉด ์ง์ฐ๋ ์ ์๊ณ ์ด ๊ฐ๊ทน์ ์ค์ด๊ธฐ ์ํด ๋ธ๋ผ์ฐ์ ์บ์๊ฐ ์๋ค.
Javascript, Sync vs Async
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋
ผ ๋ธ๋กํน, ์ฑ๊ธ ์ค๋ ๋ ์ธ์ด์ด๋ค. ๋ํ, ์ ์ธ์ด ์๋ ๋ณ์์ ํ ๋น๋๋ฉด์ ๋ฐ์ดํฐ์ ํ์
์ด ๊ฒฐ์ ๋๊ธฐ ๋๋ฌธ์ ๋์ ํ์
์ด๊ณ , ์คํฌ๋ฆฝํธ์ธ์ด๋ก ํ ์ค์ฉ ์ฝ์ด๊ฐ๋ฉฐ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก, ์์์ ๋ฐ์ผ๋ก ์งํ๋๋ค.
์ฑ๊ธ ์ค๋ ๋์ด์ง๋ง ํ๋์ ์์
์ด ์๋ฃ๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ค์ ์์
์ ์ํํ ์ ์๋ค. ์ด๋ ๊ฒ ๋น๋๊ธฐ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ๋
ผ ๋ธ๋กํน์ด๋ผ ๋ถ๋ฅธ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฐฉ์์ AJAX(Asynchronous Javascript And XML)๋ผ ํ๋ค.
Promise
Pending(๋๊ธฐ): ์ด๊ธฐ์ํ
Fulfilled(์ฑ๊ณต): ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์๋ฃ๋์ด ํ๋ก๋ฏธ์ค๊ฐ ๊ฒฐ๊ณผ ๊ฐ์ ๋ฐํํด์ค ์ํ
Rejected(์คํจ): ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์คํจํ๊ฑฐ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ํ
Promise๋ 3๊ฐ์ง ์ํ๋ฅผ ๊ฐ์ง๋ค.
Position
/* ์ด๋ ์์น์ ๋ฐฐ์น๋ ์ง ์ ํ ์ ์๋ ์์ฑ */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
SCSS
css๋ฅผ ์กฐ๊ธ ๋ ํจ์จ์ ์ผ๋ก ํธ๋ฆฌํ๊ฒ ์์ฑํ ์ ์๋๋ก variable, nesting, mixin ๋ฑ์ ๊ฐ๋
์ ์ถ๊ฐํด์ ๋์จ ์คํฌ๋ฆฝํธ ์ธ์ด์ด๋ค. ๋ค๋ง SaSS์ SCSS๋ { }
๊ฐ์ธ๋ ๊ตฌ๋ฌธ์ ์ฌ๋ถ๋ก ๋ค๋ฅด๋ค.
attribute, property
<input value="name" />
ํ๊ทธ ๋ด ์์ฑ์ ์๋ฏธํ๋ attribute
DOM์ ๊ฐ์ฒด๋ก ์ด๋ฃจ์ด์ ธ์๊ธฐ ๋๋ฌธ์ ์์ฑ ํ ๊ทธ ์์ ์์ฑ์ property
, DOM์ ์กฐ์ํด property
๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค.
Display, Box Model
inline
์ ์ค์ ์ปจํ
ํธ์ ํฌ๊ธฐ ๋ง์ ์๋ฏธํ๋ค.
inline-block
์ margin
๊ณผ padding
์์ฑ์์ ์ํ์๋ง ์ ์ฉ๋๋ค. width
, height
๋ ์ ์ฉ๋์ง ์๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์์ ์ปจํ
ํธ๊ฐ ๋ถ์ ์ ์๋ค.
block
์ ํ ์ค์ ๋ค ์ฐจ์งํ๋ค. width
, height
, margin
, padding
๋ชจ๋ ๊ฒ์ด ์ ์ฉ๋๋ค.
์ปจํ
ํธ์ ์์ญ์ content+padding
์ผ๋ก background
, img
๋ฑ์ ์์๋ค์ด ํด๋น ์์ญ๊น์ง ๋ฐ์๋๋ค.
Semantic Markup
์น ์ ๊ทผ์ฑ: ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ ์ธ๋์ง ์๊ณ ์น์ ์ด์ฉํ ์ ์๋๋ก ์ ๊ทผ์ฑ์ ์ค์ํด์ผ ํ๋ค.
SEO ์ต์ ํ: ๋ฌธ์ ๋ด ํ๊ทธ์ ๋ด์ฉ์ ํตํด ๋ถ์ํด ์ด๋ค ๋ด์ฉ์ด ํฌํจ๋์ด ์๋๋ฐ ํจ๊ณผ์ ์ผ๋ก ๋ถ์ํ ์ ์์ ๊ฒ์ด๋ค.
๊ฐ๋ฐ: ํ์
์์๊ฐ๋
์ฑ, ์คํ์ผ์ ๋ถ์ฌํ ๋ ์ต๋ํ ๋ค์ํ ํ๊ทธ๋ฅผ ํ์ฉํด ์ฝ๊ฒ ์คํ์ผ์ ๋ถ์ฌํ ์ ์๋ค.
Async, Defer
๋๋ค ์คํฌ๋ฆฝํธ๋ฅผ ๋ค์ด๋ฐ๋ ๋์ HTML ๋๋๋ง์ด ์ค๋จ๋์ง ์๋๋ค.
Async๋ ์คํฌ๋ฆฝํธ ๋ค์ด์ด ์๋ฃ๋๋ฉด ๋ฐ๋ก ์คํํ๋ค.
Defer๋ ์คํฌ๋ฆฝํธ ๋ค์ด์ด ์๋ฃ๋๊ณ HTML์ ๋ค ์ฝ์ ํ์ ์คํํ๋ค.
Type, Interface
์ธํฐํ์ด์ค๋ ๊ฐ์ฒด์ ์๊ทธ๋์ณ๋ง์ ๋ง๋ค ์ ์๋ค.
๋ํ, ํ์ฅ ์ ๋์ผํ ์ธํฐํ์ด์ค๋ฅผ ์ ์ธํด๋ ์๋์ผ๋ก ํ์ฅ๋์ง๋ง ํ์
์ ๋ถ๊ฐ๋ฅํ๋ค.
์ธํฐํ์ด์ค๋ extends
๋ฅผ ํตํด ์์๋ฐ๋ ๊ฐ๋
, ํ์
์ ์ ๋์ธ ํ์
์ผ๋ก ํ์ฅํ ์ ์๋ค.
Generic์ ๊ฑฐ์ ์ฌ์ฉํด ๋ณธ ์ ์ ์์ผ๋, Nullable<T>๋ก ์ ํธ์ฑ ํ์
๊ฐ๋๋ฅผ ํ์ฉํด๋ณธ ๊ฒฝํ์ ์๋ค. T๋ฅผ ํตํด ์ ํด์ง์ง ์์ ํ์
์ unknow์ด๋ any๊ฐ ์๋ ํจ์จ์ ์ผ๋ก ํ์
์ ์ ์ํด์ ์ฌ์ฉํ ์ ์๋ ๊ฑธ๋ก ์๊ณ ์๋ค.
์ ๋ค๋ฆญ ์ ํธ๋ฆฌํฐ ํ์
์ผ๋ก๋ readonly, omit, exclude, partial ๋ฑ ๋ค์ํ๊ฒ ์๋ค.
์ฝ๋ฐฑ, ํ๋ก๋ฏธ์ค, ํ์น, ์๋ก์ฐ์นดํผ ๋ฅ์นดํผ, ๋ฆฌ์กํธ, ๋ฆฌ๋์ค
ํ๋ก๋ฏธ์ค๊ฐ ๋์ค๊ฒ ๋ ์ด์ ๋ ์ฝ๋ฐฑ ํจํด์ผ๋ก ๋น๋๊ธฐ์ฒ๋ฆฌ๋ฅผ ์งํํ ์, ์๋ฌ ์ฒ๋ฆฌ๊ฐ ์ด๋ ต๊ณ ๊ฐ๋
์ฑ ์ธก๋ฉด์์๋ ํ๋ค๊ธฐ ๋๋ฌธ์ ํ๋ก๋ฏธ์ค๊ฐ ํ์ํ๋ค. ๋ํ ๋น๋๊ธฐ ๋ฐฉ์์ ์์
์ค์ธ ์ฝ๋๊ฐ ๋๋๊ธฐ ์ ์ ๋ค์ ์ฝ๋๋ฅผ ์คํํ๊ธฐ ๋๋ฌธ์ ๊ฒฐ๊ณผ๋ฅผ ์์ธกํ๊ธฐ ์ด๋ ต๋ค.
ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ pending, fulfilled, rejected์ ์ํ๋ฅผ ๊ฐ์ง๋ค. ํ๋ก๋ฏธ์ค๋ .then() .catch() ๊ตฌ๋ฌธ์ ํตํด ์ดํ/๊ฑฐ์ ๋์์ ์ ์งํํ ์์
๊ณผ ์๋ฌ๊ฐ ๋ฐ์ํ์ ๋ ์บ์น ๊ตฌ๋ฌธ์ ํตํด ์ ์ดํ ์ ์๋ค.
๋ฆฌ์กํธ ๋ผ์ดํ์ฌ์ดํด์ด ๋ฌด์์ธ์ง
์ํ๊ด๋ฆฌ๋ฅผ ํ๊ฑฐ๋ ๋ผ์ดํ์ฌ์ดํด์ ๋ง์ถ์ด ๊ฐ๋ฐ์ ํ๋ ค๋ฉด class๋ฅผ ์ด์ฉํ ๋ฐฉ๋ฒ ๋ฐ์๋ ์์๊ณ , class๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ ์ด์์ผ๋ก ๋ง์ ์ฝ๋๋ฅผ ์์ฑํด์ผํ๋๋ฐ this, render ๊ธฐํ ๋ฑ๋ฑ ์ฌ๋ฌ๊ฐ์ง
this๋ ์์ ์ด ์ํ ๊ฐ์ฒด ๋๋ ์์ ์ด ์์ฑํ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํค๋ ์๊ธฐ ์ฐธ์กฐ ๋ณ์(self-reference variable)
์ผ๋ฐ ํจ์์ ๊ฒฝ์ฐ (์์ฑ์ ํจ์, ํจ์ ์ ์ธ๋ฌธ ๋ฑ)์ constructor/prototype ์ด ์๊ธฐ์ ์ฆ, ๊ฐ์ฒด์ด๋ค.
ํ์ดํ ํจ์์ ๊ฒฝ์ฐ non-constructor ์ด๋ฏ๋ก ๊ฐ์ฒด๊ฐ ์๋๊ธฐ ๋๋ฌธ์ this๋ฅผ ์ด์ฉํ๋ฉด ์์ ์ค์ฝํ ์ผ๋ฐ ํจ์์์ ๋ฐ์ธ๋ฉํ ๊ฐ์ฒด๋ฅผ ์ฐพ๋๋ค.
this๋ ํจ์ ์์ฑ ์์ ์ด ์๋ ํจ์๊ฐ ํธ์ถ๋๋ ์์ ์ ๋ฐ๋ผ ๋์ ์ผ๋ก ๋ฐ๋๋ค.