브라우저의 렌더링 과정은 ?
브라우저 렌더링 과정
1. HTML,CSS 파싱(parsing)
2. 렌더 트리(Render Tree)생성
3. 레이아웃(Layout)생성
4. 페인트(paint)
5. 합성(composite)
이러한 과정을 CRP (Critical Rendering Path)라고 한다

1. HTML, CSS parsing

파싱이란?

문자열을 의미 있는 토큰으로 분해하여 토큰 간의 위계 관계를 분석해 구조를 결정하는것이다.

HTML parsing

HTML데이터를 파싱을 하여서 DOM tree를 만든다.

DOM tree를 만드는도중 <script>태그를 만나면 parsing을 중단하고 자바스크립트 코드를 파싱한다.

CSS parsing

HTML parsing과정에서 <link>태그를 만나면 css코드를 가져온다.

CSSOM tree를 만든다.

DOM : HTML를 조작할 수 있게 도와준다.

CSSOM : 자바스크립트에서 CSS를 조작할 수 있게 해주는 API집합이다.

2.Render Tree 생성

Render tree는 DOM tree와 CSSOM tree가 결합되어 생성된다.

이떄 display : none처럼 레이아웃에서 영역을 차지하고 있지 않는 것들은 tree에서 생략된다.

3.Layout

각 요소들의 상대적인 위치, 크기를 찾는 과정이다.

4.Paint

렌더 트리를 순회하여 레이어를 만들고 레이어의 배경, 테두리, 텍스트, 그려지는 순서, 레이어간의 순서 등을 기록한다.

5.Compositing

각 레이어를 분리해 화면의 픽셀로 변환 시킨뒤 브라우저의 페이지의 크기, 뷰포트에 맞게 합성해서 화면에 나타낸다.
Reflow, Repaint는 무엇이며 최적화 하는 방법은 ?
Reflow, Repaint

Reflow란?

생성된 DOM 노도의 레이아웃 수치 (너비, 높이, 위치 등) 변경 시 영향 받는 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정

Repaint란?

Reflow과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 과정
<aside> 💡 꼭 Reflow가 일어나야지만 Repaint가 일어나는것은 아님 ! 노드의 background-color, visibility 등등 layout 수치의 변화가 없을시에는 Reflow빼고 Repaint만 일어남. </aside>
Reflow는 언제 일어날까 ?
1. 페이지 초기에 렌더링(브라우저 렌더링에서 최초 layout과정)
2. 노드의 추가 or 제거
3. 요소의 위치 or 크기 변경
4. 폰트 변경 or 이미지 변경
5. 윈도우 리사이징
Reflow 최적화 방법
1. 스타일을 변경할 경우 가장 하위 노드의 클래스를 변경한다(Reflow가 일어나는 범위가 작아짐)
2. inline 스타일을 지양한다(inline스타일은 HTML이 parsing되는 시점에 바로 layout에 영향을 미치기 때문에 추가적인 reflow를 발생시킨다)
3. 애니메이션이 있는 element라면 position을 fixed or absolute로 지정한다(애니메이션 효과는 많은 Reflow를 발생을 시킨다. position을 fixed or absolute로 지정하게되면 애니메이션을 발생하는 노드를 전체에서 따로 분류하여서 해당 노드만 Reflow가 발생한다)
4. CSS표현식을 지양한다(Reflow가 발생할때 마다 자바스크립트 표현식이 다시 계산이 된다)
5. display: none을 활용(Render tree가 생성될때 제외가 되기 때문에 Reflow비용을 줄일 수 있다)
Sementic Tag란 ?
Sementic Tag(시멘틱태그)

시멘틱이란?

시멘틱은 의미론적이라는 영어 단어이다.

시멘틱태그란 ?

기능은 <div>와 마찬가지로 block element이지만 웹의 layout을 설계할때 의미를 부여함으로써 웹의 구조를 파악할 수 있도록 만들어진 태그

시멘틱태그를 쓰는 이유는 ?

1. SEO(Search Engine Optimization)

검색 엔진이 태그의 목적에 적합하게 설계되어 있는 구조의 사이트에서 효율적으로 정보를 파악할 수 있어서 검색 결과 노출에 유리하다

2. 시각장애가 있는 사용자가 스크린 리더를 사용하여 웹 사용에 도움이 된다

3. 유지보수에도 유용하다

div>div>div>div….이러한 구조면 해당부분이 어느 영역인지 알기 쉽지 않다

시멘틱태그의 종류들
1. <header>: 머리글, 제목
2. <nav>: 네비게이션, 목차, 리스트, 다른 페이지로 이동을 위한 링크 공간
3. <aside>: 좌측 우측의 사이드 공간 부수적인 내용을 표현
4. <section>: 같은 주제, 카테고리 ,테마들의 여러개의 콘텐츠를 그룹화
5. <article>: 기사, 블로그 등 텍스트 위주의 공간
6. <footer>: 바닥글, 웹 하단에 들어가는 정보
7. <address>: 콘텐츠의 작성자나 소유자의 정보를 담는 공간
8. <hgroup>: 제목과 관련된 부제목
9. <main>: body의 중심 주제, 주요 내용
10. <details>: 참조 또는 표기 목적으로 표시
11. <figure>: 이미지, 다이어그램, 사진 등 독립적인 컨텐츠
12. <figcaption>: <figure>의 설명
13. <mark>: 현재 맥락에 관련이 깊거나 중요한 부분 강조
14. <time>: 시간의 특정 지점, datetime과 같은 속성을 이용해 알림 같은 기능 구현
15. <summary>: details 요소에 대한 요약
웹 접근성이란 무엇이며 왜 중요한가 ?
웹 접근성

웹 접근성이란 ?

장애인, 고령자 등을 포함한 다양한 사용자가 인터넷 상에서 차별없이 일반 사용자와 동등하게 정보에 접근하고 이용할 수 있도록 보장하는것을 말한다.

웹 접근성이 왜 중요한가 ?

1. 누구에게나 동등한 기회 제공을 위해 웹 접근성을 준수해야한다

2. 법률로 웹 접근성 보장에 대해서 명시되어 있다

장애인차별금지법으로 명시되어 있다

웹 접근성 지침

1. 인식의 용이성

모든 컨텐츠는 사용자가 인식할 수 있어야 한다

2. 운용의 용이성

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다

3. 이해의 용이성

컨텐츠는 이해할 수 있어야 한다

4. 견고성

웹 컨텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다

이미지태그 alt 이상한거 넣음
www.naver.com을 입력하면 무슨일이 일어날까 ?
www.naver.com을 입력하면 일어나는 일
1. 사용자가 브라우저에 도메인 네임을 입력한다 (www.naver.com)
2. 사용자가 입력한 URL 주소 중 도메인 네임 부분을 DNS 서버에 검색, DNS서버에서 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다
3. URL정보, IP주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메세지를 생성하고 생성된 요청 메세지는 TCP프로토콜을 사용하여 인터넷을 거쳐 해당 IP주소의 컴퓨터로 전송된다
4. 도착한 HTTP 요청 메세지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환되어 웹 페이지 URL 정보에 해당되는 데이터를 검색한다
5. 검색된 데이터는 HTTP 프로토콜을 사용하여 HTTP 응답 메세지를 생성 후 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송된다
6. 도착한 HTTP 응답 메세지는 HTTP프로토콜을 사용하여 웹 페이지 데이터로 변환되어 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 된다
IP주소란?

컴퓨터들이 인터넷상에서 서로 인식하기 위한 번호

도메인 네임(Domain Name)이란?

IP주소는 12자리임으로 외우기 힘들다 그렇기 때문에 IP주소를 문자로 표현한 도메인 네임이 생겼다.

도메인 네임 > IP주소

도메인 네임은 컴퓨터가 이해할 수 없음으로 도메인 네임을 IP주소로 변환하는 과정이 필요하다. 이때 도메인 네임과 해당하는 IP주소를 저장하고 있는 데이터베이스를 DNS라고 한다. 도메인네임을 입력하면 DNS를 이용해서 IP주소를 받을 수 있다
박스모델이란
CSS박스 모델

박스모델이란?

모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 부른다.

박스 모델은 내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구분된다

Content

실질적인 내용이 들어가는 부분

Padding

내용과 테두리(border)의 간격

Border

Content와 Padding을 감싸는 테두리

box-sizing

content-box

width, height 속성이 컨텐츠 영역만 포함하고 padding, border은 포함하지 않는다(padding, border을 넣으면 더해진다)

border-box

width, height 속성이 border, padding, content를 포함한다
이벤트 버블링, 캡쳐링, 위임이란 ?
이벤트 버블링, 캡쳐링, 위임

event가 발생하면 최상단 부모 노드부터 target까지 쭉 내려온다. 이때 캡쳐링 이벤트들이 있으면 실행된다.

target에 도착하여 target을 실행시키고 다시 최상단 부모 노드까지 올라간다. 이때 버블링 이벤트들이 실행된다.

default는 버블링이며 onClickCapture 등과 같은 것들을 사용하면 캡쳐링이 걸린다.

이벤트의 전파를 막으려면 event.stopPropagation() 라는 API를 추가하면 된다.

위임

이벤트 위임이란?

캡쳐링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는것을 말한다.
Promise란 ?
Promise

동기 vs 비동기 ?

동기란?

자바스크립트의 기본동작이다. 한 코드가 실행되는 동안 다른 작업들을 멈추고 기다린다.

요청을 보내고 응답이 돌아와야 다음 동작을 실행한다.

비동기란?

요청을 보내고 응답의 여부와 상관없이 다음 동작을 실행한다.

Callback 지옥이란 ?

우선 서버와의 통신을 할때는 비동기로 통신을 한다(동기식으로 요청을 하면 서버로부터 응답이 올때동안 다음 동작을 안한다)

서버로부터 응답값이 오면 그 응답값을 이용하는데, 그냥 이용을 하면 자바스크립트는 동기식으로 작동하기 때문에 undifined로 값을 출력할것이다(서버로부터 응답값이 오기전에 실행되기 때문에 data값이 undifined상태이다)

그러므로 요청을 보낸뒤 응답값을 callback함수안에 넣어서 해결할 수 있는데 이러한 콜벡함수를 연속으로 사용하면 코드의 가독성이 떨어지고 유지보수하기도 어렵다

Promise란?

자바스크립트 비동기 처리를 위한 객체이다.

Promise의 상태
- Pending : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected : 비동기 처리가 실패하거나 오류가 발생한 상태
Promise동작

Promise를 생성하고 콜백함수를 넣는다(콜벡함수에 resolve, reject를 파라미터로 받는다)

호출 결과를 then(resolve에 들어간 값이 온다), catch(reject에 들어간 값이 온다)

then은 또 다른 Promise를 반환하기 때문에 then.then.then… 처럼 then을 연결해서 사용할 수 있다.

async & await 란?

async는 함수 앞에 붙이고 await는 비동기 처리 메소드(Promise를 return해야한다) 앞에 붙여서 사용한다

단순한 Promise 사용해서 then.then.연결하는것이 가독성이 떨어져서 나왔다

예외 처리

try catch 문법을 사용해서 처리한다
Hoisting이란 ?
Hoisting

변수란?

변수란 값을 저장하기 위해서 메모리 공간을 확보하고 메모리 공간과 변수의 이름을 연결하여 값을 저장할 수 있다

변수 선언 순서
1. 선언 : 변수의 이름을 등록해서 자바스크립트엔진에 변수의 존재를 알림
2. 초기화 : 값을 저장하기 위해서 메모리 공간을 확보하고 undefined를 할당해서 초기화함
3. 할당 : 초기화한 변수에 실제값을 할당
hoisting이란?

선언문이 스코프 내의 가장 최상단으로 끌어올려지는 것을 의미한다

var, let, const 차이

var
1. 변수 재선언 가능
2. 변수 재할당 가능
3. 함수 스코프
let
1. 변수 재선언 불가능
2. 변수 재할당 가능
3. 블록 스코프
const
1. 변수 재선언 불가능
2. 변수 재할당 불가능
3. 블록 스코프
TDZ(Temporal Dead Zone)

TDZ이란?

스코프의 최상단부터 초기화가 나오기전까지 변수에 접근할 수 없는 구역을 의미한다

let, const가 영향을 받는다

함수 선언문 호이스팅

함수 선언문도 선언문이기 때문에 호이스팅이 발생한다. 단 함수 선언문의 경우에는 선언, 초기화, 할당 단계를 스코프 최상단에서 실행시킨다

함수 선언문, 함수 표현식, 화살표 함수란 ?

함수 선언문, 함수 표현식, 화살표 함수

함수선언문이란?

function fun () {
	console.log("출력출력")
}

이런식으로 표현한다

함수표현식이란?

const fun = function(){
	console.log("출력출력")
}

이런식으로 변수에 함수를 할당을 한다.

함수선언문 vs 함수표현식

fun1() // fun1입니다
fun2() // fun2는 함수가 아닙니다

function fun1 () {
	console.log("fun1입니다")
}

var fun2 = function(){
	console.log("fun2입니다")
}

이렇게 나오는 이유는 호이스팅 문제이다

var fun2

fun1() // fun1입니다. fun1는 한번에 위에서 호이스팅된다.
fun2() // fun2는 함수가 아닙니다. fun2 === undifined 로나온다.

function fun1 () {
	console.log("fun1입니다")
}

fun2 = function(){
	console.log("fun2입니다")
}

화살표 함수

일반 함수와 arguments 객체와 this 바인딩을 하지 않는다

쿠키, 세션이란 ?
쿠키, 세션

쿠키, 세션을 사용하는 이유

HTTP프로토콜의 특징을 보완하기 위해서 사용된다

HTTP프로토콜의 특징

Connectionless 프로토콜(비연결지향)

클라이언트가 서버에 요청을 하고 응답이 온 후에 연결을 끊는 처리 방식

Stateless 프로토콜 (상태 정보 유지 안함)

클라이언트의 상태 정보를 가지지 않는 서버 처리 방식

첫번째 통신에서 데이터를 주고 받아도 두번째 통신에서는 이전 데이터를 유지하지 않는다

쿠키, 세션의 차이점

쿠키

저장 위치 : 브라우저

보안에 취약하다

도메인 당 최대 20개의 쿠키를 가질 수 있다

하나의 쿠키는 최대 4KB까지 저장이 가능하다

세션

저장 위치 : 서버

서버 자원을 사용하기 때문에 사용자가 많을수록 소모되는 자원이 상당함

브라우저를 닫거나, 서버에서 세션을 삭제했을때만 삭제 된다

저장 공간의 제한이 없다(서버 용량에 따라 정해짐)

각 클라이언트 고유 Session ID를 부여한다

| | 쿠키 | 세션 | | --- | --- | --- | | 저장 위치 | 클라이언트 | 서버 | | 저장 형식 | text | Object | | 만료 시점 | 쿠키 저장시 설정 | 브라우저 종료 | | 사용하는 자원 | 클라이언트 리소스 | 서버 리소스 | | 용량제한 | 도메인 당 20개, 하나당 최대 4KB | 서버가 허용하는한 제한 없음 | | 속도 | 빠름 | 느림 | | 보안 | 나쁨 | 좋음 |
CORS란 ?
CORS

SOP이란?

SOP(same origin policy)동일 출처 정책을 의미한다

same origin(동일 출처)란?

프로토콜, 호스트, 포트가 같은것을 의미한다

https://naver.com:80
- 프로토콜 : https
- 호스트 : naver.com
- 포트 : 80
SOP가 필요한 이유

보안 문제

쿠키에 여러 데이터들을 보관하는데 위험함

CORS란?

Cross Origin Resource Sharing(교차 출처 리소스 공유)

추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하는것이다.

CORS 해결하는 방법

1. 크롬 확장프로그램 사용

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

2. 서버에서 Access Control Allow Origin 세팅

3. proxy server

포트를 입력하지 않아도 괜찮은 이유

http : 80

https : 443

이라는 기본 포트값이 있다

포트값을 명시해놓지 않으면 프로토콜을 참조해 기본 포트값을 사용한다
실행컨텍스트란?
실행컨텍스트

실행 컨텍스트란 ?

실행할 코드의 환경 정보를 모아놓은 객체를 말한다 = 스코프의 정보를 담은 환경

코드 실행에 필요한 정보들은 ?
- 변수
- 함수 선언
- 변수의 유효 범위
- This
실행 컨텍스트의 종류

전역 컨텍스트

콜스텍에 제일 밑에 있는 실행 컨텍스트
- 함수 내부에 없는 코드들은 전역 컨텍스트에서 실행됨
- window 전역 컨텍스트를 생성한다
- this를 전역 객체로 설정한다
함수 컨텍스트

함수가 호출 될때 해당 함수에 맞는 함수 컨텍스트가 콜스텍에 쌓임

실행 컨텍스트 과정
```
console.log("전역");
function outer() {
  console.log("outer함수");
  function inner() {
    console.log("inner함수");
  }
  inner();
}
outer();
```

클로저란 ?

클로저

클로저란 ?

function outer() {
  var a = "a";
  function inner() {
    console.log(a);
  }
  return inner;
}

function bb() {
  console.log(a);
}

const fun = outer();
fun();

함수에 함수가 리턴될때 inner에서 outer의 변수로 접근할 수 있다.

변수타입이란 ?
변수타입

원시 자료형
- number
- string
- boolean
- undefined
- null
- symbol
원시 자료형이 할당될때는 변수에 값 자체가 담긴다

참조 자료형

원시 자료형이 아닌 모든것들이 참조 자료형
- 배열
- 객체
- 함수
가 대표적이다

참조 자료형을 변수에 할당할때는 변수에 값이 아닌 주소를 저장한다

크기가 변하는 데이터를 보관하기 위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당한다
React가 무엇이며 왜 사용할까 ?
React가 무엇이며 왜 사용하는지 ?

프론트엔드 프레임워크 사용하는 이유

1. 데이터의 변화를 화면에 적용하기 쉽다

2. 컴포넌트화 하기 쉽다

React란?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다

React를 사용하는 이유

Component 작성
1. 유지보수에 유리하다
2. 재사용성이 올라간다
수 많은 커뮤니티

Virtual DOM

웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어나는 이 과정에서 시간이 소모된다.

DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 직접 조작하는 작업은 무겁다. 그래서 React는 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 Virtual DOM을 만든다

React는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 JavaScript 객체로 따로 관리한다. 왜냐하면 DOM 노드를 생성하거나 기존 DOM 노드에 접근하는 것이 JavaScript 객체로 표현된 트리 노드를 생성하거나 접근하는 거에 비해 느리기 때문이다. 즉, JavaScript 객체로 표현된 트리에 CRUD 작업을 수행하는 것이 DOM 노드에 CRUD 작업을 수행하는 것보다 일반적으로 더 빠르다. (대신 메모리 사용량이 늘어난다는 단점은 있다.)

원리

Component가 반환했던 전에 엘리먼트와 비교해서 다른 경우에만 해당 DOM 노드를 업데이트한다
React의 라이프 사이클이란 ?
리액트 라이프사이클

순서

Mount

DOM이 생성되고 브라우저에 나타나는것

Update

Update가 발생하는 상황
1. props가 바뀔때
2. state가 바뀔때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때
UnMount

DOM이 브라우저에서 사라지는것

Hook실행순서

useState, useMemo

이 둘은 먼저 코드가 입력된 순서부터 실행된다

useEffect보다 일찍 실행된다

useEffect

useEffect는 렌더링 이후 수행된다
```
useEffect(()⇒{
	console.log("이것은 렌더링 될때마다 실행~")
})

useEffect(()⇒{
	console.log("이것은 첫렌더링때만 실행~")
},[])

useEffect(()⇒{
	console.log("이것은 state1또는state2가 변할때와 첫 렌더링때만 실행~")
},[state1, state2])

useEffect(()⇒{
	return(()=> {console.log("이것은 Unmount될때 실행")})
})
```
```
const Children = () => {
  useState(() => {
    console.log("ChildrenState");
  });
  useMemo(() => {
    console.log("ChildrenMemo");
  }, []);
  useEffect(() => {
    console.log("ChildrenEffect");
  }, []);
  return null;
};

const Parent = () => {
  useEffect(() => {
    console.log("ParentEffect");
  }, []);
  useMemo(() => {
    console.log("ParentMemo");
  }, []);
  useState(() => {
    console.log("ParentState");
  });
  return <Children />;
};
```
이것의 실행순서는
1. ParentMemo
2. ParentState
3. ChildrenState
4. ChildrenMemo
5. ChildrenEffect
6. ParentEffect
이유는

우선 랜더링 되기전에 부모의 state, memo가 실행된다.

state, memo는 코드를 짠 순서대로 실행된다

useEffect가 Children부터 실행된 이유

useEffect는 랜더링이 되고나서 실행된다

부모 컴포넌트가 렌더링이 되려면 자식 컴포넌트가 렌더링 되어야한다

자식 컴포넌트가 렌더링되면 자식 컴포넌트의 useEffect가 실행된다

자식 컴포넌트 렌더링 > 자식 useEffect > 부모 컴포넌트 렌더링 > 부모 useEffect

Class 컴포넌트 라이프 사이클

useEffect에서 기본적으로 수행하는것들을 따로 직접 수행시켜줘야한다

Mount
1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount
Updating
1. getDerivedStateFromProps
2. shouldComponentUpdate
3. componentDidUpdate
UnMount
1. componentWillUnmount

useMemo, useCallback, React.Memo란 ?

useCallback, useMemo, React.Memo

Memoization

메모이제이션이란 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는것을 의미한다. 적절하게 사용하면 메모리를 더 쓰긴 하지만 성능이 향상된다.

useMemo

메모리제이션된 값을 반환한다

const memoziedValue = useMemo(()=> something(a,b),[a,b] )

사용예시

const getId = id=>{
	console.log("id가 변경")
	return id
}
const getPassword = password => {
	console.log("password가 변경")
	return password
}

function Inner ({id, password}) {
	const newId = getId(id)
	const newPassword = getPassword(password)
	return <div>
	{newId}{newPassword}
</div>
}

export default function App () {
	const [id, setId] = useState("")
	const [password, setPassword] = useState("")

	const handleId =(e)=>{
		const {target : {value}}=e;
		setId(value)
	}
	const handlePassword =(e)=>{
		const {target : {value}}=e;
		setPassword(value)
	}

	return 
		<>
			<input value={id} onChange={handleId} />
			<input value={password} onChange={handlePassword} />
			<Inner id={id} password={password} />
		</>
}

이런식으로 코드를 짜면 id, password각각 변해도 “id가 변경”, “password가 변경”둘 다 console에 찍힌다. 여기서 useMemo를 사용하면 불필요한것을 막을 수 있다.


function getId(id) {
  console.log("id가 변경");
  return id;
}
const getPassword = (password) => {
  console.log("password가 변경");
  return password;
};

function Inner({ id, password }) {
  const newId = useMemo(()=>{
    return getId(id);
  },[id]) 
  const newPassword = useMemo(()=>{
    return getPassword(password);
  },[password]) 
  return (
    <div>
      {newId}
      {newPassword}
    </div>
  );
}

export default function App() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const handleId = (e) => {
    const {
      target: { value }
    } = e;
    setId(value);
  };
  const handlePassword = (e) => {
    const {
      target: { value }
    } = e;
    setPassword(value);
  };

  return (
    <>
      <input value={id} onChange={handleId} />
      <input value={password} onChange={handlePassword} />
      <Inner id={id} password={password} />
    </>
  );
}

이런식으로 useMemo를 사용하면 id를 바뀌면 “id가 변경”만

password가 변경되면 “password가 변경”만 찍한다.

useCallback

메모리제이션된 함수를 반환한다

const memoziedFunction = useCallback(()=> {
	console.log(a,b)
},[a,b])

useMemo, useCallback 차이점

useMome : return 값을 저장

useCallback : callback함수를 저장

React.Memo

리액트는 부모 컴포넌트가 렌더링되면 부모 컴포넌트에 속한 자식 컴포넌트 또한 렌더링이 된다. 그런데 자식 컴포넌트로 내려주는 props가 바뀌지 않는다면, 바뀌지 않는 자식 컴포넌트는 리렌더링이 일어나지 않아도 될 것이다. 이처럼 리렌더링이 필요한 컴포넌트만 리렌더링 시키는 함수를 React.memo라고 한다.

const Small = function ({number, setNumer}) {
  console.log("small render!!")
  const handlePlue =()=> {
    setNumer((prev)=> prev+1)
  }
  const handleMius = (e)=>{
    setNumer((prev)=> prev-1)
  }
  return <>
  <button onClick={handleMius} >-</button>
  {number}
  <button onClick={handlePlue} >+</button>
  </>
} 

const Big =function ({number, setNumer}) {
  console.log("big render!!")
  const handlePlue =()=> {
    setNumer((prev)=> prev+100)
  }
  const handleMius = (e)=>{
    setNumer((prev)=> prev-100)
  }
  return <>
  <button onClick={handleMius} >-</button>
  {number}
  <button onClick={handlePlue} >+</button>
  </>
}

function Parent ({smallNum,setSmallNum,bigNum, setBigNum }) {
  return <>
  <Small number={smallNum} setNumer={setSmallNum}  />
  <br/>
  <Big number={bigNum} setNumer={setBigNum} />
</>
}

export default function App () {
  const [smallNum, setSmallNum] =useState(0)
  const [bigNum, setBigNum] =useState(0)
  return <Parent smallNum={smallNum} setSmallNum={setSmallNum}bigNum={bigNum} setBigNum={setBigNum} />
};

이런식으로 그냥 사용하면 small, big들을 각각 클릭해서 숫자를 바꾸면

"big render!!", “small render!!” 가 둘 다 찍힌다.

여기서 React.memo를 사용하면

const Small = React.memo(function ({number, setNumer}) {
  console.log("small render!!")
  const handlePlue =()=> {
    setNumer((prev)=> prev+1)
  }
  const handleMius = (e)=>{
    setNumer((prev)=> prev-1)
  }
  return <>
  <button onClick={handleMius} >-</button>
  {number}
  <button onClick={handlePlue} >+</button>
  </>
} )

const Big = React.memo(function ({number, setNumer}) {
  console.log("big render!!")
  const handlePlue =()=> {
    setNumer((prev)=> prev+100)
  }
  const handleMius = (e)=>{
    setNumer((prev)=> prev-100)
  }
  return <>
  <button onClick={handleMius} >-</button>
  {number}
  <button onClick={handlePlue} >+</button>
  </>
})

function Parent ({smallNum,setSmallNum,bigNum, setBigNum }) {
  return <>
  <Small number={smallNum} setNumer={setSmallNum}  />
  <br/>
  <Big number={bigNum} setNumer={setBigNum} />
</>
}

export default function App () {
  const [smallNum, setSmallNum] =useState(0)
  const [bigNum, setBigNum] =useState(0)
  return <Parent smallNum={smallNum} setSmallNum={setSmallNum}bigNum={bigNum} setBigNum={setBigNum} />
};

small은 “small render!!”, big은 “big render!!”가 각각 찍힌다(불필요하게 두개씩 찍히지 않는다.)

반복문에서 key를 사용하는 이유는 ?
key를 사용하는 이유?

React에서 map을 사용할때 key를 안 넣어주면 콘솔에 warnning이 뜬다.

keys는 왜 사용해야할까 ?

key의 사용이유

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

key값 사용의 주의할점
- 고유하게 식별할 수 있는 문자열을 사용해야 한다. 대부분의 경우 id를 key로 사용합니다.
- 배열의 index사용을 지양해야한다.
key로 배열의 index의 사용을 지양해야하는 이유
```
//이런 음식 배열이 있다고 하자
const array = ["치킨", "피자", "햄버거", "족발"]
//이 배열에 뒤에 새로운 음식을 추가하면
const newArray = ["치킨", "피자", "햄버거", "족발", "김밥"]
// 마지막에 하나만 늘어나는것이기 때문에 문제가 없다. 하지만 중간에 새로 삽입되면
const newArray = ["치킨", "피자", "탕수육","햄버거", "족발"]
//3번째 이후로 순서가 하나씩 밀려서 시간이 좀 더 걸린다
```
이 코드를 보면 중간에 “탕수육”이 추가되면 “탕수육”앞에 “치킨”, “피자”의 index는 0,1로 전(array)과 동일하지만 “탕수육”뒤에 오는 “햄버거”, “족발”의 index는 2, 3에서 3, 4로 변한다. 이는 성능 저하로 이어진다.
Webpack, Babel이란 ?
Webpack, babel

Webpack이란?

Webpack은 모듈번들러이다.

모듈 번들러란?

웹을 구성하는 HTML, CSS, Javascript, Image 등을 모두 각각의 모듈로 보고 이들을 하나의 결과물을 만드는 도구를 의미한다.

번들링을 하는 이유는?

자바스크립트 파일 관리

요즘은 여러개의 자바스크립트 파일을 만들어 개발을 한다. 여러 자바스크립트 파일에서 중복된 이름의 변수가 충돌이 일어날 수 있다.
```
<html>
	<body>
		<script>
			var a = 10
			function getNum () {
			console.log(a)
			}
		</script>
		<script>
			var a = 20
			function getNum () {
			console.log(a)
			}
		</script>
		<script>
			getNum() //20
		</script>
	</body>
</html>
```
웹 페이지 로딩 속도 상승

여러 js파일을 요청하는 것이 아닌 하나의 js 파일을 요청하기 때문에 빨라진다.

Babel이란?

Babel은 트랜스파일러이다.

트랜스파일러란?

특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다. 모든 브라우저가 ES6의 기능을 제공하지 않기 때문에 ES5코드로 변환시키는 과정이 필요하다.
CSS에서 Position이란 ?
Position

position : static

static은 position 기본값이다.

top, bottom, left, right 속성은 무시된다

position : relative

relative는 원래 위치를 기준으로 top, bottom, left, right을 통해서 움직일 수 있다.

position : absolute

absolute를 사용한 요소를 기준으로 상위 요소로 올라가 position : static이 아닌 요소를 기준으로 움직인다.
```
<!DOCTYPE html>
<html>
  <body>
    <main>
      <div id="first">1</div>
      <div id="second">2</div>
      <div id="third">3</div>
    </main>
    <style>
      main {
        width: 300px;
        height: 300px;
        background-color: green;
      }
      #first {
        background-color: red;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
      }
      #second {
        background-color: pink;
        width: 100px;
        height: 100px;
      }
      #third {
        background-color: blue;
        width: 100px;
        height: 100px;
      }
    </style>
  </body>
</html>
```
이런식으로 상위 요소인 main이 static으로 설정되어 있으면 body를 참고해서 움직인다.

position : fixed

특정 요소를 해당위치에 고정시킬때 쓰인다.

viewport를 기준으로 top, bottom, left, right적용되어 ****움직인다.

position : sticky

스크롤 하다가 top, bottom, left, right를 통해서 정한 위치에 고정된다.
head tag란 ?
Head Tag

title

웹 페이지의 제목을 나타낸다. 검색 엔진에서 가장 크게 보여짐으로 페이지의 특성을 잘 드러내야한다.

한 웹 페이지당 한 번만 사용해야한다.
```
<html>
	<head>
	<title>
	이 웹 페이지의 제목
	</title>
	</head>
	<body>
		<h1>
		제목제목
		</h1>
	</body>
</html>
```
style

문서의 스타일 정보가 포함된다.

stlye tag의 위치 head vs body

보통 style을 적용 시킬때 head에 link tag를 이용해서 외부 파일을 연결한다.

body에 style tag를 써서 style을 넣으면 html파일이 커질수록 늦게 style tag가 인식되기 때문에 유저가 처음 본 화면에 style 적용이 안될 수 있다.

meta

태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다.

metadata는 데이터를 설명하는 데이터이다.

meta tag로 설명할 수 있는 것들
- character 인코딩하기
```
<meta charset="utf-8">
```
- 저자 표시하기
```
<meta name="author" content="Lee">
```
- 설명 표시하기
```
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
```
- 5초 뒤에 다른 페이지로 redirect하는 예제
```
<meta http-equiv="refresh" content="5;url=http://www.naver.com" />
```
- viewport를 설정하는 예제
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- 검색 엔진에 검색되는 단어를 지정
```
<meta name="Keywords" content="Web, html, 웹 표준" />
```
이것들 이외에도 여러 속성들이 있다.
Typescript의 장단점이란 ?
Typescript

Javascript의 확장판 언어로 Javascript의 동적 타입에서 발생하는 문제를 해결하기 위해 나왔다.

장점
- 정적 타입
- 객체지향 프로그래밍 지원
인터페이스, 제네릭 등을 통해 크고 복잡한 객체지향 프로그래밍을 지원한다.
- ES6 지원
단점
- 러닝커브
- 초반세팅
- 코드의 길이가 길어지므로 가독성이 떨어질 수 있음

브라우저 렌더링 과정

1. HTML, CSS parsing

HTML parsing

CSS parsing

2.Render Tree 생성

3.Layout

4.Paint

5.Compositing

Reflow, Repaint

Reflow란?

Repaint란?

Reflow는 언제 일어날까 ?

Reflow 최적화 방법

Sementic Tag(시멘틱태그)

시멘틱이란?

시멘틱태그란 ?

시멘틱태그를 쓰는 이유는 ?

1. SEO(Search Engine Optimization)

2. 시각장애가 있는 사용자가 스크린 리더를 사용하여 웹 사용에 도움이 된다

3. 유지보수에도 유용하다

시멘틱태그의 종류들

웹 접근성

웹 접근성이란 ?

웹 접근성이 왜 중요한가 ?

1. 누구에게나 동등한 기회 제공을 위해 웹 접근성을 준수해야한다

2. 법률로 웹 접근성 보장에 대해서 명시되어 있다

웹 접근성 지침

1. 인식의 용이성

2. 운용의 용이성

3. 이해의 용이성

4. 견고성

www.naver.com을 입력하면 일어나는 일

IP주소란?

도메인 네임(Domain Name)이란?

도메인 네임 > IP주소

CSS박스 모델

박스모델이란?

Content

Padding

Border

box-sizing

content-box

border-box

이벤트 버블링, 캡쳐링, 위임

event가 발생하면 최상단 부모 노드부터 target까지 쭉 내려온다. 이때 캡쳐링 이벤트들이 있으면 실행된다.

target에 도착하여 target을 실행시키고 다시 최상단 부모 노드까지 올라간다. 이때 버블링 이벤트들이 실행된다.

위임

이벤트 위임이란?

Promise

동기 vs 비동기 ?

동기란?

비동기란?

Callback 지옥이란 ?

Promise란?

Promise의 상태

Promise동작

async & await 란?

예외 처리

Hoisting

변수란?

변수 선언 순서

hoisting이란?

var, let, const 차이

var

let

const

TDZ(Temporal Dead Zone)

TDZ이란?

함수 선언문 호이스팅

함수 선언문, 함수 표현식, 화살표 함수

함수선언문이란?

함수표현식이란?

함수선언문 vs 함수표현식

화살표 함수

쿠키, 세션

쿠키, 세션을 사용하는 이유

HTTP프로토콜의 특징

Connectionless 프로토콜(비연결지향)

Stateless 프로토콜 (상태 정보 유지 안함)

쿠키, 세션의 차이점