🎞 프로젝트 소개
정(情)을 기록하고 담(情)을 나누며 추억에 빠져보세요.
우리 가족만의 앨범을 만들어서 공유 일기를 작성해보세요.
'정담'은 가족 간의 대화가 사라지는 지금, 우리에게 필요한 것이 무엇인지 고민했습니다.
정담은 오늘의 삶, 어제의 삶, 우리 가족의 삶을 공유 할 수 있습니다.
🧑💻 프로젝트 역할
- 팀장 및 웹 프론트엔드 개발 (
50퍼이상 기여) - React기반의 클라이언트 개발 및 모바일 웹 앱 사이트 구현
- 재사용 가능한 컴포넌트를 설계하고 구현하였습니다.
- craco를 통한 alias 설정 및 Eslint, prettier, storybook 등의 프로젝트 기초 세팅 담당
- JWT AccessToken를 이용하여 로그인 기능을 구현하였습니다.
- 기존 애니메이션 GIF 파일을 LottieFiles를 활용해 데이터 크기를 대폭 감소시켰습니다.
- react-router v6 기반의 AuthRoute와 PreventRoute를 구현해 라우팅 코드를 설계했습니다.
프로젝트 기술 스택
- React
- React-router-dom v6
- Storybook
- Redux / Redux-thunk / Redux-toolkit / logger / persist
- Axios
- Emotion
- Lottie-web
- craco
프로젝트 관련 자료
🏃♀️ Trouble shooting
모바일 뷰에 따른 컴포넌트 밀림으로 인한 UI 깨짐 이슈
문제 발생
모바일 웹 뷰에서 가상 키보드 활성화에 따른 컴포넌트 밀림 현상 발생.
원인
- CSS fixed 속성의 특성인 뷰포트를 기준해서 배치 됨으로 인한 문제 발생. - 가상 키패드가 활성화 되기 전의 전체 높이 값을 기준으로 구현된 UI에서 가상 키패드 활성화로 인해 전체 높이 값이 절반 가까이 줄어든 것이 원인
해결 과정
- 가상 키패드가 활성화 되는 페이지가 한정적이여서 각 페이지마다 별 개의 로직 구성 - 입력 창이 포커싱 되는 경우, 해당 버튼을 뷰에서 감추는 방향으로 설정
느낀 점 및 Reference
- 모바일 기기에서의 고려 해야 할 점이 많다고 배웠습니다.
- 앱과 웹은 다르다라는 걸 고려하고 코드를 구성했어야 했는데 그러지 못했습니다.
- 사용자 경험을 높이기 위해서는 여러 디바이스에 대한 화면 테스팅을 해서 고쳐가야 할 점이 많았습니다.
- 다양한 앱 서비스가 나오면서 인앱 브라우저에서도 문제 없이 서비스가 작동할 수 있도록 호환성 체크를 꼭 해야겠다고 배웠습니다.