CS겸 취준까지

클로저는 함수와 함수가 선언된 어휘적 환경(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(재귀)..

1. OSI 7계층이란? OSI 7 계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 국제 표준화 기구(ISO)에서 정의한 네트워크 표준 모델이다. 아래 그림에서 아래부터 1계층(물리 계층) ~ 7계층(응용 계층)으로 구성되어 있다. 또 그림과 같이 각 계층을 지날 때마다 각 계층에서 Header가 붙게되고 수신측은 역순으로 헤더를 분석하면 된다. 1계층 - 물리계층(Physical Layer) 주로 전직적, 기계적, 기능적인 특성을 이용해서 통신 케이블로 데이터를 전송하는 물리적인 장비 단지 데이터 전기적인 신호(0, 1)로 변환해서 주고받는 기능만 할 뿐 이 계층에서 사용되는 통신 단위 : 비트(Bit)이며, 이것은 1과 0으로 나타내어지며, 전기적으로 On, Off 상태 신호의 전송속도, 전송모..

1. TDD란? TDD(Test-Driven Development, 테스트주도개발)는 소프트웨어 개발 프로세스에서 테스트 케이스를 먼저 작성하고, 이 테스트를 통과하는 코드를 나중에 작성하는 방법론이다. 즉, 실제 코드를 작성하기 전에 요구사항을 테스트 케이스로 먼저 명세화하고, 이 테스트를 만족시키는 방향으로 코드를 개발해 나가는 과정을 말한다. 2. TDD의 기본순서 테스트 작성 : 먼저 실패할 테스트 케이스를 작성한다. 이때 테스트는 소프트웨어가 충족해야 할 요구사항이나 기능을 기반으로 한다. 코드 작성 : 작성한 테스트를 통과하기 위해 최소한의 코드를 작성한다. 리팩토링 : 코드가 테스트를 통과하면, 코드의 구조를 개선하거나 가독성을 높이는 등의 리팩토링을 한다. 3. TDD의 장점 결함 감소 :..