💻12주차 공부내용

-4차 팀프로젝트 끝
-about.html 사이트 소개 페이지 작성(프론트엔드)
-NST API. elastic beanstalk으로 배포, 클라이언트에서 jQuery(ajax) 서버 통신
-매일 프로그래머스 알고리즘 문제 풀이

API, jQuery, ajax, Synchronous/Asynchronous

• API(Application Programming Interface)
  -인터페이스(Interface): 상호 간의 소통을 위해 만들어진 프로토콜.
  API란, 어떠한 응용프로그램에서 데이터를 주고 받기 위한 인터페이스 사양(specification). API 핵심은 정의된 프로토콜을 기반으로 상호 작용을 할 수 있도록 일종의 약속된 시스템이며, 라이브러리는 실제 이를 바탕으로 구현된 결과물이다.
  -OPEN API: API는 사용하는 방법과, 용도에 따라 오픈 API와, 비공개 API 있다. 오픈 API는 말 그대로 누구나 쉽게 접근하여 정보를 공유하기 위해 만들어진 규격이며, 비공개 API는 권한이 있는 일부 사용자들에게만 정보를 제공하기 위해 만들어진 규격이다.
• jQuery
  https://www.samsungsds.com/kr/insights/jQuery.html
  웹사이트에서 자바스크립트를 쉽게 사용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리. -2006년 미국의 존 레식(John Resig)이 발표.
  현재는 Angular, React, Vue 등으로 입지가 많이 낮아진 추세이다.
• Ajax(Asynchronous JavaScript And XML)
  https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started
  Ajax란 자바스크립트를 사용한 비동기적(Asynchronous) XML 통신이다. 요즘은 XML 보다 json을 많이 사용한다. 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.
  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고 작업을 수행
• 동기(Synchronous)와 비동기(Asynchronous)
  https://goplanit.site/94.%20Synchronous_asynchronous/
  • 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,
  • 비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.
    페이지 리로드의 경우, 전체 리소스를 다시 불러와야하는데 이미지, 스크립트, 기타 코드 등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

📚느낀점

일주일 정도 되는 짧은 기간의 4차 팀프로젝트가 끝났다.
나에게 그 일주일은 짧은 만큼 간단하게 지나가지는 않았다. 하나의 사이트도 여러 서버와 연동되고 있는 걸 처음 알게 되었고 직접 API를 만들어 클라이언트에서 API 통신까지 했으니 굉장히 신나고 재미있는 경험이었다.
초반에는 django-ninja를 사용해 NST API를 만들고 AWS elastic beanstalk으로 배포까지 했지만, API와 어떻게 통신해야 할지 감이 없었다. 서버-서버(API) 연결을 해야 하나?했지만 지인 힌트와 구글링을 통해 알아보니 클라이언트-API 통신이었다. 바로 생각난 방법은 jQuery ajax 비동기 통신이었는데, 과거 미세먼지 OPEN API 통신 경험이 있어 구글링으로 힌트를 얻고 난 후에는 어렵지 않게 구현할 수 있었다.
클라이언트-API를 연결해보니 비동기성이 무엇인지, jQuery ajax 말고 다른 방법은 없는지 궁금해졌다. 비동기식은 간단하게 말하면 동시에 일어나지 않는 의미로 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으며 페이지 리로드할 때도 필요한 부분만 불러와 사용할 수 있는 장점을 가지고 있다.
또 다른 기술은 없을까 찾아보니 jQuery ajax는 입지가 많이 낮아지고 있는 추세이고 요즘은 React Axios 많이 사용한다고 하니, 비동기식으로 API와 통신할 일이 또 생긴다면 다음에는 React Axios 도전하고 싶다.

🍜다짐, 다음 계획

-Docker 학습
-Django 다시 짚어보고 익히기
-final project 참신한 아이디어 구상하기
-작업 진행 중에 만난 새로운 개념, 기술 등.. 공부하면서 나만의 스토링텔링 정리를 해보자.
-캠프 막바지를 향해 달려가고 있다. 마지막까지 최선을 다하자.