Next.js와 Supabase로 이벤트 초대장 애플리케이션 만들기이벤트를 생성하면 그 이벤트에 대한 초대장을 만들어주고 공유할 수 있는 서비스를 개인 프로젝트로 진행하고 있다. 단순 초대장 생성 기능뿐 아니라 내 위치 기반으로 주변의 이벤트들을 확인하고 참가할 수 있는 기능도 차차 추가해 보려고 한다. 이벤트 생성 기능과 관련 이미지를 업로드할 수 있는 기능을 구현했다. 프론트엔드에는 Next.js, 백엔드에는 Supabase를 사용하면서 S3와 CloudFront로 이미지를 호스팅하는 방식을 적용해봤다. 이 과정에 대해서 기록해 보려고 한다.Supabase에서 이벤트 테이블 만들기먼저, 이벤트 데이터를 저장할 event 테이블을 Supabase에서 만들었다. 테이블은 간단히, 이벤트 제목, 날짜 및 ..
최근 새로운 프로젝트 본격 진행에 앞서 커밋 린트(commit lint)를 설정하는 작업을 진행했다. 처음에는 간단히 끝날 줄 알았지만, 예상치 못한 문제들이 발생하며 생각보다 많은 시간을 소모하게 되었다. 하지만 배운 점들도 많아 기록해두려 한다.커밋 린트의 필요성 커밋 린트는 커밋 메시지의 형식을 검증하여 일관성을 유지하는 도구다. 이번 프로젝트에서는 하나의 레포에 프론트엔드와 백엔드 코드를 공유하면서 사용하기로 했는데, 이에 따라 커밋 메시지에 (front)와 같은 구분을 추가해야 했다. 그런데 이 규칙을 자주 잊어버리는 일이 발생했다. 이런 문제를 해결하기 위해 커밋 메시지의 형식을 강제할 필요성을 느끼고, commitlint를 도입하기로 결정했다.패키지 설치 및 초기 설정프로젝트의 package..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 이번 리팩토링에서는 기존에 컴포넌트 내에 함께 있던 리액트 쿼리 요청 코드를 커스텀훅으로 분리하는 작업을 했다. 왜 커스텀훅을 만들려고 했나 컴포넌트에 네트워크 처리 코드가 종속된다 컴포넌트 내에 서버 상태를 가져오거나 변경하는 로직이 있어서 종속성이 생기고, 컴포넌트의 재사용성이 떨어졌다. 역할의 분담이라는 측면에서 ui를 표시해주는 컴포넌트와 네트워크 요청을 처리하는 부분의 코드가 분리돼 있는 것이 좋다고 생각했다. 코드 수정이 어렵다 컴포넌트 내에 네트워크 처리 코드가 있을 경우 요청 엔드포인트가 바뀐다든가 응답을 받..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 조잉 프로젝트의 검색 기능에는 자소 단위의 검색어 자동완성 기능이 적용돼 있다. 이처럼 키를 하나 칠 때마다 검색어 자동완성 엔드포인트에 현재까지 입력된 input에 대한 요청을 보내고, 받아온 데이터를 화면에 표시하는 방식이다. 현재까지 입력한 검색어를 통해 어떤 컨텐츠를 검색해 볼 수 있는지 한눈에 볼 수 있어서 편리하지만, 키보드 입력을 한번 할 때마다 하나의 요청과 응답이 오가고 리렌더링이 이뤄지기 때문에 꽤나 많은 리소스를 소모한다고 볼 수도 있다. 이 부분에서 디바운싱을 적용해서 일정 시간 내에 연속적으로 이뤄진..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 왜 버튼 컴포넌트를 만들어야 했나? 기존에 우리 프로젝트에서는 모든 버튼을 필요할 때마다 각자 만들어서 사용했다. 비슷한 모양의 버튼들인데도 색깔과 크기가 다르다는 이유로 매번 만들어서 사용하다 보니 중복된 코드가 많았고, 하나로 통일하면 재사용성을 높일 수 있겠다고 생각했다. 리팩토링을 하면서 일반적인 버튼, 즉 이미지로 이뤄진 독특한 버튼을 제외한 평범한 네모 모양의 버튼들은 재사용 가능한 컴포넌트로 만들고 prop을 내려줘서 각각의 필요에 따라 사용할 수 있도록 만들자고 결정했다. 어떤 컴포넌트를 만들려고 했나? 버튼..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 왜 폴더구조를 바꿔야 했나? 폴더구조를 바꿔야겠다고 생각한 가장 큰 이유는 파일을 찾기가 어려운 것 때문이었다. components 폴더 아래에 페이지별 폴더와 ui에 해당하는 폴더들이 섞여 있어서 어떤 파일을 어디서 찾을 수 있을지 알기가 어려웠다. 어떤 폴더구조를 만들려고 했나? 폴더구조를 개편할 때 두가지 목표를 가지고 시작했다. 도메인별로 폴더가 구분돼 있어 큰 줄기를 잡을 수 있어야 한다. 아토믹 디자인의 개념상 서로 다른 계층에 속하는 컴포넌트끼리 서로 구분돼 있어야 한다. 첫번째 목표에서 사용한 '도메인'이라는..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 메인프로젝트 끝나고 리팩토링을 하면서 제일 먼저 초기 세팅을 몇가지 추가했다. path alias 설정과 ESlint 규칙 추가를 했는데 path alias 설정은 금방 했지만 ESlint는 설정할 때마다 eslintrc의 설정 항목들이 너무 많고 원치 않는 오류가 날 때 어떻게 해결해야 할지 모르겠어서 어렵다. 오늘은 ESlint-plugin-import를 이용해 임포트문 순서 컨벤션을 린팅하는 설정을 하다가 머리가 뽀개지고 말았다😢 ESlint-plugin-import 인스톨하기 우리 프로젝트는 타입스크립트를 사용하고 ..
프로젝트 소개 JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉! 개발 기간: 2023.06.28 ~ 2023.07.24 🔗 배포 링크 📂 깃허브 코드스테이츠 프론트엔드 부트캠프 메인 프로젝트를 마무리하며 KPT 방법론에 따라 프로젝트를 회고해보았습니다. 이 프로젝트에서 담당했던 부분은 다음과 같습니다. 헤더 메인 페이지 슬라이더 멤버 마이페이지 로그인/회원가입 후기 404, 500 오류 페이지 검색어 자동완성 모바일 GNB 액세스, 리프레시 토큰 저장과 후속 처리 top 버튼 keep 스프린트 기반 플래닝 애자일 조직 운영 방법론 중 스프린트에 기반해 프로젝트를 운영했다. 약 4주의 프로젝트 기간을 네 개의 스프린트로 나누고 다음과 같이 각 스프린트의 목표를 정했다. - 스프린트 1: 팀 빌..
