💡 웹 롤링페이퍼 ‘롤링’
롤링 서비스는 감사와 축하, 응원의 메시지 등을 온라인으로 보낼 수 있는 플랫폼이다.
백엔드는 따로 없이 구현이 되어있는 API를 받아서 프론트엔드 작업만 하였다. 2주 간 개발하였으며 팀원은 모두 프론트엔드 작업을 하였고, 프로젝트 규모가 크지 않아서 화면별로 업무 분배를 하였다. 그리고.... 내가 팀장이다....
🐈⬛ 내가 작업한 파트
- 롤링페이퍼 메시지 작성 Form 화면
- Input 컴포넌트
- Blur 이벤트 추가
- ProfileImage 컴포넌트
- 프로필 이미지는 API를 통해서 받아옴
- Default 이미지 기본 세팅 후 다른 이미지 선택 시 프로필 이미지 변경
- 이미지 선택 후 기본 이미지로 돌아가기 위한 이미지 삭제 버튼 추가
- Dropdown 컴포넌트
- Select 문을 사용하지 않고 컴포넌트 새로 생성
- Tab, Enter, SpaceBar로 선택이 가능하도록 구현하여 접근성 향상
- Editor 컴포넌트
- React-Quill 패키지 사용
- 툴바에 글 효과 포맷 추가(bold, italic, underline, strike, list, bullet, color, background)
- CancelBtn 컴포넌트
- 이전 화면으로 돌아감
- CreateBtn 컴포넌트
- Input 값이 비어있으면 disabled
- onClick 시 Form 데이터 API POST
- 반응형 UI 적용
- Input 컴포넌트
- Subheader
- 뒤로가기 버튼
- UX 향상을 위한 추가 기능
- 반응형 UI 적용
- 카카오톡 공유하기(KAKAO API 사용)
- 뒤로가기 버튼
⭐ 개발 일정
24.04.09~13 : 기능 구현 → 기능 테스트(각자) → API 연결
24.04.13 : 일정 확인 → 코드 리뷰 → 머지
24.04.14~18 : UI 상세 구현 → 머지 → 통합 테스트 → 테스트 결과 수정 및 반영
24.04.19 : 배포 → 리팩토링
24.04.20~ 23 : 발표 준비(자료, 대본)
24.04.24 : 발표
🤔 회고......
팀 미팅과 멘토링 시간을 활용하여 의견을 공유하였다. 각자 맡은 일을 잘 해내주셔서 좋았다. 덕분에 빠른 시일 내에 완성할 수 있었다. 멘토링 시간에 멘토님의 피드백을 바로바로 반영한 점이 좋았다.
프로젝트 시작 전에 많은 것을 통일하고 시작하여야 작업 중에 수월하다는 것을 깨달았다.... Prettier 기본값으로 컨벤션을 정했는데.. 따옴표가 다들 달라서 쓸데없는 file changed가 많았다. 코드 스타일도 통일성이 없어서 다른 팀원의 코드를 이해하기 어렵다... 폴더 구조도 더 구체적으로 나누었으면 좋았을 거 같다. 다른 팀원의 코드 리뷰도 제대로 진행하지 않아서 self merge가 된 점이 아쉬웠다. PR 메시지말고도 issue 기능을 활용했으면 좋았을 거 같다. PR 메시지도 최대한 구체적으로 적어야 이해하기 쉬운데 스킵이 잦아서 코드 이해가 어려웠다.
scss를 처음 사용해봤는데 css보다 사용하기 수월했다. 다양한 스타일을 사용해보고 싶다.
멘토님께서 접근성에 대해 강조해주셔서 지금까지 내가 무지했다고 느꼈다.. 마우스가 없는 상황에서도 클릭이 되도록 하고, 이미지들은 꼭 alt값을 넣었다. tab이 되지 않는 영역은 tabIndex를 추가하여 접근성을 높였다. tab 순서도 사용자가 이용이 편하도록 생각해볼 수 있게 되었다. 누구에게나 직관적이고, 접근이 용이한 서비스를 만드는 개발자가 되고 싶다.
0개의 댓글
