전체 글 (237) 썸네일형 리스트형 System Design [ 공부 : Twitch System Design 분석] 1. 트위치란?실시간 게임 및 IRL(일상) 스트리밍 플랫폼.사용자는 방송 송출, 시청, 채팅 참여 가능.전 세계적으로 수천만 명이 실시간으로 콘텐츠를 소비.2. 트래픽 특성세계 최대 규모의 라이브 비디오 배포 시스템: 동시 시청자 수가 매우 많음.이벤트 중심의 트래픽 폭증 현상 발생.2022년 롤드컵 기준 최고조에 달했을 때 최대 510만명 동시 시청트래픽이 단시간 내 급변하는 특성 (버스트 현상).실시간 채팅 시스템하루에 100억 개 이상의 메시지를 전달3. 라이브 스트리밍 방식스트리머 송출 -> 인코딩 서버[데이터 센터(Ingest) → 인코딩(Transcode) → 복사(Repication)] → 분산 전송(Edge; CDN) -> 시청자의 재생.주로 HLS와 같은 HTTP 기반 스트리밍 프로토콜.. React [note: 컴포넌트 코드 순서 컨벤션] React 컴포넌트 코드 순서 컨벤션 고민회사 코드를 보다 보니 코드들이 항상 일정한 순서로 배치가 되면 보기가 편하고 리팩토링하기도 좋을것 같다는 생각이 들었다이런 체계적인 접근 방식은 코드를 읽고 이해하기 쉽게 만들고, 디버깅을 간소화하며, 개발자가 구성 요소의 특정 부분을 빠르게 찾아 업데이트할 수 있으므로 향후 수정도 용이해집니다그래서 상세한 순서와 왜 적절할지와 그 이유를 정리해 보았다순서 예시// 1. 'use client'등의 선언 (필요한 경우)// 2. import// 3. 타입 정의 (필요시 외부로 빼기)// 4. 컴포넌트 내부에서 사용하는 상수 (필요시 외부로 빼기)// 5. 컴포넌트 내부에서 사용하는 유틸 함수 (필요시 외부로 빼기)// 6. 메인 컴포넌트 정의// 7. 라우터 관련.. Github[info: Github SSH 연결 방법] 1. SSH 키 확인 및 생성SSH 키가 있는지 확인:출력된 목록에 id_rsa 또는 id_ed25519 같은 키가 있으면 이미 SSH 키가 생성된 상태입니다.없다면 새로 생성해야 합니다.ls -al ~/.sshSSH 키 생성:ssh-keygen -t ed25519 -C "your_email@example.com"ed25519 방식이 추천됩니다. (구형 시스템에서는 rsa 사용)이메일은 GitHub 계정 이메일로 설정합니다.경로는 기본값을 사용 (~/.ssh/id_ed25519)하고, 패스프레이즈는 선택입니다.2. SSH 키를 GitHub에 추가 및 SSH 에이전트 활성화SSH 키를 GitHub에 추가컴퓨터에 추가:eval "$(ssh-agent -s)" # SSH 에이전트 시작ssh-add ~/.ssh.. Web [Study: ARIA(Accessible Rich Internet Applications)란?] 웹 접근성을 높이는 ARIA란 무엇인가?웹사이트를 만들 때, 우리는 다양한 사용자들이 쉽게 접근할 수 있도록 고려해야 합니다. 특히 시각 장애인이나 기타 장애를 가진 사용자들이 보조 기술(스크린 리더 등)을 통해 원활하게 웹을 사용할 수 있도록 돕는 것이 중요합니다. 이를 위해 등장한 것이 ARIA(Accessible Rich Internet Applications) 입니다.ARIA란?ARIA는 W3C(Web Accessibility Initiative)에서 만든 기술 명세로, 웹 애플리케이션과 동적 콘텐츠의 접근성을 개선하는 것을 목표로 합니다. HTML, CSS, JavaScript로 만든 웹 애플리케이션의 요소들이 보조 기술에서도 올바르게 인식될 수 있도록 돕는 역할을 합니다.ARIA의 주요 개념A.. ERROR[ DB: 데드락(Deadlock)문제와 해결 방법 ] 데이터베이스 데드락(Deadlock) 문제와 해결 방법데이터베이스에서 여러 세션이 동시에 특정 테이블의 행을 갱신하려고 할 때 데드락(Deadlock) 문제가 발생할 수 있습니다. 이 글은 여러 케이스와 해결 방법에 대해서 정리해보았습니다상황 1: 동일 테이블의 특정 조건 Row 업데이트상황여러 세션에서 동일 테이블의 특정 조건에 해당하는 row를 update.이로 인해 데드락이 발생.원인index가 걸려있지 않은 특정 조건의 row를 탐색하기 위해 테이블에 shared lock을 먼저 획득하고 row를 찾음. 그 이후 updateA 세션과 B 세션이 각각 테이블에 shared lock을 걸고 데이터를 조회.이후 A 세션이 특정 row를 수정하려고 exclusive lock을 요청, B 세션의 share.. Git [명령어: Git 명령어 정리] Git 명령어 정리: 초보부터 고급까지 한 번에 배우기!Git은 소프트웨어 개발의 필수 도구로, 버전 관리를 도와줍니다. 처음 Git을 사용할 때는 기본 명령어로 작업을 시작하고, 이후 고급 명령어를 익히면서 점점 더 강력한 기능을 활용할 수 있습니다.이 글에서는 Git 기본 명령어부터 시작해 고급 명령어까지 단계적으로 정리했습니다.1. Git 기본 명령어1.1 초기 설정Git을 사용하기 전에 사용자 이름과 이메일 주소를 설정합니다. 이는 커밋을 기록할 때 누가 작업했는지 식별하는 데 사용됩니다.git config --global user.name "Your Name"git config --global user.email "your.email@example.com"1.2 저장소 초기화 또는 복제Git을 .. HTML [ DOM: DOM의 종류: Shadow DOM부터 Virtual DOM까지 DOM의 종류: Shadow DOM부터 Virtual DOM까지 정리안녕하세요! 오늘은 웹 개발자라면 알아야 할 DOM(Document Object Model)의 종류에 대해 이야기해 보겠습니다. DOM은 HTML 문서의 구조를 표현하는 객체 모델로, 브라우저와 JavaScript가 소통하는 핵심 역할을 합니다.특히 모던 웹 개발에서는 DOM의 다양한 변종들이 등장하면서 효율적인 개발 방법이 점점 더 중요해졌습니다. 대표적으로 많이 언급되는 Shadow DOM부터 Virtual DOM, 그리고 덜 알려진 DOM Fragment까지, 종류별로 살펴보겠습니다.1. Light DOM: 우리가 아는 일반적인 DOMLight DOM은 우리가 기본적으로 다루는 DOM입니다. HTML 문서를 읽고 렌더링하면 바로 이.. javascript [ 백엔드 프레임워크: Nest.js vs Express.js] Nest.js vs Express.js: 어떤 프레임워크를 선택해야 할까?Node.js 기반의 백엔드 개발을 시작하려는 개발자라면 Express.js와 Nest.js라는 두 가지 프레임워크를 고민하게 될 것입니다. 두 프레임워크는 각각의 강점과 약점이 있어, 프로젝트의 요구사항에 따라 선택이 달라질 수 있습니다. 이번 글에서는 Express.js와 Nest.js의 주요 특징, 장단점, 그리고 어떤 상황에 어떤 프레임워크가 적합한지 확인해 보겠습니다.1. Express.js란?Express.js는 Node.js 환경에서 가장 널리 사용되는 웹 프레임워크로, 빠르고 간단한 설정으로 웹 애플리케이션을 개발할 수 있습니다. 최소한의 코드로 서버를 실행할 수 있는 경량 프레임워크로, 자유도가 높아 개발자에게 많은.. 이전 1 2 3 4 ··· 30 다음
