🛠️ 프로젝트

심화프로젝트에 들어가며 프로젝트 세팅하는 과정중에 내가 storybook 세팅을 하게되었다.🎨 storybook을 사용하면 좋은 이유storybook은 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공한다.⚙️ 스토리북 설치1. 설치npm install --save-dev @storybook/react2. script 확인package.json 파일의 scripts 섹션에서 storybook 스크립트가 올바르게 설정되어 있는지 확인해야한다. storybook은 6006포트를 사용하고있다."scripts": { "storybook": "storybook dev -p 6006"}3. 명령어 실행npm run storybook설치가 된 후 storybook 관련 폴더가 생성되었다.기본 폴더 구조..

우선 ,Taskify 프로젝트를 개발하면서, 에러 처리 로직이 여러 컴포넌트에 분산되어 있음을 알게 되었습니다. 각 컴포넌트에서 중복된 방식으로 에러를 처리하고, 에러 메시지를 표시하는 방법이 일관되지 않아 사용자 경험이 저하되는 문제를 겪었습니다. 😞 이 문제를 해결하기 위해, useErrorModal이라는 커스텀 훅을 만들어 전역적으로 일관된 에러 처리 방식을 구현했습니다.이를 통해 에러 처리 로직을 통합하고, 사용자에게 서버에서 발생한 에러 메시지를 명확하게 전달할 수 있게 되었습니다.  ☄️ 문제 상황 - 에러 처리 로직의 중복과 일관성 부족프로젝트 초기에는 각각의 컴포넌트에서 에러를 개별적으로 처리하고 있었습니다.예를 들어, API 요청 실패 시 발생하는 에러나 사용자 입력에서 발생하는 에러를..

Zustand를 사용하여 로그인 상태와 유저 정보를 효율적으로 관리하려는 고민Taskify 프로젝트를 개발하면서, 여러 컴포넌트에서 사용되는 인증 상태 관리가 점점 복잡해지며 코드가 중복되는 문제가 발생하였습니다.인증 상태를 관리하는 코드가 각 컴포넌트에 분산되어 있어 유지보수가 어려워지고, 인증 관련 로직을 수정할 때마다 여러 곳을 수정해야 하는 번거로움이 있었습니다. 이 문제 해결을 위해서 Zustand를 사용하여 인증 상태를 전역적으로 관리, 인증 관련 로직을 authStore 라는 별도의 상태 관리로 분리하여 재사용 가능하고 효율적인 방식으로 개선하였습니다. 이번 포스팅에서는 이 과정을 공유하며, Zustand를 이용한 인증 상태 관리 방법과 코드 중복을 줄일 수 있었던 경험에 대해서 작성해보겠습..

짜잔 🎉▼ Lighthouse Performance 분석 [web] Lighthouse 웹페이지 성능분석 (Performance)허겁지겁 코드를 작성하고 일정에 쫓겨 디자인을 따라하기에 급급해 성능따위 무시했던 신입 1년.. 최근 개발에 많이 익숙해지면서 성능 및 최적화에 흥미가 생겼습니다. 그중 제일 쉽게 사용할phrygia.github.io 🕊️ 마무리 : 2주간의 중급 프로젝트 회고Taskify 프로젝트를 시작한 지 얼마 안 된 것 같은데, 벌써 2주간의 여정이 마무리되었습니다. 🎉프로젝트 발표도 무사히 끝냈고, 지금은 프로젝트가 완료된 후 최종 회고 포스팅을 하려고 합니다. 😊이번 프로젝트를 통해 많은 것을 배우고, 팀원들과 함께 문제를 해결해가며 성장할 수 있었던 시간이었어요. 그럼 Ta..

🍂 10월 중순, 팀 프로젝트 첫날 기록 - 시작오늘은 중급 프로젝트의 첫날이다. 드디어 Part 3 팀원들과 함께 프로젝트를 시작하게 되었는데, 우리팀은 첫 회의를 통해 협업 툴로 사용할 수 있는 일정 관리 시스템 “Taskify”라는 주제를 선정하게 되었다. 💡 주제 선정 이유Taskify를 주제로 고른 이유는 아주 간단하다 ㅎㅎ! 일정 관리 시스템은 일상에서 자주 사용되는 서비스인 만큼, 사용자의 편의를 고려한 여러 기능을 구현해볼 수 있을 것 같았다. 게다가 프로젝트의 규모가 커서 다양한 컴포넌트를 만들어보는 좋은 기회라고 생각했다. 팀원들도 모두 동의해주어 기분 좋게 프로젝트를 시작할 수 있었다. 😊 🛠️ 프로젝트 세팅 과정첫걸음으로, 깃허브에 프로젝트 레포지토리를 만들고 팀원들을 초대했..

🔮 프로젝트 회고💫 배운 점팀워크의 중요성: 각자의 강점을 살려 협력하는 것이 프로젝트 성공의 열쇠라는 것을 깨달았습니다. 서로의 의견을 존중하고 조율하는 과정에서 많은 것을 배웠습니다.React의 깊이 있는 이해: React의 생명주기 및 상태 관리에 대해 더욱 깊이 이해하게 되었고, 실무에서 자주 쓰이는 패턴을 익힐 수 있었습니다.문제 해결 능력: 개발 중 발생한 다양한 문제를 해결하는 과정에서 논리적 사고와 창의적인 접근법이 중요하다는 것을 느꼈습니다.또한, Jotai를 처음 사용해 보았는데, 상태 관리를 간소화할 수 있어 매우 유용했습니다. 이전에 zustand를 많이 사용해 왔지만, Jotai가 보다 직관적으로 상태를 관리할 수 있었습니다.Jotai는 직관적인 상태 관리 솔루션으로, Rea..