오늘 진행한 일
- 프로그램 작성 - api 테스트, 에러 해결
- 이미지 미리보기 구현
- 멘토링 피드백 받기
내일 진행해야하는 일 (멘토링 피드백을 바탕으로 팀원과 협의해서 나누기)
- 피그마 수정
- 메시지 상세페이지 와이어프레임 추가
- 서비스소개 와이어프레임 추가
- 회원가입
- 이메일 인증번호 전송
- 비밀번호 확인 유효성검사
- 닉네임은 위로 빼도 좋을 듯
- 프로그램 상세페이지
- 멤버 페이지네이션 표시
- 신청하기버튼 누르면
- toast 메시지
- 신청완료 / 신청취소 버튼 할 수 있는 창이 있는게 좋다. ⇒ 창을 만들어두면 마이페이지다른 곳에서도 쓸 수 있다.
- 유저에게 취소할 수 있는 경로 제공
- 마이페이지
- 공개/비공개 탭 정리 - 공개(프로그램탭만) 비공개(프로그램,메시지함,북마크)
- 공통 컴포넌트 - 버튼, 인풋, 카드, 이미지 프레임, 등등 정리해놓으면 코드로 옮기기만 되기 때문
- 깃허브
- Readme 수정
- 유저 플로우, 스키마,
- 깃허브 - branch, commit 전략
- 기술스택 정한 이유 문서화
- React, TypeScript, RTK, styled-components, axios, JWT, react-router-dom
진행하면서 어려웠던 점과 회고
오늘은 어제 진행한 프로그램 작성 기능을 api통신 해보았습니다.
처음에 폼데이터로 만든 이미지가 post 메서드로 전송은 되는데 서버에서 잃지 않았습니다.
그 이유는 api명세서에 작성되어있는 key값이 급하게 변경되어 체크하지 못했기 때문이었습니다.
다행히 금방 알아차려서 빠르게 수정하고 걱정거리였던 formData 통신을 성공할 수 있었습니다.
이후에는 이미지를 업로드할 때 사용자에게 미리보기가 될 수 있도록 구현하는게 목표였습니다.
많은 레퍼런스들을 보았고 URL.createObjectURL() 메서드를 사용하는게 가장 코드구현 가독성이 좋아서 선택했습니다.
const handleImage = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
setImageFile((e.target as any).files[0]);
// @ts-ignore
setImagePreview(URL.createObjectURL((e.target as any).files[0]));
};이미지 처리 때문에 삼일이상 고생했지만 하고싶었던 부분을 다 구현해서 정말 뿌듯합니다!
