📅 오늘 한 일
1. Better 기능 구현
- 진행 중인 운동
- 운동 종료 기능
- DB에서 지금 진행 중인 운동만 가져오기
2. CS 공부
- TCP/IP 4계층
3. Typescript 공부
✏️ 무엇을 배웠나
1. TCP/IP 4계층
정의
- 인터넷에서 컴퓨터들이 통신하는 프로토콜들을 인터넷 프로토콜 스윗트라고 하는데 TCP/IP 4계층 모델은 이를 설명하는 방식 중 하나다.
계층 구조
- TCP/IP 4계층 모델은 4개의 계층으로 구성된다
- 애플리케이션 계층
- 전송 계층
- 인터넷 계층
- 링크 계층 - OSI 모델이 TCP/IP 모델과 다른 점
- 애플리케이션 계층을 애플리케이션 계층 / 프레젠테이션 계층 / 세션 계층으로 3분할해 설명함
- 인터넷 계층을 네트워크 계층이라 말함
- 링크 계층을 데이터 링크 계층 / 물리 계층으로 2분할해 설명함
애플리케이션 계층
- 서비스를 실제 사용자에게 제공하는 계층
- 여러 응용 프로그램이 사용되는 계층
- FTP : 장치 간 파일 전송에 쓰는 프로토콜
- SSH : 암호화 네트워크 프로토콜
- HTTP : 웹을 이용하는 데 쓰는 프로토콜
- SMTP : 이메일 프로토콜
- DNS : 도메인 이름과 IP 주소를 연결해주는 서버
전송 계층
- 애플리케이션과 인터넷 계층 사이에서 데이터 전달을 중계하는 계층
- 송신자와 수신자를 연결하는 통신 서비스를 제공하는 계층
- TCP와 UDP
- TCP : 패킷 사이의 순서를 보장, 가상회선 패킷 교환 방식을 사용, 신뢰성 구축으로 수신 여부 확인
- 가상회선 패킷 교환 방식 : 각 패킷에는 가상회선 식별자가 붙고 패킷이 모두 전송되면 가상회선은 폐쇄됨. 패킷들은 특정 회선을 따라 전송된 순서대로 도착함.
- UDP : 패킷 사이 순서를 보장 X, 데이터그램 패킷 교환 방식을 사용, 수신 여부 확인 X
- 데이터그램 패킷 교환 방식 : 각 패킷이 최적의 경로를 따라 개별적으로 이동함. 하나의 메시지를 여러 패킷으로 나눠 다른 경로 전송하는 것. 때문에 도착한 순서는 보장할 수 없음. - 3-way-handshake
- TCP가 신뢰성을 확보하는 방법
- 과정
- 1) SYN 단계 : 클라이언트가 서버에 ISN을 담아 SYN을 전송.
- 2) SYN / ACK 단계 : 서버가 클라이언트의 ISN에 1을 더한 값을 승인번호로 클라이언트에 전송하는 동시에 서버 자신의 ISN을 전송.
- 3) ACK 단계 : 클라이언트가 서버의 ISN에 1을 더한 값을 승인번호로 서버에 전송.
- 이 과정을 거쳐 신뢰성이 구축된 후에 데이터 전송이 시작됨. UDP는 이러한 과정이 없음.SYN : Synchronization의 약자
ACK : Acknowledgement의 약자
ISN : TCP 초기 연결 시 첫번째 패킷에 할당되는 고유의 일련번호
인터넷 계층
- 장치가 보낸 패킷을 목적지인 IP 주소로 전송하는 계층
- 해당 패킷을 받을 주소를 지정해 데이터를 전달함
링크 계층
- 전선, 광섬유, 무선 등으로 실질적으로 데이터를 전달하는 계층
계층 간 데이터 통신 과정
- 캡슐화 과정과 비캡슐화 과정을 거쳐 통신이 이루어짐
- 캡슐화 과정 : 상위 계층의 헤더와 데이터가 하위 계층의 데이터 부분에 포함되고 헤더로서 삽입되는 과정.
- 애플리케이션 -> 전송 : 애플리케이션의 메시지가 세그먼트 또는 데이터그램화되어 TCP(L4) 헤더로 붙는다
- 전송 -> 인터넷 : 세그먼트 또는 데이터그램이 패킷화되어 TCP(L3) 헤더가 추가로 붙는다
- 인터넷 -> 링크 : 프레임화되어 프레임 헤더와 프레임 트레일러가 추가로 붙는다.
- 비캡슐화 과정 : 하위 계층에서 상위 계층으로 올라가면서 각 계층의 헤더를 제거하는 과정. 위의 과정이 역으로 이루어짐.
2. Typescript
- 튜플 타입
/* 길이와 타입이 고정된 배열을 정의할 수 있음. JS에서는 지원하지 않는 타입이지만 TS에서는 추가로 지원함. 데이터의 순서가 중요한 상황에서 유용하게 사용할 수 있음 */
let tuple : [number, number] = [1, 2];
let tuple : [string, boolean, number] = ['hey', true, 3]- readonly
// readonly 키워드는 읽기 전용으로 만들 수 있음. api key처럼 실수로라도 변경되어서는 안 되는 값을 다룰 때 사용하면 좋음
let config : {
readonly apiKey : string;
} = {
apiKey : THE_API_KEY
};- 인덱스 시그니처
// 인덱스 시그니처를 활용하면 범용적인 규칙에 해당되는 모든 프로퍼티를 일괄적으로 정의할 수 있음.
type Contacts = {
[key : string] : number;
// 반드시 들어가야 하는 프로퍼티를 정의할 수도 있음
sam : number;
}
const contacts: Contacts = {
sam : 01039392020,
jam : 01029395495,
......
}- enum 타입
// enum 역시 JS에는 없는 타입이지만 TS가 지원함. 특이한 점은 컴파일해도 enum은 사라지지 않는다. 자바스크립트 객체로 변환되서 js 파일에 추가됨.
enum Status {
BACKLOG = 0,
INPROGRESS = 1,
DONE = 2,
}
enum Sort {
javascript = 'js',
typescript = 'ts',
reactNative = 'rn',
}
const todo = {
name : 'read docs',
status : Status.BACKLOG, // 0
sort : Sort.typescript, // 'ts'
}🔎 더 알고 싶은 것 / 보완이 필요한 것
1. 데이터베이스 잘 설계하는 방법
- 데이터베이스 설계를 잘하면 프론트엔드에서 데이터를 또다시 가공하거나 하는 추가 작업을 줄일 수 있을 것 같다는 생각을 했다.
⛰ 프론트엔드 개발 공부 블로그