React Server Component (RSC) 서버 컴포넌트는 말그대로 서버 단에서 실행되는 컴포넌트이다. 2020년 React 18 버전에서 처음 선보여 Next.js 14 앱 라우터의 기본 컴포넌트 렌더링 방식으로 자리 잡았다. 마실가실 프로젝트를 Next 프레임워크로 작업하면서 궁금한 점도 많고 헷갈리는 부분도 있었어서, 서버 컴포넌트의 작동 원리와 이점에 대해 자세히 살펴보고자 한다. 서버 컴포넌트의 렌더링 방식 : RSC Payload 서버 컴포넌트 형태로 작성된 코드는 리액트에서 React Server Component Payload (RSC Payload)라는 특수한 데이터 형식으로 클라이언트 단에 전달된다. Element Tree 형태의 압축된 바이너리 표현으로, 객체와 유사한 형태를..
개요 마실가실 개발이 한창이다. 벌써 다음 주가.. 최종발표..? 산책 경로를 썸네일로 저장하는 작업을 진행하면서 발생한 이슈에 대해 다뤄보려 한다. 유저가 산책을 기록 또는 공유한 후, 해당 산책로를 시각적으로 확인할 수 있는 이미지를 제작하는 로직이 필요했다. 썸네일 생성을 자동화하고자 한다고도 볼 수 있을 것 같다. 여튼 해당 로직을 구현하기 위해 유저가 산책을 완료한 후, 카카오맵 API를 통해 그려진 경로 데이터를 활용하고자 했다. 발생한 문제 위 사진은 마실가실에서 산책이 완료된 시점 지도에 경로가 그려진 모습이다. { 위도, 경도 }[] 형태로, 일정 시간마다 GeoLocation을 이용해 데이터를 담는다. 이 모습을 온전히 캡쳐하여 썸네일로 사용하면 끝이잖아?라는 생각과 함께 이전 챗팟 프..
(이전 글에서 계속됩니다) 단계별 적용하기 1. 로직 분류 가장 먼저, 기존에 Controller에 있던 함수들을 전부 분류하는 작업을 진행하였다. 재사용성이 큰 상태 데이터는 Context로, 특정 컴포넌트 내부에서만 사용되는 상태 데이터는 해당 컴포넌트의 Controller로, LogData의 값을 변경하는 데이터는 Reducer로 주석을 달아 분류해주었다. 2. ContextAPI, useReducer 적용 다음 Context를 생성하고 적용을 원하는 범위에 Provider를 감싸주었다. 재사용성이 큰 로직들을 LogContext에 담고, LogData 상태를 변경하는 로직들의 경우 아래의 예시와 같이 객체 형태의 Reducer로 분리하여 Conetxt에서 호출 및 가공하여 사용하도록 했다. use..
개요 데브코스 파이널 프로젝트인 산책로 기록, 공유 서비스 마실가실 개발을 진행하면서, 산책을 기록하고 저장하는 LogRecord 기능을 팀원 한 분과 함께 작업하였다. 컴포넌트의 디자인 패턴으로는 MVC 패턴을 활용하였는데, 프로젝트 기획 단계에서 다양한 패턴을 경험해보자는 취지로 이를 채택하였고 앞선 2주 간의 스프린트 기간 동안 해당 기능에 대한 기본적인 구현을 끝내놓은 상태이다. 다음 스프린트를 시작하기 전, MVC 패턴으로 구성한 코드에 개선이 필요하다고 생각되어 진행하였던 리팩토링 과정을 정리해놓으려 한다. 기존의 컴포넌트 구조 먼저 기존에 설계한 컴포넌트 구조를 도식화해보았다. 상위 컴포넌트인 logRecord는 Model, Controller, View로 구성된다. Model에는 하위 컴포..
1. 들어가며 드림코딩 리액트 강의의 마지막 섹션이자, 이전에 진행하였던 유튜브 클론코딩과 이어지는 프로젝트이다. 유튜브 프로젝트에서는 외부 API나 기본적인 리액트의 구조를 익힐 수 있었다면, 본 프로젝트에서는 Firebase를 통한 DB, 인증, 클라우딩까지 영역을 확장하였다. 전체적인 스타일링보다는, 단계적으로 개발이 진행되는 과정과 기능들을 어떤 로직으로, 왜 그렇게 구현했는지를 이해하며 따라가려고 노력했다. 2. 기능 구현해야할 주요 기능은 크게 네 가지로 나뉘어진다. 디테일한 로직이나 코드는 생략하겠음. 로고, 로그인, 장바구니 갯수 등의 정보를 담고 있는 헤더 상품 리스트를 확인할 수 있는 메인페이지 제품들의 상세 정보와 장바구니에 추가할 수 있는 제품 상세페이지 담아 놓은 제품들을 확인, ..
들어가며 챗팟 프로젝트를 끝내고, 컴포넌트의 관리와 API의 활용법에 대해 자세히 알고싶어 엘리 쌤의 리액트 강의를 수강하게 되었다. 그 중 거의 막바지 프로젝트로 진행되는 유튜브 프로젝트이다. 본 프로젝트에서 배운 점이 많아 정리해놓으려 한다. 큼직한 단계마다 구현이 완성된 모습을 보여주고, 다음 영상에서는 해당 구현에 대한 해설이 있는 방식으로 진행되었다. 나는 그 사이에 직접 구현해보고, 해설을 통해 개선하였다. 프로젝트를 통해 배운 것 파일관리 /public /mock-data : 유튜브 API mock data /src /api : 유튜브 API 요청과 관련된 로직 파일 /components : 사용한 컴포넌트들 /context : API 요청을 통해 받아온 동영상 데이터를 모든 컴포넌트에서 활..
