Problem
어쩌다보니 팀프로젝트로 앱을 개발하게 되었다..
코틀린이나 swift같은 native 언어보다는 아무래도 react native가 익숙할 것 같아 rn에 expo를 이용해서 프론트를 개발하기로 했다.
아무래도 백이랑 프론트가 완전히 분리된 상황에서 프로젝트를 처음 진행해본건 처음이라, 더미데이터를 어떻게 받아올지 고민을 많이 했었다.
그냥 로컬에 json 객체 형식으로 export한 것으로 뿌릴 수도 있지만 그래도 최대한 백과 연결된 상태 그대로 개발하고 싶었다. (fetch나 axios와 같이 http request를 통해서 받아오는 형태로)
서칭을 좀 해보니 json-generator 와 같이 특정 uri에 내가 입력한 내용의 json을 돌려주는, 더미데이터를 위한 웹사이트가 있었는데 계속 authoriz 문제가 발생하기도 했고 (status code 200) 애초에 uri가 정돈된 형태가 아니라 이 방법은 폐기했다.
결국 express로 간단한 node 서버를 만들어서 더미데이터를 보내주기로 했다,,, 디비 연결하고 그런건 아니고 그냥 해당 uri로 오면 로컬에 만들어놓은 json 되돌려주는 식으로.
나중에 경험이 있는 형에게 물어보니 원래 백 쪽에서 이런 식의 간이 api를 만들어 놓는다고 한다. 프론트들이 개발하면서 이용할 수 있도록... 그치만 우리 팀 백엔드 파트들도 다들 경험이 부족하기 때문에 이 부분은 그냥 내가 자급자족 하기로 했다. ㅠ
아무튼, node 서버와 expo 서버의 port가 다르기 때문에 cors 설정을 해주어야 하는데, 처음에는 express의 공식문서에 나와있는대로 cors 패키지를 install 하고 모든 요청을 통과시키는 설정을 해줬다.
expo의 run on web browser와 iOS simulator 에서는 cors 경고가 뜨지 않아 잘 해결이 된 줄 알았으나...
휴대폰에 설치한 expo go 앱에서 실행할 때는 여전히 cors 문제 때문에 json response를 받지 못하고 있는 상황이 계속되었다.
Solution
문제는 프론트측에서 http request를 보내는 uri 때문이었다!
계속 노드에서 cors 설정을 만지작거리느라 2시간 정도 버렸는데... ㅜㅜ
localhost로 request를 보내서 노트북 환경에서 구동되는 web browser와 iOS simulator에서는 제대로 response가 왔지만 핸드폰에서 돌아가는 expo go 앱은 먹통이었던 것이다.
localhost:3000/~~ 에서 도메인을 동일하게 연결된 wifi의 ip address로 대체해주면 된다.
예를들어
useEffect(() => {
...
await axios.get('199.99.99:3000/user')
...
}) 처럼 해줘야 한다.
노드 서버의 port는 그대로 해줘야 올바르게 간다.
ip address 확인
ip address는 맥의 경우 terminal에서
$ ipconfig getifaddr en0을 입력하면 알 수 있다.
Reference
