할수있따

안녕하세요? 오늘은 저번 포스팅에 이어서 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, 미들웨어를 ..

본 글은 "객체지향의 사실과 오해"를 읽고 작성하는 독후감입니다. 객체 지향의 사실과 오해 - 1,2,3장 요약 포스팅https://younghun123.tistory.com/7 [객체지향] 객체지향의 사실과 오해 - 1본 글은 "객체지향의 사실과 오해"를 읽고 작성하는 독후감입니다. 안녕하세요? 이번 포스팅에서는 객체지향의 사실과 오해라는 책을 읽고 요약한 내용을 공유하고, 읽으면서 들었던 고민을 나younghun123.tistory.com 제 4장: 협력, 책임, 역할객체지향 패러다임에서, 설계자는 적절한 객체에게 적절한 책임을 할당합니다. 그리고 객체는 각자 책임을 갖고 역할이라는 개념으로 추상화 하며, 서로를 식별합니다. 자신이 하지 않는 일은 다른 객체에게 위임하는 책임 메세지를 주고 받으며 협..

본 글은 "객체지향의 사실과 오해"를 읽고 작성하는 독후감입니다. 안녕하세요? 이번 포스팅에서는 객체지향의 사실과 오해라는 책을 읽고 요약한 내용을 공유하고, 읽으면서 들었던 고민을 나눠볼까 합니다.사실 이 책을 읽고 정리한 지 꽤 되었습니다. 최근 블로그 포스팅으로 고민을 노출해야겠다고 결심하고 가장 먼저 작성하고 싶었던 독후감입니다. 해당 서적은 코드를 설명하지 않습니다. 하지만 개발 패러다임에서 가장 영향력 있는 객체지향 원칙의 본질에 대해 알기 쉽게 설명합니다. 그런 의미에서 개발을 시작하는 사람에게 너무나도 추천하는 도서입니다. “객체지향 설계자로서 우리의 목적은 현실을 모방하는 것이 아니다. 단지 이상한 나라를 창조하기만 하면 된다. 현실을 닮아야 한다는 어떤 제약이나 구속도 없다” - 객체 ..

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

본 글은 "이펙티브 타입스크립트"를 읽고 작성하는 독후감입니다. https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01 Turbo 8 is dropping TypeScriptBy all accounts, TypeScript has been a big success for Microsoft. I've seen loads of people sparkle with joy from dousing JavaScript with explicit types that can be checked by a compiler. But I've never been a fan. Not after giving it five minutes, not aftworld.hey...

타입을 설계하는 이정표에 대해서프론트엔드와 백엔드의 관점에서 이야기하는 것이 아닌, 실제 세계의 객체를 어떻게 소프트웨어 세계에서 재창조하면 좋을지에 대한 고민입니다. 재창조된 객체는 데이터베이스, 애플리케이션의 도메인 모델, API Response 등 다양한 형태로 쓰일 수 있습니다. 그렇다면 개발자는 어떤 기준으로 객체를 설계해야할까요?첫번째, 가능한 구체적인 타입을 사용해 객체를 완성합니다.1. string 보다는 상수 표현과 같은 구체적인 타입이 생산성을 높입니다. 아래와 같은 인터페이스는 타입이 어떤 속성을 가질 지 신경 쓴 흔적은 보이지만, 해당 속성이 무엇일지는 고민하지 않았습니다. 그 결과 속성은 이름만 가진 빈 껍데기처럼 보입니다. 어떠한 값이 들어올 수 있다는 점에서 any와 다를 바가..