천진난만 코딩 스토리

1. Type type 의 특징을 몇 가지 짚어보자면, // 1, 2 type Health = number; // 3 type Team = "red" | "blue" | "yellow"; type Player = { nickname: string; team: Team; health: Health }; const rhino: Player = { nickname: "ori", team: "blue", health: 1, }; 특정 값이나 객체의 값에 대한 타입을 지정해줄 수 있다. Type alias를 만들어줄 수 있다. 타입을 특정한 값을 가지도록 제한할 수 있다. 2. Interface type과 비슷한 것이 있는데, 바로 interface 이다. 오브젝트 모양을 타입스크립트에게 설명해 주기 위한 키워드..

1. position CSS의 속성중 하나 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성 position 속성을 이용하여 텍스트나 이미지같은 요소들을 원하는 곳에 위치 position의 종류 5가지 static relative fixed absolute sticky 1) static static은 원래 있어야할 위치이며 기본값 position속성의 기본 값 다른 요소와의 관계에 의해 자동으로 배치 top, left, right, bottom등의 offset 값을 지정 불가 2) relative relative는 static인 상태에서의 위치를 기준으로 top, right, bottom, left로 지정된 거리만큼 이동하여 위치 원래 있던 위치를 기준으로 좌표를 지정 원래 있던 위치는 positio..

1. HTTP 서버와 클라이언트의 사이에서 어떻게 메시지를 교환할지를 정해놓은 규칙 HTTP는 기본적으로 request(요청)/response(응답) 구조 2. HTTP 메세지 구조 1) Request Message 구조 ① Start Line HTTP method : 요청의 의도를 담고 있는 GET, POST, PUT, DELETE등 Request target : HTTP Request가 전송되는 목표 주소 HTTP version : version에 따라 Request 메세지 구조나 데이터가 다를 수 있어서 version을 명시 ② Headers 해당 request에 대한 추가 정보를 담고 있는 부분 request 메세지 body의 총 길이 ③ Body request의 실제 메시지/내용 전송하는 메세지..

1. 캐시란? 캐시란 자주 사용하는 데이터나 값을 미리 복사해 놓은 임시 장소를 의미한다. 캐시를 통해 이전에 접근한 데이터를 다시 불러올 때 속도를 향상시키고 데이터 처리 속도를 높일 수 있다. 1) 장점 접근 시간과 계산시간을 절약하여 빠른속도로 데이터에 접근할 수 있습니다. 캐시에 저장된 데이터를 다시 불러오면 데이터 처리에 필요한 리소스를 절약할 수 있다. 2) 단점 비용이 비싸다. 데이터를 미리 저장하기 때문에 저장 용량이 한정되어 있다. 리액트에서는 캐싱을 위해 이 데이터가 원래 저장되어진 데이터와 같은지 비교하는 연산이 추가되기 때문에, 적합한 상황에 사용하지 않는다면 오히려 손해를 보는 경우가 생길 수 있다. 3) 프론트엔드에서 캐시의 활용 ① 브라우저 캐싱에 사용 브라우저는 이전에 방문했..

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

1. parameter와 argument의 차이에 대해 설명해주세요. 1) parameter parameter(매개변수)는 함수 내부에 있는 인자로, 특정한 값으로 정해진 것이 아니라 함수를 어디선가 호출하며 건네준 argument가 담기는 공간이다. 2) argument argument(전달인자)는 함수를 호출할 때 값을 전달한다는 의미로 전달인자라고도 불리며 인수라고도 한다. 매개변수와 달리 전달인자는 고정되어있지 않고, 호출할 때 마다 수시로 변하는 값이기 때문에 변수가 아닌 값으로 정의한다.

1. Hoisting 이란? Hoisiting이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 대표적으로 호이스팅되는 것 var let const 선언적함수 class 이때 const, let, class는 TDZ의 영향을 받는다. 2. TDZ란? TDZ란 Temporal Dead Zone으로 const, let, class가 호이스팅 시 초기화되지않기 때문에 갖는 일시적 사각지대이다. var는 변수객체를 생성한 후 AllocateTo메소드를 통해 바로 메모리 공간에 공간을 할당하지만, let과 const는 set_initializer_position메소드를 통해 해당 코드의 위치를 의미하는 position값만 정해준다. 즉, 선언은 되어있지만 변수에 값을 담기 위한..

1. 웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요. 렌더링의 기본적인 동작 과정 HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite) Parsing 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다. 파싱 중..

1. classes 자바스크립트와 동일하게 타입스크립트에도 class가 있다. 다만, 차이점도 존재한다. 어떤 보호 등급인지, 이름, 타입을 적어준다. 문법 오류나 오용 등을 거르고 컴파일 될 때 걸러지게 된다. //JavaScript code class Player { constructor(firstname, lastname, nickname) { this.firstname = firstname; this.lastname = lastname; this.nickname = nickname; } } const ori = new Player("ori", "park", "박오리"); 위와 같이 자바스크립트에서는 this를 꼭 써주어야 했지만, 타입스크립트에서는 그냥 써주면 된다. 객체필드도 사용용도에 따라 적..

1. call signatures 함수 위에 마우스를 올렸을 때 보게 되는 것을 말한다. 함수를 어떻게 호출해야하는지와 함수의 반환 타입을 알려준다. 타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있다. type Add = (a:number, b:number) => number; // call signatures const add:Add = (a, b) => a + b 2. overloading 함수 이름은 같지만 매개변수 또는 반환값의 타입이 다른 함수를 말한다. 선언부와 구현부로 나뉜다. 선언부 : 가능한 매개변수 타입만 지정 구현부 : 함수 구현, 모든 선언부를 표현할 수 있어야 함. 선언부의 마지막 부분에 작성되어야 함. type Config = { path: string, stat..