본문 바로가기

분류 전체보기

 (239)
React [Info Server Components와 Client Components] 1. React Server Components의 등장 배경클라이언트 중심 렌더링은 초기에는 간단하고 직관적이었습니다. 그러나 앱이 커지고 복잡해지면서, 초기 로드 성능 저하, 번들 크기 증가, 보안 이슈가 반복적으로 문제로 떠올랐습니다. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)이 등장했지만, 결국 모든 자바스크립트를 클라이언트로 전송한다는 점은 여전히 해결되지 않았습니다.React 팀은 이러한 구조적 한계를 개선하기 위해 React Server Components(RSC) 를 도입했습니다. 이는 "클라이언트로 굳이 보낼 필요 없는 컴포넌트는 서버에 두자"는 철학에서 출발했습니다.2. Server Component의 구조와 동작 방식Server Component는 클라이언트가 아닌 서버에..
네트워크 [Study: 인터넷 주소를 입력하면 일어나는 일들] 무언가를 검색하기 위한 사이트를 들어가는 주소를 치면 무슨일이 생기는 지 알아보려고 합니다. 요약캐시 체크DNS에서 IP 획득TCP/IP 프로토콜을 통해 서버와 연결보안 (Firewall, https, TLS)웹 서버 (Load balancer, 서버)렌더링(브라우저 렌더링 파이프 라인)1. 캐시 채크브라우저에 인터넷 주소(google.com 등)를 치면 일단 여러 캐시들이 있는지 여부를 확인합니다.캐시들이 있는 이유는, 속도 빠르게 하고 서버에 부하를 줄이기 위해서 필요합니다.a. 브라우저 캐시그 첫번째로, 브라우져 캐시가 있는데 기존에 google.com을 방문했다면, 구글에 빠르게 접근할 수 있는 내용들이 들어 있습니다.b. OS 캐시두번째로, 첫번째에서 찾을 수 없었다면, OS캐시를 찾아보게됩니다..
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을 ..

티스토리툴바