이제 배포만 하면 된다. 배포는 vercel 서비스를 이용한다.

배포하기 전에 점검해야 할 것이 있다. 소셜 로그인의 경로들이 개발 환경의 url로 지정되어 있을 것이다. 따라서 경로를 자신이 배포한 주소로 모두 변경을 시켜줘야 한다.

모두 변경한 뒤 배포를 해주었다.

그러나..

어마어마한 타입 에러가 나타나면서 빌드 오류가 발생하였다. 왜 오류가 나나 해서 살펴보았더니 타입 에러라도 에러가 있으면 빌드가 되지 않는다는 것이었다. 로컬에서 개발할 때는 타입 에러가 있어도 앱은 작동하기 때문에 그냥 넘어갔던 적이 있는데, 그것이 누적되어서 100개가 넘는 타입 에러가 발견되었다. 타입 에러뿐만 아니라 변수를 선언하고 사용하지 않는 것 또한 빌드 실패의 원인이 된다. 이러한 안 쓰는 코드들을 제거해 주고 모든 타입 에러도 해결하였다.(오류를 해결하는 과정에서 타입을 어떻게 적용하는지에 대해 많이 배우게 되었다.)

TSX에서의 attribute(속성)

앞에서 tsx의 속성은 아무 이름이나 적어도 된다고 기록을 하였는데, 이번에 오류를 해결하면서 더 깊게 알아보게 되었다.

 <FontAwesomeIcon
                className="hover:cursor-pointer"
                id={item.id}
                name={item.name}
                artists={artists}
                imgUrl={item.images}
                onClick={onPlayClick}
                icon={faPlay}
              />

일단, 이런식으로 사용자 속성의 이름을 적으면 타입 에러가 발생한다. 그래서 에러는 있지만 동작은 되었던 것이다.

tsx에서는 자체적으로 가지고 있는 내장 attribute를 제외한 다른 attribute를 사용할 수 없다. (내장 attribute의 예시는 input태그의 value속성이다. 이 value속성은 div태그에는 존재하지 않는다.)

즉, div태그에 value속성을 설정하는 것은 불가능하다.

 <FontAwesomeIcon
                className="hover:cursor-pointer"
                data-id={item.id}
                data-name={item.name}
                data-artists={artists}
                data-imgUrl={item.images}
                onClick={onPlayClick}
                icon={faPlay}
              />

오류를 해결하기 위해 data-*의 name format을 사용하였다. 이 name format을 사용하면 사용자 정의 속성을 만들어 사용할 수 있다.

복잡한 데이터의 타입 정의

직접 타입을 만들기 어려운 경우(데이터가 복잡할때) 라이브러리에 타입이 이미 만들어져있는지 확인해서 만약 있다면 import해서 불러와 그대로 사용할 수 있다.

supabase 소셜 로그인 경로