Dev log
서버에서 프로필정보를 API 연결 응답으로 받아서 랜더링 하는 코드를 작성했다. 유저정보를 다른 곳에서도 사용할 수 있을까 싶어서 최상위 컴포넌트에서 상태를 관리할 수 있게 useState를 사용했다. props로 유저정보를 랜더링 할 수 있게 구성했다. 공부할 때는 useEffect가 잘 이해되지 않아서 잘 사용하지 않았는데 요즘은 useEffect가 없으면 불편한 상황이 자주 나왔다. 익숙해지기도 했지만 그만큼 편리한 hook인 것 같다. 남용하기에 복잡해져서 좋지 않지만 필요한 때를 잘 생각해서 사용한다면 정말 깔끔하고 좋은 코드가 될 것 같다.
유저정보중에서 한마디를 적어 넣는 항목에 API 연결하여 patch를 하고 화면에는 바로 적용하게 한다음에 랜더링을 하는 방식으로 구현을 했었다. 지금은 그 방법이 생각나서 그렇게 했지만 더 효율적인 코드도 생각해봐야겠다. patch를 하고 비동기로 적용되기 전까지는 state 정보를 우선은 화면에 표시하게하고 재랜더링 하여 최신화 하게 했다. 비동기를 기다리게 되니 아무입력이 없다가 시간이 지난후에 화면에 표시되는게 불편해 보였다. 이 부분도 useEffect가 정말 큰 역할을 해줬다.
오늘의 가장 어려웠던 부분은 이미지 업로드 부분이다. 이부분은 아직 해결하지 못했따. input tag와 formData를 이용해서 업로드 하는 방법이 가장 많이 나왔다. 그런데 아직 잘 이해되지 않은 부분이 많았다. 이 방법을 보기 전까지는 사용자가 image를 선택하면 그 image를 url로 생성해서 그 url 주소를 서버에 업로드해서 랜더링을 하는 방법을 생각했었으나 이 방법은 잘 모르는 단계에서 생각하는 방법인것 같다. 실제로는 위의 input tag 와 formData를 대부분 언급하고 있었다. 오늘 몇시간을 그 방법을 찾는데 소비했지만 방법을 익히지 못했다.
const [img, setImage] = useState(null);
...
const onChange = async (e) => {
setImage(e.target.files[0]);
const formData = new FormData();
formData.append('file', img);
// 서버의 upload API 호출
// const res = await axios.post("/api/upload", formData);
};
return (
...
<input id="profile-img" type="image" src="profile-img.png" onChange={(e)=>onChange(e)}></input>
...아직도 방법은 잘 모른다. 다른 구현할 일이 많다고 생각하다보니 방법이 잘 들어오지 않았다. 다른 팀원에 비해서 도움이 되는 부분이 적다고 생각이 들어서 초조한것 같다. 도움이 되고 싶고 잘하고 싶은데 능력이 안되니 답답한 마음이 들었다. 지금 생각해보면 공부 동기부여는 될 수 있지만 나는 초조함이 일할 때 도움이 되는지는 잘 모르겠다. 오히려 시야가 정말 좁아지는 것 같아서 마음을 편하게 먹고 할 수 있는 일을 최선을 다하는 방향으로 진행해야 할 것 같다. 팀원들을 더 믿고 작은 일이라도 내가 안하면 다른 사람들이 하기 때문에 내가 못하는 일을 다른 사람이 해준다면 나는 불편한 일이다로 맡아서 해야 진행이 잘 될 것 같다는 생각이 들었다. 그러면서도 잘하고 싶은 마음은 공부를 하면서 채워가야겠다.
