민혁이의 IT스토리

지금까지 저는 배포할 때마다 번거로운 과정을 수동으로 반복하며 아까운 시간을 흘려보내곤 했습니다. 그러던 중 GitHub Actions를 사용하면 push만으로 배포가 가능하다는 것을 알게 되었고, 이를 바로 프로젝트에 적용해 보았습니다.현재 진행 중인 WebRTC 프로젝트의 설정을 바탕으로, GitHub Actions와 AWS EC2, PM2를 조합하여 코드 한 줄로 서버에 마법처럼 반영되는 CI/CD 파이프라인 구축 과정을 공유해 보겠습니다. 왜 자동 배포(CI/CD)가 필요한가요?개발을 하다 보면 코드 수정 후 배포를 위해 매번 반복적인 작업을 하게 됩니다.서버에 SSH 접속git pull 실행npm install 및 npm run build서비스 재시작이 과정은 시간이 아까울 뿐만 아니라, 피곤..

웹 서비스를 개발하다 보면 파일 업로드 기능은 필수적입니다. 하지만 사용자가 "폴더를 통째로" 드래그 앤 드롭했을 때, 그 내부의 계층 구조까지 유지하며 업로드하는 것은 생각보다 까다로운 작업입니다. HTML5의 비표준이지만 강력한 기능인 webkitGetAsEntry를 활용해, 리액트에서 폴더 구조를 유지하며 파일을 스캔하는 방법을 알아보겠습니다. 1. 왜 일반적인 업로드 방식으로는 안 될까?일반적인 이나 e.dataTransfer.files를 사용하면 두 가지 장벽에 부딪힙니다.폴더 인식 불가: 폴더를 드래그해도 브라우저에 따라 무시되거나 빈 파일로 취급됩니다.구조 정보 상실: 폴더 안의 파일들을 읽어오더라도, 그 파일이 어떤 하위 폴더에 속해 있었는지 알 수 있는 path 정보가 사라집니다.이를 ..

WebRTC를 사용하여 화상회의 서비스를 개발하다 보면 "연결(Connectivity)"에만 집중하게 됩니다. 제가 그랬거든요.하지만 영상이 잘 나오는 것만큼 중요한 것이 바로 "접근 제어(Access Control)"입니다. 단순히 https://myapp.com/room/1 같은 URL을 사용했다가는, 숫자를 바꿔서 남의 회의실에 들어가거나 URL이 유출되었을 때 아무나 난입하는 사태가 벌어질 수 있습니다 WebRTC 시그널링 단계에서 초대받지 않은 손님을 막아내는 3단계 보안 전략을 정리해 봅니다 1단계 : 예측 불가능한 방 만들기UUID (Universally Unique Identifier)방을 생성할 때 f47ac10b-58cc... 같은 난수화된 UUID를 사용해야 합니다. 이렇게 하면 공..

WebRTC란 무엇인가?웹 브라우저나 모바일 앱 간에 중간 서버를 거치지 않고 실시간으로 비디오, 오디오, 데이터를 직접 주고받을 수 있게 해주는 오픈소스 기술입니다. WebRTC의 핵심 특징 P2P (Peer-to-Peer): 클라이언트와 클라이언트가 직접 연결되어 데이터를 주고받습니다. 서버를 거치지 않으므로 지연 시간이 극도로 짧다.UDP 기반: 데이터의 무결성보다 속도가 중요한 실시간 스트리밍에 최적화된 UDP 프로토콜을 주로 사용한다.표준화: 구글, 애플, 마이크로소프트 등 주요 브라우저 엔진이 모두 지원한다. WebRTC은 3가지 방식이 있다. Mesh 방식 (P2P) : 각 사용자가 다른 모든 사용자에게 직접 데이터를 보내는 방식이다.장점: 서버 비용이 거의 없고 보안이 뛰어나다.단점: ..

SSG (Static Site Generation): 빠르고 효율적인 정적 페이지의 왕SSG는 세 가지 렌더링 방식 중 가장 빠르고 효율적인 방법입니다. 페이지의 내용을 빌드하는 시점에 미리 완성해 두고, 사용자의 요청이 들어오면 서버를 거치지 않고 캐시된 파일을 바로 전달합니다.주요 특징특징내용생성 시점빌드(Build) 시적합한 데이터정적이고 변화가 거의 없는 데이터 (회사 소개, 약관, FAQ, 제품 상세 페이지)핵심 원리빌드 시점에 HTML 파일을 생성하고 CDN(Content Delivery Network)에 배포 및 캐시 장점압도적인 속도: 사용자가 요청하면 CDN에서 즉시 정적 파일을 받아보므로 로딩 속도가 매우 빠릅니다.최소 서버 부하: 서버는 페이지 생성에 관여하지 않으므로 트래픽이 몰려도..

1. 기본 개념 및 실행 환경가장 큰 차이점은 코드가 실행되는 환경입니다.구분서버 컴포넌트 (Server Component)클라이언트 컴포넌트 (Client Component)실행 환경서버 (Node.js 런타임)클라이언트 (브라우저)기본 설정App Router의 기본값컴포넌트 최상단에 "use client"; 명시자바스크립트 번들클라이언트에 전송되지 않음 (JS 번들 크기 감소)클라이언트에 전송되고 실행됨 (상호작용 담당)렌더링 과정서버에서 HTML로 미리 렌더링되어 전송브라우저에서 HTML을 받은 후 하이드레이션(Hydration) 과정을 거쳐 상호작용 가능 2. 주요 역할 및 사용처각 컴포넌트 타입은 고유의 장점을 살려 애플리케이션의 특정 부분을 담당합니다.서버 컴포넌트 (Server Compon..

기본 타입 지정 (Basic Type Annotations)가장 기본적이지만 핵심적인 문법입니다. 변수, 함수 매개변수, 반환 값 등에 타입을 지정합니다.원시 타입: string, number, boolean배열: type[] 또는 Array어떤 타입이든 가능: any (사용을 지양하는 것이 좋습니다.)TypeScript const name: string = "Next.js";const count: number = 14;const isReady: boolean = true;const items: string[] = ["a", "b", "c"];2. 객체 타입 지정 (Interface & Type Aliases)React 컴포넌트의 Props나 복잡한 데이터 구조를 정의할 때 필수적으로 사용됩니다.인터페이..

CPU는 동시에 여러 스레드가 존재할 때, 어떤 스레드를 먼저 실행할지 결정하는 기준으로 ‘우선순위(priority)를 사용한다.즉, 우선순위가 높은 스레드일수록 더 빨리 CPU를 점유해 실행된다.스레드우선순위(Priority)순서Thread120thread2 실행이 끝나고 실행Thread240 먼저 실행 하지만 여러 스레드가 동시에 같은 자원(파일, 메모리 등)에 접근하려 하면 데이터의 일관성이 깨질 수 있다. 이를 방지하기 위해 사용하는 것이 락(lock)이다. 락은 하나의 자원에는 한 번에 하나의 스레드만 접근할 수 있도록 제어하는 역할을 한다. 정상 결과값int result = 0;thread1: thread2:result += 5; result += ..