📛프로젝트명 - 식스팩(SIXPEC)

사회가 정한 기준이 아닌, “나다운 강점”을 일궈나가는 목표 달성 기록장

🚧 프로젝트 소개

💡 키워드: 육각형 인간

인터넷에서는 '육각형 캐릭터, '육각형 선수' 등의 표현을 심심찮게 볼 수 있습니다. 여기서 '육각형'이란 대상의 특징을 표현하는 6개 축의 그래프가 모두 꽉 찬 상태, 즉 완벽에 가까운 상태를 의미합니다. 현대사회 젊은이들은 외모, 학력, 자산, 직업, 집안, 성격, 특기를 포함한 모든 측면에서 완벽한 사람을 선망하며, '육각형 인간'이 되길 꿈꿉니다. 그 때문에 '육각형 인간'이라는 키워드는 더 나은 자아를 위해 분투한다는 긍정적 측면과, 타인과 자신을 지나치게 비교하거나 노력으로 해결되지 않는 것에 좌절하게 된다는 부정적 측면을 동시에 지니기도 합니다.
더 자세한 설명은 여기를 참고해주세요!

👩🏻‍💻 프로젝트 참여 인원

Frontend - 3명

Backend - 3명

✨ 기술 스택

• 기획디자인 :

• 프론트엔드 :

• 백엔드 :

• ETC :

💡 서비스 핵심 기능

스플래시 / 로그인 / 회원가입

• url 진입 시 스플래시 화면을 제공합니다.
• 로그인 / 회원가입 기능을 제공합니다

메인 페이지

• 6개의 최종 목표 카테고리를 설정할 수 있습니다.
• 최종 목표에 따른 단계별 체크 리스트를 작성 / 수정 / 삭제 / 완료 처리할 수 있습니다.

계정 페이지

• 검색 기능을 활용하여 계정을 검색할 수 있습니다.
• 타인의 프로필을 확인하고 팔로우할 수 있습니다.

마이 페이지

• 자신의 프로필을 확인할 수 있습니다.
• 내 현재 팔로우 , 팔로워 목록을 확인할 수 있습니다.

🖼️ 디자인

• 스플래시 / 로그인 / 회원가입

• 메인 페이지

• 계정 페이지

• 마이 페이지

• 부가 페이지

🍆 본인이 구현한 기능

• 메인 페이지 - 목표 설정 모달창 : 6개의 카테고리를 조회, 추가, 수정, 삭제하는 기능 구현 및 퍼블리싱

• 메인 페이지 - 스펙 설정 : 카테고리의 목표를 완성하기 위해 세부 목표를 단계별로 조회, 추가, 수정, 삭제하는 기능 구현 및 퍼블리싱

• 마이페이지 - 계정 검색 : 현재 서비스의 회원가입 되어 있는 계정을 이름 기준으로 조회하여 프로필을 보여주는 기능 구현 및 퍼블리싱

• 프로필 페이지 - 팔로우, 팔로잉 : 조회된 이름을 기준으로 설정된 목표를 조회하고 팔로우, 팔로잉 할 수 있는 기능을 구현 및 퍼블리싱

🚩 트러블 슈팅

1. 문제 - 로직이 복잡하여 꼬임 현상 발생

상황

• 메인 페이지에서 카테고리 목표 CRUD와 세부 목표 CRUD의 로직이 복잡하여 꼬임 현상 발생

해결 방법

• 카테고리 목표와 세부 목표를 컴포넌트로 분류하여 Main의 return 코드 15% 감소

배운 점

• 컴포넌트를 세부화 하는 이유에 대해서 이해가 되었고 가독성 있는 코드에 관심이 생김

2. 문제 - 리렌더링으로 인해 그래프 UI가 사라지는 문제 발생

상황

• 컴포넌트 분류와 react-hooks를 통해 렌더링, 리렌더링이 주기적으로 발생하여 그래프 데이터가 초기값(null) 설정됨에 따라 UI가 보이지 않는 문제 발생

해결 방법

• useRef를 사용하여 react-canvas의 값이 변하지 않는다면 그래프 데이터가 초기화 되지 않게 설정

배운 점

• 렌더링, 리렌더링의 개념에 대해 조금은 이해하게 되었고, hooks에 관심을 가지게 되었다.