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λ ν¨μ μμ± μμ μ΄ μλ ν¨μκ° νΈμΆλλ μμ μ λ°λΌ λμ μΌλ‘ λ°λλ€.