Project/나와 닮은 못난이 농산물 똑닮안 (5) 썸네일형 리스트형 [나와 닮은 못난이 농산물 똑닮안] 5. 리팩토링2 (모달 컴포넌트, Layout Shift) 3. UX 개선 작업 구조적인 리팩토링 외에 UX 향상을 위한 업데이트도 있었다. 모달 컴포넌트 생성 기존에는 API 호출 후 에러 응답이 오면 alert로 에러 메시지를 보여주고 있었다. 그대로 가도 문제는 없었지만, 서비스의 이미지와 어울리는 모달을 통해 조금 더 완성도를 높이고자 모달 컴포넌트를 만들게 되었다. 모달로 에러 메시지를 노출할 경우 좀 더 명확하게 의도를 전달할 수 있는 것 같다. (에러 컴포넌트도 추가할 예정이다) const Modal = ({ contentText, buttonText, onClick }: ModalProps) => { return ( {contentText} {buttonText} ); }; 올바르지 않은 이미지를 넣었을 때 에러가 발생하면, 아래와 같은 모달이 뜬.. [나와 닮은 못난이 농산물 똑닮안] 4. 리팩토링1 (react-query, 로딩 컴포넌트) 개요 해커톤이 끝난 지 한 달이 조금 넘게 지났고, 그동안 꽤 많은 리팩토링이 진행되었다. 우선 지저분했던 코드들을 정리하며 폴더 구조 변경 및 로직을 개선했고, UX 향상을 위한 몇 가지 수정을 거쳤다. 이번 글에서는 리팩토링을 하며 직접적으로 와닿았던 4가지의 변화를 정리하고, 서비스의 기획/디자인 측면에서 대대적으로 변경된 결과 페이지를 소개하고자 한다. 1. React Query 도입 해커톤 당시 실패했던 react-query 도입. 너무 아쉬웠고 가장 빠르게 적용하고 싶었던 리팩토링 포인트였다. 근데 왜 도입하려고 했나? 1. react-query의 존재를 알게되었으니까! 프로젝트에 적용해보고 싶으니까! ( ?😮? ) 2. API 호출 시 로딩, 에러를 깔끔하게 처리할 수 있으니까! 3. 캐싱을.. [나와 닮은 못난이 농산물 똑닮안] 3. 36시간 내에 MVP 완성하기2 3. 로직 개발 단계 전역 상태 관리 전반적인 레이아웃을 잡고, 프론트 단 로직 개발에 들어갔다. 서비스 특성상 API를 연동하는 부분이 결과 페이지 하나였기에, 대부분의 상태는 프론트에서 관리되었다. 각 선택지에서 사용되는 질문들도 프론트에서 static으로 가지고 있었다. (거의 하드코딩..?) 결과 페이지에 도달하기 전까지 사용자의 모든 선택을 가지고 있다가 API 호출할 때 넘겨주어야 했고, 이를 위해서는 전역 상태 관리가 필요했다. 아래와 같이 네개의 선택지 결과와 이미지 데이터를 하나의 객체로 묶어서 관리했다. (Recoil 최고다 최고 🤩) export const selectedAtom = atom({ key: 'selected', default: { season: '', weather: '.. [나와 닮은 못난이 농산물 똑닮안] 2. 36시간 내에 MVP 완성하기1 개요비어 파티를 즐기고 우리에게 남은 시간은 3일 차 0AM부터 4일 차 12PM까지, 총 36시간이었다. 사실 발표 자료 제출 마감은 10시였는데, 발표가 오후 1시부터 진행되었기 때문에 그전까지 개발의 수정사항 반영시킬 수 있었다. (심사 전까지 배포만 하면 되니까~ 😙) 이때부터 프로젝트 주제를 구체화하기 위해 논의한 시간, 밥 먹고 커피 먹고 야식 먹은 시간, 취침 시간을 제외하면 정말 온전히 개발만 한 시간은 얼마 되지 않았던 것 같다. 하지만 "코드 작성 === 프로젝트하는 중"이 아니기에 짧고 굵게 한 가지 일에 몰입했던 경험을 프론트엔드 개발 과정과 함께 이야기해 보려고 한다. 1. 주제 구체화 단계 명확한 기획이 완료되지 않은 상태에서 프론트엔드가 할 수 있는 일은 많지 않았다. 기술 .. [나와 닮은 못난이 농산물 똑닮안] 1. 프로젝트 개요 (feat. 구름톤) 개요 지난 3월 말, 카카오와 구름이 주관하는 해커톤인 구름톤 5기에 프론트엔드 개발자로 참여했었다. 3박 4일 간 제주도에서 진행하는 해커톤으로, 프로젝트 외에도 교육과 네트워킹을 지원해 굉장히 유익한 시간을 보낼 수 있었다! 이 글의 시리즈는 해커톤 당시 진행했던 프로젝트와 그 이후의 디벨롭 과정을 프론트엔드 개발 중심으로 풀어낸 이야기가 될 것이다. 짧은 시간 내에 개발을 완성시키기 위해 포기했던 것과 이후의 리팩토링 과정, 완성도를 높이는데 들었던 기술적인 고민들을 정리할 것이다. 일단 그전에! 구름톤의 시간을 잠시 돌아보며 프로젝트 탄생 계기를 알아보자. 해커톤의 기본 주제는 "제주"와 "클라우드"였고, 마지막 주제는 1일 차 교육이 끝날 시점에 공개한다. 이번 기수의 마지막 주제는 1기와 같은.. 이전 1 다음
