최종 프로젝트 7일 차 @이미지 업로드, API 이중 불러오기, ui 재구성, 종료 기능 조정, 배포 전 build 오류

오늘은 정말 많은 일이 있었다. 어제 이미지 업로드를 했고, 제목에 있는 나머지를 오늘 다 했다. 정말 머리가 터지는 줄 알았는데, 이전 작업들을 잘 기억해두고 있어서 이러한 수정 작업들이 그래도 순조롭게 이루어진 것 같다. 

 

이미지 업로드

먼저 이미지 업로드를 짚고 넘어가자면 간단하게 input 창 2개만 띄워놓았던 초대하기(이미지, 닉네임)를 파일 업로드 방식으로 바꾸는 작업이었다. 이건 마이페이지 편집하기 기능을 작업하신 분이 이미 해놓은 코드가 있어서 그 코드를 분석해서 변형하는 과정을 통해 구현할 수 있었다. 

 

그 분과 내 코드에서 다른 점이 있다면, 그 분은 기존의 데이터를 수정(update)하는 과정에서 이미지를 업로드하고, 나는 새 파티 프로필을 등록(insert)하는 과정에서 이미지를 업로드 한다는 점이었다. 때문에 나는 먼저 프로필을 등록한 이후 프로필을 업데이트할 필요가 있었는데 이러니까 기존의 마이페이지 수정 방식에서는

 

이미지 업로드 => 프로필 수정

 

이었던 것이

 

프로필 생성 => 이미지 업로드 => 프로필 수정

 

의 3단계를 거쳐야 했다. 오류가 일어날 수 있는 경우의 수도 좀 더 늘어나서 앞으로 예상치 못한 오류가 일어나지 않을지 좀 더 세심한 주의가 필요하겠다. 

 

=> 결과

 

API 이중 불러오기

다음은 시간이 좀 들었지만 비교적 간단했던 API 이중 불러오기이다. 이건 디자이너님과 디자인 시안을 보면서 회의하다가 인식한 사항으로, tmdb에서 detail정보뿐만 아니라 credit 정보 또한 불러오는 것이 가능해야 하기 때문에 API 요청을 한 번에 두 개를 해야한다. 또한 영상의 종류가 tv인지 movie인지에 따라서 각각 다른 API요청을 해야하기 때문에 좀 시간이 걸렸다. 

 

ui 재구성

다음은 ui 재구성이다. 이 또한 디자이너님과 회의하다가 인식한 사항으로, 디자인 상의 참가하기 기능과 실제 참가하기 기능의 ui가 많이 달라서 수정을 해야했다. 구체적으로는 디자인 상으로 참가하기는 modal 창인데 실제 코드 상 참가하기는 page였던 것이다. 다행히 다른 팀원 분이 만들어주신 modal 창이 있어서 쉽게 코드를 수정할 수 있었다. 

 

=> 결과

 

또 초대하기 기능 또한 실제 동작을 위해서 위치가 좀 바뀌어야 했는데 실제로 초대하기 기능은 팔로우한 사람들에게 보내는 것이기 때문에 초대하기를 누르면 먼저 내가 팔로우한 사람의 목록을 띄워야한다. 이제 이러한 팔로우한 사람들을 띄우는 기능을 다른 팀원 분이 구현하셨기 때문에 본격적인 초대하기 기능을 구현할 수 있었다. 

 

=> 결과

 

또 탭을 통해 각각 다른 정보가 렌더링되어야 하는 파티페이지 하단 부분을 위해 useState로 탭을 만들었다. 그리고 owner권한(강퇴, 종료)이 채팅창에서 사용되기 때문에 partyPage에서는 없어졌다.

종료 기능(오너 권한) 조정

이전에는 모집하기 과정에서 넣어주어야 했던 owner_id가 null이었던데다가 렌더링을 고려하느라 충분한 테스트를 거치지 못했었는데, 오너 권한이 파티페이지에서 없어지면서 렌더링을 고려할 필요가 없어져서 충분한 테스트를 거쳐 일부 오류나 정합성(종료하면 홈으로 이동한다던가, 종료된 페이지에 접속하면 기능 버튼을 비활성화한다던가)을 조정할 수 있었다. 위 사진이 종료된 파티페이지로 버튼이 비활성화된 것을 확인할 수 있었다. 

 

배포 전 build 오류

그리고 오늘은 또 배포 전에 내 코드에서 build를 해보고 dev 브랜치에 병합하는 작업을 거쳤는데 오류가 좀 떴다. 다만 오류가 좀 많이 떴기 때문에 오류의 원인이 여러 개였던 것으로 추정된다. 

내가 생각한는 오류의 원인은(그리고 내가 수정한 사항들)

1. 여러 곳에서 쓰이는 type의 선언을 컴포넌트 내에서 했기 때문에(추측)
   • 데이터베이스야 작은 프로젝트를 진행하면서 쉽게 바뀌는 것이니 굳이 사전에 type을 통일하지 않고 각자의 작업영역 내에서 선언해서 사용했었는데, 이러한 type 중에서는 정말 온갖 곳에서 사용되는 것이 있었기 때문에 렌더링 과정에서 오류가 발생한 것이 아닌가 한다. 아직 타입 선언하는 곳까지 읽히지 않았는데 먼저 타입을 사용하고 있다던가 하는 문제이지 않았을까?
2. 사용되지 않는 함수를 컴포넌트 파일 내에서 선언하고 있었기 때문에(확정)
   • 이걸 수정한 이후에 build 오류가 고쳐졌기 때문에 이건 확실하게 build 오류의 원인이었다. 이번에 처음 알았는데, 컴포넌트 내에서 함수를 선언하고 사용하지 않으면 오류가 발생하는 모양이다. 이 사실 자체 typescript가 알려줘서 알고 있었지만 이번에는 약간 다른 형태였기 때문에 눈치채는 게 약간 늦었는데, 내가 사용하지 않는 함수를 컴포넌트 안쪽이 아니라 컴포넌트 밖, 컴포넌트 파일 안쪽에 선언했었기 때문이다. 해당 함수는 재사용성이 높다고 판단했기 때문에 파일을 분리했고, build 오류가 고쳐졌다.