할수있따

안녕하세요? 오늘은 저번 포스팅에 이어서 WEB-RTC 도전기를 마저 작성해보고자합니다.https://younghun123.tistory.com/12 [WEB-RTC] WEB-RTC Custom Hook 구현 도전기 - 1안녕하세요? 오늘은 NextJS에서 web-rtc를 사용하고 이를 커스텀 훅으로 구현했던 경험을 포스팅하겠습니다.저는 4학년에 한 학기를 휴학하며 하나은행에서 주관한 부트캠프를 수료했습니다. 부트younghun123.tistory.com 저번시간에는 시그널링 서버(SpringBoot)와 useRtc라는 커스텀 훅에 대해 설명했습니다. useRtc는 { startStream : () = >void, remoteStreams: MediaStream[]} 형태의 객체를 반환합니다. start..

안녕하세요? 오늘은 NextJS에서 web-rtc를 사용하고 이를 커스텀 훅으로 구현했던 경험을 포스팅하겠습니다.저는 4학년에 한 학기를 휴학하며 하나은행에서 주관한 부트캠프를 수료했습니다. 부트캠프의 1차 프로젝트는 비대면 은행 창구였습니다. 처음에 기술을 마주하고 관련 문서를 찾아보았을 때는 막막했습니다. 평소하던 API를 주고 받는 형식이 아닌 observer pattern 기반의 새로운 프로토콜이었습니다. 특히, 클라이언트 간의 실시간 스트리밍을 코드베이스에서 제어하는 과정이 쉽지 않았습니다. "클라이언트가 중계 서버로 서로 연결은 되었는데 왜 서로의 화면에서 영상은 안되는거지?"라는 질문의 연속이었고, offer, answer, icecandidate 로그들을 하나하나 찍어보며 Stream이 어..

안녕하세요? 오늘은 개인 포트폴리오 사이트의 성능 최적화 도전기를 작성해보겠습니다.성능의 지표는 구글 lighthouse를 기준으로 측정했습니다. lighthouse 성능 측정 지표1. 성능웹사이트가 얼마나 빠르고 효율적으로 작동하는지를 평가합니다. 주요 측정 항목은 다음과 같습니다:First Contentful Paint (FCP): 화면에 처음으로 어떤 콘텐츠가 나타나는 시간Largest Contentful Paint (LCP): 주요 콘텐츠(예: 큰 이미지나 텍스트 블록)가 로딩 완료되는 시간Time to Interactive (TTI): 사용자가 페이지와 완전히 상호작용할 수 있게 되는 시간Speed Index: 콘텐츠가 시각적으로 얼마나 빠르게 로딩되는지를 평가Total Blocking Time..

본 포스팅에서는 Nest JS 애플리케이션 이미지를 빌드해서 AWS EC2에 배포하는 과정만을 설명합니다.안녕하세요? 오늘은 이전 시간에 이어서 next js 애플리케이션을 클라우드 서버에 배포하는 과정을 작성하려합니다. 저번 포스팅에서는 next js 애플리케이션을 클라우드 서버에 배포할 준비를 마쳤습니다. 애플리케이션을 도커 이미지로 만들어 도커 허브에 푸시하고, 컨테이너가 구동될 환경을 docker-compose에 정의했습니다.https://younghun123.tistory.com/9 [Next JS] Next JS 배포하자! - 1 (feat Docker, AWS EC2)본 포스팅에서는 Nest JS 애플리케이션 이미지를 빌드해서 AWS EC2에 배포하는 과정만을 설명합니다.안녕하세요? 오늘은 ..

본 포스팅에서는 Nest JS 애플리케이션 이미지를 빌드해서 AWS EC2에 배포하는 과정만을 설명합니다.안녕하세요? 오늘은 next js 애플리케이션을 배포하는 과정에대해 포스팅 해보려합니다.간단하게 Vercel을 사용하면 되지 않나요? AWS EC2 인스턴스를 사용하는 이유 !1. 자유도Vercel의 가장 큰 장점 중 하나는 편리함입니다! 배포 속도, 자동화된 빌드, GitHub 연동 등 사용자 친화적인 기능들이 잘 갖춰져 있습니다.하지만 이러한 편리함은 곧 "추상화 수준이 높다"는 뜻이기도 합니다. 추상화가 높아지면 내부의 세세한 구성 요소들을 직접 제어하기 어려워지고, 자유도 측면에서 제약을 받을 수 있습니다. 예를 들어, Next.js의 server.js나 custom server, 미들웨어를 ..

적극적으로 서버 컴포넌트를 활용하자! https://younghun123.tistory.com/3 - 서버컴포넌트는 어떻게 사용해야 할까? 안녕하세요! 저번 포스팅에서는 서버 컴포넌트를 어떻게 활용해야 하는지에 대해서 고민했습니다.서버 컴포넌트는 waterfall 방식으로 동작하기 때문에 사용자와 복잡하게 상호작용하는 UI를 만들기 어렵습니다. 그렇다면, 어떻게 컴포넌트를 디자인해야할까요? 필자는 보통 세가지의 원칙을 가지고 컴포넌트를 디자인합니다.1. 비즈니스와 뷰의 관심사 분리2. 컴포넌트 분리3. 클린 아키텍처에 대한 고민첫번째, 비즈니스와 뷰의 관심사를 분리할 수 있습니다.프론트엔드 애플케이션에서 분리할 수 있는 관심사는 크게 Business와 View입니다. View 계층에서는 오로지 데이터를 ..

서버 컴포넌트는 어떻게 사용해야 할까?https://younghun123.tistory.com/2 - 서버 컴포넌트란? 안녕하세요! 지난 포스트에서는 서버 컴포넌트가 무엇인지 알아봤습니다!서버 컴포넌트는 서버에서 "완성된 HTML"을 보내고 브라우저에서 JS 번들을 다운받지 않습니다.[React Client Component 와 React Server Component]그림에서도 알 수 있듯이 (서버컴포넌트에서)한번 화면에 HTML을 보여주면 JS번들 다운을 받지 않기 때문에 Create, Update, Delete 로직은 수행할 수 있다는 한계가 있습니다. CQRS사용자에게 조금이라도 쾌적한 서비스를 제공하고 싶다면, 서버 컴포넌트의 사용을 고민할텐데요."어떤 컴포넌트"를 서버 컴포넌트로 만들어야 할지..

리액트 서버 컴포넌트(React Server Component)란?서버 컴포넌트는 번들링 전에 클라이언트 앱이나 SSR 서버와 분리된 환경에서 미리 렌더링되는 새로운 유형의 컴포넌트입니다.출처: https://ko.react.dev/reference/rsc/server-components 프론트엔드 개발자가 서버 컴포넌트를 적극적으로 사용해야 하는이유1. 빠릅니다리액트는 현재 프론트엔드 개발자들이 가장 많이 사용하는 라이브러리입니다.함수형 프로그래밍 지원 및  리액트 hook 등의 다양한 기능으로 리액트는 많은 사랑을 받고있습니다.하지만 리액트가 가진 큰 단점은 렌더링 속도 문제였습니다. 리액트 팀은 렌더링 속도 문제를 계속 고민했고, 이를 해결하기 위해 서버 컴포넌트를 출시했습니다. 2. Next JS..