는 데이터를 연속된 바이트로 변환해서 저장하거나 전송할 수 있도록 하는 방법이에요. 이 개념 자체는 파일 시스템이나 네트워크 통신의 필요성에 의해 생겨난 기본 원리입니다. 컴퓨터 과학의 초창기부터 데이터를 저장하거나 네트워크로 전송하기 위한 다양한 방식들이 발전했고, 그 과정에서 직렬화라는 개념이 자연스럽게 등장했어요.

역직렬화(deserialization)

는 이 직렬화된 데이터를 다시 원래의 구조나 객체로 복원하는 과정이에요. 직렬화된 데이터를 해독해서 다시 복원하는 과정도 필수적인 기술로, 직렬화와 함께 발전해온 것이죠.

기본 개념은 이렇지만 재미있게 이해하기 쉽게 말을 해보자면

직렬화라는 건, 우리가 가지고 있는 복잡한 데이터나 객체를 줄줄이 하나의 긴 문자열로 "펼치는" 과정이에요. 데이터를 네트워크로 보내거나 저장하려면 컴퓨터가 그걸 한 줄로 만들어서 다룰 수 있게 해야 하죠. 마치 누군가에게 복잡한 그림을 설명할 때, 그 그림의 모든 디테일을 단순한 단어로 풀어서 말하는 것과 비슷해요.

예를 들어, 우리가 "책상"이라는 객체가 있다고 해봅시다. 이 책상은 나무 재질, 높이, 색상 같은 다양한 특성이 있어요. 직렬화는 이 책상을 데이터로 만들어서 컴퓨터가 처리할 수 있게 하나의 길고 긴 문자열로 펼치는 거예요. 책상의 높이, 색상, 재질을 하나하나 풀어서 "책상(나무, 갈색, 75cm)" 이렇게 줄을 세우는 겁니다.

이제, 이 데이터를 다른 컴퓨터로 보냈다고 생각해보죠. 그 컴퓨터는 이 데이터를 다시 원래대로 복원해야 할 거예요. 이 과정이 역직렬화예요. 직렬화된 데이터를 받아서 다시 원래의 책상으로 복원하는 거죠. 방금 받은 그 "책상(나무, 갈색, 75cm)"라는 데이터를 보고, "아, 이건 책상이구나" 하면서 다시 실제 책상의 형태로 변환하는 과정이죠.

"직렬화는 복잡한 물건들을 줄줄이 풀어서 보내는 과정이고, 역직렬화는 그걸 다시 원래 상태로 재조립하는 과정이야. 그게 전부야. 복잡한 걸 단순하게 만들어서 주고받고, 다시 원래대로 되돌리는 거지!"

직렬화 역직렬화 역사

1960년대부터 이미 이런 개념들이 사용되기 시작했어요. 예를 들어, LISP라는 프로그래밍 언어에서는 'print'와 'read' 함수를 통해 데이터 구조를 문자열로 변환하고 다시 복원하는 기능을 제공했죠.

1970년대에는 객체 지향 프로그래밍이 발전하면서, 객체를 저장하고 전송하는 방법에 대한 연구가 활발해졌어요. 이때 '마샬링(marshalling)'이라는 용어도 등장했는데, 이는 직렬화와 비슷한 개념이에요.

1980년대와 1990년대를 거치면서, 다양한 프로그래밍 언어와 시스템에서 각자의 방식으로 직렬화와 역직렬화를 구현했어요.

Java에서는 1996년에 객체 직렬화 기능을 도입했고, 이는 많은 개발자들에게 직렬화 개념을 널리 알리는 데 기여했죠.

2000년대에 들어서면서 XML, JSON 같은 데이터 교환 형식이 등장하면서 직렬화와 역직렬화는 더욱 중요해졌어요. 특히 웹 개발이 활발해지면서 이 개념들은 거의 모든 프로그래머들이 알아야 하는 기본 지식이 되었죠.

이제 직렬화 역직렬화를 하는 방법을 nodejs 기준으로 말해볼려고 합니다. 다들 한번씩 써본걸 알수 있어요.

위에 처럼 하는방법일단 예시를 정확하게 알려주자면

JSON.stringify(): 직렬화 (Serialization)

JavaScript 객체를 JSON 문자열로 변환. 예: {name: "Kim"} → '{"name":"Kim"}'

JSON.parse(): 역직렬화 (Deserialization)

JSON 문자열을 JavaScript 객체로 변환. 예: '{"name":"Kim"}' → {name: "Kim"}

근데 여기서 JSON 으로 직렬화는 데이터 크기가 커지고 많은양에 데이터를 통신은 JSON은 적합하지 않는다. 그래서 다른 성능적으로 좋은 직렬화 방식이 있다. 컴퓨터가 읽기 쉽게 이진으로 바꾸는것이다.

{name: "Kim", age: 30} → [2, 75, 105, 109, 30]

이런식으로 바이트 형태로 바꿔주면 컴퓨터의 최적의 데이터 형태가 된다. 특히 성능이나 크기 최적화가 필요한 경우 이진 형식의 직렬화가 자주 사용됩니다.

우리가 대부분 JSON 직렬화 방식밖에 모른다.

하는 방법을 알려드리겠습니다. 많은 방법이 있지만 제가아는 3가지 방법을 알려드리겠습니다.

직렬화 하는법

오리지널 내부 객체 사용하기

// 직렬화
const obj = { name: "Kim", age: 30 };
const binary = Buffer.from(JSON.stringify(obj));

// 역직렬화
const deserialized = JSON.parse(binary.toString());

node:v8 모듈 사용:

const v8 = require('node:v8');

// 직렬화
const obj = { name: "Kim", age: 30 };
const binary = v8.serialize(obj);

// 역직렬화
const deserialized = v8.deserialize(binary);

이 방법은 효율적이지만, Node.js 특화 방식이라 다른 환경과의 호환성이 낮습니다.

Protocol Buffers 사용:

Google의 Protocol Buffers는 효율적인 이진 직렬화 방식을 제공합니다

const protobuf = require('protobufjs');

// 스키마 정의
const Root = protobuf.Root;
const Type = protobuf.Type;
const Field = protobuf.Field;

const root = new Root();
const Person = new Type("Person");
Person.add(new Field("name", 1, "string"));
Person.add(new Field("age", 2, "int32"));

root.add(Person);

// 직렬화
const obj = { name: "Kim", age: 30 };
const binary = Person.encode(obj).finish();

// 역직렬화
const deserialized = Person.decode(binary);

이 방법은 복잡하지만 매우 효율적이고 다른 언어와의 호환성도 좋습니다. npm 을 보면 알겠습니다 엄청 인기가 많은이유가 구글이 만든것도 있고 방식으로 직렬화 속도 빨라서 많이들 사용합니다

이렇게 직렬화랑 역직렬화에 대해서 배워 봤습니다.모르고 사용하는 것과 알고 사용하는 것은 완전히 달라요

오늘은 JWT 를 한번 재미있게 해볼생각입니다. 오늘 배워보고 회사에 적용하면 얼마나 편하고 좋은지 알아볼거에요

그전에 알아야 적용하고 자랑도 할거죠??

"한 친구가 나에게 물었습니다, 'JWT가 뭐야?' 그래서 나는 말했습니다, '그건 정보를 담은 디지털 상자야. 그런데 이 상자는 아무나 열 수 없게 잠금장치가 달려있지.'"

일단 잠금 디지털 장치라고 생각해봐요 디저털 장치에 뭐가 들어가 있을까요??

디지털 장치(JWT)에는 단 3가지만 있습니다.

JWT의 구성 요소

1️⃣ 헤더 (Header)

헤더는 토큰의 유형(JWT)과 사용된 서명 알고리즘(예: HMAC SHA256 또는 RSA)을 포함합니다.

{
  "alg": "HS256",
  "typ": "JWT"
}

이 JSON 객체는 Base64Url 인코딩되어 JWT의 첫 번째 부분을 형성합니다.

Base64Url 이 뭔지 모를수도 있으니

Base64는 데이터를 텍스트 형식으로 인코딩하는 방법이에요. 보통 3바이트의 바이너리 데이터를 4개의 ASCII 문자로 변환하죠. 이 과정에서 알파벳 대문자, 소문자, 숫자 그리고 몇 가지 특수 문자를 사용해요.

그런데, URL에서는 몇 가지 문자를 사용할 수 없거나, 사용하면 안 되는 경우가 있어요. 예를 들어, '+'나 '/' 같은 문자는 URL에서 특별한 의미를 가지니까요. 그래서 등장한 것이 바로 Base64Url입니다.

Base64Url은 Base64와 거의 같지만, '+'를 '-'로, '/'를 '_'로 대체해요. 이렇게 하면 URL에서 안전하게 사용할 수 있게 되죠. 그리고 마지막에 '=' 기호로 패딩하는 것도 제거해서 URL을 더 깔끔하게 만들어요.

예를 들어 볼게요. 만약 우리가 "Hello"라는 문자열을 Base64로 인코딩하면 "SGVsbG8="가 되죠. 이걸 Base64Url로 인코딩하면 "SGVsbG8"가 됩니다.

2️⃣ 페이로드 (Payload)

페이로드에는 클레임(claim)이 포함됩니다. 클레임은 엔터티(일반적으로 사용자)에 대한 정보입니다.

클레임에 대해서 또 알아보죠

클레임(claims)이라고 불리는 일련의 정보가 들어 있습니다. 클레임은 주로 사용자 정보나 토큰의 메타데이터를 포함해요. 클레임은 크게 세 종류로 나뉩니다: 등록된 클레임(Registered Claims), 공개 클레임(Public Claims), 그리고 비공개 클레임(Private Claims).

등록된 클레임 (Registered Claims):

이 클레임들은 JWT 표준에 정의되어 있으며, 특정한 의미를 가지고 있어요. 예를 들어: iss: 토큰을 발급한 주체 (issuer) sub: 토큰의 주체 (subject) aud: 토큰의 대상 (audience) exp: 토큰의 만료 시간 (expiration time) iat: 토큰이 발급된 시간 (issued at) 공개 클레임 (Public Claims):

이 클레임들은 누구나 정의할 수 있는 클레임이에요. 그러나 이름 충돌을 방지하기 위해, 충돌 방지 네임스페이스를 사용하는 것이 좋습니다. 비공개 클레임 (Private Claims):

이 클레임들은 발급자와 수신자 간의 협의에 따라 정의되는 클레임입니다. 예를 들어, 특정 사용자의 권한이나 ID와 같은 정보를 포함할 수 있어요.

이 JSON 객체도 Base64Url 인코딩되어 JWT의 두 번째 부분을 형성합니다.

3️⃣ 서명 (Signature)

서명은 인코딩된 헤더, 인코딩된 페이로드, 비밀 키, 그리고 헤더에 명시된 알고리즘을 사용하여 생성됩니다.

이렇게 해서 위에 사진처럼 디지털 상자가 만들어 지는거에요 디지털상자는 JWT 에요 이게 끝이에요 개념은 하지만 예제를 한번 봐야겠지요??

JWT가 작동하는 방식

1.클라이언트가 보호된 자원에 접근하려고 할 때, JWT를 HTTP 요청의 Authorization 헤더에 포함시킵니다.

2.서버는 JWT를 디코딩하여 헤더와 페이로드를 추출합니다.

3.서명 검증을 통해 토큰이 변경되지 않았음을 확인합니다.

4.토큰의 만료 시간을 확인하고, 필요한 추가 검증을 수행합니다.

저의 주언어인 Node.js 로 알려드릴게요

JWT 생성

먼저, JWT를 생성하는 방법입니다. jsonwebtoken 라이브러리를 사용합니다. 설치는 설명안할게요 ~~ㅎㅎ

const jwt = require('jsonwebtoken');

// 비밀 키 설정
const secretKey = 'your-256-bit-secret';

// 페이로드 설정
const payload = {
  sub: '1234567890',
  name: 'John Doe',
  admin: true
};

// JWT 생성
const token = jwt.sign(payload, secretKey, { algorithm: 'HS256', expiresIn: '1h' });

console.log('JWT:', token);

JWT 검증

생성된 JWT를 검증하는 방법입니다.

const jwt = require('jsonwebtoken');

// 비밀 키 설정
const secretKey = 'your-256-bit-secret';

// 클라이언트로부터 받은 JWT
const token = '받은 토큰을 여기에 넣으세요';

try {
  // JWT 검증
  const decoded = jwt.verify(token, secretKey);
  console.log('Decoded Payload:', decoded);
} catch (err) {
  console.error('Invalid Token:', err.message);
}

간단하게 SSO 를 구현한다고 생각하면

const jwt = require('jsonwebtoken');
const express = require('express');
const app = express();
const secretKey = 'your-256-bit-secret';

// 미들웨어를 사용하여 JWT 검증
function authenticateToken(req, res, next) {
  const token = req.headers['authorization'];
  if (!token) return res.sendStatus(401);

  jwt.verify(token, secretKey, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

// 보호된 엔드포인트
app.get('/protected', authenticateToken, (req, res) => {
  res.json({ message: 'This is a protected route', user: req.user });
});

app.listen(3001, () => {
  console.log('Service running on port 3001');
});

이렇게 구현해서 로그인 유지도 옛날 방식인 세션이 아닌 JWT 를 사용해보세요 그러면 데이터베이스 에서 유저 조회도 빠지게 되고 성능도 올라가는거 아니겠어요??

아그리고 your-256-bit-secret 이부분이 secretKey는 JWT를 생성하고 검증할 때 사용되는 중요한 요소입니다. secretKey는 보안성이 매우 중요하기 때문에 신중하게 생성하고 관리해야 합니다.

만드는 방법은

const crypto = require('crypto');

const secretKey = crypto.randomBytes(32).toString('hex');
console.log('Generated Secret Key:', secretKey);

간단하죠?? 이렇게 만들어서 넣어줘도 되고 이러면 라우터에 하트코딩보다는 .env 에 환경변수로 처리 하면 깔끔하겠지요??

지금 예시는 SSO 지만 다른것도 구현할수 있어요

2024 트렌드는 제가 생각했을때는

1.SSO 2.디바이스 간에 인증 방식 3.서버리스로 인증방식 4.마이크로 서비스간에 인증방식

이렇게 있는거 같아요. 재미있었으면 좋아요한방 주세요

어플라이언스를 설명해볼려고 합니다.

어플라이언스

일단 저는 무조건 생각합니다 왜 사용할까?? 이걸알아야 이해가 쏙쏙 되거든요

왜 어플라이언스를 사용할까요?

"생각해 보세요. 요리사가 피자만 만드는 가게를 차렸다고 해봐요. 이 가게는 피자 만드는 데 필요한 모든 도구를 갖추고 있겠죠? 오븐, 반죽 기계, 토핑 준비대 등등. 이게 바로 어플라이언스예요!

한 가지 일만 잘해요: 피자 가게처럼 한 가지 일에만 집중하니 그 일을 정말 잘하게 되죠.

*바로 사용할 수 있어요: * 피자 가게에 들어가면 바로 피자를 만들 수 있는 것처럼, 어플라이언스도 설치하면 바로 사용할 수 있어요. 모든 게 한 곳에: 피자 만드는 데 필요한 모든 게 가게 안에 있는 것처럼, 어플라이언스도 필요한 모든 걸 갖추고 있어요.

어플라이언스의 예시와 동작 방식

"이제 몇 가지 실제 예를 들어볼까요?

이렇게 생각하면 좀더 이해하기 쉽지 않나요???

네트워크 어플라이언스

네트워크 장비는 특정 네트워크 기능을 수행하는 물리적 장치입니다. 특정 기기는 텍스트에 직접 언급되지 않지만 설명과 관련된 예는 다음과 같습니다.

라우터: WAN에서 라우팅을 수행하는 장치입니다.

스위치: 동일한 네트워크 내에서 여러 장치를 연결하기 위해 LAN에서 사용되는 장치입니다.

방화벽 어플라이언스: 보안 규칙을 시행하기 위해 DMZ에서 사용되는 하드웨어 장치입니다.

로드 밸런서 어플라이언스: CDN에서 트래픽을 여러 서버에 균등하게 분산하는 데 사용되는 장치입니다.

IoT 장치: IoT용 센서와 연결 기능이 내장된 물리적 장치입니다.

가상 머신: AWS EC2, Microsoft Azure VM, Google Compute Engine과 같은 IaaS 플랫폼에서 제공되는 인스턴스입니다.

네트워크 형태

LAN(근거리 통신망)

당신이 살고 있는 동네와 같은 LAN을 생각해 보십시오. 단일 건물이나 캠퍼스와 같은 작은 영역 내의 모든 주택(컴퓨터 및 장치)을 연결합니다. 이 네트워크는 빠르고 매우 빠르며 종종 1Gbps가 넘는 속도로 데이터를 확대합니다. 그리고 거리는? 홉, 건너뛰기, 점프만으로 지연(지연)이 최소화됩니다. 홈 Wi-Fi 네트워크, 사무실 설정 또는 학교 컴퓨터실을 상상해보세요. 바로 LAN입니다.

기능 및 예 범위: 하나의 건물 또는 캠퍼스로 제한됩니다.

속도: 일반적으로 1Gbps가 넘는 높은 데이터 전송 속도입니다.

지연 시간: 장치가 서로 가까이 있기 때문에 낮습니다.

예: 집 Wi-Fi, 사무실 네트워크, 학교 컴퓨터실.

WAN(광역 네트워크)

이제 더 크게 생각해 보세요. WAN은 서로 다른 도시(LAN)를 연결하는 고속도로 시스템과 같습니다. 그것은 광대하고 도시, 국가, 심지어 대륙에 걸쳐 퍼져 있습니다. 편안하고 빠른 LAN과 달리 WAN은 인터넷 서비스 제공업체(ISP)의 인프라를 사용합니다. 이는 데이터가 이동해야 하는 장거리로 인해 속도가 느리고 지연이 더 많다는 것을 의미합니다. 인터넷이 가장 좋은 예입니다. 이는 모든 LAN을 하나의 대규모 네트워크로 연결하는 궁극적인 WAN입니다.

기능 및 예

구성: 여러 LAN을 연결합니다.

인프라: ISP 인프라를 사용합니다.

속도 및 대기 시간: LAN에 비해 대기 시간은 느리고 길어집니다.

예: 인터넷, 글로벌 기업 네트워크, 정부 기관 네트워크.

DMZ(비무장지대)

네트워킹에서 DMZ는 집(내부 LAN)과 거친 거리(인터넷) 사이의 안전한 안뜰과 같습니다. 외부에서 액세스할 수 있어야 하지만 여전히 내부 공간을 안전하게 유지하는 서비스를 호스팅합니다. 두 개의 방화벽(하나는 인터넷을 향하고 다른 하나는 내부 네트워크를 향함)으로 보호되는 완충 구역이라고 생각하십시오. 웹 서버, 이메일 서버, DNS 서버를 위한 이상적인 장소입니다.

기능 및 예 신뢰 수준: LAN보다 신뢰도는 낮지만 인터넷보다는 높습니다.

호스팅 서비스: 웹 서버, 이메일 서버, DNS 서버.

보안: 방화벽으로 내부 LAN과 분리되어 있습니다.

예: 회사 공용 웹 서버, 외부 사용자용 FTP 서버. LAN은 안전한 홈 네트워크와 같습니다. WAN은 광범위한 통신을 위해 여러 LAN을 연결합니다. DMZ는 LAN과 야생 인터넷 사이의 안전한 중간 지점 역할을 합니다.

소프트웨어 정의 네트워킹(SDN)

컴퓨터를 프로그래밍하는 것처럼 네트워크를 프로그래밍할 수 있다고 상상해 보십시오. 그것이 바로 SDN이다. 네트워크의 데이터 플레인(본체)에서 제어 플레인(브레인)을 분리하여 중앙 집중식 관리와 엄청난 유연성을 제공합니다. 이는 마치 네트워크를 원격으로 제어할 수 있는 것과 같아서 네트워크를 동적으로 조정하고 최적화할 수 있어 데이터 센터와 클라우드 환경에 적합합니다.

기능 및 예

관리: 중앙 집중식.

프로그래밍 가능성: 높음, 동적 변경이 가능합니다.

유연성 및 확장성: 개선되었습니다.

예: 데이터 센터 최적화, 동적 클라우드 네트워크 구성.

CDN(콘텐츠 전송 네트워크)

CDN은 좋아하는 책의 여러 사본을 전 세계 도서관에 저장하는 것과 같습니다. 책을 읽고 싶을 때는 멀리 있는 도서관이 아닌 가장 가까운 도서관으로 가세요. CDN은 다양한 위치에 분산된 서버에 웹 콘텐츠를 저장하므로 사용자가 데이터에 더 빠르게 액세스할 수 있습니다. 서버 부하의 균형을 맞추고 DDoS 공격을 방어하는 데에도 도움이 됩니다.

기능 및 예 성능: 콘텐츠 캐싱을 통해 로드 시간을 단축합니다.

로드 밸런싱: 트래픽을 균등하게 분산합니다.

보안: DDoS 공격을 방어합니다.

예: 대규모 웹사이트에 이미지와 비디오를 제공하고 글로벌 콘텐츠 제공을 최적화합니다.

IoT(사물 인터넷)

IoT는 일상의 사물에 음성을 부여하는 것과 같습니다. 센서가 있는 장치를 인터넷에 연결하면 데이터를 교환하고 우리 및 서로 상호 작용할 수 있습니다. 냉장고에 우유가 떨어졌다고 알려주거나 스마트워치가 건강 상태를 추적한다고 상상해 보세요. 이것이 바로 실제 세계와 디지털 인텔리전스를 연결하는 IoT입니다.

기능 및 예 장치: 내장 센서 및 네트워크 연결. 데이터 통합: 빅데이터 및 AI와 연결됩니다. 모니터링 및 제어: 실시간.

예: 스마트 홈, 산업용 센서 네트워크, 웨어러블 기기.

IaaS(서비스로서의 인프라)

IaaS는 데이터 센터의 강력한 컴퓨터를 구매하고 유지 관리하는 대신 임대하는 것과 같습니다. 인터넷을 통해 확장 가능한 컴퓨팅 리소스를 제공하며 사용량에 따라 비용을 지불합니다. 이 모델을 통해 기업은 자체 데이터 센터를 구축하고 필요에 따라 확장하거나 축소하는 번거로움과 비용을 피할 수 있습니다.

기능 및 예 리소스: 컴퓨팅, 스토리지, 네트워킹. 청구: 사용량 기준. 확장성: 물리적 하드웨어를 소유하지 않고도 높음.

예: AWS EC2, Microsoft Azure VM, Google Compute Engine.

SDN은 네트워크 관리를 더욱 유연하고 효율적으로 만듭니다. CDN은 전 세계적으로 빠른 콘텐츠 전달을 보장합니다. IoT는 물리적 영역과 디지털 영역을 연결합니다. IaaS는 확장 가능한 온디맨드 IT 인프라를 허용합니다.

Network 는 건, 여러 컴퓨터나 장치들이 서로 정보를 주고받을 수 있게 연결된 거야. 이게 마치 우리가 친구들과 이야기하듯이, 컴퓨터들도 서로 '소통'을 한다고 생각하면 돼. 그리고 이 연결에는 여러 가지 방식이 있지만, 가장 흔한 건 인터넷을 통한 연결이야.

데이터는 패킷이라는 작은 덩어리로 네트워크를 통해 전송되며, 패킷은 두 부분으로 나뉩니다

Header

출발지 호스트, 목적지 호스트, 기본 프로토콜 등 모든 식별 정보

Payload

실제 데이터(예: 일부 HTML 또는 이미지)입니다.

애플리케이션 계층 (Application Layer)

사용자가 상호 작용하는 계층(예: 웹 브라우저)입니다. 컴퓨터 애플리케이션과 서버가 통신하는 데 사용하는 상위 수준의 프로토콜(HTTP, SSL, FTP 등)을 사용합니다.

이건 마치 레스토랑 주방장이 메뉴를 만드는 것과 같아요. "/users"라는 주문이 들어오면 사용자 목록을, "/orders"라는 주문이 들어오면 주문 내역을 제공하는 식이죠. HTTP를 사용해 이런 요청과 응답을 주고받아요.

1. HTTP (HyperText Transfer Protocol):

웹 브라우저와 웹 서버 간의 통신을 위한 애플리케이션 계층 프로토콜입니다.

HTTP는 웹사이트를 방문할 때 사용하는 특별한 언어예요. 마치 레스토랑에서 주문을 하는 것처럼, 브라우저가 서버에게 "이 웹페이지 주세요!"라고 요청하면, 서버는 "여기 있습니다!"하고 웹페이지를 전달해주는 거죠.

2. SSL (Secure Sockets Layer) / TLS (Transport Layer Security):

이론: 네트워크 통신의 보안을 위한 암호화 프로토콜입니다.

SSL/TLS는 비밀 대화를 나누는 방법이에요. 당신이 친구와 비밀 코드를 만들어 대화하는 것처럼, 컴퓨터와 서버도 아무도 엿듣지 못하게 정보를 암호화해서 주고받는 거예요.

3. FTP (File Transfer Protocol): //잘사용하지않음

이론: 파일을 전송하기 위한 애플리케이션 계층 프로토콜입니다.

FTP는 인터넷 상의 택배 서비스 같은 거예요. 큰 파일을 안전하게 포장해서 다른 컴퓨터로 보내거나 받을 수 있게 해주죠.

전송 계층 (Transport Layer)

데이터 무결성 검사, 소스 및 대상 포트, 데이터를 패킷으로 분류하는 사양(애플리케이션 계층에서 아직 수행하지 않은 경우)을 포함한 데이터 전송. TCP와 UDP가 가장 일반적인 전송 계층 프로토콜입니다

예시: 소켓 프로그래밍

TCP나 UDP를 사용해 실시간 채팅 앱이나 게임 서버를 만들 수 있어요.

TCP는 편지를 주고받는 것처럼 신뢰성 있는 통신이 필요할 때 써요. 채팅 메시지가 순서대로 정확히 전달되어야 하니까요. UDP는 전화 통화같아요. 빠르게 통신해_텍스트_야 하지만 약간의 오류는 괜찮을 때, 예를 들어 실시간 음성 채팅에 사용해요.

네트워크 계층 (Internet Layer)

Internet 계층은 데이터 패킷의 라우팅을 담당하며, IP(Internet Protocol)를 사용하여 패킷을 목적지로 전달합니다.

물리 계층 (Physical Layer):

인터넷이나 모뎀과 같은 물리적 매체를 통해 원시 데이터를 전송하는 방법을 정의합니다. OSI 모델의 가장 낮은 계층으로, 실제 데이터 비트를 전기 신호, 빛, 또는 전파로 변환하여 전송합니다.

ATIP 라고 일단 생각해요 그리고 실제 저의가 살고 있는 기준으로 예시를 들어볼게요

1. 애플리케이션 계층 (A):

이것은 마치 편지를 쓰는 것과 같아요. 여러분이 친구에게 보내고 싶은 메시지를 작성하는 단계죠. 예를 들어, 웹 브라우저에서 웹 페이지를 요청하는 것이 이 단계에 해당해요.

2. 전송 계층 (T):

이 단계는 편지를 봉투에 넣고 주소를 쓰는 것과 비슷해요. 데이터를 어떻게 보낼지, 어디로 보낼지 결정하죠. TCP나 UDP 같은 프로토콜이 이 일을 담당해요.

3. 인터넷 계층 (I):

이건 우체국에서 편지를 분류하는 것과 같아요. 데이터가 어떤 경로로 가야 할지 결정하죠. IP 주소를 사용해서 데이터 패킷의 목적지를 찾아요.

4. 물리 계층 (P):

이제 실제로 편지를 배달하는 단계예요. 전기 신호, 빛, 또는 전파를 통해 데이터를 실제로 전송하죠. 이건 마치 우체부가 실제로 거리를 다니며 편지를 배달하는 것과 같아요.

Host A에서 Host B로 데이터를 보낼 때, 데이터는 위에서 아래로 내려가면서 각 계층을 거칩니다. 애플리케이션에서 시작해서, 전송 계층에서 포장되고, 인터넷 계층에서 주소가 붙고, 마지막으로 물리 계층에서 실제 신호로 변환되어 전송돼요.

Host B에서는 반대로 진행됩니다. 받은 신호를 아래에서 위로 올라가면서 해석해요. 물리 계층에서 받은 신호를 데이터로 변환하고, 인터넷 계층에서 주소를 확인하고, 전송 계층에서 데이터를 재조립한 뒤, 마지막으로 애플리케이션 계층에서 최종적으로 데이터를 처리하죠.

스택의 하위 계층(인터넷/네트워크 및 물리적)은 전송 컴퓨터가 데이터를 어디로 보낼지 파악하는 데 도움을 주고, 상위 계층(애플리케이션 및 전송)은 수신 컴퓨터가 방금 수신한 데이터가 무엇인지 파악하는 데 도움을 줍니다:

재미있게 항상 이해하고 배워보자 안녕하세요 여러분 2장이 돌아왔습니다.ㅎㅎㅎ 커버가 너무 여러분들한테 날리는거는 아니고 어려워서 한번 했습니다!!

1장에 이어서 쿠버네티스가 어떻게 동작하는지 간단하게 알아봤습니다!!

쿠버네티스는 마치 거대한 놀이공원 이라고 생각하세요

각각의 놀이기구와 서비스가 쿠버네티스의 구성 요소들과 비슷한 역할을 해요. 이제 이 놀이공원을 둘러보면서 쿠버네티스의 세계를 재미있게 탐험해 볼까요??!

(Pod)-놀이기구 카트

Pod 란 무엇이야 진짜 간단하게 말해서 외우는거는 정말 싫은데 가장 기본적인 배포 단위라고 생각하세요. 근데 조건이 하나 이상의 컨테이너를 포함할 수있습니다 파드는 컨테이너의 실행 환경을 제공합니다. 비유 하자면 쿠버네티스의 생명체 컨테이너의 집이라고 비유할수있을거 같아요 상상력을 펼치세요 그리고 놀이공원의 놀이기구 카트처럼 생각할 수 있어요. 카트는 여러 사람(컨테이너)이 탈 수 있고, 그들이 함께 즐길 수 있는 환경(리소스)을 제공하죠. 카트가 없으면 놀이기구를 즐길 수 없듯이, 파드가 없으면 컨테이너들이 실행될 수 없어요.

(Node) - 놀이공원의 구역들

노드는 놀이공원을 구성하는 여러 구역들과 비슷해요. 놀이공원에는 다양한 놀이기구와 시설들이 있는데, 각 구역에는 그에 맞는 특성의 놀이기구와 시설들이 있죠. 마찬가지로 노드에는 여러 파드가 배치되고 관리됩니다.

(Deployment) - 놀이공원의 운영팀

Deployment는 놀이공원을 원활하게 운영하기 위한 팀처럼 생각할 수 있어요. 놀이기구가 고장 나면 바로 수리하거나 새로운 놀이기구를 설치하는 것처럼, 디플로이먼트는 파드가 제대로 실행되고 관리되도록 도와줘요.Pod 가 문제가 생기면 계속 관리해주는 운영팀이라고 생각하면 쉬워요

(StatefulSet) - 고유 번호가 부여된 락커

StatefulSet은 놀이공원의 락커처럼 각각 고유 번호가 부여된 저장 공간이에요. 마치 락커마다 고유 번호가 있어 자신의 물건을 안전하게 보관하듯, StatefulSet은 각 pod 에 고유 식별자를 부여하여 상태를 유지하게 해줍니다.

(DaemonSet) - 공원 곳곳의 청소부

DaemonSet은 공원 곳곳을 청소하는 직원들처럼, 클러스터 내의 모든 Node(또는 일부 Node)에 필요한 작업을 실행하는 역할을 해요. 마치 놀이공원이 깨끗해야 방문객이 즐겁게 놀 수 있는 것처럼, DaemonSet은 시스템을 깨끗하게 유지하는 데 도움을 줍니다. 쓰레기 있으면 안되잖아요

(Service) - 놀이공원 지도

서비스는 놀이공원의 지도와 같은 역할을 해요. 지도가 없으면 원하는 놀이기구를 찾기 어려운 것처럼, 서비스는 파드 집합에 접근하기 위한 안정적인 경로를 제공합니다.

(Ingress) - 입장권 검사소

인그레스는 놀이공원의 입장권 검사소와 비슷해요. 외부에서 놀이공원에 들어가려면 입장권을 검사 받아야 하는 것처럼, 인그레스는 외부 트래픽을 적절한 서비스로 안내합니다. 그럼 여기를 조작하면 로드밸런싱이나 관리를 이놈이 하겠구나 라고 딱 알지요?? 딱 오나요??

(ConfigMap)과 (Secret) - 정보 안내소와 금고

컨피그맵은 놀이공원의 정보 안내소처럼 애플리케이션에 필요한 정보를 제공하고, 시크릿은 금고처럼 중요한 정보를 안전하게 보관합니다.말그대로 보안이죠 아우 쉬워보안 !!!

(Volume) - 보관함

볼륨은 놀이공원의 물건 보관함처럼 데이터를 저장하는 곳이에요. 마치 방문객들이 물건을 보관함에 맡기고 즐겁게 놀다 가듯, 애플리케이션도 볼륨을 통해 데이터를 안전하게 저장할 수 있습니다.

(Namespace) - 놀이공원의 다양한 테마 구역

네임스페이스는 놀이공원 내의 다양한 테마 구역과 같은 역할을 해요. 각 구역은 독특한 테마를 가지고 있듯, 네임스페이스는 리소스를 구분하여 관리할 수 있게 도와줍니다. 이러면 아 태그를 줘서 관리를 할수 있겠구나라고 생각이 났으며 좋을거같아요 ㅠㅠ

엄청 막 딥하게는 설명하지는 않지만 그래도 내가 다른 사이트에 봐서 뭘 수정을 했고 알아야 나중에 응용이 되거든요 외우면 절대 응용 안됩니다 장담할게요 어려우면 더 쉽게 생각하고 이해할려는 습관을 드리는게 정말 좋아요

오늘의 한줄평: 모든지 재미있게 이해하자

쿠버네티스를 배우기로 한 당신의 결정은 정말 멋진 거에요! Docker로 서버를 관리하다가 "이거 다 합쳐서 한 번에 관리하면 얼마나 좋을까?"라고 생각한 순간부터 쿠버네티스와의 인연이 시작된 거죠. 그리고 네, 구글이 똑같은 고민을 해서 탄생시킨 게 바로 쿠버네티스랍니다. YouTube 같은 거대한 서비스를 관리하면서 그들도 "이걸 어떻게 한 번에 잘 관리하지?"라는 질문을 했었고요.

쿠버네티스를 공부하기 전에 그 역사를 알고 싶다는 당신의 접근 방식은 정말 인상적이에요. 무언가의 배경을 이해하면 그것을 더 깊게 이해할 수 있으니까요. Borg라는 구글의 내부 시스템에서 발전된 쿠버네티스! 정말 흥미롭죠?

이제 쿠버네티스의 구성 요소를 살펴볼 시간이에요. 공식 문서를 뒤져보면 정말 친절하게 설명되어 있는데, 그걸 좀 더 친근하고 재미있게 풀어볼게요.

구성도를 일단 볼까요??

API 서버 (kube-apiserver)

이론 : 쿠버네티스 API의 중심이 되는 컴포넌트입니다. 모든 내부 컴포넌트들은 이 API 서버를 통해 통신합니다. 사용자, 외부 시스템, 클러스터 내부의 다른 컴포넌트들은 모두 이 API 서버를 통해 클러스터와 상호작용합니다.

현실: 마치 공장의 사무실 같아요. 여기서 모든 일이 결정되고, 모든 정보가 오가죠. 클러스터의 두뇌와도 같은 곳이에요.

etcd

이론: 쿠버네티스 클러스터의 모든 상태 정보를 저장하는 분산 키-값 저장소입니다. 클러스터의 중요 정보를 저장하고, 각종 설정, 상태, 메타데이터를 관리합니다.

현실: 이건 마치 공장의 안전 금고라고 할 수 있어요. 모든 중요한 문서, 설계도, 레시피가 여기에 잘 보관되어 있죠.

스케줄러 (kube-scheduler)

이론: 새로 생성된 파드를 감지하고, 실행할 노드를 선택하는 컴포넌트입니다. 스케줄러는 파드의 요구 사항, 각 노드의 자원 사용량, 정책 제약 조건 등을 고려하여 파드를 배치합니다.

현실: "너는 A 공장 가! 너는 B 라인으로!" 하며 작업자들을 지휘하는 공장의 작업 배치 담당자 같은 역할이에요.

컨트롤러 매니저 (kube-controller-manager)

현실: 이건 마치 공장의 품질 관리팀이에요. 모든 게 잘 돌아가고 있는지, 문제가 생기면 바로바로 대응하죠.

kubelet

이론: 각 노드에서 실행되는 에이전트로, API 서버로부터 파드를 할당받고, 해당 파드의 컨테이너가 정상적으로 실행되고 있는지 관리합니다. 컨테이너의 생명주기 관리, 볼륨 마운트, 네트워크 설정 등을 담당합니다.

현실 :각 노드(공장의 작업 부서)에 있는 똑똑한 관리자에요. 지시받은 작업을 잘 수행하는지, 뭔가 필요한 건 없는지 늘 체크하죠.

네트워크 프록시 (kube-proxy)

이론: 각 노드에서 실행되는 네트워크 프록시로, 서비스의 네트워크 통신을 처리합니다. 서비스의 IP 주소와 포트를 사용하여 파드 간 또는 외부 네트워크와의 통신을 가능하게 합니다.

현실 :공장 내의 전화 교환원 같은 역할이에요. 데이터가 필요한 곳으로 잘 전달되도록 돕죠.

이 모든 걸 좀 더 인간적이고 재미있게 생각해보면, 쿠버네티스가 그리 어렵지 않다는 걸 깨달을 수 있어요. 쿠버네티스는 마치 잘 조직된 공장처럼 각기 다른 부품들이 모여 완벽한 시스템을 이루는 거랍니다. 이제 당신도 이 멋진 시스템의 일부가 될 준비가 된 거죠!

재미있게 이해하고 생각해보자!! 마인드를 가지는 개발자 남기호입니다!!

오늘은 갑자기 블로그를 쓰고 싶어서 트랜잭션 격리 4가지를 이야기를 해볼까 합니다.

물론 재미있게 이야기하는거 히히!

트랜잭션에서는 4가지에 트랜젝션 격리가 있어요

첫번째 부터 이야기를 해볼까 합니다!

트렌젝션에서

데이터베이스에서 트랜잭션 격리 수준은 여러분이 데이터를 다루는 방식을 어떻게 설정할지 결정하는 중요한 설정입니다. 마치 여러분이 카페에서 커피를 마시면서 노트북으로 작업을 하는데, 옆 테이블에서 무슨 일이 벌어지고 있는지 얼마나 신경 쓸 것인가를 결정하는 것과 비슷해요. 그럼, 재미있고 편하게 각 격리 수준에 대해 이야기해 볼까요?

READ UNCOMMITTED

마치 커피숍에서 옆 테이블 사람이 주문한 아직 나오지 않은 음료를 맛보는 것과같다고 볼수있지요. 데이터베이스에서는 이 수준이 가장 낮은 격리 수준이며, 다른 트랜잭션이 아직 끝나지 않은텍스트 변경사항까지 볼 수 있어요. 이로 인해 더티 리드가 발생할 수 있는데, 마치 아직 준비되지 않은 음료를 마시는 것처럼 예상치 못한 결과를 얻을 수 있습니다. 그러나 이것은 로깅이나 모니터링처럼 데이터의 최신성이 중요하고 정확성이 그다지 중요하지 않은 경우 유용할 수 있어요.

더티 리드(Dirty Read) 란 이게 뭐고??

는 한 트랜잭션이 아직 완료되지 않아 최종적으로 커밋되지 않은 데이터를 다른 트랜잭션이 읽는 현상을 말합니다. 쉽게 말해, 한 프로세스가 처리 중인, 아직 확정되지 않은 데이터를 다른 프로세스가 미리 읽어버리는 것이죠

역시 저또한 완벽하게 이해가 안되서 일상 생활을 잘 비유하는데 예를 들어, 한 사용자가 은행 계좌에서 돈을 인출하는 트랜잭션이 있습니다. 이 트랜잭션이 아직 완전히 마무리되지 않았는데, 다른 사용자가 동일한 계좌의 잔액을 조회한다고 가정해 보겠습니다. 만약 두 번째 사용자의 트랜잭션이 더티 리드를 하게 되면, 아직 완료되지 않은 인출 작업의 중간 상태를 볼 수 있게 됩니다. 이 경우, 두 번째 사용자는 잘못된 잔액 정보를 받게 되고, 이는 데이터 무결성 문제로 이어질 수 있습니다! 그럼 데이터 무결성을 무조건 유지할려면 사용하면 안되겠지요????

READ COMMITTED

이제 커피숍에서 옆 사람의 음료가 서빙되기를 기다렸다가 마시는 것으로 생각해 보세요. 즉, 다른 사람의 주문이 완전히 처리되고 나서야 그 결과를 볼 수 있어요. 이는 더티 리드를 방지하지만, 한 트랜잭션 내에서 같은 데이터를 두 번 읽을 때 다른 결과를 볼 수 있는 논리피티 리드는 여전히 가능합니다. 대부분의 웹 애플리케이션에서 이 격리 수준이 기본으로 사용되며, 꽤 균형 잡힌 선택지입니다.

논리피티 리드(Non-repeatable Read)는 뭐고??

한 트랜잭션 내에서 같은 쿼리를 두 번 실행했을 때 다른 결과를 받는 현상을 말합니다. 이는 한 트랜잭션이 진행 중일 때 다른 트랜잭션이 데이터를 수정하거나 업데이트함으로써 발생합니다.

예를 들어 볼게요 . 한 사용자가 은행의 데이터베이스에서 자신의 계좌 잔액을 조회하는 트랜잭션을 실행한다고 가정했을때 사용자는 처음에 잔액을 조회하고 어떤 작업을 수행한 뒤에 다시 잔액을 조회합니다. 만약 이 사용자의 두 번째 조회 사이에 다른 사용자가 같은 계좌에 대해 입금 트랜잭션을 실행하고 커밋한다면, 첫 번째와 두 번째 조회 결과가 달라지겠지요. 이러한 현상이 바로 논리피티 리드입니다.

REPEATABLE READ

커피숍에 앉아서 여러분이 주문한 동일한 커피를 여러 번 주문할 때마다 정확히 같은 맛과 품질을 기대하는 것과 비슷해요. 트랜잭션 동안 조회한 데이터는 변경되지 않으며 일관성이 유지됩니다. 하지만 새로운 데이터(새로운 주문)가 생겨 그것이 조회 결과에 반영될 수 있습니다, 팬텀 리드가 발생할 수 있습니다. 은행 거래와 같이 일관성이 매우 중요한 경우에 적합한 수준이죠.

팬텀 리드(Phantom Read)는 뭐고 ??

한 트랜잭션 내에서 일관된 쿼리 결과를 얻지 못하는 현상을 말합니다. 구체적으로 말하자면, 한 트랜잭션이 동일한 쿼리를 두 번 실행할 때, 첫 번째 쿼리 실행과 두 번째 쿼리 실행 사이에 다른 트랜잭션이 데이터를 삽입하거나 삭제함으로써 첫 번째와 두 번째 쿼리의 결과가 달라지는 것을 말합니다.

팬텀 리드의 가장 큰 문제는 한 트랜잭션 내에서 데이터의 일관성이 보장되지 않는다는 것입니다. 예를 들어, 한 트랜잭션에서 특정 조건에 맞는 데이터의 수를 두 번 세어야 한다고 가정해 봅시다. 첫 번째 쿼리를 실행한 후, 그리고 두 번째 쿼리를 실행하기 전에 다른 트랜잭션이 해당 조건에 맞는 새로운 데이터를 삽입한다면, 두 번째 쿼리의 결과는 첫 번째 결과와 다를 것입니다. 이처럼 두 번의 쿼리 사이에 데이터베이스의 상태가 변경되어 발생하는 불일치를 팬텀 리드라고 합니다.

팬텀 리드를 방지하기 위해서는 격리 수준을 REPEATABLE READ 이상으로 설정해야 합니다. 특히, 가장 높은 격리 수준인 SERIALIZABLE에서는 트랜잭션들이 마치 순차적으로 실행되는 것처럼 격리되어 팬텀 리드를 포함한 모든 읽기 이상 현상을 방지할 수 있습니다.

말한것처럼 이제 진짜 마지막 하이레벨~~ 두구두구두두구.... 그냥 최고에 리드란 리드를 다 잡을수 있는 SERIALIZABLE !!

SERIALIZABLE

가장 엄격한 격리 수준으로, 마치 커피숍에서 여러분 혼자만이 주문을 할 수 있고, 다른 모든 사람은 여러분이 주문을 완료할 때까지 기다려야 하는 상황과 같아요. 이 격리 수준에서는 트랜잭션이 서로 영향을 주지 않아 완벽한 데이터 일관성을 보장하지만, 동시에 여러 트랜잭션을 처리하는 능력이 크게 떨어질 수 있습니다. 따라서 이 격리 수준은 주식 거래나 금융 이체와 같이 데이터의 정확성이 매우 중요한 작업에 적합합니다. 각 격리 수준을 선택할 때는 데이터의 정확성과 처리 성능 사이에서 어떤 것을 더 중요시할지 결정해야 합니다. 당신의 애플리케이션이 무엇을 필요로 하는지 이해하고, 그에 맞는 격리 수준을 선택하세요. 이렇게 각 상황에 맞는 격리 수준을 적절히 선택하는 것이 데이터 일관성과 시스템 성능을 최적화하는 열쇠입니다!

해당되는거는 단점이 있어요 일관성은 진짜 좋은데 여러 트랜잭션을 처리 할때는 엄청 느려요 순차적으로 전부 commit 을 하면 그다음에 다른 트랜젝션을 처리하니까요 혹시 물어볼수도있어요 그냥 전부다 SERIALIZABLE 트랜잭션 격리를 사용하면 되잖아요!! 아니죠 그러면 다 느려요 전부다 API 나 데이터베이스가 처리하는데 Select는 빨라야되는데 그것도 느리면 그 서비스 누가 쓰겠어요!! 어려울거없어요 더 디테일한거는 위키에서 보면 되지만 여기서 요점 트랜잭션을 사용을 할때 내가 지금 어떤 트랜젝션을 사용하고 어떤 상황일때 써야하는지 사용하자!! 이렇게 되면 아 알아야 사용하는구나 라고 생각 했으면 좋겠어요 공부라고 생각하지마세요 재미있게 느낌있게 ~

재미있었길 바랄게요 히히!!

안녕하세요 재미있게 이야기해야 이해하는 개발자 남기호 입니다.~~

Websocket 이라고 말하면 저는 처음이야기를 들었을때 잉? 그게 뭐지? 위키백과 문서를 보면 눈부터 무거워지고 맥북이랑 키스를 합니다.

그래서 저는 모든지 재미있게 현실과 비례해서 이해를 합니다. 뭐 문서만 보고 책을 보고 바로 이해하는 머리 좋은 사람들도 많지만 저는 책을 계속봐도 이해가 안가서 저만에 방식으로 개념을 재미있게 리펙토링 하고 이해를 합니다. 이제부터 저의 방식으로 말하겠습니다. 더재미있게 설명하실수있으면 언제든지 환영해요~

Websocket은 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. 웹소켓 프로토콜은 2011년 IETF에 의해 RFC 6455로 표준화되었으며 웹 IDL의 웹소켓 API는 W3C에 의해 표준화되고 있다.

??????????????????????????????????????????

어우졸려...

일단 HTTP 가 뭐냐 ?? 약속입니다 모든 코딩에 시초는 한국이 아닌 외국입니다. 약속이 영어로 뭐냐면 프로토콜 입니다~ HTTP 통신으로 문서를 주고 받고 할수있는거지요~ 근데 HTTP 통신은 야구로 생각하면 공을 던져야지만 저한테 다시 공이 돌아올수가있지요?? 똑같아요 다른사람한테 공을 던져야 나한테 공이 오는 방식입니다

HTTP 통신 다음으로 나온게 나의 사랑 구글에서 만든 Ajax 에요 왜 이걸갑자기 말하는거냐 HTTP은 문제가있어요 회원가입할때 중복검사는 보셨죠? 그걸 HTTP 는 새로운 페이지가 열리면서 맞는 이메일이 아닙니다 라고 새로운!! 페이지가 나오는거고 Ajax 는 그페이지 그대로 요즘화면처럼 유효하지않는 이메일 입니다 라고 나오는거에요~ 신기하죠? 뭐 이론적으로는 더 깊게 공부하면 좋아요

그리고 Ajax 는 프로토콜이 아니에요~ 편리하게 사용할려고 하는 기술입니다 한번 찾아보세요 혹시몰라서 헷갈릴수도 있어서 말

HTTP 와 AJAX 차이 1.HTTP는 웹브라우저가 서버에 요청합니다x. 2.AJAX는 XMLHttpRequest 객체가 서버에 요청합니다. 3.HTTP는 항상 페이지를 이동합니다. 4.AJAX는 조그마한 변경이 필요할 때, 해당 페이지 내에서 변경이 가능합니다.

이제 WebSocket이란

OSI 제텍스트7계층에 위치해 있으며 제4계층의 TCP에 의존합니다 7계층은 제가 따로 다뤄 보겠습니다 이렇게만 알고 게세요 4계층은 전송계층 입니다 전송전송계층!! 양방향으로 데이터를 연결해준다고 생각하세요 하나에 통로를 열어만 주고 거기서 물품들을 주기도 하고 받기도합니다 좀 쉽게 생각하자고요

저는 Node.js 를 사용하므로 Socket.io 를 소개 할게요

웹소켓 자체는 HTML5 방식의 기술입니다 메모메모!! 오래된 버전의 웹 브라우저는 웹소켓을 지원하지 않습니다. 예를 들어서 옜날 html5 아래 버전인 웹에서는 지원조차도 안된다는 이야기!! 그래서!!! 나온게 바로바로 socket.io 짜잔~~

Socket.io는 node.js 기반으로 만들어진 기술로 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리입니다 이것은 100% 자바스크립트로 구현되어 있으며 현존하는 대부분의 실시간 웹 기술들을 추상화해 놓았습니다 다시 말해지만 Socket.io는 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술입니다. Socket.io는 웹 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용합니다 만약 브라우저에 FlashSocket이라는 기술을 지원하는 플러그인이 설치되어 있으면 그것을 사용하고 플러그인이 없으면 AJAX Long Polling 방식을 사용하도록 합니다

그림으로 설명하는걸 좋아해서 이거면 딱 되겠네요!

WebSocket 소켓이 왜필요해??

실시간 양방향 데이터 통신이 필요한 경우. 많은 수의 동시 접속자를 수용해야 하는 경우. 브라우저에서 TCP 기반의 통신으로 확장해야 하는 경우. 개발자에게 사용하기 쉬운 API가 필요할 경우. 클라우드 환경이나 웹을 넘어 SOA(Service Oriented Architecture) 로 확장해야 하는 경우

여기에서 이걸 보고 알아봐야할거는 응용계층과 TCP 는 뭐고 기본개념을 알면은 다 거기서 파생되는거라 기본이 제일중요합니다 기본개념을 재미있게 해봐용 다음에 만나요~

(저의 개인적 성향입니다 피드백은 언제나 환영입니다~)

난 모든지 공부 할때만 보면 왜 사용해야하는지를 찾아본다. 그 궁금증이 풀리지않으면 진도가 안나간다..ㅠ 처음 1년동안은 그냥 막 복사하고 사용한 결과 내 머리속에 남는게 하나도 없다 응용도 못하고 아무것도 못한다 꼭 먼저 개념을 보고 개념만 외우지 말고 왜 사용해야하는지 예시를 무조건 파악을 해야한다. 이 말은 내 말이 맞다고 판단된다 다들 그렇게 해주세요 제발 히히

자자 왜 사용해야 하는지 예시로 알려드리겠습니다.

외국 개발자들이 만들때 의미없게 만들지 않아요 readonly 이걸 그냥 해석해 보면 읽기 전용입니다 ?? 읽기 전용?? 자 그럼 여기서 저거를 사용하면 읽기만 가능한다는것일까?? 수정은 안되나?? 이렇게 생각하면 90%는 이해한것입니다!!

사용방법과 어디서 사용하는지를 알아야겠지요 ?? Gabojago

Type

type User = {
    _id : string,
    name: string,
    email: string,
    isActive: boolean   
}

let myUser: User = {
    _id : 'asdqwdqwd1',
    name: 'namgiho',
    email: 'namgiho96@gmail.com',
    isActive: true
}

myUser._id = 'askdmlasmkda'

이코드를 봤을때 먼저 회원User 라고 생각해 봅시다. User 에 고유 아이디가 바뀌면 그 유저가 다른유저랑 판별이 안되서 고유아이디는 정말 중요합니다!! RDB(Relational Database)는 그래서 PK를 사용합니다 근데 이렇게 되면 myUser.id 에 데이터가 수정이 되겠지요?? 그러면 망하는겁니다 조회나 해당유저 업데이트를 할때 어떤 고유에 아이디가 아닌데 어떻게 수정을 하죠?? 이렇게 생각하니까 정말 큰일인거 같죠??

type User = {
    readonly _id : string,
    name: string,
    email: string,
    isActive: boolean   
}

let myUser: User = {
    _id : 'asdqwdqwd1',
    name: 'namgiho',
    email: 'namgiho96@gmail.com',
    isActive: true
}

myUser._id = 'askdmlasmkda'

이제 아이디앞에 readonly 라고 주면 어떻게 될까요??

와... 바로 에러 나는거 보이세요?? 해석하면 readonly 는 수정할수 없습니다. 그냥 게임 끝이죠 뭐 읽기만 가능한 기능을 해주는거죠 즉 데이터를 수정할수없고 볼수만 있는 형태 인거죠

아직 가지마세요!! ㅋㅋㅋㅋㅋ interface 랑 class 에서 사용하는법만 배우고 후딱 가요 이제 이해했다고 생각하고 다음으로 빠르게 갈게요

interface

interface User = {
    readonly _id : string,
    name: string,
    email: string,
    isActive: boolean   
}

let myUser: User = {
    _id : 'asdqwdqwd1',
    name: 'namgiho',
    email: 'namgiho96@gmail.com',
    isActive: true
}

myUser._id = 'askdmlasmkda'

type 을 그냥 interface 로 바꿔 주시면 됩니다. 하나를 이해하면 그다음은 이해 설명이 필요합니까?

class

class User {
  private readonly id: id = 'qweqweqwe';
  private readonly name: string;

  constructor() {
    this.name = 'namgiho';
  }

  update() {
    this.id = 'qweqweqweqwe'; // Error! read-only property므로 변경이 불가능합니다
  }
}

Class 내부에서는 property에 설정할수있어요 property 선언 혹은 constructor에 값을 할당할 수 있다. 중간 변경이 불가능 합니다. 말 그대로 "읽기 전용" 잊어먹지하세요 이상으로 readonly 였습니다 이제 좋아요 누를꺼 아니면 오지마세요 절대 잊어먹지마세요 화이팅~ 아 피드백은 환영입니다 ~~ㅎㅎ

JavaScipt 는 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 다른 언어 JAVA,Python,Go.. 등등 언어보다는 자바스크립트는 그냥 코딩하면 작동을 합니다. 이게 왜되는지도 모를수도 있어요.. 그만큼 JavaScript는 너무너무 자유로워요~~

자자 이제 코드를 한번 볼까요?? 말보다는 보는게 제일 이해하기 쉽더라고요

//반환값을 예상할수 있나요???
const pikachu = (a, b) => {
  return a + b;
}

이코드만 봤을때 pikachu 함수는 문자열, 숫자 등과 같은 모든 유형의 변수를 사용할수 있기 때문에 저도 저 함수 보았을때 예상이 안됩니다..

// 숫자형 일때.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu(2021, 9);
console.log(result); // 2030

// 문자형일때
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu("2021", "9");
console.log(result); // 2030

JavaScript는 동적 타이핑 언어입니다. 이는코드를 보다 쉽게 작성하는 데 유용합니다. 다른 개발자들이 이코드를 보고 함수에 어떤 인수가 필요한지 함수에세 어떤 값이 반환이 되는지에 대해 더 주의를 기울여야 합니다.이런 수많은 코드를 해석할려고 하면 벌써부터 스트레스가 많아져서 담배피러갈거같네요..

자자 이제 등장합니다. 이코드를 한번 보세요!!

// 반환값을 예상할수 있나요??? 
const pikachu = (a: number, b: number): number => {
  return a + b;
}

이야...이제 여기서 타입스크립트가 등장합니다. TypeScirpt에는 정적 타이핑이 있습니다. 이 코드를 보면 함수 반환값에 형이 Number 라고 생각합니다. 회사에는 코드가 많고 복잡하기 때문에 코드를 이해하는데 매우 유용합니다.

따라서 과거에 누군가가 작성한 코드를 읽고 이해하는 데 많은 시간이 걸리기 때문에 더 읽기 쉬운 방법을 사용해야 합니다.

기본 TypeScirpt

기본 TypeScirpt 에는 String, Number, Bool, null 정의 되지 않는 등과 같은 기본 데이터 유형이 있습니다

이코드는 단순 데이터 유형의 코드입니다.

// string, number and boolean.
const caterpie01: number = 2021;    // OK
const caterpie02: number = false;   // NG

const Metapod01: string = "sleepy"; // OK
const Metapod02: string = true;     // NG

const Wartortle01: boolean = true;  // OK
const Wartortle02: boolean = 1111;  // NG
}

이와 같은 컴파일 오류가 발생합니다.

typescript.ts:10:7 - error TS2322: Type 'boolean' is not assignable to type 'number'.

10 const caterpie02: number = false;   // NG
         ~~~~~~~~~~

typescript.ts:13:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.

13 const Metapod02: string = true;     // NG
         ~~~~~~~~~

typescript.ts:16:7 - error TS2322: Type 'number' is not assignable to type 'boolean'.

16 const Wartortle02: boolean = 1111;  // NG
         ~~~~~~~~~~~

다음으로 null과 undefined 데이터 타입에 대해 생각해 보시기 바랍니다.

// null and undefined.
const Butterfree: null = null;
const ButterfreeNull: string = Butterfree;
console.log(ButterfreeNull) // null

const Kakuna: undefined = undefined;
const KakunaNull: string = Kakuna;
console.log(KakunaNull) //undefined

이 코드는 내 환경에서 작동합니다. 문자열 값에 null 및 정의되지 않은 값을 할당할 수 있습니다. 이 경우 strict mode 를 설정하지 않았습니다. strict mode를 true로 지정하면 이 코드는 다음과 같이 작동합니다.

typescript.ts:21:7 - error TS2322: Type 'null' is not assignable to type 'string'.

21 const ButterfreeNull: string = Butterfree;
         ~~~~~~~~~~~~~~

typescript.ts:25:7 - error TS2322: Type 'undefined' is not assignable to type 'string'.

25 const KakunaNull: string = Kakuna;

좋다! 유형 오류를 잡을 수 있습니다.

tsconfig.json 에서 strict mode를 설정하거나 --strict 와 같은 tsc 명령 인수를 사용할 수 있습니다 . TypeScript 환경을 설정하는 방법을 잘 모르겠다면 당연히 공홈가서 봐야죠~~(무조건 공홈가세요 그냥) 링크는 여기-> 타입스크립트 공홈

데이터 유형이란 무엇입니까?

TypeScript에는 모든 데이터 유형이 있습니다 . 모든 데이터 유형이 유형 오류 없이 작동할 수 있습니다. 이것은 바닐라 자바스크립트와 같습니다. 이 샘플 코드를 살펴보십시오.

// any data type
let pidgey: any = 1991;
console.log(typeof pidgey) // number

pidgey = "bird";
console.log(typeof pidgey) // string

pidgey = false;
console.log(typeof pidgey) // boolean

pidgey = null;
console.log(typeof pidgey) // object

pidgey = undefined;
console.log(typeof pidgey) // undefined

pidgey 변수는 모든 데이터 유형을 수신할 수 있습니다!

any 타입은 마법의 데이터 유형이에요.🙀 데이터 유형을 저렇게 사용하고 코드를 만들면 TypeScript 를 사용하는 의미가 없어지지요.. 완전 JavaScript 처럼 사용하는것입니다.

위의 샘플 코드를 아래 코드로 대체할 수 있습니다.

// any data type
const caterpie01: number = 2021;     // number
const caterpie001 = 2021;            // number  


const Metapod01: string = "sleepy";  // string
const Metapod001 = "sleepy";         // string   

const Wartortle01: boolean = true;   // boolean
const Wartortle001 = true;           // boolean 

이것은 더 읽기 쉽고 짧습니다. 물론 이 변수에 다른 데이터 유형을 할당할 수는 없습니다.

let caterpie001 = 2021;            // number
caterpie001 = "text";              // type error

반면에 함수에서 변수 데이터 유형을 정의하지 않으면 typescript는 데이터 유형을 any 로 판단합니다 . 이 코드를 확인하십시오.

const pikachu = (a, b): number => {
  return a + b;
}
pikachu(2021, 9);

(제 환경에서는 strict mode 를 true 해논상태입니다~~ strict mode false 면 컴파일에 성공하고 아무런 에러가 뜨지 않습니다)

typescript.ts:57:18 - error TS7006: Parameter 'a' implicitly has an 'any' type.

57 const pikachu = (a, b): number => {
                    ~

typescript.ts:57:21 - error TS7006: Parameter 'b' implicitly has an 'any' type.

57 const pikachu = (a, b): number => {

typescript는 수신되는 값을 추측할 수 없기 때문입니다. 따라서 모든 데이터 유형은 typescript에 의해 정의되었습니다. TypeScript에서 함수를 사용할 때, 이렇게 인자의 데이터 타입을 정의해야 합니다.(어려우시면 무조건 데이터는 타입이 있다고 생각하시면 됩니다)

const pikachu = (a: number, b: number): number => {
  return a + b;
}

또는

const pikachu = (a: number, b: number) => {
  return a + b;
}

Typescript 로 함수를 만들려면 . _특정 상황을 제외하고는 어떤 데이터 유형도 사용하지 않는 것이 좋습니다. 예를 들어 JavaScript에서 TypeScript로 코드를 마이그레이션합니다.

객체 데이터 유형

TypeScript는 인터페이스 로 객체 데이터 유형을 정의할 수 있습니다 . 처음에 이 코드를 보세요.

// 인터페이스로 객체 데이터 유형을 정의합니다.

interface PokemonObj {
  name: string,
  age: number,
  skill: string
}

// 객체에 데이터 유형 할당.
const pokemon: PokemonObj = {
  name: "pikachu",
  age: 6,
  skill: "Electric Shock!"
}

어때요?? 진짜 어려운게 하나도 없다니까요??? 맞는형에 맞춰서 데이터를 넣어준다 기깔나지요? 객체 데이터 유형을 생성하기 위해 인터페이스 구문을 사용할 수 있습니다 . 그런 다음 개체에 할당합니다. 객체의 데이터 유형을 변경하면 이와 같은 유형 오류가 발생합니다.

//  인터페이스로 객체 데이터 유형을 정의합니다.

interface PokemonObj{
  name: string,
  age: number,
  skill: string
}
// 객체에 데이터 유형 할당.

const pokemon: PokemonObj = {
  name: "pikachu",
  age: "change age",       // 변경된 부분 
  skill: "Electric Shock!"
}

이것은 유형 오류 메세지 입니다.

typescript.ts:75:3 - error TS2322: Type 'string' is not assignable to type 'number'.

75   age: "change age",
     ~~~
  typescript.ts:69:3
    69   age: number,
         ~~~
    The expected type comes from property 'age' which is declared here on type 'PokemonObj'

유형 오류가 발생합니다. 인터페이스 로 객체의 데이터 유형을 정의하는 것이 유용합니다 . 물론 이 코드처럼 데이터 타입을 직접 정의할 수도 있습니다.

// 데이터 할당을 직접 할수있다

const pokemon: {name: string, age: number, skill: string} = {
  name: "pikachu",
  age: 6,
  skill: "Electric Shock!"
}

하지만 이방법은 저 함수만 해당되는 거면 상관은 없지만 공통으로 쓰이는 부분이 있을거 같은면 무조건 인터페이스로 뺴야맞는거 같다.

배열 데이터 유형

데이터 유형이 있는 배열은 다음과 같습니다.

// 배열데이터 유형정의
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];

데이터 유형을 변경하면 유형 오류가 발생합니다.

// 배열 데이터 유형 변경
const pokemon: string[] = ["pikachu", "Raichu", false];

이것은 유형 오류 메시지입니다.

typescript.ts:80:49 - error TS2322: Type 'boolean' is not assignable to type 'string'.
80 const pokemon: string[] = ["pikachu", "Raichu", false];

이것은 각 배열 요소의 데이터 유형을 관리할 필요가 없기 때문에 매우 유용하고 강력합니다. 그런데 다른 표현 방법을 보여드리고 싶습니다. 위의 코드와 동일합니다. 이렇게 생겼습니다.

// defined array with another way.
const pokemon: Array<string> = ["pikachu", "Raichu", "Charizard"];

다음 데이터 유형으로 Generics 데이터 유형을 보여드리겠습니다. 이것은 일반적인 데이터 유형입니다. 제네릭 데이터 유형을 정의한 후 정의할 수 있습니다. 샘플 코드는 다음과 같습니다. (제네릭이 뭔지 모르는 분들은) 바로 알아봐야겠지요?? -> Generics 설명

// 제네릭 데이터 유형에 배열입니다.
type Pokemon<T> = T[];
// 정의된 제네릭 유형 후에는 특정 데이터 유형을 정의할 수 있습니다.
const pokemon: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];

// 위의 코드는 이것과 동일합니다.
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];

제네릭 데이터 유형으로 일부 데이터 유형을 정의할 수 있습니다. 이것은 좋은 샘플은 아니지만 제네릭 데이터 유형을 사용하는 방법을 쉽게 이해할 수 있습니다. 샘플은 이렇습니다.

// 제네릭 데이터 유형에 배열입니다.
type Pokemon<T> = T[];

// 정의된 제네릭 유형 후에는 특정 데이터를 유형을 재정의 할수 있습니다.

const pokemon01: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];

const pokemon02: Pokemon<number> = [6, 14, 16];

const pokemon03: Pokemon<boolean> = [true, true, false];

결론

TypeScript의 기본 데이터 유형을 작성했습니다. 이글은 TypeScirpt에 대한 기본적인 지식일 뿐입니다. 전 직장에서 JavaScript 만 사용하면 될줄 알았지만 TypeScript 를 배우고 나서 이좋은걸 왜 지금 이제서야 알았지 라는 생각이 너무 많이 들었습니다. TypeScript 에 장점은 어마어마 합니다.계속해서 찾아 보고 블로그를 쓸생각입니다. 잘못된게 있으면 댓글로 피드백 주세요. 저는 피드백 너무 좋아합니다. 어떠한 사람이든간에 시간써줘서 정말 감사합니다~

출저: https://dev.to/hiro9108/javascript-vs-typescript-why-we-should-learn-typescript-4d5o