Portfolio

1. 면접스터디 1주차 모의면접

이번 주 면접 주제

이번주 데브코스 주제

브라우저 저장소

쿠키와 세션, localStorage

비동기

callback, promise, async / await

이번주 공통 질문

실행컨텍스트

스코프 (var,let,const), 이벤트루프, 클로져

this

호출방식에 따른 this, call/apply/bind

자료구조

스택, 큐

1. 브라우저 저장소

쿠키와 세션 (이전링크)

쿠키와 세션에 대해서 한 문장 소개해주세요.

💡

쿠키와 세션 모두 HTTP의 무상태성으로 인해, 인증 유지 문제를 해결하기 위해 등장한 데이터 저장 방법을 의미합니다.

쿠키는 클라이언트에 문자열을 통해 데이터를 저장하는 방법입니다.

세션은 서버에 데이터를 저장하는 방법으로, 클라이언트에서 이를 사용하기 위해서 쿠키에 세션Id를 통해 주고 받아 사용합니다

쿠키의 옵션 중에서 아는 것이 있다면 설명해주세요.

httpOnly: document.cookie를 통한 접근을 막는 기능

secure: Https일 때만 쿠키 전송 가능

maxAge: 쿠키의 보존 기간 설정

Domain , Path , SameSite 등 옵션도 존재

쿠키의 동작 과정에 대해서 간단하게 설명해주세요

클라이언트에서 서버에 페이지 요청

서버에서 쿠키를 생성하여, set-cookie로 넣어 응답

이후 쿠키는 client에 보관되고, 다음 모든 요청 시 마다 쿠키를 함께 전송

쿠키의 장단점

장점

데이터 저장을 서버에서 하지 않으므로, 서버 부담 적음

단점

보안에 취약함 (탈취 가능성)

쿠키의 사용사례

장기간 보존해야 하는 정보의 저장에 적합

장바구니
로그인상태유지
개인테마 설정

세션 (준비중)

세션이란

사용자의 인증 여부를 서버에 저장하고, 이 정보(세션Id)를 쿠키에 담아 클라이언트에 공유
세션id는 보안을 위해 암호화과정을 거쳐야한다.

동작과정

1) 클라이언트 페이지요청
2) 서버는 쿠키의 세션Id를 확인

없다면 인증확인 후 세션Id 생성하여 쿠키에 보냄

3) 클라이언트는 세션Id 담긴 쿠키로 이후 요청을 진행

장점/단점

장점

중요정보 서버에 보관하여 쿠키보다 보안성이 좋음

단점

서버에 부담

여전히 쿠키를 사용하기 때문에 보안의 문제

localStorage

localStorage란 무엇인지 한 문장 소개

key-value 기반으로 브라우저에 데이터를 저장하기 위한 방법입니다.

같은 origin은 동일한 웹스토리지 객체를 공유하며, 별도로 삭제를 지정하지 않을 경우 영구적으로 보관됩니다.

서버와 관계없으며 오직 클라이언트에서 접근 및 수정이 가능한 저장소

localStorage의 장단점

장점

쿠키의 저장용량이 4KB인 것에 비해 최소 2MB의 큰 저장용량

사라지지 않고 반영구적

단점

만료기한이 없다는 점

2. 비동기 (TODO 캡틴팡교 글 읽어보기)

💡

콜백, 프로미스, async/await은 모두 비동기프로그래밍을 수행하기 위한 방법이다.

비동기란 무엇인가요? (ref)

비동기란

여러개의 요청(작업)이 있을 때 하나의 요청(작업)이 끝나기 전에 다음 동작을 받아 실행하는 방식 (커피점 주문받는 방식)

동기는 현재 작업의 끝나는 시점과 다음 작업의 시작 시점이 동일한 것

비동기는 현재 작업이 끝나는 시점이전에 다음 작업이 시작할 수 있는 것

콜백

콜백을 아주 간단히 설명해주세요.

💡

다음 실행할 동작(콜백)을 함수의 인자로 받아서, 특정 동작이 완료된 이후에 이 인자로 받아온 콜백함수를 실행시키는 방법으로, 실행되야하는 작업들의 순서를 제어하는 하나의 방법입니다.

콜백함수의 단점(콜백지옥이란?)

콜백함수는 여러개의 작업들이 중첩되어 있을 때, 코드의 인덴트가 점차 늘어나면서 가독성이 급격히 떨어지는 현상

이후 이를 해결하기 위한 체이닝방식의 프로미스와, 동기적 코드로 보이도록 하는 async/awiat 문법이 등장하였습니다.

에러핸들링이 어렵다는 문제도 존재

프로미스 (ref)

프로미스를 간단히 설명해주세요

등장배경

💡

프로미스는 콜백함수가 가지는 콜백지옥현상을 해결하기 위해 등장한 개념입니다.

간단한 소개

프로미스 객체를 통해 비동기작업을 수행
프로미스 객체는 성공(fullfil)과 실패(reject)에 따른 동작을 함수의 인자로 받아 실행하도록 한다.

프로미스의 3가지 상태

pending 상태

해당 함수의 동작이 실행중이며, resolve, reject함수가 실행되어 반환되기 이전

fullfiled 상태

resolve 함수가 실행된다면 fulfiled 상태가 되어 then을 통해 후속 처리 가능

rejected상태

reject 함수가 실행되어 rejected상태가 되어 catch 를 통해 후속 처리 가능

async/await (Ref)

async/await 간단 설명

등장 배경

💡

동기적으로 표현하여 더욱 읽기 쉬운 비동기 코드를 작성하기 위해서 이다.

간단한 소개

함수의 시작부분의 async 키워드를 주어 이 함수안에서는 비동기함수가 실행될 것이라고 js엔진에게 알려주고, 내부에서 프로미스를 반환하는 코드 앞에 awiat을 붙여서, 프로미스가 반환 된 객체가 최종적으로 성공실패의 따른 값을 받아올 때까지 기다리도록 한다.
여러개의 비동기 처리 코드를 다룰 때 특히 유용하다

3. 실행컨텍스트

스코프

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

💡

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

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

블록스코프 (const, let)

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

함수스코프 (js - var)

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

변수선언

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

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

💡

변수선언 → 초기화 → 할당

변수선언

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

초기화

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

할당

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

호이스팅과 TDZ란 (ref)

💡

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

TDZ란

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

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

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

실행컨텍스트 간략히 설명

💡

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

변수객체

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

스코프체인

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

this

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

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

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

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

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

이벤트루프 (ref)

이벤트 루프란 간략히 설명

💡

while루프에서 이름을 따와 만들었는데, js엔진에서 callStack이 순차적으로 꺼내와 실행하고, callStack이 비워진 경우 TaskQueue에서 다음 작업을 꺼내와 수행하도록 하는 브라우저의 기능 - 비동기 작업의 경우 Web API에서 브라우저가 처리후 TaskQueue에 담게 된다.

역할

작업 순서 관리
비동기 작업들 처리

이벤트 루프 동작과정에 대해 설명

동작순서

1) js의 콜스택으로 부터 하나씩 작업을 받음
2) 비동기 작업의 경우 브라우저에서 별도로 실행(WebAPIS)하고, 완료된 작업들은 태스크큐로 넘긴다.
3) 콜스택이 비워졌다면, 태스크 큐에서 작업을 꺼내와 실행한다.

클로져 (ref)

클로저란

💡

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

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

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

클로저 활용

비공개 변수 활용 (보안)

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

커링을 통한 탬플릿 활용

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


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

4. This

this

this란 간략히 설명

💡

this는 함수 호출 시 생성되는 실행컨텍스트에 속하며, 함수의 호출 방법에 따라 다른 this값을 가지게 된다.

호출방식에 따라 다른 this의 값

일반적 (전역, 함수내부)

전역객체 (windows)

method방식 호출

메소드 호출 주체

생성자 함수

인스턴스

call, bind, apply 사용시 this 대체 가능

call, bind, apply, 화살표함수의 this

call, apply

바뀐 this로 해당함수를 호출한다.

apply는 인자를 배열형식으로 받는다.

bind

새롭게 this가 바인딩 된 함수를 리턴한다

화살표함수의 this

항상 바로 상위의 컨텍스트에서 this를 찾느다

5.자료구조

스택과 큐

스택

스택과 큐 모두 선형구조를 가진 자료 구조이다.

특징

같은 구조와 크기의 자료를 정해진 방향으로만 쌓을 수 있다.
top으로 정한 곳을 통해서만 접근할 수 있다.
top은 가장 위에 있는 자료로, 가장 최근에 들어온 자료를 가르킨다.
자료를 삭제할 때, top을 통해서만 가능하다.
스택에서 top을 통해 삽입하는 연산을 'push', top을 통한 삭제하는 연산을 'pop'라 한다.
가장 마지막에 삽입된 자료가 가장 먼저 삭제되는 구조적 특징 (LIFO)

사례

브라우저에서 뒤로가기
DFS

큐

특징

한쪽 끝(rear)에서는 삽입작업이, 다른 쪽 끝(front)에서는 삭제 작업이 이루어진다.
리어(rear)에서의 삽입연산을 인큐(enQueue)라고 부르고, 프론트(front)에서의 삭제연산을 디큐(dnQueue)라고 부른다.
가장 첫 원소와 끝 원소에만 접근이 가능하다.
가장 먼저 들어온 자료가 가장 먼저 삭제되는 구조적 특징 (FIFO)

사례

컴퓨터의 버퍼링 개념
프린터의 작업방식
BFS 구현

TodoApp 만들기

1-1. 작업순서

💡

로토는 특정유저를 하드코딩 해놓고, 기능들을 전부 구현한 다음에, API 연동을 하는 타입

step1 : 더미데이터로 기본 동작 확인 (렌더링 확인 , 이벤트 위임)

step2: API 연동하기 (로딩처리와 낙관적업데이트)

구현해야하는 기능

TodoList 불러오기

더미데이터로 리스트가 나오는지 step1

추가 및 삭제

더미데이터로 이벤트가 작동하는지 step1
onSubmit(content) : async await을 통해 해당 user의 todo를 step2
낙관적업데이트 step2

클릭 시, 완료처리 토글

더미데이터로 이벤트가 작동하는지 step1

공통

API 처리 전후 isLoading 처리 step2

낙관적업데이트와 대칭되는 부분 있다. 따라서 isinit등 변수를 통해 최초 접근 시에만 isLoading을 보여주고, 나머지 경우에는 낙관적업데이트를 사용하는 방법 있을 수 있다.

15일차 배운 것 정리 (1)

목차