공부한 내용을 모아서 블로그 글을 쓰다 보니 문제가 생겼다. 내용이 어느 정도 모여야 글을 쓸 수 있는데 모이기 전까지는 정리하지 않게 된다는 것이다. 누군가에게 도움이 되기 위해 글을 쓰려는 목적보다 나 스스로 정리를 하기 위해 글을 쓰려는 목적이 커서 하루하루 공부한 내용을 최대한 남겨보려고 한다.
API
API에 대해서는 여러 번 검색해 보았지만 이해를 못 했는지 볼 때마다 검색을 해봐야 했다. 이번에는 꽤 잘 이해를 한 것 같다. 검색으로 찾은 블로그의 설명이 이해가 쉬워서 잘 남기지 않는 댓글까지 남기며 감사를 표했다.
- API란 내가 만들 응용프로그램에서 사용할 수 있도록 다른 응용프로그램들을 제어할 수 있게 하는 것을 말한다. (AP:응용프로그램, I:상호작용)
- API를 사용하면 우리가 제어하고자 하는 시스템의 환경을 정확히 알지 못하더라도 손쉽게 제어할 수 있다. (자바스크립트의 alert가 간단한 예)
출처: API란?
Ajax
포트폴리오 작업을 하다가 클릭을 할 때마다 로딩되게 구현하고 싶지 않아서 찾아보게 되었다.
브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지 일부만을 위한 데이터를 로드하는 기법이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.
출처: [Ajax] Ajax란 무엇인가?
순수 자바스크립트로는 ajax의 사용이 어려워서 별도의 라이브러리를 많이 사용한다고 한다.
자바스크립트를 사용하여 AJAX 비동기 통신을 위해 별도의 라이브러리를 많이 사용하고 있습니다. 예를 들면 jQuery의
ajax()메소드를 사용하거나 아니면 axios 라이브러리 등을 단지 AJAX 구현을 위한 목적으로 추가해 사용해왔습니다.
왜냐하면, 순수 자바스크립트 및 기존 비동기 통신이 어렵고 비효율적이기 때문입니다. 특히XMLHttpRequest를 사용해서는 원하는 기능을 모두 구현하기 위해서는 매우 복잡하고 Promise 객체를 함께 사용하기도 쉽지 않았기 때문이죠.출처: 자바스크립트 Fetch API 알아보기
jQuery Ajax
제이쿼리는 조금 알기 때문에 그나마 접근이 쉬울 것 같아서 제이쿼리를 이용하여 ajax를 구현해냈다. 보여지는 것은 멀쩡하지만, 정확히 모르고 사용한 것들이라 사용이 제대로 된 건지는 알 수 없어서 아쉬웠다.
- 일단
$.ajax()메소드 안에 들어갈 수 있는 키와 값이 종류가 아주 다양한데 어느 블로그에서 본 것처럼url과success키만 넣어도 괜찮은 건가? 키와 값이 너무 적으니까 뭔가 빠진 느낌이다. - 이건
fetch()로 불러와도 마찬가지겠지만 ajax로 불러온 내용에는 처음에 불러온 자바스크립트가 적용되지 않는다.callback과 로드를 다시 하는 방법이 있었는데 리로드는 싫고 콜백은 실패. ajax로 불러올 페이지 안에 자바스크립트를 직접 넣어서 구현에 성공하기는 했다.더 좋은 방법이 뭐가 있을지 더 공부해봐야겠다. - 한 개의 페이지 안의 내용을 여러 번의 ajax 사용으로 나눠 넣으려고 엄천나게 노력했는데 실패했다.
- ajax로 구현한 페이지를 파일로 제출했다가 보여지지가 않아서 아주 당황했는데 ajax는 서버로 연결해서 열어야만 한다고 한다. VS Code에서도 live server를 이용하다보니 서버 때문이라는 것은 생각도 못했다.
fetch
fetch라는 방식은 생활코딩의 ajax 강의를 듣다가 알게 되었다. 처음 fetch라는 기술을 보니 ajax와 fetch의 괴리감이 느껴져서 ajax와 fetch가 무슨 연관이 있는지 따로 찾아보았다.
ES6부터 ajax를 쉽게 사용할 수 있는 fetch API가 추가되었고 이후 ES6가 표준이 되면서 사용이 쉬운 fetch API를 사용하게 되었다고 한다.
ES6에서 지원하는 fetch API는 ES6의 Promise와 함께 AJAX를 Wrapping 해주는 매우 가독성이 뛰어난 방식입니다.
출처: ES6의 Fetch API
Ajax - 생활코딩
강의 내용이 그렇게 많은 것은 아니지만 하루 만에 처음부터 끝까지 강의를 듣고 실습을 완료해서 정말 뿌듯하다.
- jQuery Ajax를 사용할 때는 삽입할 페이지를 만들 때 html을 사용했는데 강의에서는 확장자가 없는 페이지를 만들어서 사용했다. fetch라서 그런 것일까? 어떻게 사용하는 것이 더 좋은 방법일까?
- list를 배열처럼 작성해서 불러오는 방법은 너무 좋아서 소름이 돋을 정도였다.
혼자서는 구현할 수 없을 것 같아서 복습이 필요하다. - 내가
location.hash라는 프로퍼티나.subtr()같은 단순한 메소드도 너무 모른다는 생각이 다시 한 번 들었다.물론 검색으로 찾을 수 있기는 하지만 기본적으로 쓰이는 것들은 공부해야겠다. - polyfill이라는 플러그인을 이용해 fetch를 사용할 수 없는 브라우저(IE)에도 쉽게 적용할 수 있다. 정말 좋다.
내일은 다른 어떤 기술들을 폴리필로 이용할 수 있는지 공부해봐야겠다.폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다.
출처: 폴리필(polyfill),
fetch polyfill - ajax는 매우 유용하지만 검색 엔진 최적화가 어렵다는 단점도 존재한다. 이러한 단점을 보완하기 위한 pjax라는 기술도 있고 추가적으로 오프라인에서도 동작이 가능한 PWA라는 기술도 있다고 한다.
출처: Ajax - 생활코딩
더 공부할 내용
- 자바스크립트 기본 메소드와 프로퍼티
2. 활용도가 높은 폴리필, 크로스 브라우징([3] 크로스브라우징) - ajax 리스트 배열처럼 작성해서 불러오기 복습
- ajax로 불러온 내용에 이미 불러온 자바스크립트 적용하기
- pjax, PWA
