찍찍이 - 일정관리 커뮤니티

이번 단기 심화 부트캠프에서 진행 중인 팀 프로젝트는 '일정 관리 커뮤니티 웹 애플리케이션' 개발입니다. 팀은 디자이너 1명, 백엔드 개발자 2명, 프론트엔드 개발자 3명으로 구성되어 있으며, 현재 기획 중인 프로젝트로, 세부 사항은 팀 미팅을 통해 점차적으로 확정해

기획이 어느덧 마무리 되었고 현재는 디자이너 분과의 소통을 통해 Figma 도안을 완성해내고 있는 과정에 있습니다. 따라서 FE 팀원들은 우선 디자인이 완성되면 각자 페이지를 맡아 개발을 진행하기로 하였고 이전에 공통 컴포넌트를 개발하기로 하였습니다.단순히 할 일(To

팀 프로젝트에서 공통 컴포넌트를 구현하려고 하던 도중 팀원이 clsx와 tailwind-merge를 사용하여 Tailwind CSS의 클래스 조합을 효율적으로 관리를 해보자고 제안하였습니다.(저는 아직 배움이 부족한 단계라.. 일단 오케이!!! 하고 뒤늦게 찾아봄)cl

git rebase는 두 가지 주요 작업을 수행할 수 있는 Git 명령어입니다커밋을 다른 커밋 위로 재배치: 현재 브랜치의 커밋을 다른 브랜치의 커밋 위로 재배치하여, 마치 그 커밋들이 원래 그 브랜치에서 진행된 것처럼 히스토리를 수정합니다.히스토리 정리: 여러 커밋을

드롭다운, 페이지, 리스트 등 다양한 컴포넌트들을 구현할 때 스크롤 바를 없애고 싶은 경우가 있습니다. 현재 진행 중인 프로젝트에서 스크롤 바를 없애기 위해 방법을 찾아봤더니 정말 간단한 방법이 있었습니다.\[tailwind css] 스크롤 안보이게 하기 라는 제목의

디자이너분께서 기존 요구사항에 맞춰 디자인을 설계하는 과정에서 프론트엔드와 백엔드가 이해한 부분에 차이가 있었고, 이를 실시간 회의와 지속적인 소통을 통해 절충안을 찾아 해결했습니다.(여러 해결과정 중 내가 제안한 방법)목표를 만들고 각 목표 안에 할 일을 추가하는 방

따라서 본격적으로 작업이 실행이 되었으며 다른 FE 팀원들은 공통 컴포넌트저는 할 일 생성/수정하는 모달을 만들기로 하였습니다.우선적으로 ui와 간단한 기능들부터 제작하려고 하였으며 현재 ui가 실시간으로 바뀐 상태라 리팩토링을 통해 개선할 예정입니다.할일 모달 PR간

다음 내가 맡은 공통 컴포넌트는 드랍다운 컴포넌트 입니다.드랍다운을 그냥 임의로 만들기만 했지 공통으로 만드는 것은 처음이였지만 순조롭게 잘 진행하였습니다.우선 생각했던 것은 드랍다운의 목적은 목록들을 보여주는 것이라고 생각하여 props로 목록에 관한 리스트들을 받고

내가 맡은 공통 컴포넌트 구현이 어느덧 끝났고 디자인 도안이 계속 바뀌고 있어서 추후 리팩토링 할 예정입니다.다음 역할은 로그인/회원가입 페이지 입니다.로그인/회원가입 PR로고는 아직 미정이라 리액트 아이콘으로..로고 컴포넌트 분리페이지별 각 input 컴포넌트 분리보

Storybook은 다양한 프레임워크에서 UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있도록 도와주는 도구입니다. 컴포넌트를 분리된 환경에서 개발하고, 재사용성과 유지보수성을 높일 수 있도록 구성 요소별로 스토리를 작성합니다. 이를 통해 디자인과 기능을 팀원들과 쉽

로그인/회원가입 페이지의 구현이 끝난 뒤팀원의 button/input 공통 컴포넌트 작업이 끝나 이를 적용시키기 위해 이전에 만들었던 할일 모달을 리팩토링하기로 하였습니다.기능 쪽에서나 디자인 쪽에서 더 개선점이 있는 것 같아보였습니다.또한 추가적으로 애니메이션 기능까

이전 시간에 진행하였던 할일 모달 리팩토링의 추가 작업을 진행하였습니다.해야할 일TodoModal 기간 설정에 관한 드롭다운 적용react-day-picker 도입 (범위 설정 용이)캘린더 디자인 및 범위 데이터 불러오기Data store 만들기 (zustand)Tod

다음은 인증 (할 일 상세보기) 컴포넌트 초안 작업입니다. (페이지처럼 보이지만 컴포넌트입니다.)이 컴포넌트는 내가 한 일에 대한 인증을 했을 때 나오는 컴포넌트입니다.인증할 때 첨부했던 사진을 볼 수 있고 인증할 목표, 할 일을 확인할 수 있습니다.또한 100자 이내

개발을 하다보니 드롭다운 공컴의 props를 잘못주었다고 생각.기존에는 string배열로 받기로 함. 하지만 들어오는 데이터의 타입이 모호 -> 제네릭 타입으로 다양한 타입 받도록기존 (할 일) zustand 저장소에는 각각의 상태값을 하나의 객체로 묶지 않았음. 나중

요약 우선 글을 쓰기 전 오늘 하루 힘들었습니다... 로그인 기능을 끝내고 회원가입 api도 연동하려 했으나 해결되지 않은 오류로 인해!!! 시간낭비!! 결국에는 해결했답니다!! > 백엔드와 프론트엔드의 토큰 전달 방식은

지난 시간에 말했던 쿠키로 토큰 전달 방식에 관한 이슈들을 N일차 만에 해결을 할 수 있었습니다. 곧 이 이슈에 관한 게시물 올려볼 예정...요약하자면 쿠키의 도메인 문제였다!!일단 이 문제를 직면하기 이전 회원가입 post 기능을 구현하였음.api 함수에서 엔드 포인

http method에 관한 유틸함수를 생성하여 각 API 요청을 훅에서 바로 사용할 수 있도록 하여 코드 효율성을 높였습니다.따라서 api 함수를 따로 만들지 않아도 hooks에서 한번에 api 함수를 처리할 수 있어서 코드 재사용성 증가, 코드 가독성 향상, 코드의

내가 느끼기에는 생성, 수정, 삭제 중에 가장 까다롭다고 생각하는 부분이 수정이라고 생각함.왜냐하면 생성과 삭제는 post delete 요청으로 body에 data 혹은 파라미터로 id를 전달해주면 간단한 부분인데수정에서는 직접 데이터를 가져와서 따로 저장해두고 다시

이전 게시물에서 했던 데이터 통합을 통해 할 일 생성에 이어 수정 작업도 진행할 수 있었다.기존 useTodoModalStore 라는 할일 모달 상태에 관한 저장소에서useTodoModalStore 코드모달 타입 (생성, 수정)을 가져온 다음 적용생성 수정 mutati

마이 페이지에서는 크게 4가지 기능이 있다.1\. 프로필 사진변경2\. 비밀번호 변경3\. 회원탈퇴4\. 로그아웃로그아웃에 관한 api 명세서가 없어 임시적으로 이 부분은 프론트에서 따로 처리를 하기로 하였으며 아래의 코드를 만들었다. 하지만 보안측면에서 토큰 무효화를

다음 맡은 페이지는 검색 페이지이다.이 페이지에서는 다른 유저를 팔로우 하기 위한 검색 페이지를 의미한다.검색 필터로 유저명, 목표명 별로 검색을 할 수 있다.custom hooks를 만들어 검색 내용을 불러오도록 하였으며검색 필터와 검색 키워드는 useState와 z

다음으로 진행했던 페이지는 타인 프로필 페이지이다. 아 페이지는 검색으로 나왔던 상대방의 아이콘을 클릭했을때 이동하는 페이지이고 상대방의 인증내역을 사진으로 볼 수 있다. > 크게 기능은 유저 프로필 및 인증 내역 불러오기, 팔로우 기능이 있다. > 유저 프로필 및

브라우저에서 헤더를 통한 토큰을 가져와 쿠키로 저장하게 끔 만들었음. 우선 src 폴더 안에 middleware.ts 파일을 생성.Next.js 미들웨어를 활용하여 인증 기반 페이지 접근 제어를 구현. 클라이언트 요청을 사전에 처리함으로써 성능을 최적화하고, 중앙화된

비교적 간단한 내용이긴 하지만 처음 마주했을 때 왜 안될까 당황을 했었다.문제 발생의 사례 : 할 일 수정시 데이터를 불러옴. 이미지를 변경 혹은 삭제를 하지 않고 다른 정보들을 수정을 할때 오류 발생 (초기 이미지를 다시 전송을 할 때 문제가 발생)이미지를 변경을 하

Next.js에서 동적 라우팅은 URL 경로가 동적으로 변경될 수 있는 페이지를 처리하는 방식 예를 들어, /profile/userId처럼 대괄호(\[])를 사용하여 동적으로 변하는 경로를 정의동적 라우팅에서 params를 가져오는 도중 다음과 같은 에러 메시지가 출력

위의 페이지는 사용자가 인증했던 사진을 보여주는 페이지인데처음 구현했을때 CSR로 구현하였음. 따라서 이미지가 5개 밖에 없지만 이후 이미지가 많아지면 로딩이 느려질 것으로 예상그래서 Server Side Rendering을 하기로 하였음.전 프로젝트에서도 SSR을 다