출저
6. cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.
쿠키는 서버, 로컬에 저장되고 세션,로컬은 로컬에만 저장된다. 쿠키는 보안에 대한 취약점(암호화가 존재하지 않기때문에), 정보를 헤더에 넣고 서버에 보내기 때문에 트래픽 유발하는 단점에 비해 세션과 로컬스토리지는 정보를 로컬에 보유하고 있다는 점이 다르다. 세션은 브라우저가 만료될때까지 정보를 저장하고 로컬은 직접 지워줘야 한다.
자동 로그인 -> 로컬스토리지
입력 폼 정보 -> 세션스토리지
비로그인 장바구니 -> 세션스토리지
다시 보지 않음 팝업 창 -> 쿠키
7. <script>, <script async>, <script defer> 차이점을 설명하세요.
<script>
HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작된다.
<script async>
이 스크립트는 HTML 파싱과 병렬적으로 가져오며, 가능할 때 즉시 실행됩니다(아마 HTML 파싱이 끝나기 전). 스크립트가 페이지의 다른 스크립트들과 독립적인 경우 async를 사용한다. 예) analytics.
<script defer>
이 스크립트는 HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행됩니다. 이 것이 여러개 있는 경우, 각 스크립트는 페이지에 등장한 순서대로 실행된다. 스크립트가 완전히 파싱된 DOM에 의존되는 경우 defer 속성은 스크립트를 실행하기 전에 HTML이 완전히 파싱되도록 하는데 유용합니다. <body>의 끝부분에 일반 <script>를 두는 것과 별 차이가 없다. defer 스크립트는 document.write를 포함하면 안된다.
8. 왜 일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 </body> 직전에 위치시키는 것이 좋은 방법인가요? 다른 예외적인 상황을 알고있나요?
<head> 안에 <link>를 넣는 이유
- 페이지가 처음 로드되면 HTML 과 CSS 가 동시에 파싱되기 때문이다.
- HTML은 DOM(Document Object Model)을 만들고 CSS는 CSSOM (CSS Object Model)을 만들게 되는데 이는 시각적인 부분을 만드는데 필요하므로 점진적 렌더링으로 성능 최적화의 범주안에 들어올 수 있다.
- 이는 UX가 향상된다는 의미와도 같은데 문서 맨 아래에 CSS를 두어 페이지의 요소를 그릴때 렌더링을 차단하여 사용자에게 빈 하얀 페이지를 보이게 하는 것을 방지하기 때문이다.
</body> 직전에 <script>를 넣는 이유
<script>는 다운로드되고 실행되는 동안 HTML 파싱을 차단하기 때문이다.<script>를 맨 밑에 위치 시키게 되면 HTML 이 먼저 파싱되어 사용자에게 표시할 수 있기 때문이다.- 또한, DOM 요소를 조작해야하는 코드가 오류를 발생시키지 않고 전체 스크립트를 중지시키지 않는다.
알아두어야 할 사항
- document.write()가 있을 때는
<script>를 아래쪽에 두는 것이 예외적일 수 있지만, 요즘은 document.write()를 사용하지 않는 것이 좋다. <head>에 <script>를 넣어야하는 경우, defer 속성을 사용하면 HTML을 파싱한 후에 스크립트를 다운로드하고 실행하는 것과 같은 효과가 있다.
9. 프로그레시브 렌더링이 무엇인가요?
1. 의미
PR(또는 PSSR)은 서버에서 중요한 컨텐츠를 렌더링한 후, 중요하지 않은 콘텐츠를 기다리지 않고 먼저 클라이언트로 스트리밍하는 기술이다. 그런 다음 서버에서 렌더링되면 나중에 중요하지 않은 콘텐츠를 스트리밍한다.
브라우저는 중요한 콘텐츠에 대한 chunk가 수신되는 즉시 페이지에서 HTML을 점진적으로 렌더링 (페인트)하기 시작한다. 그리고 브라우저가 서버에서 수신 할 때 중요하지 않은 콘텐츠는 나중에 페이지에서 렌더링 (페인트)된다.
2. PSSR의 일반적인 페이지로드 순서
- 브라우저, 서버에 HTML 요청
- 서버에서 API request 생성 후, 중요 콘텐츠 우선 렌더링하고 브라우저로 스트리밍
- 브라우저, HTML 청크 로드 후 렌더링(paint)
- 서버에서 중요하지 않은 컨텐츠를 렌더링하여 클라이언트로 스트리밍
- 브라우저, 나중에 중요하지 않은 컨텐츠 수신하고 렌더링(paint)
- 전체 페이지 로드 후, 브라우저는 일반적으로 이벤트 핸들러 및 기타 상호작용 동작을 연결하는 DOM element에 대한 상호 작용 수행
3. 장, 단점
장점
- 서버에서 중요한 컨텐츠를 먼저 클라이언트로 스트리밍
- JavaScript bundle을 로드하는데 걸리는 시간에 컨텐츠 미차단
- CSR과 SSR보다 빠른 페이지 로드
단점
- 컨텐츠가 빠르게 표시 되더라도 중요하지 않은 콘텐츠가 로드된 후, 상호 작용 활성화
- PR이 확립된 프레임워크가 없으며, 웹 애플리케이션의 한계에 대한 의존도 높음
10. 이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 이 속성의 컨텐츠를 실행할 때 브라우저의 프로세스를 설명하세요.
1. 의미
srcset 속성은 ‘이미지 소스의 세트’라는 의미로 기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 srcset 속성을 사용한다.
2. 사용 방법
<img srcset="이미지.jpg 픽셀 단위 이미지너비, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다. 320px 너비의 경우, 다음과 같은 계산을 따른다.
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
클라이언트의 해상도가 1x 일 경우, 1.5625가 가장 가깝고 small.jpg에 해당하는 500w가 브라우저에 의해 선택된다.
해상도가 레티나 (2x)인 경우 브라우저는 최소값에서 가장 위로 가까운 해상도를 사용한다. 500w (1.5625)는 1보다 크고 이미지가 보기 좋지 않을 수 있기 때문에 선택하지 않는다는 것을 의미한다. 그래서 브라우저는 계산 결과 비율값이 2에 가까운 1000w (3.125) 이미지를 선택한다.
11. cors 정리
1. 의미
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
메인 request 를 보낸 서버가 origin 이 되고 이와 다른 도메인, 포트 등으로 request 를 보냈을때 동일 출저 정책 (same-origin policy)에 의해 브라우저가 cross origin http 요청을 제한 한다.
동일 출저 정책 (same-origin policy)
불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식. 잠재적 악성 문서를 격리하여 공격 경로를 줄이는데 도움이 된다.
2. 해결방법
2-1. Access-Control-Allow-Origin response 헤더를 추가
request 시 모든 요청에 대한 허가를 한다 라는 의미로 Access-Control-Allow-Origin response 를 헤더에 추가한다.
서버와 클라이언트가 분리되어 있는 앱에서는 cross-origin HTTP 요청을 서버에서 승인해주는 것이 좋다.
2-2. node.js 의 middleware 인 CORS 를 추가
2-3. webpack-dev-server proxy
리액트 환경에서는 package.json 에 proxy 값을 설정하여 활성화 시키면 서버쪽 코드를 수정하지 않고 이슈를 해결할 수 있다.
