프런트 지식

각 브라우저 작동 방식

https://yozm.wishket.com/magazine/detail/1338/

프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 | 요즘IT

---

브라우저의 렌더링 과정 + aws

www.naver.com  -> 해당 DNS가 갖고 있는 ip 주소로 이동 -> 만약 Cloud Front 가 있다면 그 곳으로 이동한다.

 

CDN 이미 Cloud Front 에서는 CDN이 동작이 되는데 만약 내가 미국에 있는데 한국 서버에 있는 사진, 파일을 가져오게 된다면 느리게 되기 때문에 관련 정보들을 미리 미국 서버에 올려 놓고 있는 겁니다. 그래서 그중에서 가장 가깝고, 상태가 좋은 edge에 가서 해당 파일을 가져옵니다. 상태가 좋은지 체크하는 health check 가 존재 합니다. 

 

정적캐쉬: 미리 가져다 두는 것

동적캐쉬: 요청이 있을때 필요하면 original 에서 가져온다.

---

https vs http vs ssl

https://gentlysallim.com/ssl%EC%9D%B4%EB%9E%80-%EA%B2%8C-%EB%AD%90%EA%B3%A0-https%EB%9E%80-%EA%B1%B4-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%A8/   

---

 html window vs document

---

버블링과 캡처링

 

https://ko.javascript.info/bubbling-and-capturing

---

로컬 스토리지, 세션, 쿠키 vs JWT

참고

쿠키 세션 차이

 

탄생 설명

쿠키와 세션은 HTTP 프로토콜 때문에 생긴 기능이다.

Http 프로토콜은 tcp 기반이기 때문에 connectionless, stateless 의 성질을 갖는다.

connectionless: 한번 연결후 유지 하지 않는고 바로 끊는다.

stateless: 연결후의 상태를 유지 하지 않는다.

 

쿠키

- persistent cookies, session cookies 두종류 있다.

- 웹 브라우저 요청할때 웹 서버에서 Http header 에 끼워서 준다.

- 도메인이 동일하면 동일한 쿠키를 갖게 된다.

- 하지만 보안성이 떨어진다. 해당 사용자에 자리에 앉아서 하드웨어를 살펴 보면 알수 있다.

- 저장되어 있는 양이 정해져 있다.

- 쿠키 이미 존재시 Http 해더에 포함 시켜서 서버에 요청을 보낸다.

- 쿠키는 만료기간이 있어서 브라우저 종료 후에도 브라우저에 저장 하고 있는다.

- 쿠키는 프로그램이 아니고 name-value로 되어 있는 텍스트 조각이다. ( binary 데이터 아니다 )

 

세션

- 쿠키 기반이다. ( 쿠키와의 차이점은 저장위치 뿐이다 )

- 서버에서 관리한다.

- 세션ID를 유지하고 일정 시간후 응답이 없다면 삭제

- 그래서 탭으로 페이지 이동해도 유지되지만, 종료시 서버에서 ID를 삭제한다.

- 사용자가 많아지면 서버 리소스를 많이 사용함

- 보안성이 좋다.

- 사용자가 로그인 하면 서버는 클라이언트에게 cookie 안에 session Id 를 줍니다.

- 서버는 해당 session Id에 맞는 정보를 저장하고 있습니다. 권한, 아이디, timeout 등..

- 사용자는 서버와 통신 할때 cookie 안에 session Id를 넣어 줍니다. 만약 서버에 session ID에 값과 동일 하지 않다면 로그아웃 되도록 합니다.

- 하지만 계속 db에 접속을 해야 하는 I/o 이슈, 서버가 여러개 있을 경우에 각 서버 마다 갖고 있는 session 이 다르기 때문에 문제가 생깁니다. 그래서 메모리형 DB인 레디스, memcached를 사용해서 전체 서버에서  같이 접속 하도록 개발하는 경우도 있습니다.

- 그렇지만 계속 늘어나는 접속자들 때문에 늘어나는 session으로 jwt가 개발 되었다.

 

jwt 

- header ( 헤더 )

- 이중으로 접속

- access token 만 있으면 접속 가능 그래서 토큰 시간 낮추고 하지만 문제가 많다.

- 토큰 형식의 인증 방식

 

스토리지 ( 링크 )

- localStorage, sessionStorage 두가지 존재

- 쿠키보다 더 많은양을 저장할수 있다. ( HTML5 이후 만들어 졌다. ) 

- primative, object 저장 가능

- Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료.

localStorage

- 도메인, 프로토콜, 포트가 동일하면 origin에 묵여 있는 localStorage 는 동일한 값을 가져온다.

- 그래서 탭을 새로 열어도 계속 유지된다.

sessionStorage

- localStorage랑 프퍼티, 메서드는 동일하나 같은 탭에서만 유지된다. 

- iframe 에서는 유지 된다.

	쿠키	session
저장 위치	웹 브라우저( 클라이언트 )	웹 서버
저장 기간	유효기간 설정 기능 미지정 시 웹브라우저 종료와 함께 삭제	유효기간 설정가능 기본적으로, 브라우저 종료 시 삭제
저장 방식	하드 디스크 내 텍스트 파일	웹 컨테이너 내 객체
용량 제한	총 300개의 쿠키 하나의 도메인 당 20개의 쿠키 ( 쿠키 초과 시 가장 오래된 쿠키부터 제거 됨 ) 하나의 쿠키당 최대 4kb	서버 허용 범위 내 가능 (용량 제한 없음 )
속도	세션보다 빠름	쿠키보다 느림
보안성	보안성이 낮음  ( 하드에서 꺼내 읽을수 있음 )	보안성이 높다 ( 서버가 해킹 당하거나 통신 중간에 세션 ID 를 탈취 당하지 않으면 )

캐쉬

- 리소스 파일들의 임시 저장소, 

	캐시	쿠키
정의	캐시는 웹 페이지 요소를 저장하기 위한 임시 저장소이다. 특히 후에 필요할 것 같은 요소글을 저장한다. css 이미지, js 파일, 브라우저 서버 앞단에 저장 - 서버에서 캐시 타임을 정할수 있다.	쿠키 또한 정보를 저장하기 위해 사용된다. 기본적으로 웹서버에서 pc로 보내는 작은 파일들을 저장한다. 보통 쿠키는 누군가 특정한 웹 사이트를 접속할 때 발생된다.
목적	캐시는 웹 페이지가 빠르게 렌더링 할 수 있도록 도와준다.	쿠키는 사용자의 인증을 도와준다.
삭제	사용자가 직접 수동으로 삭제해주어야 한다.	만료기간이 지나면 삭제
예시	오디오, 비디오 css, js 파일	유저의 선호도

** 참고

API Cache

- 

 

---

Javascript 작동 방법, 이벤트 관리,

 

js 는 단일 쓰레드

- memory heap , callback stack

- web API

call stack 에서 계속 쌓여서 함수가 작동 되고 web api에서 비동기 처리를 한후 callback queue 에 쌓이게 된다. 그러면 event loop가 call stack을 살펴 보면서 해당 결과 값을 넘긴다. 지금은 promise로 event loop 를 조절 할수 있게 되었다.

참고 링크

---

비동기 설명

- static page

서버에서 요청에 필요한 html 파일을 가져오는 방식으로 개발 되었는데 불러 올때 마다 깜박임

 

- <ifram />

특정 부분만 호출 할수 있도록 개발

 

- XMLHttpRequest 

http 방식 ( HyperText Transfer Protocol ) html 과 같은 파일을 주고 받을때 사용하는 프로토콜

ftp 파일 주고 받는 프로토콜

비동기 방식으로 특정 부분만 수정할수 있도록 개발

 

- callback

비동기 방식으로 개발 되어서 콜백 지옥에 빠짐

 

- Promise ( es6 )

콜백 지옥을 없애기 위해서 비동기 함수를 then catch 로 쉽게 개발가능하도록

 

- await async ( es7 )

비동기 처리를 동기적인 처리 처럼 보이도록 변경, error handling 편하게 변경

 

그럼 싱글 스레드인 js 어떻게 비동기 처리 하는가?

web api 멀티쓰레드 처리 하듯 -> 하지만 비동기 처리기 때문에 계속 기다리지 않고 일이 처리 되는 형상 때문에 promise 만들어 짐

- timer

- Ajax http 요청

- 파일 페이지 읽어 오기

 

---

서버 통신

---

폴리필

---

React

왜 CRS 가 흥하게 되었을까?

- 정적웹: 단순한 사이트 예를 들어 계산기 html, css, js로 개발된 것들 움직이는 것이지만 서버에서 주어진 데이터로 변경될수도 있음,

js, html ,css, 파일 및 동영상 사진 파일이 같은가

 

- 동적웹: js, html,css 가 변경된다.

동적웹을 작동 시키기 위해서 MVC 방식으로 개발을 많이 헀다. 서버에서 렌더링해서 브라우저에 가져다 주는 형태다.

 

하지만 웹, 모바일 웹, 안드로이드, ios .. 와 같이 디바이스가 많아지면서 그거에 해당하는 동적웹을 다 만들어 줘야 하는 문제가 생겼다.

그래서 만들어 진것이 SPA -> 브라우저에게 렌더링 할수 있는 권한을 주는 것이다. 브라우저가 갖게 되는 강력한 프레임워크, 라이브러리인 react, Vue, angular 가 만들어 진것이다.

 

React vs Angular

1. typescript vs js and JSX

- typescript는 자동완선, 빠른 코드 리팩토링, 

- jsx bable 컴파일, 

2. real vs virtual

- react는 virtual로 변경된 부분만 바꿔준다.

- angular는 real이라 변경되면 전체 변경되지만 두가지 모두 사용한다.

3. Data Binding 양방향, 단방향

- react는 단방향으로 하위 데이터가 변경된다고 상위가 변경되지 않는다.

- angular는 모두 영향을 준다.

 

Vue vs React 둘다 VDOM 으로 개발

Vue

- 사용하기 쉽다.

- react 처럼 개발할때 자유도가 없다. ( 할수 는 있지만 정해진 방법이 있다. v-for, v-if .. 등 )

- HTML 렌더링 빠름 ( 밀리 세컨드 차이 )

- Vue version 업데이트 빠르게 대응 한다.

react

- 자유도가 좋다

- 모두 js 로 구성되어 있다.

- 재사용 및 커스터 마이징이 좋다

 

RN 실행 원리

- 1) UI Thread: Main Thread. <- IOS, android UI rendering

- 2) JS Thread: js code, api call ..등

- 3) Native Modules Thread: navtive module thread

- 4) render Thread: only android ( Draw UI )

 

작동 과정

1. 앱이 시작되면서 Main thread가 실행되고 메인 스레드는 JS스레드를 실행시키고 자바스크립트 번들을 로드한다.
2. JS스레드가 실행되면서 React는 virtual DOM을 생성하고 diffing알고리즘을 통해 변경사항을 Native Bridge를 경유하여 shadow스레드로 전달한다.
3. shadow스레드는 변경사항 메시지를 통해 화면의 레이아웃을 계산하고 계산이 끝난 레이아웃의 파라미터나 객체를 메인 스레드로 보낸다.
4. 메인스레드가 UI를 화면에 표시한다.
5. 사용자가 화면에 입력한 UI이벤트 정보들이 Native Bridge를 경유하여 JS스레드로 보내진다.
6. UI이벤트 메시지를 활용하여 JS스레드에서 비즈니스 로직들이 실행되고 React는 다시 virtual DOM을 생성하며 변경사항을 다시 Native Bridge를 경유하여 shadow thread로 전달된다.
7. 3, 4, 5, 6과정이 반복된다.

React Native의 분리

일반적으로 React Native를 세 부분으로 나눌 수 있습니다.

1. React Native — 네이티브 측
2. React Native — JS 측
3. React Native — 브리지

이것은 종종 "React Native의 3가지 부분"이라고 불립니다.

 

---

ajax vs fetch vs axios

Ajax ( Asynchronous JavaScript and XML )

• Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

jquery 에서 ajax를 사용하게 되어서 헷갈리게 말하는데 jquery 에서 ajax 사용을 편하게 하기 위해서 만든 것이라 혼용해서 사용중

XHR를 모두 사용하지 않고 http 통신 관련된것만 사용하는 모듈 만들것이 fetch, axios

 

- fetch

장점: 브라우저 내부 모듈,

단점: timeout과 같은 설정 못함, 모든 브라우저에 최적화 안되어 있음

 

- axios

장점: 브라우저 최적화 및 timeout 같은 설정 할수 있음

단점: 모듈 다운

 

---

CSR vs SSR

 

CSR: client side rendering

- 서버에서 가져오는 양이 많아 초반에 시간이 오래 걸린다.

- SEO ( 구글에서 검색되는 점수가 낮게 나와서 검색 안될수도, 왜냐면 처음에 파일이 app.js로 비어 있으니까 )

- ttv ( time to view) 뷰가 보이는데 까지 시간 tti ( time to interact ) 작동되는 준비까지 끝난 시간이다 csr은 두개가 동일하다

 

SSR: server side rendering

- 서버에서 바로 가져왔기 때문에 보이지만, js를 따로 다운 받아야 해서 작동이 안될수도 있음 그래서 깜박일수 있음

- 서버에서 많은 데이터를 계속 가져와야 함

- seo는 높게 받음

- ttv 가 더 빠르다 tti 보다

 

그래서 결론은

next?

 

---

CSS  

 

 

---

dependencies와 devDependencies Package-lock.json

dependencies와 devDependencies의 차이는 다음과 같습니다.

• "dependencies": 프로덕션 환경에서 응용 프로그램에 필요한 패키지.
• "devDependencies": 로컬 개발 및 테스트에만 필요한 패키지.

https://github.com/saeromCho/shumblr/wiki/package.json-%ED%8C%8C%EC%9D%BC-%EB%82%B4%EC%9D%98-dependencies%EC%99%80-devDependencies%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-%EC%B6%94%EA%B0%80%EC%A0%81%EC%9D%B8-%EA%B3%B5%EB%B6%80(About-Babel) 

 

Package-lock.json

---

Throttle, Debounce

Throttle: Throttle 는 여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념이다.

만약 500ms 동안이라면 이벤트 실행을 막고, 한번만 실행 때문에, 잦은 이벤트 발생을 막아 성능상의 유리함을 가져 올 수 있다.

Debounce 와 다른점은 이벤트 발생 시간 이후에 일정 시간 동안 만을 기다리고, 이벤트를 실행 후 재차 기다린 다는 점이다.

 

Debounce: Debounce 는 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행 되도록 만드는 개념이다.

500ms 동안 동일한 이벤트가 계속해서 발생 한다면, 입력이 끝날때, 가장 마지막 이벤트만을 실행하여, 성능성 유리함을 가져올 수 있다.

Throttle 와 다른점은, 마지막 이벤트에서 일정 시간동안 이벤트가 발생한다면, 또 일정 시간을 기다린다는 점이다.

---

undefined vs null

• undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태입니다.
• null : 변수는 존재하나, null 로 (값이) 할당된 상태. 즉 null은 자료형이 정해진(defined) 상태입니다.

var var1; //undefined (어떤 값도 할당되지 않아서 자료형을 알 수 없음)
var var2 = null; //null (null로 (값이) 할당되어서 자료형을 알 수 있음 - null의 자료형은 object다.)

undefined == null //true
undefined === null //false

---

css

align-content는 여러 줄들 사이의 간격을 지정하며, 

align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.

- box-sizing:

• 기본적으로, 요소들에 box-sizing: content-box가 적용되면, 내용의 크기만 고려됩니다.
• box-sizing: border-box는 요소의 width와 height가 어떻게 계산되는지를 변경하여, border와 padding도 계산에 포함됩니다.

https://velog.io/@chris/front-end-interview-handbook-css-1

💻 프론트엔드 면접 질문 - CSS #1

 

---

react 생명 주기

constructor -> componentWillMount -> render -> componentDidMount

shouldComponentUpdate -> componentWillupdate -> render -> componentDidupdate

 

hook

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount를 혼합한 것입니다.

useEffect(() =>{},[]) 

useEffect(() =>{
	console.log("Component Did mound")
    console.log("Component Did update")
},[ state ]) 

useEffect(() =>{
	console.log("Component Did mound")
    return () => console.log("component will unmount")
} ,[])

---

extends PureComponent , extends Component

ShouldComponentUpdate 가 관리 하느냐 안하느냐 차이

예를 들어 클릭 할때 마다 랜덤수를 state에 넣는 componet 가 있다고 하면

PureComponent 는 얕은 비교를 하기 떄문에 만약 랜덤 수에서 이전과 동일한 수가 나오면 rendering 을 하지 않습니다.

하지만 extends Component 를 했을 경우에 state가 변경 되었기 때문에 렌더링이 됩니다.

---

17. const, var, let

- 호이스팅

- scope

 

---

18. CommonJs, RequireJS

---

19. 얇은 복사 깊은 복사

---

20. Js 프로토타입

---

21. HOC

---

22. 패턴

---

23 useCallback

함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다.

함수를 선언하는 것 만으로는 리소스 낭비가 많지는 않지만, 이런 함수가 많아지면 아무래도 부담이되는 건 사실입니다.

컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는 것 조차 하지 않고 최적화를 진행합니다.

따라서 되도록 최적화를 위해 낭비를 줄여야하는 건 사실이라고 생각합니다.

---

saga

 

- react는 화면 구성 컴퍼넌트

- 데이터 비즈니스를 분리 redux

- 비동기 처리를 react 화면에서 하면 동일하게 비즈니스 로직이 동일하게 뭉쳐 있는 느낌이라 비동기 미들웨어 thunk

- 순수 action의 느낌이 아닌 여러개의 액션이 뭉쳐 있는 느낌

- 제너레이터를 통해서 순수한 action으로 처리 

 

- redux-saga 가 해결하는 문제

 

 

https://min9nim.vercel.app/2020-04-23-redux-saga/

redux-saga 가 해결하는 문제

 

---

JS, CSS, HTML 관련

• 클로저의 개념과 사용하는 이유 ★★★★★
• 호이스팅의 개념 ★★★★★
• Array 함수 (reduce, foreach, every...) ★★★★
• Event Delegation과 막는방법 ★★★★
• 시맨틱 웹에 대한 이해 ★★★★
• 화살표함수와 this 바인딩 ★★★
• CSS 방법론(BEM) ★★★
• Webpack 설정 경험 ★★
• call, apply, bind ★★
• CommonJs, RequireJS ★

---

React 관련

• 왜 React를 쓰는가? ★★★★★★
• React 라이프사이클 ★★★★★
• Jest, Enzyme 등 테스트코드 작성 경험과 사용하는 이유 ★★★★★
• Redux, Mobx등 사용경험과 사용하는 이유 ★★★★
• Class형, 함수형(Hook) 차이 ★★★
• Virtual DOM의 사용이유와 장점 ★★★
• Package-lock.json이란? ★

---

프론트엔드 업무 전반

• Git 사용경험과 Git으로 프로젝트 관리 방법 ★★★★★
• XSS, CSRF의 개념과 방어방법 ★★★★
• SessionStorage,LocalStorage, Cookie의 차이점 ★★★
• 디자이너와 협업방법 툴(Zeplin) ★★★★
• SSR(next.js)를 사용해본 경험과 장점 ★★★
• 성능 최적화 경험 ★★

---

서버와의 통신

EC2, fargate, route53, 로드 벨런스, vpc 피어링, 

janking - webpack - dist - cli - cloudfront

image, docker

도커는 이미지를 만들어서 EC2에 올려두는 것이다.

 

• 트러블슈팅 경험을 공유 해 주세요.
• const, let, var의 차이는 무엇인가요?
• 일반 function 표현식과 arrow function 표현식의 차이는 무엇인가요? 어떤 방식을 선호하며 이유는 무엇인가요?
• React hook에는 어떤 종류가 있나요? 각각의 용도는 무엇인가요?
• CORS가 무엇이며, 어떻게 대처하나요?
• 비동기 구문의 실행 방식과 순서에 대해서 이야기 해 주세요.

 

---

외적 질문

 

- 왜 회사를 나가려고 하는가 그럼 노력을 무엇을 했는가?

 

---

참고

https://sunnykim91.tistory.com/121

프론트엔드 개발자 면접 질문(기술면접) 정리

 

SSR

https://d2.naver.com/helloworld/7804182

CSR vs SSR

https://velog.io/@kysung95/SSR-vs-CSR-%EB%8B%B9%EC%8B%A0%EC%9D%98-%EC%84%A0%ED%83%9D%EC%9D%80-feat.-ssg

[개발상식]SSR vs CSR 당신의 선택은? (feat. 웹의 변천사)

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

React vs Angular

https://www.popit.kr/%EB%B2%88%EC%97%AD%EA%B8%80-react-vs-angular-%EB%91%98-%EC%A4%91-%EC%96%B4%EB%96%A4-%EA%B2%83%EC%9D%B4-%EB%8B%B9%EC%8B%A0%EC%9D%98-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%95%8C%EB%A7%9E/

[번역글] React vs Angular : 둘 중 어떤 것이 당신의 프로젝트에 알맞을까요? | Popit

react-native 실행 원리

https://velog.io/@koreanhole/React-Native%EC%9D%98-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC