이번 프로젝트를 진행하던 중 백엔드 개발 일정에 차질이 생겨 백엔드 서버가 구현되기 전에 프론트단 개발을 진행하는데에 어려움이 있어 목업 데이터를 생성해서 테스트 해보며 개발을 진행하고자 MSW 를 이번 프로젝트에 도입하게 되었다. 프로젝트는 React + Typescript + Vite 구성으로 진행 되었다.1. MSW(Mock Service Worker) 란?https://mswjs.io/docs/getting-started Getting startedThree steps to get started with Mock Service Worker.mswjs.io MSW란 서비스워커를 사용하여 네트워크 요청을 가로채서 관찰하고 모의 응답을 사용할 수 있는 라이브러리이다.프론..
Jelly Diary
이번 🐾JellyDiary 프로젝트를 시작하기에 앞서프론트엔드 개발자 간에 협업을 위해 미리 정해 둘 코드 컨벤션이나, 깃 컨벤션, 폴더구조 초기 셋팅 등을 정리해 보고 자 한다. 1. 들어가며 가장 먼저 정해야 할 것들은 어떤 기술 스택을 이용하여 개발을 할 건지 논의를 하였다.이번 프로젝트는 기본적으로 React (리액트) + TypeScript(타입스크립트) + Vite(비트) 로 빠르고 안정성을 높인 구조로 진행하기로 하였으며,서버 상태 관리를 위해 React Query(리액트 쿼리) 를 이용하여 캐싱을 효율적으로 관리하고 Redux(리덕스) 대신 Zustand(주스탠드) 를 도입하여 불필요한 렌더링을 최소화 하고 빠른 도입을 진행해 보기로 하였다.스타일은 Styled-Co..
리액트와 타입스크립트 환경에서 캘린더를 구현할 때 FullCalendar 라이브러리를 이용하여 개발하게 되었다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 기본적인 컴포넌트 구성을 파악하고 적용해 보고자 한다. 기본 제공 템플릿의 UI다 나는 Monthly 페이지만 필요했기 때문에 필요 없는 상단 버튼들은 삭제하여 주는 등 커스텀 하여 사용 할 ..
반려동물의 하루 일지를 기록하는 웹 서비스를 기획중인 JellyDiary 젤리 다이어리 줄여서 젤다 에서는 매일 작성 되는 일지를 달력 형식으로 보여줄 필요성이 있었다. 프론트엔드 멘토링을 통해 직접 구현하는 것을 추천하지만 실무에서는 이미 만들어진 라이브러리를 가져다 쓰는 경우가 대부분이라고 한다. 그래서 이번 프로젝트에서도 잘 맞는 라이브러리가 있으면 사용해 보고자 여러 레퍼런스들을 찾아보았다. 리액트와 타입스크립트로 캘린더 라이브러리 사용해 보기 우선 아래와 같이 와이어 프레임을 짜 보았다. 내가 필요 한 기능은 1. 월(Monthly) 형식의 달력 포멧을 제공할 것 2. 일 별로 추가되는 일지를 달력에 리스트로 보여줄 수 있을 것 3. 일지 추가 버튼을 생성하고 일지를 추가하면 달력에 추가 할 수..
반려 동물 특화 SNS 개발로 프로젝트 주제를 정했다. 평소 SNS에 피로감을 느끼고 있었고, 마침 프로젝트 팀원의 반려동물이 팀 내에서 인기 스타였기 때문에 자연스럽게 반려동물 관련된 웹 소셜 네트워크로 주제가 정해지게 되었다. 이번 프로젝트는 기록을 많이 남겨봐야지. 가장 먼저 만난 이슈는 라우팅 처리였다. 이번 프로젝트에서는 빈 페이지가 안보이게 에러 페이지도 처리하고자 했다. 우선 피그마로 디자인을 짜봤다. 지정되지 않은 경로는 function App() { return ( ); } export default App; *을 이용하여 처리해 줄 수 있다.