[그림으로 쉽게 이해하는 웹/HTTP/네트워크를 읽고 정리합니다.] HTTP(Hypertext Transfer Protocol) 웹 브라우저와 웹 서버 간에 데이터를 주고 받기 위해 사용하는 프로토콜 HTML같은 하이퍼텍스트 형태의 데이터만 통신할 수 있었지만 오늘날에는 다양한 형식도 전달할 수 있다. HTTP는 클라이언트/서버 모델을 따른다. 이는 서로 관계를 맺고 있는 컴퓨터가 클라이언트, 서버 2가지 역할로 구분되어 있다는 뜻으로, 클라이언트가 서버에게 요청을 보내고, 서버는 그에 대해 응답하는 구조를 말한다. 요청하고 응답하는 과정에서 클라이언트와 서버는 HTTP 메세지를 주고 받으며 통신한다. 이 HTTP 메세지는 클라이언트가 서버에 요청하는 요청 메세지, 서버가 클라이언트의 요청에 응답하는 응..
인터페이스 // 인터페이스 interface Person { name: string; age: number; } const person: Person = { name: "이정환", age : 27 }; 타입 별칭처럼 타입의 이름을 지어주는 문법으로 상호간에 약속된 규칙 상속, 합침 등의 특수한 기능을 제공해 객체의 구조를 정의하는 데 더 특화된 문법 interface Person { readonly name: string; age?: number; } const person: Person = { name: "summermong", // age: 27, }; person.name = 'wintermong' // 읽기 전용으로 수정 불가 선택적 프로퍼티 설정도 동일하게 사용 가능하다. 읽기 전용 키워드인 r..
[그림으로 쉽게 이해하는 웹/HTTP/네트워크를 읽고 정리합니다.] TCP 인터넷 통신을 담당하는 프로토콜 IP는 목적지까지 데이터를 정확하게 '배송'하는 역할만 한다. 데이터가 안전하게 전달되었는지, 주문한 순서대로 왔는지 등 '배송'을 제외한 나머지 부분은 TCP 프로토콜이 담당한다. TCP(Transmission Control Protocol)는 신뢰성 있는 데이터 통신을 위한 프로토콜이다. 패킷 교환 방식의 문제점은 중간에 사라지는 패킷이 생긴다는 것이다. 패킷 교환 방식 이전의 회선 교환 방식이라면 데이터가 있거나, 없거나 둘 중 하나일 텐데 패킷 교환 방식을 사용하니 데이터를 받긴 했는데 이상한 데이터가 올 수도 있다는 문제점이 있었다. 따라서 TCP 프로토콜은 신뢰할 수 있는 데이터를 전달받..
[그림으로 쉽게 이해하는 웹/HTTP/네트워트를 읽고 정리합니다.] IP와 패킷 IP(Internet Protocol)은 패킷을 정해진 목적지까지 운반하는데 사용되는 통신 규약이다. 인터넷의 모든 데이터는 패킷(packet)이라는 조각으로 나뉘어 이동한다. 패킷은 소포를 의미하는 단어로, 데이터를 전송하기 쉽게 쪼갠 모습이 소포와 비슷해 붙여진 이름이다. 데이터를 패킷으로 쪼개 정보를 교환하는 방식을 패킷 교환 방식이라고 한다. 만약 무거운 데이터를 통째로 보내려고 하면 회선에 문제가 생길 시 다시 전송해야 하는 번거로움이 있다. 따라서 패킷으로 쪼개 정보를 전달한다면 전송 중에 잘못된 부분만 다시 보내면 되어 자원 낭비를 줄일 수 있다. 또, 패킷은 최적의 경로를 찾아가기에 특정 경로에 문제가 생기면 ..
함수 타입 함수를 가장 잘 설명하는 방법은 [어떤 타입의 매개변수]를 받고 [어떤 타입의 결과값]을 반환하는지 설명하는 것 // 일반 함수 function func(a: number, b: number): number { return a + b; } // 화살표 함수 const add = (a: number, b: number): number => a + b; 함수의 매개변수 타입이 지정되면 결과값은 TS가 추론한다. // 함수의 매개변수 function introduce(name = 'summermong', tall?: number) { console.log(`name: ${name}`); if (typeof tall === 'number') { console.log(`tall: ${tall + 10}..
타입스크립트는 어떤 기준으로 타입을 정의하는가? 타입 스크립트는 어떤 기준으로 타입 간의 관계를 정의하는가? 타입 스크립트는 어떤 기준으로 타입의 오류를 검사하는가? 타입 스크립트 문법만 정리된 Cheat Sheets도 있지만 원리를 이해해야 정확히 사용할 수 있다. 타입은 집합이다 동일한 속성과 특징을 갖는 여러 개의 값들을 모아둔 집합 let num: 20 = 20; 의 20은 넘버 리터럴 타입이지만 동시에 넘버 타입에 속하기도 한다. 이와 같이 타입들끼리 어떤 계층을 갖게 된다. 타입 간의 호환성은 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것 넘버 리터럴 타입의 값인 20을 넘버 타입의 값으로 취급해도 되지만, 반대는 불가능하다. (ex. 직사각형과 정사각형의 관계) let num1:..
타입스크립트의 기본 타입 타입은 부모 자식 관계를 이루며 계층을 형성하게 된다. 원시 타입과 리터럴 타입 단 하나의 값만 저장할 수 있다. :number와 같이 타입을 정하는 부분을 타입 주석(type annotation)이라고 한다. // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = 'hi'; let str2: string = 'hi'; let str3: s..
개발자 도구를 켜서 보면 Link는 a 태그로 보여진다. styled.a`` 로 스타일링을 적용하려 하면 적용이 안된다. 당연함 Link는 react-router-dom의 React 컴포넌트다. 그래서 개발자 도구에서는 a 태그로 보이지만 일반적인 HTML a 태그와 다르다. 따라서 styled.a``가 아니라 styled(Link) 로 스타일링을 적용해야 한다. const StyledLink = styled(Link)` display: block; width: 100%; text-align: right; text-decoration: none; color: var(--main-color); padding-top: 10px; font-size: 14px; `; 참고 공식 문서: https://styled..
📌 문제 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요. 📌 제한사항 phone_book의 길이는 1 이상 1,000,000 이하입니다. 각 전화번호의 길이는 1 이상 20 이하입니다. 같은 전화번호가 중복해서 들어있지 않습니다. 📌 입출력 예 📌..
📌 문제 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가 ..
