배경

OpenWeatherMap 서비스를 이용하면 도시의 날씨 정보를 얻을 수 있습니다. (open API)

Axios 사용 실습으로 이용했었는데, 기왕 날씨 정보를 받아온 김에 현재 기온에 맞는 옷차림 정보를 제공하는 서비스로 발전시켜 보았어요.

혹시 이런 이미지를 본 적이 있나요?

저는 기온만 보고 어느 정도로 춥거나 더울지 가늠이 되지 않을 때 이런 식으로 검색해 참고하곤 했었는데요.

그때그때 이미지를 찾아보지 않고 바로 결과를 알 수 있는 서비스를 만들어 보고 싶었습니다. (지금 생각하면, 도시 이름을 일일이 입력하는 게 더 번거로운 것 같기도 하네요. ㅎㅎ..)

둘러보기

Axios, React.js, react-router-dom, styled-components 등을 이용했습니다.

어떻게 생긴 서비스인지 궁금하시다면 깃허브를 참고해주세요!

전체 코드와 업데이트 내역 등을 확인할 수 있습니다. ☺️

배포 이유

저번 주 화요일에 멋진 기업의 인턴 면접을 봤습니다.

저는 이력서를 제출했는데, 이 서비스 소개와 깃허브 링크를 담았었어요.

그때 면접관으로 들어오신 개발자님이 제가 제출한 서류를 확인하고 직접 클론하여 실행해 보셨는데, 401 에러가 발생했다고 하셨습니다.

아예 고려하지 못했던 내용이라 401 에러가 뭐였는지도 바로 기억이 안 났습니다. 면접관님과 상황에 대해 대화를 나누며 인증 에러임이 기억났어요.

API key를 .env 파일에 담고, 깃허브에는 공유하지 않은 상태였기에 발생한 문제인 것 같았습니다.

면접을 마치고, API key 없이 실행하면 항상 401 에러가 나는 게 맞는지, 아니면 다르게 처리할 수 있는 방법이 있는지조차 확실하지 않아 구글링을 했습니다. 그러나 답을 찾지 못했고, OKKY 커뮤니티에 질문을 올렸어요.

API key 없이 실행하면 항상 401 에러가 발생하는 게 맞는 것 같다는 댓글을 누군가 달아주셔서 이 문제를 어떻게 해결하면 좋을지 고민을 시작했습니다.

구글과 유튜브를 유랑하다가 조코딩님이 netlify 서비스를 이용해 웹 페이지를 정말 쉽게 배포하는 영상을 보았습니다.

이력서와 포트폴리오 작성을 위해 구글링할 때 netlify로 자신의 이력서/포트폴리오를 배포한 분들을 봤던 터라 관심이 갔습니다.

아예 배포를 해놓으면 API key 없어도 서비스를 이용할 수 있겠더군요.

바로 회원가입을 했습니다.

문제 발생

저는 배포가 처음이었습니다.

영상을 따라했는데 자꾸만 404 Not Found 에러가 발생했습니다. (netlify에서 만들어 둔 404 Not Found 페이지로 자동으로 이동...)

아마 build 과정을 거치지 않아 그랬던 것 같습니다.

어떻게 하는 건지 알아내지 못한 상태에서, 깃허브와 연동해 배포하는 방법을 시도해봤습니다.

그랬더니 netlify의 로봇이 build 등의 과정을 알아서 진행해줬습니다.

문구가 너무 귀엽지 않나요?

로봇이 열심히 build하고 배포해주는 과정은 생각보다! 시간이 조금 걸렸습니다. 처음엔 오류가 난 줄 알았는데, 그냥 조금 시간을 가지고 기다려주면 되는 거였어요.

그리고 깃허브와 연동해 이렇게 배포를 하면, 깃허브에 커밋(하고 푸시)할 때마다 자동으로 재배포가 됩니다. 덕분에 커밋 하나하나를 더욱 신중하게 하게 되었습니다.

그래서 지금의 해결책은 깃허브와 연동해 netlify 로봇의 도움을 받아 배포하는 것입니다. build 관련 사항은 더 공부가 필요합니다.

Sites를 누른 뒤, Add new site 버튼 눌러, import an existing project를 선택하면 깃허브에 올려둔 프로젝트를 가져올 수 있습니다.

저는 Deploy manually를 선택하고 파일을 끌어다 놓는 방식으로 처음에 몇 번 시도했었는데, 리액트 프로젝트여서 프로젝트 파일 전체를 넣어야 하는지, index.html 파일을 넣어야 하는지도 사실 잘 모르겠어요.

API key 추가하기

깃허브에 올려둔 것을 바탕으로 배포한 것이라 아마 이때도 API key가 없는 상황이었을 겁니다.

netlify 서비스에서 필요한 key 정보를 추가할 수 있습니다.

자신의 프로젝트에서 Site settings > Environment variables > Add a variable을 클릭하면 원하는 키를 등록할 수 있습니다. 저는 REACT_APP_API_KEY를 추가해 주었어요.

이렇게 수정한 뒤엔 재배포를 해주어야 하는 것 같더라구요.

마찬가지로 자신의 프로젝트에서 Deploys > Trigger deploy > Deploy site를 눌러 수동으로 재배포를 해주었습니다.

url, 사이트 이름 바꾸기

사이트 이름은 Site settings > Site details > Site information > Change site name 버튼을 누르면 변경할 수 있습니다.

원하는 이름으로 바꾸면 그걸로 url로 변경됐던 것 같아요.

url은 고유한, 유일한 것이어야 하므로 (URI가 궁금하시면 이전 글을 살펴보셔도 좋을 거예요!) netlify 서비스에서 누군가 먼저 사용한 이름으로는 바꿀 수 없어요.

_redirects 파일 추가하기

다음 게시글로 쓸 예정이지만, 에러 핸들링을 위한 페이지를 따로 만들었어요.

react-router-dom으로 그 경로는 /error로 정해두었는데요.

npm start 명령어로 localhost에서 확인할 때는 현재 주소 뒤에 /error를 추가하면 그 페이지를 확인할 수 있었습니다.

그렇게 문제가 없는 줄 알고 재배포를 했는데, 제 url 뒤에 /error를 추가했더니 netlify에서 제공하는 404 not found 페이지가 나왔어요.

구글링해보니 리액트로 만든 Single Page Application이라서 /error를 붙인 임의의 주소를 요청하면 페이지를 찾지 못한다...는 것 같았습니다.

벨로그에서 Router 사용한 프로젝트 Netlify로 배포할 때 404 page not found라는 게시글을 발견하고 저도 _redirect 파일을 추가했습니다.

위의 글 말고도 netlify 페이지에 누군가 올려둔 영어 질문 글도 봤었는데, 그 글에서도 같은 해결 방식을 권하고 있었습니다.

이게 될까? 싶었는데, 정말 되더라구요!

아직은 이 방식에 어떤 문제가 있는지 모르고, 정확히 어떤 이유로 되는 건지도 확실히 이해하진 못했습니다. 차차 공부해야겠습니다.

마치며

저의 배포 여정은 현재 여기까지 진행된 상태입니다!

netlify 로봇의 도움으로 깃허브에 푸시할 때마다 자동으로 재배포가 되고 있고, 배포 관련한 문제 사항은 언급한 내용이 전부였습니다.

또 다른 문제를 만나게 되면 돌아오도록 하겠습니다.

netlify로 처음으로 배포해 본 제 서비스는 여기를 누르면 확인할 수 있습니다!