Portfolio

1. 4회차 모의면접

1. 질문 & 대답 준비

1.1 CSR(vs SSR), SPA(vs MPA)

기존 작성 대답

(Web) CSR과 SSR의 차이, 각각의 장단점 (링크) (1회독) → 4회차 모의면접

💡

SSR CSR

완전하게 만들어진 HTML 파일을 서버로 부터 받아, 웹브라우저에 렌더링
(장점) 초기로딩속도 빠르다.
(장점) SEO (검색엔진 최적화 가능) - meta 태그들미리 정의되어있음
(단점) 매 페이지 요청시 마다 새로고침되어 UX 떨어짐
(단점) 매 패이지 요청 때문에 서버 트래픽,부하 증가

첫 렌더링 시, HTML과 static파일을 먼저 전부 다운로드하고, 이후 필요한 리소스가 있을 때에만 서버에 요청하고 이를 웹브라우저에 반영하는 방식.
(장점) 첫로딩이후 렌더링 속도가 빠르다.
(장점) 서버 부담이 적다
(단점) 초기 로딩속도 느리다. → resource를 chunk단위로 묶어서 다운로드, Razy Loading을 통해 초기렌더링에 필요한 부분만 먼저 다운로드 받는 방법
(단점) SEO(검색엔진 최적화)에서 문제 발생 → 구글엔진만이 js까지 크롤링함 → react.helmet 라이브러리를 통해 각 컴포넌트 별로 meta 태그 지정, → 빌드시 하나의 html이기 때문에 SEO 어려움 → react-snap을 통해, 배포시에 페이지 별(router)로 html파일을 생성하도록 함

git issue 기반 질/답 작성해보기

1 SSR (Server Side Rendering) 과 CSR (Client Side Rendering)을 각각 설명해주세요. 특징 장단점

답변

SSR

완전하게 만들어진 HTML 파일을 서버로 부터 받아, 웹브라우저에 렌더링

(장점) 초기로딩속도 빠르다.

(장점) SEO (검색엔진 최적화 가능) - meta 태그들미리 정의되어있음

(단점) 매 페이지 요청시 마다 새로고침되어 UX 떨어짐

(단점) 매 패이지 요청 때문에 서버 트래픽,부하 증가

동작과정

client요청 → data,css 적용된 html + js 응답(server) → html먼저 렌더링(browser) → js 다운 후 실행(browser)

CSR

첫 렌더링 시, HTML과 static파일을 먼저 전부 다운로드하고, 이후 필요한 리소스가 있을 때에만 서버에 요청하고 이를 웹브라우저에 반영하는 방식.

(장점) 첫 로딩이후 렌더링 속도가 빠르다.

(장점) 서버 부담이 적다.

(단점) 초기 로딩속도 느리다. → resource를 chunk단위로 묶어서 다운로드, Razy Loading을 통해 초기렌더링에 필요한 부분만 먼저 다운로드 받는 방법

(단점) SEO(검색엔진 최적화)에서 문제 발생 → 구글엔진만이 js까지 크롤링함 → react.helmet 라이브러리를 통해 각 컴포넌트 별로 meta 태그 지정, → 빌드시 하나의 html이기 때문에 SEO 어려움 → react-snap을 통해, 배포시에 페이지 별(router)로 html파일을 생성하도록 함

1-1 본인이 어떤 프로젝트를 진행할 때, SSR과 CSR 중 어떤 것을 선택하였고, 선택이유는 무엇인가요?

답변

서비스 성격에 따라 선택할 것

검색을 통한 상위 노출이 필요할 경우 (e-commerse) → SSR
첫 페이지 로딩이 중요한 경우 (e-commerse detailPage) → SSR

모바일에서 주로 사용하는 웹사이트 → CSR

참고

https://miracleground.tistory.com/165

2 SSR과 CSR을 중심으로, 렌더링 관점에서의 흐름 변화를 말해주세요.

답변

전통적인 렌더링 방식 (SSR)

터닝포인트

모바일 기기(스마트폰)의 급격한 발전

트래픽최소화, 속도와 반응성, 사용성(UX) 기준 올라가 반영

CSR의 흐름

React, Vue

다시 SSR 방식의 SPA

Next.js

첫 페이지는 SSR을 통해, 채워진 Html을 받아 SEO문제를 해결하고, 다음페이지부터는 CSR 방식을 적용하여 사용성(UX), 서버부하를 해결한 프레임워크

3 SPA(Single Page Application)와 MPA(Multi Page Application)을 각각 설명해주세요.

답변

SPA는 한 문장으로 말하면, 모바일퍼스트 전략에 부합하는 단일 페이지 애플리케이션

MPA는 link tag를 통한 화면전환 방식을 가진 멀티페이지 애플리케이션

3-1 SPA (Single Page Application) 와 CSR (Client Side Rendering) 은 같은 개념인가요?

답변

다르다. 포커스하는 것이 다름. SPA는 ‘페이지 수’를 기준으로 MPA와 같이 사용할 수 있는 keyword, CSR은 ‘렌더링 주체’ SSR과 같이 연결지어 말할 수 있는 키워드

모든 SPA가 CSR방식을 채택하지는 않는다.

Next.js의 경우 SPA이지만, SSR을 사용한다.
첫페이지 렌더링은 서버에서 담당하지만 페이지는 하나이다.

3-2 SPA 의 단점을 말하고, 해결하기 위한 방법에 대해서 말씀해주세요 lazy loading

답변

1. 초기 구동 속도

원인 모든 정적파일을 초기에 받기 때문에 발생

해결1 lazy Loading을 통해, 첫 화면에 필요한 파일들만 먼저 다운로드

해결2 스켈레톤 UI 등을 통한 최소 사용성 확보

2. 검색엔진 최적화(SEO)

원인 페이지의 meta태그 정보를 검색 엔진이 확인할 수 없다.

해결1 크롬 브라우저 자체 검색엔진 에서 처리하도록 함.

해결2 SSR방식의 혼합

3. 보안

원인 js 핵심 로직이 노출될 수 있다는 점

해결 client에서 핵심로직을 최소화하고, server에서 핵심로직 다루는 것

출처

https://m.mkexdev.net/374

4 SEO(검색 엔진 최적화)는 무엇인가요?

답변

SEO (Search Engine Optimization)

검색 엔진에서 검색 결과의 상위에 오르게 하도록 웹 페이지를 최적화하는 작업 페이지 상위에 검색 결과가 노출되면 홍보 효과가 늘어나므로 인터넷 마케팅에서 중요

SEO 과정

robots.txt 설정

: 봇에게 수집정보를 알려줌, 없다면 동의 처리

sitemap.xml 작성

: 크롤링 해야할 URL 전달 (SPA어려움)

meta tag 작성

: 실질적인 검색 정보를 담는 태그

pre-render

SSR
SSG (Static Site Generation)

배포시점(빌드시)에 html 정적파일을 생성하는 것
SPA의 경우 react-snap 라이브러리로 여러개 html 생성 가능

serarch console 등록

검색엔진이 CSR에서 되지 않는 이유

클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다. 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다.

SPA에서 SEO에 유리하도록 만들기 위한 방법에 대해 설명해주세요.

react-helmet

원하는 곳에 meta tag를 작성

react-snap

build시에 페이지별로 html파일을 만들게 함 (정적 페이지 가능)
동적 라우터 처리 어려움(/:id)

prerender-spa-plugin

빌드할 때, 원하는 페이지들을 미리 설정하여 html파일을 만들어 둘 수 있다.(/content/1, /content/2, ..., 설정해둠)

1.2 실행컨텍스트

기존 작성 대답

(JS) 실행컨텍스트 1주차 스터디

실행컨텍스트 (ref, 코어자바스크립트, ref2)

실행컨텍스트 간략히 설명

💡

실행컨텍스트는 함수를 실행할 때 필요한 환경정보 - 함수 호출 시, 실행컨텍스트 객체 생성 - [변수객체, 스코프체인, this] 가 담김 - 실행컨텍스트에 따라 코드가 동작하기 때문에, 어떤 흐름으로 코드가 실행되는지 이해할 수 있다.

변수객체

해당 함수에 접근할 수 있는 변수와 값들 저장

스코프체인

외부함수의 변수에 접근할 수 있도록, 함수를 호출한 컨텍스트의 스코프를 연결리스트 형식으로 저장

this

최초 생성되며, bind를 통해 지정하지 않는다면 전역객체인 window를 지정

왜 실행컨텍스트를 알아야하는가?

실행컨텍스트에 따라 코드가 동작하기 때문에, 어떤 흐름으로 코드가 실행되는지 이해할 수 있다. (코드 독해, 디버깅)

전역컨텍스트 > 외부함수 컨텍스트 > 내부함수 컨텍스트 > ..>내부함수 종료 > 외부함수 종료> 전역종료

scope의 따른 변수 값을 찾는 등에 활용

(JS) 스코프 (변수선언, 호이스팅) 1주차스터디

스코프

스코프에 대해서 간단히 설명

💡

스코프는 변수의 유효범위, 즉 해당 변수가 접근할 수 있는 범위

블록스코프와 함수스코프란 (ref)

블록스코프 (const, let)

함수가 아니라 블록을 기준으로 블록 내부를 지역변수로 취급하여 별개의 변수스페이스를 갖는 규칙

함수스코프 (js - var)

함수 내부에서 선언한 변수를 지역변수, 함수 외부에서 선언한 모든 변수를 전역변수로 취급하는 규칙

변수선언

변수선언 키워드 (var, let, const의 차이)

javascript에서의 변수선언 단계들 (ref)

💡

변수선언 → 초기화 → 할당

변수선언

변수선언키워드(var,let,const)를 이용하여, 해당 변수를 사용한다고 js엔진에게 알리는 행위

초기화

값을 저장하기 위해 메모리 공간을 확보하고, 암묵적으로 undefined를 할당하는 단계

할당

초기화단계에서 확보된 메모리에 해당 변수에 해당하는 값을 저장하는 작업

호이스팅과 TDZ란 (ref)

💡

호이스팅은 해당 컨텍스트에서 소스코드들이 순차적으로 실행되기 전(런타임이 js코드를 실제 컴파일 하기전)에, 변수와 함수를 포함한 모든 선언문을 찾아내 먼저 선언되는 것을 의미합니다. 즉 호이스팅은 끌어올리다라는 뜻인데, 선언문들을 찾아내 가장 먼저 실행될 수 있도록 끌어올리는 것과 같습니다.

TDZ란

자바스크립트에서 컨텍스트의 시작지점으로 부터 변수 선언 키워드가 있는 곳 이전의 코드공간을 의미합니다.
이 공간에서는 해당 변수를 접근할 수 없습니다.

호이스팅에 의한 변수 선언만 되었지, 초기화 및 할당이 이루어지지 않았기 때문에
1) 컨텍스트 시, 호이스팅에 의해 모든 변수 선언 2) let, const 변수 선언 키워드 만나 초기화 및 할당이 이루어짐

(JS) 클로져 (1회독)

클로져 (ref)

클로저란

💡

클로저는 '외부함수의 변수에 접근할 수 있는 내부함수, 혹은 그러한 동작'을 뜻합니다. 클로저의 정의는 ' 함수와 함수가 선언된 어휘적환경의 조합'인데, 이는 선언된 환경밖에 존재하는 함수가, 선언된 컨텍스트의 환경을 기억한다고 할 수 있습니다. 예를 들어, 외부함수에 a라는 변수가 있고, a의 값을 증가시키는 내부함수를 리턴한다고 했을 때, 리턴된 내부함수를 실행시키면, 외부함수 밖에 존재하지만 외부함수의 변수에 접근할 수 있음을 알 수 있고, 이 때 이 내부함수를 클로저함수라고 할 수 있습니다. 커링을 통한 패턴의 모듈화와 비공개변수를 가지는 함수를 만들어낼 수 있습니다.

💡

외부함수의 변수에 접근할 수 있는 내부함수 혹은 이를 이용한 동작방식을 의미 즉 외부함수가 종료된 이후에도, 외부함수의 스코프를 접근할 수 있는 것을 의미

함수호출 시 실행컨텍스트가 생성된다.

만약 내부함수가 존재한다면, 스코프체인을 통해 이 외부함수의 스코프정보를 가지게 된다. 따라서 이 리턴된 내부함수는 외부함수가 실행이 종료된 이후에도, 스코프체인을 통해 외부함수의 변수들을 접근 가능한 것이다.
이 리턴된 내부함수인 클로저 함수를 변수에 담아 비공개변수를 활용하는 패턴이나, 탬플릿과 같이 활용할 수 있다.

클로저 활용

비공개 변수 활용 (보안)

해당 변수에 직접 접근할 수 없으며, 리턴된 클로저 함수만을 이용해 변경 가능

커링을 통한 탬플릿 활용

커링은 여러개 의 함수가 리턴으로 이어져있을 때, 일부함수를 변수에 담아 고정한 후 재사용할 수 있도록 하는 패턴


const add = (x) => function(y){
										 return x+y
										}

const plus10 = add(10); 
const plus100 = add(100);
plus10(5) // 10 + 5 // 15
plus100(5) // 100 + 5 // 105

react Hooks

Hook은 자바스크립트의 클로저를 이용하여 React에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용하여 문제를 해결합니다

디바운스


var debounce = function (eventName, func, wait){
    var timeoutId = null;
    return function (event){
        var self = this;
        // console.log(this);
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func.bind(self,event), wait);
    };
};
var moveHandler = function (e) {
    console.log('처리');
};
var wheelHandler = function (e) {
    console.log('처리2');
};
document.body.addEventListener('mousemove', debounce('move', moveHandler,500))

함수 a의 변수 v가 있고, 함수 b가 변수 v를 참조하며 외부로 보내질 때, a의 실행컨텍스트가 종료된 이후에도 변수 v가 사라지지 않는 현상. v가 가비지 컬렉터의 수거 대상에서 제외되어 발생한다.
위의 debounce 예제에서는 이미 사라진 이전의 debounce 실행 컨텍스트에 있는 eventName, func, wait, timeoutId를 참조할 수 있는 것이 클로저를 이용한 현상이다.

git issue 기반 질/답 작성해보기

실행컨텍스트는 언제 생성되나요?

답변

실행컨텍스트는 어떤 정보를 포함하고 있나요?

답변

실행컨텍스트를 아는 것이 왜 중요한가요?

답변

클로저의 동작를 실행컨텍스트 개념을 활용하여 설명해주세요.

답변

lexicalEnvironment( 어휘적환경 || 정적확경 || 사전적환경 )에 대해 설명해주세요.

답변

스코프체인에 대해서 설명해주세요.

답변

36일차 배운 것 정리

목차

1. 4회차 모의면접

1. 질문 & 대답 준비

1.1 CSR(vs SSR), SPA(vs MPA)

1.2 실행컨텍스트