CS겸 취준까지

개요 자바스크립트와 타입스크립트란? 타입스크립트를 선택한 이유 착각하기 쉬운 타입스크립트 기본개념 Javascript) 동적 웹페이지를 만들기 위한 프로그래밍 언어로써 웹페이지를 조작하고, 서버와 클라이언트 간 상호작용에 관한 일을 한다. 등장배경 : 정적인 초기웹사이트에서 동적으로 변함에 따라 등장하게 되었다 인터프리터 언어이지만 컴파일러가 내장되어 있어 실행 속도가 매우 빠르다. 객체기반의 스크립트 언어이지만 함수형과 객체 지향형 프로그밍을 모두 구현할 수 있다, Typescript) Javascript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 : 동적인 Javascript는 런타임에서 오류를 발견할 수 있는 것에 반해 Typescript는 코드의 작성 단계에..

[ 버블링 ] 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하며 가장 최상단의 조상 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함 즉 이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후 상위 요소로 이벤트가 전파되는 현상을 의미 ▶ 예시 FORM DIV P 가장 안쪽의 p태크를 클릭하게 되면 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 p태그를 누르게 되면 p → div → form 순서로 3개의 얼럿 창이 뜨게 됨 ▶ 버블링의 이벤트 위임 이벤트..

클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합 즉 함수 안에 함수를 선언한 환경에서의 관계를 의미함 해당 함수안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역변수를 접근할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미함 자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능함 클로저는 반환된 내부함수가 자신이 선언되었을때의 환경(Lexical Environment)에서의 스코프를 기억하기 때문에 접근이 가능함 function outerFn() { let x = 10; return function innerFn(y) { // innerFn 함수는 클로..

개요 this의 정의 함수호출방식과 this 바인딩 this의 정의 Javascript의 예약어로써 함수의 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다 Javascript엔진에 의해 암묵적으로 생성 ( + 호출시 내부에 인자와 this가 전달된다) 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. (참조 변수이기때문에) 지역변수처럼 사용 가능 느낌상 객체 내부에서 사용하는 것을 많이 떠올리게 된다. value라는 값을 가지고 있는 객체에 foo라는 함수를 할당하려할 때 그 함수에서 value를 사용하려 할 때 th..

Float CSS의 정렬을 위해 사용되는 속성으로 float을 이용해 띄워지면(정렬되면) 텍스트 및 인라인 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이름이 붙여진 것을 보임 절대위치 요소는 float 속성을 무시한다 자주 사용되는 Value left : 블록의 좌측으로 이동 후 부동 right : 블록의 우측으로 이동 후 부동 none : 기본값으로 기본속성 그대로 유지 inline-start : 시작쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 inline-end : 끝쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 Flex-box CSS3에서 처음 소개된 한방향 레이아웃 모델로써 HTML 요소 정렬에 사용되며 float 더 적은 코드와 읽기 쉬운방법으로 float을 대체하고 사용 ..

HTTP 시작 1989년 팀 버너 리에 의해 제안된 인터넷의 하이퍼 텍스트 시스템 TCP/IP 프로토콜에서 동작 Get 메서드만 지원 HTTP 헤더 X, 상태 코드 X 서버와 클라이언트 간의 연결은 모든 요청 후에 닫힘 HTTP 1.x HTTP 1.0 특징 HTTP 메서드와 요청/응답 헤더 추가 HTTP 버전 정보가 요청 사이 내로 전송 상태 코드가 응답의 시작 부분에 붙어 전송 → 요청에 대한 성공과 실패의 동작 결과를 알 수 있음 응답 헤더의 content-Type으로 HTML 파일 이외의 다른 문서를 전송하는 기능 추가 문제점 비연결성으로 인한 단기 커넥션(Short-lived connection) 자원을 요청할 때마다 새로운 연결을 해야 함 각각의 자원을 연결/응답/종료를 반복하다 보니 느림 HT..

[ 게이트웨이(Gateway) ] 컴퓨터 네트워크에서 서로 다른 통신망, 프로토콜을 사용하는 네트워크 간의 통신을 가능하게 하는 컴퓨터나 소프트웨어를 두루 일컫는 용어. 즉 다른 네트워크로 들어가는 관문(입구) 역할을 하는 네트워크 포인트 넓은 의미로는 종류가 다른 네트워크 간 통로의 역할을 하는 장치 게이트웨이는 서로 다른 네트워크상의 통신 프로토콜(protocol,통신규약)을 적절히 변환해주는 역할을 함 게이트웨이를 지날 때마다 트래픽(traffic)도 증가하기 때문에 속도가 느려질 수 있음 두 컴퓨터가 네트워크 상에서 서로 연결되려면 동일한 통신 프로토콜을 사용해야함 따라서 프로토콜이 다른 네트워크 상의 컴퓨터와 통신하려면 두 프로토콜을 적절히 변환해 주는 변환기가 필요한데 게이트웨이가 바로 이러한..

개요 브라우저의 동작 Virtual DOM React에서의 동작 브라우저의 동작 브라우저의 동작은 VirtualDOM의 등장과 등장 이전의 RealDOM만의 한계점을 설명해주는 부분으로써 동작형태와 이점을 좀 더 이해하기 쉽게 해주기에 기억하면 좋음 브라우저의 랜더링 과정) DOM tree 생성 브라우저의 렌더 엔진이 HTML을 파싱하여 DOM노드로 이루어진 트리를 생성한다. render tree 생성 CSS 파일과 inline 스타일을 파싱하여 CSSOM을 생성 CSSOM과 렌더 엔진에 의해 만들어진 DOM을 합쳐 render tree를 생성 문서의 시각적인 구조를 나타낸다 Layout viewport에서 생성된 render tree의 각 노드가 스크린상에 어느 공간에 위치할지 결정 position, ..

주소창에 www.naver.com을 입력하면 생기는 일 ①② 웹 브라우저 검색창에 www.naver.com을 입력 통신을 하려면 IP주소를 알아야하기 때문에 1차적으로 DNS에 질의하는 과정이 필요하다. 브라우저는 사용자의 PC에서 Hosts파일에 DNS 캐싱이 있는지 확인한다. ➡️ 캐싱이 있다면 DNS에 묻지않고 캐싱된 데이터를 사용 ➡️ 없다면 3번 과정으로 URL URL은 웹에서 주어진 고유 리소스 주소 게시된 리소스를 검색하기 위해 브라우저에서 사용하는 메커니즘 도메인 이름과 URL 도메인 이름 : 인터넷에 있는 웹사이트의 고유한 주소를 가리킴 URL : 인터넷 상의 특정 자원의 위치를 가리키는 주소 프로토콜(예: http, https),도메인 이름, 경로, 페이지, 쿼리 파라미터 등의 정보를 ..

DNS란? 도메인 IP를 기억하기 쉬운 이름으로 접속 가능하게 함 도메인 : example.com IP : 93.184.216.34 DNS(Domain Name System)란? 도메인 이름과 IP 주소에 대한 정보를 관리하는 시스템 사용자는 IP 주소를 몰라도 된다. 의의 이전에는 파일로 관리하였지만 이제는 서버를 사용해서 도메인이 추가되거나 IP가 변경되면 바로 반응하게 되어 성능상의 비약적인 변화를 만듦 a Record 도메인을 IP로 직접 연결 CNAME 도메인을 별명에 연결 IP가 유동적으로 연결하는 서버일 경우 AWS나 파이어베이스 DNS 동작 원리 다층적으로 나눠있고 계층적으로 관리 탐색은 도메인의 오른쪽부터 왼쪽으로 네임서버 IP주소와 도메인 주소를 연결해주는 역할 Recursive(재귀)..