프론트 CS

프론트 엔드 기술면접 준비하기_Typescript,React

요즘 이직을 하기 위해 면접을 많이 다니고 있는데 생각보다 쉽지가 않네요 기술면접 때 제가 부족했던 부분들을 정리해 보았습니다 Typescript 타입스크립트란 자바스크립트 타임 개념을 추가한 언어이며 자바스크립트에서 확장된 언어입니다 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 한 번에 컴파일 과정을 진행해야 합니다 왜 타입스크립트를 사용하는가? 타입 스크립트를 사용하면 에러를 사전에 방지할 수 있으며 개발툴에 기능을 최대한 활용할 수 있어서 개발 생산성을 높일 수 있습니다 타입 스크립트 기본 타입 String, boolean, Number 같은 타입은 제외한 주요한 타입입니다 Tuple : 배열의 길이가 고정되어 있고 배열의 각요소들에 타입이 정해져 있는 배열입니다 let arr: [st..

프론트 엔드 기술면접 준비하기_Vue,React

오늘은 Vue, React 프레임워크에서 나올 수 있는 질문들을 정리해 보았습니다 Vue 1. Vue 라이플 사이클 beforeCreate : 컴포넌트 인스턴스가 생성되기 이전에 호출 created : 컴포넌트 인스턴스가 생성된 후 호출이 되며 데이터에 접근하거나 이벤트 리스너를 설정할 수 있다 beforeMount : 인스턴스가 실제 DOM에 마운팅 되기 이전에 호출 mounted : 인스턴스가 실제 DOM에 마운팅 된 후 호출이 되며 돔에 접근하거나 조작을 수행할 수 있다 beforeUpdated : 데이터 변경이 일어나 DOM이 업데이트되기 이전에 호출 updated : 데이터 변경이 일어난 후 실제 DOM이 업데이트된 후 호출 beforeUnmount : 컴포넌트가 돔에서 사라지기 이전에 호출 U..

프론트 엔드 기술면접 준비하기_CS(Computer Science)

오늘은 기술면접에서 자주 나오는 CS 관련한 내용을 정리해 보았습니다 1. OOP(객체 지향 프로그래밍) OOP는 현실 세게를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법이며 코드의 재사용성을 높일 수 있습니다 2. OOP 5가지 설계 원칙 단일 책임 원칙 : 클래스는 단 하나의 목적이어야 하며, 클래스를 변경하는 이유는 단 하나의 이유여야 한다 개방 폐쇄 원칙 : 클래스는 확장에 열려있고, 변경에는 닫혀 있어야 한다 리스코프 치환 원칙: 상위 타입 객체를 하위 타입으로 변경하더라도 프로그램은 일관되게 동작해야 한다 인터페이스 분리 원칙 : 클라이언트는 이용하지 않는 메소드에 의존하지 않도록 인터페이스를 분리해야 한다 의..

프론트 엔드 기술면접 준비하기(프론트엔드 면접질문)

프론트 엔드 기술면접 질문 20가지를 정리해 보았으며 이번에 정리한 내용은 react, vue 프레임워크 상관없이 프론트엔드 개발자가 필수적으로 알아야 되는 항목들입니다 1. 브라우저 렌더링 원리 HTML 파일을 서버로부터 내려받은 후 파싱하여 DOM 트리를 구축합니다 이후 CSS 파일을 파싱 하여 CSSOM 트리를 구축합니다 이때 HTML중간에 자바스크립트가 있다면 HTML파싱을 중단하고 자바스크립트를 실행합니다 이후 DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 구축합니다 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하며 이를 Layout 단계라 합니다 계산한 위치/크기를 기반으로 화면에 그리며 이를 Paint 단계라 합니다 2. Reflow와 Repaint 가 실행되는..

브라우저 저장소

오늘은 브라우저 저장소에 대해 알아보도록하겠습니다 Web Storage HTML5에는 웹의 데이터를 클라이언트에 저장할수있는 자료구조인 WebStorage가 포함되어있습니다 웹스토리지의 개념은 key,value 구조로 데이터를 저장하고 키를 기반으로 데이터를 조회할수있는 저장소입니다 저장소는 크게 영구저장소(로컬스토리지), 임시저장소(세션저장소)로 구성이 되어있으며 데이터의 지속성을 구분할수있기에 응용환경에 맞는 선택이 가능합니다 쿠키와의 차이점 1. 쿠키는 매번 서버로 전송됩니다 웹사이트에서 쿠키를 설정하면 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송이되게 됩니다 반면 웹스토리지는 저장된 데이터가 클라이언트에 존재할뿐 서버로 전송은 이루어지지 않기 때문에 네트워크 트래픽 비용이 줄어듭니다 2. 단순..

GET과POST

오늘은 HTTP통신에서 대표적으로 사용되는 GET과 POST에 대해 알아보도록 하겠습니다 GET GET은 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메소드 입니다 간단히 게시판의 게시물 조회나, 쇼핑몰 사이트에 상품 리스트 조회 같은 요청을 할 때 GET이 사용이 됩니다 GET을 통한 요청은 URL 주소 끝에 파라미터로 포함이 되어 전송이 되며 이 부분을 쿼리 스트링이라고 합니다 쿼리 스트링에 방식은 URL끝에 '?'를 붙이고 다음 변수명=값과 같은 형식으로 이어 붙입니다 (www.naver.com?name=1&name2=가나다) 위와 같이 쿼리 스트링을 전달을 하면 서버에서는 name, name2라는 파라미터명으로 해당 값들을 받을 수 있습니다 GET의 특징 1. GET의 ..

자바스크립트 this

오늘은 자바스크립트의 this에 대해서 알아보도록 하겠습니다 자바 혹은 C++와 같은 언어에서 this는 자기 자신을 가리킵니다 그러나 자바스크립트에서 this는 자기 자신을 가리키는 게 아닌 this가 가리키는 대상이 계속 변경이 됩니다 this의 정의를 정리해보면 아래와 같습니다 this this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있습니다 즉 this는 고정된 값에 바인딩되지 않고, 함수가 호출되는 방식에 따라 '동적'으로 결정됩니다 이러한 자바스크립트에서 this가 참조하는 것을 함수가 호출되는 방식에 따라 결정이 됩니다 그리고 이것은 'this bind..

상태 관리 및 Redux

오늘은 프론트 개발이라면 가장 많이 듣고 중요한 상태 관리에 대한 내용과 React 프레임워크에 대표적인 상태 관리 라이브러리인 Redux에 대해 알아보도록 하겠습니다 우선 상태 관리에 대해 알기 전에 상태(state)에 대해 먼저 알아보도록 하겠습니다 상태(State) 상태란 동적으로 표현되는 데이터입니다. 즉 변하는 데이터이며 서비스마다 다르겠지만 쇼핑몰 서비스를 예로 든다면 '결제 금액'과 같은 데이터가 상태라고 볼 수 있습니다 상태의 조건 이러한 상태는 컴포넌트단에서 관리가 됩니다. 그러나 프로젝트의 규모가 커지게 되면 컴포넌트들이 많아지게 되고 컴포넌트들끼리 상태를 전달하게 되는 경우가 있습니다 이때 상태는 자식 컴포넌트들 간에 직접적인 전달은 불가능하며, 부모 컴포넌트를 통해서 주고받아야 합니..

자바스크립트 클로저

자바스크립에 클로저에 대해 알아보도록 하겠습니다 클로저 클로저란 함수와 그 함수가 선언되었을 때의 렉시컬 환경의 조합니다 이런 정의로는 무슨 의미 인지 크게 이해가 되지는 않습니다 저희는 우선 클로저를 알기 전에 렉시컬 환경이라는 것부터 알아보고 클로저를 한번 알아보도록 하겠습니다 렉시컬 환경 렉시컬 환경의 정의는 특정 코드가 작성, 선언된 환경을 의미하며 모든 함수, 코드 블록, 스크립트는 렉시컬 환경을 가집니다 아래 코드로 예시를 보도록 하겠습니다 let test = "a" function study(){ let num = 1; } 자바스크립트 코드를 실행하게 되면 우선 전역 렉시컬 환경이 생성이 됩니다 이러한 전역 렉시컬 환경에는 저희가 작성한 변수와 함수들이 자리 잡게 되는데 저희는 test라는 ..

이벤트 루프 와 마이크로태스크큐 와 매크로 태스크 큐

자바스크립트의 특징 중에 단일 스레드라는 특징이 있습니다 단일 스레드랑 한 번에 하나의 작업만을 처리할 수 있다는 뜻입니다 하지만 실제로 자바스크립트로 코딩을 하고 구동을 해보면 여러 작업을 이 동시에 처리되는 것을 확인할 수 있습니다 그러면 단일 스레드인 자바스크립트가 어떻게 동시성을 구현했을까?라는 의문점이 생기게 됩니다 오늘은 그 의문점을 풀 수 있는 자바스크립트에 이벤트 루프와 마이크로 태스크 큐, 매크로 태스크 큐를 알아보도록 하겠습니다 이벤트 루프를 알기 전 자바스크립트 엔진에 구성에 대해서 먼저 알아보도록 하겠습니다 자바스크립트 엔진 자바스크립트는 위에서 설명했듯이 단일 스레드로 구성되어있는 언어입니다 즉 콜백을 처리할 공간이 한 가지만 존재한다는 뜻입니다 아래 사진에 JS 부분을 보게 되면..