이전 회고에서 언급했듯이 우테코 레벨4는 미션과 프로젝트를 병행해야 한다. 두 개를 병행하면서 각각 어느 정도의 지분을 가져갈지는 개인의 선택이지만, 나의 경우는 두 개다 놓치고 싶지 않기에 5:5의 비율로 가져가려고 생각했다. 하지만, 성능 최적화 미션을 하는데 공부할 것도 많고 시간도 많이 쏟았기에 5:5의 공평한 비율을 가져갔다고 보기는 어려웠다. 그래도 목요일 쯤와서 일과 시간에는 프로젝트, 이후에는 미션을 하자 라고 생각을 했지만 어느정도 미션을 다 해서 위와 같은 일정이 나오는거지, 한창 미션 할때면 상상하기 힘든 일정이긴 하다.
이번 주에는 무려 생.일.이 있었기 때문에 약간의 기대가 되기도 했다. 크루원들이 생일 케익도 해주고, 잠실에 있던 크루원들도 케익을 주기 위해 선릉에 왔다. (근데 저녁 약속이 있어서 나는 칼퇴를 했다)
지난주만 해도 시들시들하던 애가 물 한번 줬더니 다시 탱글탱글해 졌다. 바로 반응이 오지 않아서 내 손으로 보내나 싶었지만 주말에 상태가 괜찮아져서 다행이다.
제레미가 앞에 선릉에서 도토리 주워다줬다.
성능 최적화 미션
수요일에 미션을 제출하고 금요일에 있을 수업만을 기다리고 있었다. 미션을 제출하긴 했지만, HTTP 캐시라던지 AWS S3와 CloudFront 등 성능 최적화에 필요한 인프라 지식이 부족했기 떄문에 그렇게 속이 시원한 미션은 아니었다.
미션을 제출하고 리뷰도 같이 받았는데, 리뷰어의 날카로운(?) 질문에 내가 시원스럽게 대답하지 못하면서 아직 갈길이 많이 남았다는 생각을 했다. 요청을 최소화 하는 관점으로 한번 생각해 보게 되었고, 인터넷 검색을 통해 알게된 지식을 너무 무지성으로 작성하지 않아야 겠다는 생각을 다시금 하게되었다. 질문에 대한 답변을 하면서 기존에 내가 알고 있던 지식보다 조금 더 깊게 공부해 볼 수 있었다. (미션 자체가 너무 오랜만이라 약간 어색했다.)
성능 최적화 미션을 하면서 새로 알게된 개념이 있는데 바로 HTTP 캐시이다. 관련해서는 블로그 포스팅도 끝마쳤다.
이번에 배운것들을 토대로 프로젝트에 좀 더 잘 적용해 볼 수 있을것 같다.
피움 프로젝트
이번에 내가 맡은 역할은 이미지 파일 업로드이다. 이미지 파일 업로드를 하기 위해서는 input태그에 type=file을 사용하면 됐었는데, API에 Content-Type을 기존 application/json이 아닌 multipart/form-data의 형식으로 API 호출을 해야했다. 타입이 JSON이 아니기 때문에 기존 Body를 굳이 JSON 형태로 감쌀 필요도 없었다.
하지만 여기서 큰 난관에 봉착하게 되는데, 이미지 업로드가 잘 되는지 확인해 보기 위해 MSW를 통해 이미지 포맷을 받아보려고 했는데, MSW에서는 FormData형태를 제공하지 않는다는 사실이었다. 나는 이게 왜 안되지 하고 거의 3시간 동안 삽질을 했었는데, 옆에 있던 참새가 MSW에서 최근에 업로드한 글을 올려주면서 현재 개발중인 기능인 것 같다는 얘기를 해줬다. 정말 세상 허탈하지 않을 수 없었다.. ㅠ
여기에 추가적으로 업로드한 이미지 파일을 JS 코드만으로 무손실 압축을 해서 서버에 보내는 작업을 했다. 서칭을 해본 결과, 기존 File형태의 데이터를 url로 변경한 다음에 새로운 이미지 객체로 만든 다음에 해당 객체를 canvas를 통해 새롭게 리사이징 하는 방식이다. 순조롭게 진행이 돼서 기분이 좋았는데 막상 압축된 이미지를 확인해 보려고 하니 이미지가 깨져서 아예 보이지 않는 문제가 생겼다. 방법이 잘못 됐나 아니면 리액트라서 문제인가 등등 여러 생각을 하다가 이 부분도 잠시 미루어 두었다. 리액트로 하는 방법에 대해 검색해 보면 전부 라이브러리를 사용해 보라는 얘기밖에 없었다 (내가 검색을 잘 못하나?ㅠ) 아니면 직접 canvas 요소를 그리지 않아서 그런가 생각을 해보기도 했다. MDN에 OffscreenCanvas라는 기능이 있었는데, 이 기능이 정말 최신 브라우저에서만 제공하는 기술이라 건너뛰었다.
이번 주에는 팀 프로젝트에 좀 많은 도움을 주고 싶었는데 생각보다 진도가 나가지 않아서 답답했다. 그래도 최적화에 대한 개념을 어느정도 잡을 수 있었고, 다음주에는 실제로 프로젝트에 적용해 보면서 차차 나아가 볼 생각이다.
