미니 프로젝트 (MbtiColor)

더줄게 프로젝트가 끝난 후 취업 준비를 하는 동안 FE에 대한 감을 잃지 않기 위해 혼자서 할 수 있는 미니 프로젝트를 찾아보았고 MbtiColor라는 프로젝트를 하기로 하였다.MbtiColor 프로젝트는 MBTI를 활용한 재미있는 콘텐츠들이 나오고 있는 추세에 "MB

우선 기능을 구현하기에 앞서 디자인 설계부터 진행하여야 했다.페이지 디자인 설계에 앞서 라우팅 설정을 해주었다.react-router-dom 라이브러리를 사용하였고 다음과 같이 초기 세팅을 해주었다.css는 항상 써왔듯 tailwind CSS를 사용하였고 페이지가 두

등록페이지에서 간단한 기능을 구현해보았다.위와 같이 컴포넌트들을 나누어주었다.X 버튼을 누르면 이전 페이지(메인 페이지)로 넘어가도록 구현해주었다.MBTI 들을 선택할 때 EI SN TF JP를 따로 분리하여 중복 선택이 되지 않도록 구현해주었다.타입과 카테고리를 분리

버튼 컴포넌트 내부의 기능을 구현하기 이전에 등록 페이지에서 컴포넌트들을 나누었기 때문에 전역 상태 관리가 필요하였다.구체적으로 설명하자면 MBTI를 선택하는 부분에서의 MBTI 상태관리컬러를 선택하는 부분에서의 컬러 상태관리이렇게 두 개가 필요하였다.따라서 Zusta

이제는 api 통신을 해야할 차례이다. 우선 메인 페이지에 있는 설문 조사들부터 가져오기로 하였다. 요구사항에서는 무한스크롤로 구현하라고 되어있었다.일단 axios를 이용한 api 함수부터 만들었다.mbti와 limit, offset을 통해 필터링을 할 수 있으며mbt

다음은 등록 기능을 만들 차례이다.api 구현 + 적용등록 함수는 다음과 같다.body에 mbti, 색상코드, 비밀번호 모두 문자열로 필수로 넣어야한다.아마 로그인 기능이 없어서 자신이 정한 4자리 비밀번호로 수정, 삭제 기능을 구현해주는 것 같아보였다.그래서 비밀번호

이제 등록과 무한스크롤 기능을 완성했으니수정 + 삭제 기능이 남아있다.수정 삭제에 대한 피그마의 지시사항이 따로 없어 내가 임의로 생각해내서 만들어보았다.우선 삭제 기능부터 구현을 하였다.삭제 기능은 홈페이지에서 각 목록들을 클릭을 하면 삭제할 것인지 수정할 것인지를

이제는 수정 기능을 해볼 차례이다.수정 페이지의 디자인은 등록 페이지와 똑같다.수정 페이지를 따로 만들까 생각을 해보았지만 같은 디자인이니까 수정이라는 타입을 prop으로 전달하면 되겠다는 생각을 하였다.먼저 전달해줄 type을 지정해주었고 각 목록을 클릭할 때 아래의

지난 미니 프로젝트에서 만들었던 MBTICOlOR 프로젝트에서 적용해보지 못했던 기능들이 있어 이들을 적용을 해보았다.바로 스켈레톤 UI와 로딩 스피너이다.데이터를 불러오는 동안, 실제 콘텐츠가 로드되기 전 자리 표시자(플레이스홀더)로 회색 블록이나 모형 형태로 화면을

더줄께 프로젝트를 리팩토링을 진행하던 도중 메인 페이지에서의 이슈를 발견하였다. 1\. 케러셀 부분에서 불필요한 로딩 처리로 인해 CLS 점수가 좋지 않았다.2\. 분명 SSR을 적용했는데 초기 로딩이 느리고 서버에서 HTML을 가져오지 못해 미리보기에 나오지 않았다.