네트워크 트래픽을 여러 서버로 고르게 분산시켜 서버에 과부하가 걸리는 것을 방지하고, 서비스의 가용성과 성능을 최적화하는 기술입니다. 이를 통해 시스템의 효율성과 안정성을 높이며, 사용자가 빠르고 안정적인 응답을 받을 수 있도록 돕습니다. 로드 밸런싱의 주요 목적고가용성: 여러 서버에 요청을 분산시켜 단일 서버 장애 시에도 시스템을 안정적으로 운영할 수 있도록 합니다.성능 향상: 트래픽을 효율적으로 분산하여 시스템의 응답 속도를 높이고, 처리 능력을 향상합니다.확장성: 시스템에 서버를 추가해 부하를 분산함으로써 확장성을 높이고, 성능 저하 없이 더 많은 요청을 처리할 수 있습니다.로드 밸런싱의 주요 방식DNS 로드 밸런싱: DNS 서버에서 요청을 여러 IP로 분산하여 트래픽을 분산합니다.L4 (Layer..

TCP의 특징연결 지향적 프로토콜: 데이터 전송 전에 수신 측과 연결을 설정(3-way handshake)한 후 데이터를 전송합니다.신뢰성: 전송 중 손실된 패킷이 있으면 재전송을 통해 복구하고, 패킷의 순서를 보장해 전송합니다.흐름 및 혼잡 제어: 네트워크의 상태와 수신자의 처리 능력을 고려해 전송 속도를 조절해 줍니다.오버헤드가 큼: 연결 설정, 패킷 순서 보장, 오류 제어 등을 위한 부가 작업이 많아 상대적으로 전송 속도가 느리고, 헤더 크기가 큽니다(20-60바이트).UDP의 특징비연결형 프로토콜: 데이터를 전송하기 전에 연결 설정 과정이 없어, 바로 전송이 가능합니다.신뢰성이 낮음: 패킷이 손실되거나 순서가 뒤바뀔 수 있으며, 이를 복구하지 않고 그대로 전송합니다.오버헤드가 적음: 추가적인 제어..

OSI 7 계층 :  컴퓨터 네트워크에서 시스템 간의 상호 연결을 표준화하기 위해 ISO(국제표준화기구)에서 제정한 모델OSI 7 계층의 구조 및 역할물리 계층 (Physical Layer)역할: 실제 하드웨어 장치 간의 데이터 전송을 담당합니다. 전송 매체, 신호 형태, 전압 등을 정의하며, 전기적 신호로 데이터가 이동하는 방식을 다룹니다.전송단위: 비트예: 케이블, 허브, 리피터 등데이터 링크 계층 (Data Link Layer)역할: 물리 계층을 통해 전송되는 데이터를 프레임으로 변환하여 전송하며, 오류 감지 및 수정, 흐름 제어를 담당합니다. 네트워크 기기 간 신뢰성 있는 데이터 전송을 지원합니다.전송단위: 프레임예: 스위치, 브리지, MAC 주소네트워크 계층 (Network Layer)역할: 데..

const [maxDetailFontSize, setDetailMaxFontSize] = useState(12); const [minDetailFontSize, setDetailMinFontSize] = useState(5); const [windowWidth, setWindowWidth] = useState(window.innerWidth); AutoTextSize mode='oneline' maxFontSizePx={maxDetailFontSize} minFontSizePx={minDetailFontSize} key={windowWidth} // key 속성을 통해 강제로 리렌더링 유도 > {time}{t('atTime')} span style={{color:'#00FF62'}}>{name}sp..

다국어 지원 기능을 React 프로젝트에 추가하려면, 일반적으로 i18n(국제화)을 위한 라이브러리인 react-i18next를 사용합니다. 이를 통해 번역 파일을 관리하고, 여러 언어로 텍스트를 쉽게 변경할 수 있습니다. 아래는 다국어 지원을 위해 react-i18next를 설정하고 사용하는 방법입니다.1. 필요한 패키지 설치우선, 다국어 지원을 위해 필요한 패키지들을 설치해야 합니다.npm install i18next react-i18next i18next-browser-languagedetector2. i18next 설정 파일 생성i18n.js 파일을 생성하여 다국어 지원을 설정합니다. 여기서 번역 리소스를 정의하고, 브라우저 언어 감지 등을 설정할 수 있습니다.// src/i18n.jsimport..

position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:1. static (기본값)의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.2. relative의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.사용 예: 작은 위치 조정이 필요할 ..

로컬 저장소를 GitHub와 연동하는 방법을 단계별로 안내해 드리겠습니다. 이 과정을 통해 로컬에서 작업한 내용을 GitHub 저장소에 푸시할 수 있게 됩니다. 아래의 단계를 따라 주세요.1. Git 초기화 및 설정먼저, 로컬 저장소에서 Git을 설정하고 연동을 시작합니다.Git 설치 확인: Git이 설치되어 있는지 확인합니다. 터미널 또는 명령 프롬프트에서 다음 명령어를 입력하세요.설치되어 있지 않다면 Git 공식 사이트에서 설치할 수 있습니다깃 버전 확인:git --version3. Git 초기화: 로컬 프로젝트 폴더로 이동한 후, Git 저장소를 초기화합니다. cd /path/to/your/project git init4. 사용자 정보 설정: Git에서 사용할 사용자 이름과 이메일을 설정합니다.gi..

1.1 Context 설정하기import React, { createContext, useState, useContext, ReactNode } from 'react';// NotificationContext 생성interface NotificationContextType { hasNoti: boolean; setHasNoti: (value: boolean) => void;}const NotificationContext = createContext(undefined);interface NotificationProviderProps { children: ReactNode; // children 타입을 명시적으로 정의}// NotificationProvider 컴포넌트export const Notifi..

이번 'MK-Blog' 를 개발하면서 글 작성 / 수정 하는 페이지에 ReactQuill을 넣었습니다.해당 툴에다가 이미지들을 넣으면 이미지 태그의 src 가 한없이 깁니다. 서버에 전송할 때, 길이 제한때문에 전송 실패할 확률이 큽니다. 그래서 저는 src 를 image_1, image_2 이런식으로 보내기로 했습니다. (저희는 이미지파일만을 또 추출하여 서버에 전송하기 때문에 가능한 방법이었습니다!! 잘 알아보셔야 합니다) /** * content 영역의 img 태그들을 모두 가져와서 src를 image_${index + 1}로 변경하는 작업 */ let newContent = ''; const quillEditor = quillRef.current?.getEditor()..