1차 공부/기술면접 준비 20

브라우저 저장소에 대해서 차이점을 설명해주세요

답변 브라우저 저장소는 로컬스토리지, 세션스토리지, 쿠키가 있습니다. 로컬스토리지는 브라우저 종료시에도 보관되고, 브라우저가 다르더라도 동일 도메인일 경우 공유가 되지만, 세션스토리지는 브라우저 종료시 삭제되며 동일 도메인이더라도 공유되지 않습니다. 쿠키는 만료기간을 설정할 수 있고, 지속적인 데이터 교환을 위해 만들어졌습니다. 웹스토리지는 필요한 경우 꺼내서 사용하므로 자동전송의 위험이 없고, 오리진 단위로 접근이 제한되어 CSRF공격으로부터 안전합니다. 또한 4kb로 제한되는 쿠키에 비해 스토리지는 용량이 더 큽니다. 꼬리질문 CSRF? CSRF(Cross-Site Request Forgery)란 사이트간 요청 위조로, 사용자의 의도와는 무관하게 공격자의 의도한 행위를 웹사이트에 요청하게 만드는 공격..

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요

HTTP란? HTTP란 Hyper Text Transfer Protocol로, 인터넷에서 데이터를 주고 받을 수 있는 규칙입니다. HTTP 메세지 구조 GET https://dev.sparta-chuchu.shop/api/events/reviews HTTP/1.1 User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWe... accept : application/json (본문...) 서버에게 요청을 보낼 때, 서버에서 응답을 보낼 때 정보를 담아 메시지를 보내는데, 이를 HTTP 메시지라 합니다. HTTP메시지는 시작줄, 헤더, 본문으로 구성됩니다. GET으로 시작하는 것이 시작줄입니다. HTTP메소드와 요청주소, HTTP버전으로 구성되어있습니다...

캐시의 장단점과 어떤 부분에 활용하는지 설명해주세요. 프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역을 제시해주세요

캐시의 장점은 계산, 접근시간 없이 빠른속도로 데이터에 접근할 수 있습니다. 단점으로는 비용이 비싸고, 메모리공간이 상대적으로 작습니다. 프론트엔드에서는 캐시를 웹 서비스 최적화에 사용합니다. 여러번 요청해도 같은 이미지, CSS, JS같은 정적 컨텐츠를 캐시를 사용합니다. 꼬리질문 캐시의 지역성과 동작방식에 대해 설명해주세요 참고자료 https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech https://mmsesang.tistory.com/entry/%EC%9B%B9-%EC%B5..

프레임워크와 라이브러리 차이점에 대해 설명해주세요.

프레임워크 뼈대나 기반구조를 뜻한다. 완성된 제품을 만들기 위해서 개발자를 도와주는, 기반 역할을 한다. 소프트웨어의 특정 문제를 해결하기위해 상호 협력하는 클래스와 인터페이스의 집합입니다. (Vue.js, Angularjs, nodejs 등... 리액트는 라이브러리임) 라이브러리 단순 활용가능한 도구들의 집합이다. 프로그래머가 어떤 기능을 수행하기위해 도움을 주고 필요한 것을 제공해주는 역할을 한다. 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식이다. (리액트, jQuery, styled-component 등...) 프레임워크와 라이브러리의 차이점 제어흐름이 어디있냐의 차이이다. 프레임워크는 전체적인 흐름을 자체적으로 가지고있어 개발자가 프레임워크 안에..

argument와 parameter의 차이

parameter(매개변수)는 함수 내부에 있는 인자로, 특정한 값으로 정해진 것이 아니라 함수를 어디선가 호출하며 건네준 argument가 담기는 공간입니다. argument(전달인자)는 함수를 호출할 때 값을 전달한다는 의미로 전달인자라고도 불리며 인수라고도 합니다. 매개변수와 달리 전달인자는 고정되어있지 않고, 호출할 때 마다 수시로 변하는 값이기 때문에 변수가 아닌 값으로 정의합니다. function sum(a,b) { return a+b; } sum(1, 2) 위에서 a와 b는 매개변수이고, 1과 2는 전달인자이다.

Hoisting이란? TDZ란?

Hoisiting이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var, let, const, 선언적함수, class가 대표적으로 호이스팅되는 것들입니다. 이때 const, let, class는 TDZ의 영향을 받습니다. TDZ란 Temporal Dead Zone으로 const, let, class가 호이스팅 시 초기화되지않기 때문에 갖는 일시적 사각지대입니다. // var var->AllocateTo(VariableLocation::PARAMETER, index); // const VariableProxy* proxy = DeclareBoundVariable(local_name, VariableMode::kConst, pos); proxy->var()->set_..

Restful API / 알고있는 메소드와 그 기준 / RESTful API 가 아닌 것

Restful API란? REST란? Representational State Transfer의 약자로 자원을 이름으로 구분하여 자원의 상태를 주고 받는 모든것을 의미 HTTP URI를 통해 자원을 명시하고 HTTP Method(POST, GET, PUT, DELETE, PATCH)를 통해 해당 자원에 대한 CRUD를 적용하는 것을 의미 CRUD란? Create(POST), Read(GET), Update(PUT, PATCH), Delete(DELETE)를 일걷는 말로 대부분의 소프트웨어가 가지는 기본 데이터 처리기능을 의미한다. REST API란? REST의 원리를 따르는 API들을 의미합니다. 올바르게 설계하기 위해서는 규칙을 지켜야합니다. URI는 동사보다 명사를, 대문자보다는 소문자를 사용해야한다..

웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요.

사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운받습니다. 브라우저가 페이지를 렌더링 하려면 먼저 HTML코드가 DOM트리로 변환되고, CSS는 CSSOM 트리를 생성합니다. 1. DOM 트리 생성 브라우저가 URL에 알맞은 index.html 파일을 가져오고, 렌더링 엔진이 HTML문서를 파싱하여 정해진 인코딩(UTF-8)에 따라 개별문자로 변환한 후 고유 토큰으로 변환합니다. 해당 토큰들을 객체로 변환해 노드들을 생성하고, 이 노드들은 트리의 자료구조로 요소간의 관계를 나타내는데, 이를 DOM이라 합니다. 2. CSSOM 트리 생성 HTML 마크업 내 inline 스타일을 선언할 수 있지만, 외부에서 가져온 css파일을 참조하거나 hea..

스택, 큐

🙂스택과 큐는 자료구조의 형태를 의미합니다. 스택은 특정 자료, 명령을 쌓아올려 제일 마지막에 쌓인 자료, 혹은 명령을 처리하는 형식입니다. 쉽게말해 후입선출이라고 할 수 있으며, 웹 브라우저 방문기록을 예로 들 수 있습니다.. 큐는 스택과 달리 한쪽에서는 자료, 명령을 삽입하고 다른 쪽에서 삽입된 순서대로 처리하는 것을 의미합니다. 쉽게말해 선입선출이라고 할 수 있으며, 데이터를 입력순서대로 처리할 때 사용합니다

시간복잡도와 공간복잡도

시간복잡도와 공간복잡도는 알고리즘 성능 평가시 사용되는 개념이며, 수치가 낮을수록 좋은 알고리즘입니다. 시간복잡도는 특정 알고리즘이 문제를 해결하는데 필요한 연산 횟수를 의미하며, 공간복잡도는 프로그램 실행과 완료에 필요한 메모리의 크기를 의미합니다. 시간복잡도와 공간복잡도는 반비례적인 성향이 있는데, 최근들어 메모리 공간의 여유가 늘어감에따라 시간복잡도를 위주로 판단합니다.