오늘은 이번주 내내 나를 괴롭게 했던 rest API에 대해 이야기 해 보려고 한다.
3주차때 눈물콧물 쏙 빼게 만들었던 ant-design:앤트디자인보다 더 나를 힘들게 했기 때문에 4주차를 마무리하며(벌써요) 메인 주제로 함 삼아보려고..
rest API
REST API가 뭔가요?<-궁금하면 참고부탁
API가 이렇게 중요한 줄 알았다면 설계할 때 마라탕 먹지 않았을텐데..
협업이란 결국 나 혼자 결과물을 만드는게 아니기 때문에 데이터를 어떻게 다루느냐가 프론트엔드 개발의 핵심같다. 혼자 만들다보면 그래서 이걸 어떻게 보내고 받고 삭제하는건데? 라는 의문이 들기 시작한다. 근데 개발자라면 그때 공부하는게 아니라 그 전에 미리미리 해두자..^^ 라고 하고싶은데 그때라도 하는게 어딘가. 어차피 다른것도 다 찾아가면서 한다...^^
json-server
문제는 가상의 API 데이터를 어떻게 만드느냐인데 이때 사용되는 도구가
json-server이다. db.json 파일에 가상의 데이터를 넣으면 그대로 변환해준다. 설치 후 http://localhost:3000/games/2 에 들어갔을 때까지만해도 행복했다. 데이터가 잘 열렸으니까.
API 연동
잠깐 그 이전에 API 연동에 대해 이야기해보자 API 연동
API는 GET, PUT, POST, DELETE 등의 메서드로 요청을 할 수 있는데 우리는 axios를 사용하기로 했다. 근데! 아무리! 아무리! 데이터를 넣어도 나오지가 않는 것이야ㅜㅜㅜ 웃기는게 이 와중에도 같이 하는 동료가 있다는게 얼마나 든든한지.. 여러분 동료랑 같이 짝코딩하세요.. 내가 모르면 동료도 모르고 동료가 알면 나도 안다.. 다섯시간 걸릴 오류를 두시간으로 줄일 수 있음..
아무튼 괴롭게 울면서 이유를 찾는 와중에 설마.. 터미널을 두개 열어서 각각 돌려야 하는건가 라는 생각이 들었다. 유레카!
리액트 포트 변경
리액트는 동시에 같은 포트를 이용하려고 하면 열리지 않아.. 3000 과 3001 같은 각각의 다른 포트를 이용해야 가상 API를 사용할 수 있다.. 이런 삽질의 과정 우리만 겪는건가..
심지어 이 모든 자료는 멘토님께서 제공해 주셨습니다.. 봐도 왜 모르니!
갑자기 백년정도 늙은 기분.. 이렇게 4주가 지나가네..
