🔔 4일차
그동안 구현했던 기능들은 순탄했던 것이였나…
오늘 이미지 업로드 기능 구현을 하고 다른 기능들도 이것저것 해보려고 했는데 이게 웬일인가.. 이미지 업로드 기능 구현을 하루종일 하고야 말았다 ㅜㅜ 너무 얕봤다..
일단 처음에 한 일은 DB에 이미지가 저장되는지 서버와의 연결이 잘 되는지 부터 테스트를 했다.
그런데 잘 되지 않았다. 계속 에러가 났다. 알고보니 서버에서도 자그마한 문제가 있었다.
해결하고 다시 해보았지만, 결국 어찌저찌하여 저녁먹기 전 쯤에 이미지가 업로드가 되는 것을 확인했다.
그러나 input 태그에서 타입을 file로 구현했기 때문에 내가 원하는 모습과는 달랐다.
나는 input 태그는 없애고 프로필 사진을 누르면 사진을 업로드하는 기능을 구현하고 싶었다.
결국 구현만 성공했고 CSS는 손을 봐줘야한다..
그래도 오늘 해결한 문제가 팀에서 Advenced였다는 것을 알고 기분이 좋았다!!
💪 오늘은 어떻게 프로젝트에 기여했나요?
프로필 수정 페이지에서 이미지 업로드 기능 구현을 했다.
이미지를 클릭하면 업로드할 수 있게 구현했다.
업로드한 프로필 이미지는 다시 프로필 페이지에 가면 변경 된 상태로 렌더링이 된다.
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
이미지 업로드 기능이 생각보다 잘 풀리지 않았다. 이 기능이 나를 하루종일 고민을 하게 만들었다.
먼저 useRef 훅을 썼을 때는 위 처럼 알 수 없는 에러가 계속 났다. 나중에 이유를 찾아보니 타입스크립트에서 Ref를 쓸 때는 null을 넣어주어야 한다고 한다.
const inputVal = useRef<HTMLInputElement>(null);
그리고 바로 저 변수를 쓰면 타입에러가 막 나는데 나는 inputVal.current!.click() 이런식으로 타입 에러를 일단 막고자 썼는데 이러면 non-null 경고가 나온다.
이건 해결 방법이 있었다.
if (inputVal.current) {
inputVal.current.click();
}
이런식으로 써주면 반드시 있다는 뜻이니 느낌표를 쓸 필요도 없고 에러를 맞이할 일도 없다!
팀원들이 코드리뷰 시간에 알려주셨는데 아주 유익했다. 팀원들 짱! 코드리뷰 시간 짱!
기능 구현한다고 CSS를 많이 건드리지 못했는데 이쁘게 다시 포장을 하러 가야한다. CSS가 생각보다 잘 되지 않아서 시간을 더 들여야 할 것 같다!
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
이미지 업로드 기능, axios 요청 util 함수로 만들기
스택 추가 기능을 엔터에서 검색기능으로 수정 사항에 맞게 다시 구현