할수있따

필자는 오픈소스를 활용해 기업에게 솔루션을 제공하는 벤처 회사에 재직중인 프론트엔드 개발자입니다.현재는 LLM을 활용한 B2B 애플리케이션 서비스 개발에서 프론트엔드 개발을 담당하고 있습니다. 저희 팀은 Next JS 프레임워크를 사용하여 프론트엔드 애플리케이션을 개발하고 있습니다. 저는 실무와 사이드 프로젝트에서 Next.js를 활용해 개발하며 얻은 경험을 바탕으로, Next.js가 프레임워크로서 개발자에게 어떤 개발 경험을 제공하는지 고민하고 정리해보았습니다.NextJS는 왜 프레임워크일까?React는 라이브러리 레벨이고, Next JS는 프레임워크 레벨입니다. 그렇다면 이 둘을 구분짓는 경계는 무엇일까요?https://github.com/reactjs/react.dev/pull/5487 Replac..

안녕하세요? 오늘은 저번 포스팅에 이어서 WEB-RTC 도전기를 마저 작성해보고자합니다.https://younghun123.tistory.com/12 [WEB-RTC] WEB-RTC Custom Hook 구현 도전기 - 1안녕하세요? 오늘은 NextJS에서 web-rtc를 사용하고 이를 커스텀 훅으로 구현했던 경험을 포스팅하겠습니다.저는 4학년에 한 학기를 휴학하며 하나은행에서 주관한 부트캠프를 수료했습니다. 부트younghun123.tistory.com [custom hook 적용 화면]const RtcView = () => { // RtcHook const { remoteStreams, startStream } = useRtc({ id: "room123", myKey: "userA" }); ..

안녕하세요? 오늘은 NextJS에서 web-rtc를 사용하고 이를 커스텀 훅으로 구현했던 경험을 포스팅하겠습니다.저는 4학년에 한 학기를 휴학하며 하나은행에서 주관한 부트캠프를 수료했습니다. 부트캠프의 1차 프로젝트는 비대면 은행 창구였습니다. 처음에 기술을 마주하고 관련 문서를 찾아보았을 때는 막막했습니다. 특히 pub-sub 구조 기반의 새로운 프로토콜을 활용하여 클라이언트 간의 실시간 스트리밍 처리는 쉽지 않았습니다. 하지만 한단계 한단계 올라가자라는 마음가짐으로 공식 문서를 읽으며 한 줄, 한 줄 읽고 시행착오를 많이 겪었습니다. 그 결과, web-rtc 로직과 컴포넌트가 공존했던 더미 코드에서 web-rtc 로직과 상태를 hook으로 분리했고 성공적으로 애플리케이션을 완성할 수 있었습니다. 그..

안녕하세요? 오늘은 개인 포트폴리오 사이트의 성능 최적화 도전기를 작성해보겠습니다.성능의 지표는 구글 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...