CS겸 취준까지

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의 장점 결함 감소 :..

1. 원시 값과 참조 값의 개념 - 원시 값 : 변경 불가능한 작은 데이터 조각. 예) String, Number, Boolean, undefined, null - 참조 값 : 변경 가능한 객체들 예) {name: 'Alice'}, ['apple', 'banana'], Object, Array, Function 2. 원시 값과 참조 값의 메모리 저장 방식 2-1. 원시 값의 메모리 저장 - 스택 메모리에 저장 - 불변성 : 데이터가 한번 생성이 되면 변경될 수 없는 성질 즉, 데이터가 불변하다면 원본 데이터는 수정이 되지 않고, 변경이 필요한 경우에는 새로운 데이터를 생성 - 자료의 크기와 생명 주기가 정해져 있음 2-1. 참조 값의 메모리 저장 - 힙 메모리에 저장 - 힙 메모리는 구조가 느슨하며, 크..

jQuery 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리 “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 개발됨 jQuery의 특징 HTML/DOM 조작 HTML 이벤트 메서드를 쉽게 사용 크로스 브라우징 네트워크, 애니메이션 등 다양한 기능을 제공 메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원 플러그인을 직접 구현하거나 확장 jQuery의 추락 jQuery는 다루기 까다로운 DOM API를 직관적으로 손쉽게 다룰 수 있는 모델을 제시했으나, 성능 최적화의 아쉬움과 개발 생산성의 문제가 있었다. 웹 표준 API의 확장 : 제이쿼리가 없어도 쉽게 사용 가능해진 웹 api 웹브라..

바벨 이전의 브라우저 또는 환경에서 이전 버전의 자바스크립트로 변환하는데 주로 사용되는 트랜스파일러 바벨의 기능 변환구문 대상 환경에서 누락된 폴리필 기능 소스코드 변환 트랜스파일러란? 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미 예시) c++ → c ES6 → ES5(babel) typescript → js sass/scss → css 폴리필(polyfill)이란? 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해 주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 등등은 존재하지 않음 존재하지 않는 문법..