인터넷 프로토콜 스택의 4계층 왼쪽은 컴퓨터 간 패킷 통신을 위해 거쳐야하는 7개의 계층을 의미합니다. 인터넷 프로토콜은 TCP/IP 프로토콜 통신 과정에 4계층으로 나눠져있습니다. 각 층은 아래와 같습니다. 애플리케이션 - HTTP,FTP 프로토콜 웹브라우저, 네트워크 게임, 채팅 프로그램, SOCKET 라이브러리 전송 - TCP, UDP :: OS(운영체제) 인터넷 - IP :: OS(운영체제) 네트워크 인터페이스 - LAN IP 패킷의 구성 출발지, 목적지, 기타 전송데이터 TCP/IP 패킷 출발지 포트, 목적지 포트, 전송제어, 순서, 검증정보 특징 전송제어 프로토콜 연결지향 - TCP 3 way handshake(가상연결) 데이터 전달 보증 순서 보장 신뢰성있는 프로토콜 현재에 대부분 쓰임 연결..

클라이언트와 서버간의 통신에 대해 조금 더 잘 이해하기 위해 네트워크 지식은 필수다. 그래서 오늘은 인터넷 네크워크가 어떻게 통신을 하는지 알아보고 이를 정리해보려고 한다. 클라이언트와 서버의 통신방법 우리가 어떠한 정보를 주고 받으려면 통신을 해야한다. 아래와 같이 클라이언트로 사용할 컴퓨터와 서버로 사용할 컴퓨터가 가까이 있다면 그냥 케이블을 활용해서 유선 연결을 하면 된다. 만약 멀리 그것도 아~주 먼곳에 내가 원하는 정보를 보내고 싶다면 인터넷 망을 활용해야한다. 하지만 이 인터넷 망으로 보낸다는 것이 단순하지 않다. 그림으로 보면 알겠지만 인터넷의 속은 굉장히 복잡하다. 왜냐하면 중간에 광케이블을 거쳐서 가기 때문에 정보가 전달되지 않을 수 있고, 전달된다 하더라도 그 정보가 깨지거나 유실되서 ..

자바스크립트는 웹 개발 분야에서 가장 인기 있는 프로그래밍 언어 중 하나로, 기술적 진보와 개발 생태계의 확장으로 인해 매우 강력한 도구로 자리 잡았다. 하지만 프로젝트의 규모가 커지고 복잡해지면서 기존 자바스크립트의 문제점들이 두드러지기 시작했다. 이로 인해 많은 개발자들이 타입스크립트를 채택하고 있다. 먼저 아래에는 스택오버플로우에서 조사한 가장 사랑하는 언어 순위를 매긴건데, 보면 타입스크립트가 자바스크립트를 한참 제치고 4위에 올랐다.(자바스크립트는 15위쯤...) Typescript란 타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 기존 자바스크립트의 문제점을 보완하기 위해 만들어졌다. 타입스크립트는 자바스크립트에 아주 강력한 타입을 부여한 언어라는건데, 그냥 쉽게 얘기..

방학이 끝난지 일주일이 지났다. 약 한 달간 기록보다 프론트엔드에 대한 기초적인 지식을 적용해보자 해서 HTML, CSS에 대한 기초적인 지식을 강의를 들으며 쌓아갔다. 회고를 통해 어떻게 나아갈지 조금씩 방향성을 잡아보려한다. Keep 방학이 끝난지 일주일이 지났지만, 나름의 목표를 가지고 새로운 지식을 쌓기 위해 노력했다. HTML과 CSS에 대한 기초적인 지식을 강의를 통해 학습했으며, 깃허브의 기능들도 익히면서 프론트엔드 개발에 대한 기초를 다졌다. 또한, 이전에는 간단한 깃허브 작업만 할 수 있었지만 이번에는 PR을 날리고 issue를 등록하는 경험까지 할 수 있었다. 비록 레포지토리를 정리하다가 실수로 삭제하는 일도 있었지만, 이러한 실수를 통해 중요한 경험을 얻을 수 있었다. 앞으로는 이러한..

자바스크립트에서 배열은 굉장히 많이 사용되는 자료구조이다. 자바스크립트 배열은 다양한 메서드를 제공하고 이는 굉장히 유용하게 쓰인다. (특히 코딩테스트 풀때...) 배열 메서드가 결과물을 반환하는 패턴 원본 배열을 직접 변경하는 메서드 원본 배열 : 배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체 원본 배열을 직접 변경하지 않고 새로운 배열을 생성해 반환하는 메서드 const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1, 2] // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. const result = arr.co..

배열(Array) 여러 개의 값을 순차적으로 나열한 자료구조 특징 사용 빈도가 높은 기본적인 자료구조 유용한 메서드 다수 제공 용어 정리 with 예시 const arr = ['apple', 'banana', 'orange']; 요소 : 배열이 가지고 있는 값 모든 값은 배열의 요소가 될 수 있다. ex. 'apple', 'banana', 'orange' 인덱스 : 배열에서 자신의 위치를 나타내는 0이상의 정수 배열 요소에 접근할 때 사용 ex. arr[0] = 'apple' 생성 방법 배열 리터럴 Array 생성자 함수 Array.of, Array.from 메서드로 생성 배열 vs 객체 구분 객체 배열 구조 프로퍼티 키, 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 *값의 순서 X O *l..

일급 객체 우리는 다음과 같은 조건을 만족하는 객체를 일급객체라고 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타입에 생성이 가능하다. 변수나 자료구조(객체, 배열) 등에 저장할 수 있다. 함수의 매개변수에 전달 할 수 있다. 함수의 반환값으로 사용할 수 있다. // 1. 함수는 무명의 리터럴로 샐성할 수 있다. // 2. 함수는 변수에 저장 할 수 있다. // 런타입(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const inc = function (num) { return ++num; }; const dec = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { inc, dec }; //..

Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성해 반환함. 빈 객체는 생성 이후 프로퍼티 또는 메서드를 추가해 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = "Sim Mi Jin"; person.sayHello = function () { console.log(`Hi my name is ${this.name}`); }; console.log(person); // {name: "Sim Mi Jin", sayHello: ƒ ()} person.sayHello(); // Hi my name is Sim Mi Jin 그런데 .. 생성자 함수가 뭐죠 .. ? new 연산자와 ..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript사양에서 사용하는 의사 프로퍼티와 의사 메서드. 형태 : [[...]] (이중 대괄호로 감싸져있음) 개발자가 직접 접근할 수 없음. 간접적으로 접근이 가능함 // 16-1 const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근 불가능 o.[[Prototype]] // SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한해 간접적으로 접근할 수 있는 수단을 제공하긴 함. o.__proto__; // Object.prototype 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼..

var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수의 특징 - 변수 중복 선언 허용 // 15-1 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 변수 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var티눠드가 없는 것 처럼 동작함 var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); console.log(y); 에러 발생하지 않음 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생 var 키워드로 선언된 변수의 특징 - 함수 레벨 스코프 함수 블록만을 지역 스코프로 인정 // 15-2 var x = 1; if (true) { // x는 전역 변수...