전체 글29 [Network] 소켓 목차- 소켓은 통신에 필요한 데이터를 담는 파일이다!- TCP socket 동작 방식 - UDP socket 동작 방식 1. 소켓은 통신에 필요한 데이터를 담는 파일이다!1.1. L4(전송 계층)와 포트 번호전송 계층(L4)는 네트워크 계층(L3)에서 전송된 데이터를 애플리케이션 계층으로 전달하는 역할을 한다. 여기서 포트 번호를 통해 송신지와 수신지의 특정 애플리케이션을 식별한다. 즉, 포트 번호는 애플리케이션에서 동작하는 부분과 시스템 레벨에서 동작하는 부분을 연결해주는 중요한 역할을 한다. TCP나 UDP 프로토콜은 패킷의 헤더에 포함된 포트 번호를 통해 송신자와 수신자의 애플리케이션을 구분하여 네트워크 상의 데이터를 올바른 애플리케이션에 전달하게 된다. 1.2. 소켓과 애플리케이션 - 시스템.. 2024. 9. 6. 폴라보는 이미지를 이렇게 최적화합니다. 서비스 소개 폴라보는 DDD 웹 1팀에서 진행하고 있는 프로젝트로, 친구 혹은 연인들끼리 "보드"를 만들어 폴라로이드를 붙이면서 보드를 꾸미고 추억을 공유하는 서비스입니다. 제가 이미지 관련된 기능 개발을 담당하게 되면서, 어떤 식으로 이미지를 최적화했는지 소개해보려고 합니다. 이미지 압축을 통한 로딩 시간 개선1. browser-image-compression압축 없이 이미지를 업로드하면서 보드에서 폴라로이드 사진을 로딩하는 시간이 너무 오래 걸리는 문제가 있었습니다. 이를 해결하기 위해 S3에 이미지를 업로드하기 전에 먼저 압축하는 방법을 선택했고, 이 과정에서 browser-image-compression이라는 라이브러리를 사용했습니다.const file = event.target.files[0].. 2024. 8. 28. Module System 목차1. JavaScript 모듈이 왜 등장했을까2. 모듈 시스템의 발전 흐름 (CommonJS > AMD -> UMD -> ESM)3. 마치면서.. (다음 글 예고) 1. JavaScript 모듈이 왜 등장했을까 모듈이 왜 등장했는지부터 알아보자. 그러려면 초창기 JavaScript가 어떤 식으로 사용되었는지부터 알아야 한다. 초기에는 작은 규모의 스크립트만 작성했기 때문에 전역 스코프가 기본적으로 적용되었다. 모든 변수와 함수는 기본적으로 전역 공간에 저장되었고, 이에 따라 서로 다른 스크립트에서 같은 이름의 변수나 함수를 정의하게 되면, 하나가 다른 것을 덮어쓰는 문제가 발생했다. 그러다 보니 유지보수가 심각하게 어려워졌다. 나도 vanilla js로 개발한 첫 프로젝트에서 같은 문제를 맞닥뜨린 .. 2024. 8. 20. [Network] 네트워크 계층 (L3): 멀리 있는 컴퓨터와의 연결 목차- LAN을 넘어선 통신- L3의 프로토콜- 라우팅 테이블 및 전송 과정 1. LAN을 넘어선 통신1.1. 네트워크 계층물리 계층(L1), 데이터 링크 계층(L2)은 주로 LAN 내에서의 통신을 담당한다. 즉, 주로 같은 네트워크 세그먼트 또는 같은 물리적 네트워크 내에서의 통신을 처리한다. L2에서는 MAC 주소를 사용하여 같은 네트워크 내에서 기기 간의 통신이 이루어진다. 여러 네트워크 간에 통신하기 위해서는 L1, L2만으로는 부족하다. 여러 네트워크에 속한 모든 호스트의 MAC 주소를 파악하는 것은 너무나 어려운 일이기 때문이다. 그래서 더 먼 거리의 통신을 위해서는 네트워크 계층(L3)에서의 라우팅 과정이 필요하다. 라우터가 라우팅 테이블과 IP 주소를 사용하여 목적지까지의 최적의 경로를 .. 2024. 8. 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. 8. 7. [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. 7. 31. 이전 1 2 3 4 5 다음
