해결 방법

소셜 로그인 진행 후 이동되는 Localhost의 callback url을 복사해 https://vscode-******.run.goorm.site/proxy/포트번호/ 뒤에 붙여넣기 해주면 진행이 원활하게 된다.

에러 발생

Sanity 회원가입 후에 공식 홈페이지를 참고하여 제공해주는 코드를 터미널에 붙여넣어 Sanity 개발 환경을 세팅하는 과정에서 발생했다.

Sanity를 설치하면 터미널에서 구글, 깃허브, 이메일 계정 중 하나의 계정으로 Sanity 로그인 인증을 거쳐야 Sanity Studio가 정상적으로 설치되고 사용할 수 있게된다.

구글을 선택하면 소셜 로그인을 할 수 있는 URL 을 제공해준다.

여기에 접속해서 로그인을 진행하면 원래 정상적으로 Sanity Studio 설치가 완료되는데, 소셜 로그인까지는 문제가 없으나 소셜 로그인이 완료됨과 동시에 하는데 URL에 callback 이 추가된 채로 Localhost 로 이동되며 접근이 거부된다.

접근이 거부되는 이유는 Localhost 주소로 접근하려고 했기 때문이다.

구름 IDE에서 npm start 또는 npm run dev 등으로 서버를 여는 경우 Localhost 대신 따로 제공해주는 도메인을 통해 웹 사이트를 접속해야한다.

Localhost 에 접속하기 위해서는 자신의 컴퓨터로 개발을 진행해야 하는데, 구름IDE로 개발을 할 경우 클라우드 환경에서 에디터를 사용하고 있기 때문에 접속이 불가능하기 때문이다.

그래서 서버를 구동했을 때 구름IDE 측에서 내가 배포한 웹 사이트에 접속할 수 있는 도메인을 제공해주는 것이다.

https://vscode-******.run.goorm.site 이런 형식으로 주소를 제공해준다.

해결 과정

직접적으로 Localhost에 접근하지 못하기 때문에 다른 방법을 사용해야한다.

게다가 Sanity Sutdio를 접속하려면 npm run dev 를 통해 서버를 실행시킨 뒤에 loalhost:포트번호/desk 로 접속해야한다. 그러나 우리는 localhost 접속이 불가능하다는 점을 가만하여 로그인 방법과 Sanity Studio 접속 방법을 알려주겠다.

먼저, 위에서 소셜 로그인 완료후에 'callback'을 가진 URL로 접속되었다고 했는데, 맨 뒤의 localhost:포트번호/ 다음에 나오는 주소 내용을 전부 복사한 뒤에 https://vscode-******.run.goorm.site/proxy/포트번호/ 에 붙여주면 된다.

포트번호가 3000 이라면
https://vscode-******.run.goorm.site/proxy/3000/callback=123abcdefghijk 이런 식으로 말이다.

이렇게 되면 소셜 로그인 완료 및 셋업이 완료된 것이다.

그런데 위에서 말했듯 Sanity Studio를 접속하기 위해서는 또 다시 localhost 로 접속해야한다.
하지만 구름IDE 를 사용중인 나로써는 접근이 불가능하기 때문에 다른 방법을 사용해서 Sanity Studio로 접속해야한다.

그 방법이 바로 Sanity Studio Hosting 이다.

이 공식 문서를 참고해서 호스팅을 하면 된다.
내가 원하는 도메인을 설정해 사용할 수 있기때문에 굉장히 편리하다.
로그인은 아까 위에서 진행했기때문에 Hosting 과정에서 생략된다.
Sanity 프로젝트를 선택 한 뒤 원하는 도메인을 입력하면 끝이다.
배포가 완료되었다는 알림이 뜨면 도메인을 입력해 접속해보자.

그럼 이렇게 로그인 화면이 뜨는데 로그인을 완료하면

정상적으로 Sanity Studio 사용이 가능해진다!

아무 스키마도 작성하지 않았기에 이런 창이 뜨는 것이지 결과적으로 sanity studio를 사용할 수 있게되었다.
참고로 스키마 작성 후 적용하는 경우나 수정 내용을 Sanity Studio에 반영하고 싶다면 sanity build 명령어를 사용하면 된다.

고찰 With Deep Dive

문제는 해결되었으나 궁금한 점이 있다.

callback url 이 뭐길래 도메인에 붙여넣으니 정상적으로 로그인이 되는가.

Callback URL : 인증 과정에서 사용자 인증 결과를 전달받아 처리하기 위한 URL

즉, 위에서 발생한 상황에 대입해보면 구글 소셜 로그인 인증이 완료되었다는 인증 완료 결과를 전달받아 localhost 에서 인증 완료 처리를 하기 위한 URL 이다.
그런데 localhost 접속이 거부되니 마지막 인증 완료 처리를 할 수 없게 된 것이고, 인증 완료 처리를 생략해버렸으니 인증에 실패한 것이다.

로그인 -> 로그인 확인 -> Callback URL에 결과 포함해 전달 -> URL 이동 후 결과 처리

참고 자료 모아보기

• 네이버 고객센터 - Callback URL
• Sanity Studio - Hosting
• CodeServer - Domain
• Github Issue - Proxy URL
• Github Issue - Callback URL

---

마치며

약 1주간 이 문제가 속을 썩였다.

사지방(사이버 지식 정보방)에서 구름IDE로 공부하느라 제약이 많아 답답하기도 하고 절망스러울 때도 많다.

그래도 이제 얼마 남지 않았으니 끝까지 포기하지 말고 꾸준히 공부하자.

전역 후 날개를 다는 그 날까지!

‘내가 진짜 크게 성장할 수 있는 기회가 왔구나. 한 번에 크게 레벨업 되려고 이런 고난이 찾아왔나 봐!’ 라고 생각해라. - 『역행자』