[Next JS] 슬기롭게 서버 컴포넌트 사용하기 1 - 서버 컴포넌트란?
리액트 서버 컴포넌트 및 동작 원리에대해 작성한 글입니다.
[Next JS] 슬기롭게 서버 컴포넌트 사용하기 2 - 서버 컴포넌트 사용법(with CQRS)
쿼리와 커맨드를 중심으로 컴포넌트의 역할을 나누는 기법에대해 정리한 글입니다. 컴포넌트의 책임을 분명하게 나누면 서버 컴포넌트를 적극적으로 사용할 수 있습니다.
[Next JS] 슬기롭게 서버컴포넌트 사용하기 3 - 아키텍처)
서버 컴포넌트와 프론트엔드 아키텍처의 연관성에 대해서 정리한 글입니다.서버 컴포넌트는 waterfall 방식으로 동작하기 때문에 사용자와 복잡하게 상호작용하는 UI를 만들기 어렵습니다. 그렇다면, 어떻게 컴포넌트를 디자인해야할까요? 필자는 보통 세가지의 원칙을 가지고 컴포넌트를 디자인합니다.
[TS] 타입을 설계하는 원칙
프론트엔드와 백엔드의 관점에서 이야기하는 것이 아닌, 실제 세계의 객체를 어떻게 소프트웨어 세계에서 재창조하면 좋을지에 대한 고민입니다. 재창조된 객체는 데이터베이스, 애플리케이션의 도메인 모델, API Response 등 다양한 형태로 쓰일 수 있습니다. 그렇다면 개발자는 어떤 기준으로 객체를 설계해야할까요?
[TS] 타입스크립트를 사용해야하는 이유: TS 퇴출 논쟁
Turbo의 타입스크립트 퇴출에 관한 이슈입니다. 조금 지난 이슈지만 이번 포스팅에서는 해당 글과 관련지어 '타입스크립트를 왜 사용해야 하는가?'라는 주제로 이야기를 해보겠습니다.
[객체지향] 객체지향의 사실과 오해 - 1
안녕하세요? 이번 포스팅에서는 객체지향의 사실과 오해라는 책을 읽고 요약한 내용을 공유하고, 읽으면서 들었던 고민을 나눠볼까 합니다. 사실 이 책을 읽고 정리한 지 꽤 되었습니다. 최근 블로그 포스팅으로 고민을 노출해야겠다고 결심하고 가장 먼저 작성하고 싶었던 독후감입니다. 해당 서적은 코드를 설명하지 않습니다. 하지만 개발 패러다임에서 가장 영향력 있는 객체지향 원칙의 본질에 대해 알기 쉽게 설명합니다. 그런 의미에서 개발을 시작하는 사람에게 너무나도 추천하는 도서입니다.
[객체지향] 객체지향의 사실과 오해 - 2
객체지향 패러다임에서, 설계자는 적절한 객체에게 적절한 책임을 할당합니다. 그리고 객체는 각자 책임을 갖고 역할이라는 개념으로 추상화 하며, 서로를 식별합니다. 자신이 하지 않는 일은 다른 객체에게 위임하는 책임 메세지를 주고 받으며 협력합니다. 이 원칙은 우리의 애플리케이션을 아름답게 만드는 가장 중요한 요인입니다.
[Next JS] Next JS 배포하자! - 1 (feat Docker, AWS EC2)
안녕하세요? 오늘은 next js 애플리케이션을 배포하는 과정에대해 포스팅 해보려합니다.
[Next JS] Next JS 배포하자! - 2 (feat Docker, AWS EC2)
안녕하세요? 오늘은 이전 시간에 이어서 next js 애플리케이션을 클라우드 서버에 배포하는 과정을 작성하려합니다.
프론트엔드 성능 최적화 도전기
안녕하세요? 오늘은 개인 포트폴리오 사이트의 성능 최적화 도전기를 작성해보겠습니다. 성능의 지표는 구글 lighthouse를 기준으로 측정했습니다.
[WEB-RTC] WEB-RTC Custom Hook 구현 도전기 - 1
안녕하세요? 오늘은 NextJS 및 react에서 web-rtc를 사용하고 이를 커스텀 훅으로 구현했던 경험을 포스팅하겠습니다. 저는 4학년에 한 학기를 휴학하며 하나은행에서 주관한 부트캠프를 수료했습니다. 부트캠프의 1차 프로젝트는 비대면 은행 창구였습니다. 처음에 기술을 마주하고 관련 문서를 찾아보았을 때는 막막했습니다. 평소하던 API를 주고 받는 형식이 아닌 observer pattern 기반의 새로운 프로토콜이었습니다. 특히, 클라이언트 간의 실시간 스트리밍을 코드베이스에서 제어하는 과정이 쉽지 않았습니다. '클라이언트가 중계 서버로 서로 연결은 되었는데 왜 서로의 화면에서 영상은 안되는거지?'라는 질문의 연속이었고, offer, answer, icecandidate 로그들을 하나하나 찍어보며 Stream이 어떻게 이뤄지는지, 안된다면 어디서 오류가 일어난건지 하나 하나 파악해야 했습니다.
[WEB-RTC] WEB-RTC Custom Hook 구현 도전기 - 2
안녕하세요? 오늘은 저번 포스팅에 이어서 WEB-RTC 도전기를 마저 작성해보고자합니다. 저번시간에는 시그널링 서버(SpringBoot)와 useRtc라는 커스텀 훅에 대해 설명했습니다. useRtc는 { startStream : () = >void, remoteStreams: MediaStream[]} 형태의 객체를 반환합니다.