🧑🏻💻 수료 후 한 달데브코스에서의 6개월은 어느 때보다 치열했다. 학습 방식과 방향성에 대해 생각해볼 수 있었고, 배운 것들도 많았다. 수료 후 우선적으로 계획한 것은 지금까지의 활동을 다듬는 것이었다. 배운 것들을 정리하며 더 깊은 이해가 필요한 것들을 공부하고, 휘몰아쳐간 프로젝트들의 문서와 코드들을 정비하고 있다. 파이널 팀원 분들과 후속 프로젝트도 병행하고 있다. 아직 기획 단계이긴 하지만, 디자이너 분도 함께 하게 되어 재밌는 걸 만들어보는 중이다. 같은 입장의 사람들 속에서도 뜻이 맞는 인연을 찾는게 정말 쉽지 않은 일이라 생각되는데, 데브코스 입과하길 잘했다는 생각이 드는 손에 꼽는 순간이다. 다양한 방면에서 각자의 강점이 뚜렷해, 수료 후 한 달이 지난 지금까지도 서로에게 좋은 자..
React Server Component (RSC) 서버 컴포넌트는 말그대로 서버 단에서 실행되는 컴포넌트이다. 2020년 React 18 버전에서 처음 선보여 Next.js 14 앱 라우터의 기본 컴포넌트 렌더링 방식으로 자리 잡았다. 마실가실 프로젝트를 Next 프레임워크로 작업하면서 궁금한 점도 많고 헷갈리는 부분도 있었어서, 서버 컴포넌트의 작동 원리와 이점에 대해 자세히 살펴보고자 한다. 서버 컴포넌트의 렌더링 방식 : RSC Payload 서버 컴포넌트 형태로 작성된 코드는 리액트에서 React Server Component Payload (RSC Payload)라는 특수한 데이터 형식으로 클라이언트 단에 전달된다. Element Tree 형태의 압축된 바이너리 표현으로, 객체와 유사한 형태를..
데브코스 5기 파이널 프로젝트 약 두 달 간의 여정이 마무리 되었다. 기획부터 프로젝트가 완성되기까지의 과정을 회고해보려 한다. 소개 실시간 산책 기록 및 산책로 공유 서비스 기간 2024.02.05 ~ 2023.03.25 (2개월) 인원 총 8명 (FE 5명, BE 3명) 스택 (FE) Next.js, Typescript, TanStack-Query, Zustand, Kakaomap API, TailwindCSS (BE) Java, Spring Boot, MySQL, redis, OAuth2, Spring Security, JJWT, SpringDoc, Sentry 주소 https://www.masilgasil.app/ GitHub - Team-SilverTown/Team-SilverTown-Masil..
개요 마실가실 개발이 한창이다. 벌써 다음 주가.. 최종발표..? 산책 경로를 썸네일로 저장하는 작업을 진행하면서 발생한 이슈에 대해 다뤄보려 한다. 유저가 산책을 기록 또는 공유한 후, 해당 산책로를 시각적으로 확인할 수 있는 이미지를 제작하는 로직이 필요했다. 썸네일 생성을 자동화하고자 한다고도 볼 수 있을 것 같다. 여튼 해당 로직을 구현하기 위해 유저가 산책을 완료한 후, 카카오맵 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에는 하위 컴포..
이번 달 돌아보기 👟 파이널프로젝트 고대하던 백엔드와의 파이널 협업 프로젝트가 시작되었다. 일주일에 가까운 기획 회의를 했지만 결국 스몰토크 중에 나온 주제가 채택되었다. 팀원 한 분이 의견을 제시했는데, 다들 듣자마자 이거다..! 했던 것 같다. 일반적인 CRUD 구현이 아닌 Location이나 Map 같은 기술적인 도전을 해볼 수 있는 기회이지 않나 싶다. 프로젝트가 절반 정도 진행된 시점에서 중간 점검을 해보자면, 먼저 예상했던 작업 기간보다 더 많은 시간이 소요되었다. 본격적인 스프린트가 시작되기 전 플래닝포커를 통해 분배된 Task들의 소요 시간을 산정하였는데, 막상 스프린트에 접어들어 작업을 시작하니 1.5배에서 많게는 2배까지 걸렸던 것 같다. 다양한 변수가 있었지만, 그것들을 감안하고라도 ..
팀프로젝트 👔 들어가며 이번 4개월차 회고는 한 달간 진행한 팀프로젝트에 대해 비중 있게 다뤄보려 한다. 사실 개인 혹은 둘 정도의 소수로 구성된 프로젝트를 진행한 경험은 두어 번 있긴하지만, 이렇게 많은 인원들로 본격적인 협업 프로젝트를 진행하는 것은 이번이 처음이였다. 리액트 학습 기간부터 함께한 팀원들과 함께 프로젝트를 시작하게 되었다. 배포된 프로젝트는 🔗이 곳에서 확인할 수 있다. GitHub - prgrms-fe-devcourse/FEDC5_STYLED_sehee Contribute to prgrms-fe-devcourse/FEDC5_STYLED_sehee development by creating an account on GitHub. github.com 📝 기획 프로젝트의 요구사항은 기본적..
월별회고 🤔 2월, 선택과 집중 막학년을 앞두고, 고민에 빠졌다. 전공(로봇)과 복수전공(자율주행)의 도메인을 살려 커리어를 시작할 것인지, 작년 여름부터 조금씩 병행해오던 프론트엔드를 택할 것인지. 결심이 필요한 시점이었고, 이후에는 졸업 후 취업을 위한 고도화가 필요한 시점이었다. 정말 감사하게도 조언을 구할 수 있는 기회가 생겼다. 친척 누나의 소개를 통해 현업에 종사하고 계신 프론트엔드 엔지니어분과의 커피챗 시간을 가질 수 있었다. 무턱대고 서울에 올라가 궁금한 것들을 여쭤보고, 당시 막 자바스크립트 학습을 어느 정도 마무리했을 때라 배운 것들을 이것 저것 조합해본 프로젝트를 보여드리기도 했었다. 그 땐 컴포넌트라는 용어 뜻도 모를 때였는데, 참..지금 생각하면 무슨 깡이었는지 싶다ㅋㅋ 여튼 결론..
이번 달 돌아보기 🕧 벌써 절반 이번 달은 학습량이 정말 물밀듯 밀려왔다. 많아지는 학습량 탓에 깊이 있는 학습을 잘 못하지 않았나 생각이 든다. 기말 시즌이랑 겹치면서 더 소화가 힘들었던 것인지도 모르겠다. 캡스톤 제출도 끝냈으니, 200% 데브코스와 학습에 집중할 수 있게 되었다. 아직 학습 못한 내용들과 정리해놓은 키워드들을 차근히 학습하고, 정리해놓을 계획이다. 오늘부로 거의 정확하게 데브코스 과정의 절반이 지났고, 절반이 남았다. 공식적인 학습 일정은 종료되었고 1달 간의 팀프로젝트와 2달 간의 최종 협업 프로젝트가 예정되어 있다. 전 아직 준비가 안됐는데요..🥲 💬 뱉은 말은 지킨다 뱉은 말을 못지키게 되었다. (뱉지 말지) 지난 달 말 야심차게 설정했던 목표들이 있었는데, 사실 잘 지켜지지 ..
