Recent
-
[Network] 소켓
목차- 소켓은 통신에 필요한 데이터를 담는 파일이다!- TCP socket 동작 방식 - UDP socket 동작 방식 1. 소켓은 통신에 필요한 데이터를 담는 파일이다!1.1. L4(전송 계층)와 포트 번호전송 계층(L4)는 네트워크 계층(L3)에서 전송된 데이터를 애플리케이션 계층으로 전달하는 역할을 한다. 여기서 포트 번호를 통해 송신지와 수신지의 특정 애플리케이션을 식별한다. 즉, 포트 번호는 애플리케이션에서 동작하는 부분과 시스템 레벨에서 동작하는 부분을 연결해주는 중요한 역할을 한다. TCP나 UDP 프로토콜은 패킷의 헤더에 포함된 포트 번호를 통해 송신자와 수신자의 애플리케이션을 구분하여 네트워크 상의 데이터를 올바른 애플리케이션에 전달하게 된다. 1.2. 소켓과 애플리케이션 - 시스템..
2024.09.06
-
폴라보는 이미지를 이렇게 최적화합니다.
서비스 소개 폴라보는 DDD 웹 1팀에서 진행하고 있는 프로젝트로, 친구 혹은 연인들끼리 "보드"를 만들어 폴라로이드를 붙이면서 보드를 꾸미고 추억을 공유하는 서비스입니다. 제가 이미지 관련된 기능 개발을 담당하게 되면서, 어떤 식으로 이미지를 최적화했는지 소개해보려고 합니다. 이미지 압축을 통한 로딩 시간 개선1. browser-image-compression압축 없이 이미지를 업로드하면서 보드에서 폴라로이드 사진을 로딩하는 시간이 너무 오래 걸리는 문제가 있었습니다. 이를 해결하기 위해 S3에 이미지를 업로드하기 전에 먼저 압축하는 방법을 선택했고, 이 과정에서 browser-image-compression이라는 라이브러리를 사용했습니다.const file = event.target.files[0]..
2024.08.28
-
Module System
목차1. JavaScript 모듈이 왜 등장했을까2. 모듈 시스템의 발전 흐름 (CommonJS > AMD -> UMD -> ESM)3. 마치면서.. (다음 글 예고) 1. JavaScript 모듈이 왜 등장했을까 모듈이 왜 등장했는지부터 알아보자. 그러려면 초창기 JavaScript가 어떤 식으로 사용되었는지부터 알아야 한다. 초기에는 작은 규모의 스크립트만 작성했기 때문에 전역 스코프가 기본적으로 적용되었다. 모든 변수와 함수는 기본적으로 전역 공간에 저장되었고, 이에 따라 서로 다른 스크립트에서 같은 이름의 변수나 함수를 정의하게 되면, 하나가 다른 것을 덮어쓰는 문제가 발생했다. 그러다 보니 유지보수가 심각하게 어려워졌다. 나도 vanilla js로 개발한 첫 프로젝트에서 같은 문제를 맞닥뜨린 ..
2024.08.20
-
[Network] 네트워크 계층 (L3): 멀리 있는 컴퓨터와의 연결
목차- LAN을 넘어선 통신- L3의 프로토콜- 라우팅 테이블 및 전송 과정 1. LAN을 넘어선 통신1.1. 네트워크 계층물리 계층(L1), 데이터 링크 계층(L2)은 주로 LAN 내에서의 통신을 담당한다. 즉, 주로 같은 네트워크 세그먼트 또는 같은 물리적 네트워크 내에서의 통신을 처리한다. L2에서는 MAC 주소를 사용하여 같은 네트워크 내에서 기기 간의 통신이 이루어진다. 여러 네트워크 간에 통신하기 위해서는 L1, L2만으로는 부족하다. 여러 네트워크에 속한 모든 호스트의 MAC 주소를 파악하는 것은 너무나 어려운 일이기 때문이다. 그래서 더 먼 거리의 통신을 위해서는 네트워크 계층(L3)에서의 라우팅 과정이 필요하다. 라우터가 라우팅 테이블과 IP 주소를 사용하여 목적지까지의 최적의 경로를 ..
2024.08.19
-
정렬 알고리즘의 성능 비교와 상황별 선택 기준
목차1. Properties to Compare2. 정렬 알고리즘들의 성능 비교3. 특정 상황에서의 정렬 알고리즘 선택 기준 1. Properties to Compare성능을 비교하기에 앞서 고려해야 할 속성들에 대해 간단히 알아보자. ① Time Complexity Comparison- Best: 가장 효율적으로 동작할 경우의 시간 복잡도- Average: 일반적인 경우의 시간 복잡도- Worst: 최악의 경우의 시간 복잡도 ② Auxiliary Space Complexity Comparison (보조 공간 복잡도)알고리즘이 추가로 필요한 메모리 공간을 의미한다. 예를 들어, In-Place 알고리즘(ex. quick, heap)은 추가적인 공간이 거의 필요하지 않고 입력 데이터 자체를 사용해 정렬을..
2024.08.07
-
[WebSocket] 비정상 종료 핸들링 전략
의도적으로 연결을 끊는 상황을 제외하고 비정상적으로 웹소켓 연결이 끊어졌을 때 재연결하는 로직이 없다면 사용자 경험에 치명적일 것이다. 대략적인 class 구조는 다음과 같으며, 하나씩 채워보자. c.f) secondary token 관련해서는 다음 글을 참고하자 => https://hwanheejung.tistory.com/43 import SockJS from 'sockjs-client'; import { Client, StompSubscription } from '@stomp/stompjs'; class WebSocketClient { constructor(url) { this.url = url; this.client = null; // 추가 } async getSecondaryToken() { /..
2024.07.31
-
[WebRTC] 다대다 화상회의: OpenVidu를 도입하기까지의 자료조사
목차- Short Review- 1:1 통신- 그럼 다대다 화상회의는?- Kurento- Openvidu - 디스코드 클론코딩 1. Short Review - 1:1 통신지난번엔 WebRTC로 1:1 화상회의가 구현되는 flow를 정리해 봤다. 간단하게 복습해 보자. WebRTC: 화상 회의를 구현하는 방법목차- 프롤로그- WebRTC의 동작 원리- Signaling Flow - 마치면서 1. 프롤로그채팅을 구현하기 위해서는 지속적인 연결을 유지하는 웹소켓을 사용한다. 웹소켓에서는 A가 B에게 채팅을 보낼 때 두 사hwanheejung.tistory.com 1.1. 연결이 수립되기까지의 Flow크게 SDP Offer/Answer 과정과 ICE Candidate 교환 과정으로 나눌 수 있다. 이 두 과정..
2024.07.21
디스코드 클론코딩👾
-
[WebSocket] 비정상 종료 핸들링 전략
의도적으로 연결을 끊는 상황을 제외하고 비정상적으로 웹소켓 연결이 끊어졌을 때 재연결하는 로직이 없다면 사용자 경험에 치명적일 것이다. 대략적인 class 구조는 다음과 같으며, 하나씩 채워보자. c.f) secondary token 관련해서는 다음 글을 참고하자 => https://hwanheejung.tistory.com/43 import SockJS from 'sockjs-client'; import { Client, StompSubscription } from '@stomp/stompjs'; class WebSocketClient { constructor(url) { this.url = url; this.client = null; // 추가 } async getSecondaryToken() { /..
2024.07.31
-
[WebRTC] 다대다 화상회의: OpenVidu를 도입하기까지의 자료조사
목차- Short Review- 1:1 통신- 그럼 다대다 화상회의는?- Kurento- Openvidu - 디스코드 클론코딩 1. Short Review - 1:1 통신지난번엔 WebRTC로 1:1 화상회의가 구현되는 flow를 정리해 봤다. 간단하게 복습해 보자. WebRTC: 화상 회의를 구현하는 방법목차- 프롤로그- WebRTC의 동작 원리- Signaling Flow - 마치면서 1. 프롤로그채팅을 구현하기 위해서는 지속적인 연결을 유지하는 웹소켓을 사용한다. 웹소켓에서는 A가 B에게 채팅을 보낼 때 두 사hwanheejung.tistory.com 1.1. 연결이 수립되기까지의 Flow크게 SDP Offer/Answer 과정과 ICE Candidate 교환 과정으로 나눌 수 있다. 이 두 과정..
2024.07.21
-
[WebRTC] 화상 회의를 구현하는 방법 (1:1)
목차- 프롤로그- WebRTC의 동작 원리- Signaling Flow - 마치면서 1. 프롤로그채팅을 구현하기 위해서는 지속적인 연결을 유지하는 웹소켓을 사용한다. 웹소켓에서는 A가 B에게 채팅을 보낼 때 두 사용자가 직접 연결되어 있는 것이 아니라 서버의 중개를 통해 대화를 나누게 된다. 그러니까 A가 채팅을 보내면, 서버로 전송되고, 서버는 해당 채팅방을 구독하고 있는 사용자들에게 메시지를 보내주는 것이다. 이 방식은 클라이언트의 수가 늘어날수록 서버에게 큰 부담이 된다. 간단한 텍스트를 보낼 때는 오버헤드가 작을 수도 있지만, 주고받는 데이터가 영상이나 오디오처럼 용량이 크다면 서버의 부담이 엄청날 것이다. WebRTC(Web Real-Time Communication)는 서버의 중개 없이 클..
2024.07.05
-
[DizzyCode] WebSocket+JWT 시나리오
채팅방에 들어와서 채팅을 한다고 가정해 보자. jwt 토큰을 검사해야 하는 시점은 ①웹소켓으로 업그레이드할 때, ②STOMP 연결할 때, ③메시지를 전송할 때 등등이다. 2, 3은 별로 문제가 되지 않는데, 1번에서 문제가 생긴다. 어떤 문제인지 알아보고, 최적의 시나리오를 짜보자! 1. 웹소켓 업그레이드 시 무엇이 문제인지 보려면 우선 웹소켓 업그레이드 과정을 이해해야 한다. ① 초기 HTTP 요청: WebSocket 연결은 초기 HTTP GET 요청을 통해 시작되며, 이 요청은 WebSocket 프로토콜로 업그레이드할 것을 요청하는 Upgrade 헤더와 함께 전송된다. GET /ws HTTP/1.1Host: localhost:8080Upgrade: websocketConnection: Upgrad..
2024.05.29
-
[Network] Web Socket
목차0. 프롤로그1. 다양한 통신 방법2. WebSocket 통신 원리 3. HTTP vs WebSocket4. WebSocket의 한계와 해결 방법 0. 프롤로그지금까지 프로젝트를 하면서 사용했던 통신은 클라이언트가 먼저 요청을 보내면 서버가 응답을 보내주는 방식이었다. 이 말은, 서버는 클라이언트가 먼저 말을 걸어주지 않으면(요청이 없으면) 선톡을 할 수 없다는 의미이다. 이를 반이중 통신(half duplex communication)이라고 한다.채팅, 주식과 같이 데이터가 실시간으로 바뀌는 기능. 노션이나 피그마에서 팀원의 마우스가 화면에 보이는 기능은? 이와 같은 실시간 통신을 구현하기 위해 전통적인 HTTP 통신을 선택했다가는 뭐 가능이야 하겠지만 조금만 생각해 봐도 명확한 한계가 보인다. 클..
2024.05.24
