session.mp4

[0] API 가 뭐고, 어떻게 만들지?

• API 는 프론트엔드/백엔드 간의 약속입니다.
  • "오른손을 들면 식빵을 나에게 주고, 왼손을 들면 크림빵을 줄래?"
• 미니 프로젝트로 SSG과 유사한 사이트를 기획했다고 가정해본다면,
  • API 문서는 이런 식으로 나오고, 이 문서를 바탕으로 프론트엔드/백엔드가 각자 개발을 하게 됩니다.
  • 프론트엔드/백엔드가 어떻게 동시에 개발할 수 있을까? 라는 질문에 답변해보시면, API 문서의 필요성과 작성 방법에 대해 이해하실 수 있을 거에요!

[1] 프론트엔드/백엔드 Repository 구성

• 별개로 구성합니다. 개발/배포 프로세스가 다르기 때문이고, 현업에서도 이렇게 합니다.
• 배운 대로 프론트엔드는 S3 에, 백엔드는 EC2에 배포합니다.
• 프론트-백을 연결하는 방법은 간단합니다. 프론트엔드가 백엔드에게 요청을 보낼 때, firebase 주소를 보내던 것을 EC2 IP 로 바꾸면 됩니다. axios 를 이용해볼 것인데요! (axios 활용 자료 공유 예정)
  • 프론트엔드: 잘 요청하기
  • 백엔드: 잘 응답하기

[2] Mock API 통해 비동기로 일하기

• 프론트엔드/백엔드 동시 개발을 위해 API를 확정지었더라도, 백엔드가 API 개발을 마쳐야만 프론트엔드가 실제 API를 바탕으로 화면을 만들 수 있다는 단점이 있습니다.
• 이를 극복하기 위해, 현업에서도 많이 사용하는 Mock API 기법을 소개합니다.
  1. 설계한 API 마다 적절한 response 를 response.js 파일에 모아둡니다.
  2. API 응답이 필요할 때마다, response.js 파일에서 해당 응답을 꺼내어 사용합니다.
     • 예시
  3. 프론트엔드와 백엔드 모두 해당 API를 충실히 구현합니다. 중간에 변경사항이 있는 경우 반드시 서로 사전에 공유합니다.

[3] (프론트엔드) 개발자도구를 적극 활용하기

• CSS는 개발자 도구를 적극 활용하세요! 직접 하나하나 다 만들기에는 시간이 너무 오래 걸릴지도 몰라요. 이미지도 다운로드 받을 수 있답니다.

  

[4] (백엔드) 스키마 설계 탄탄하게 하기

• API 문서를 작성하기 전, 어떤 데이터베이스를 사용할지, 어떤 스키마가 필요한 지를 잘 생각해서 탄탄하게 작성해야 나중에 API 문서를 작성하고 개발을 진행할 때 혼돈이 없습니다!

[5] git을 잘 쓰는 법

• commit, push, pull, pull request 정도만 알아도 개발하는 데 충분할 거예요!
• 이번 주차의 목적은 주특기를 연습하고 다른 주특기와 협업하는 것이기에, Git의 여러가지 기능을 연습하느라 시간을 지체하는 일이 없게 합니다!

FAQ