WEB

WEB: 용어 정리(1)

횰임 2022. 2. 10. 23:02

✅npm (Node package manager)

: 자바스크립트 언어를 위한 패키지 관리자(운영체제를 위해 프로그램 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임). Node.js의 기본 패키지 관리자이다.

- node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해 관리하고 배포하고 있음. —> 다른 사람이 잘 만들어 놓은 모듈들을 npm을 통하여 설치해 사용 가능하다는 점. (npm install <패키지명>이라는 명령어 한 번으로)

- 그럼 npm을 통해 설치한 패키지 관리는 어떻게 하느냐??—> pacakge.json이라는 파일로 관리! (npm init이라는 명령어로 쉽게 생성가능)

 

✅JSON(javascript object notation)

: 데이터를 저장하거나 전송할 때 많이 사용되는 data 교환 형식, javascript에서 객체를 만들 때 사용하는 표현식

- 통신방법도 아니고 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐 

- 서버와 클라이언트 간의 교류에서 많이 사용됨. 

- Js 객체 표기법과 아주 유사

 

✅Ajax (Asynchronous Javascript and XML)

: 비동기적으로 javascript와 XML을 이용하는 정보 교환 기법. 

- Ajax 등장 전에는 웹 브라우저가 데이터를 요청하면 서버는 해당 정보를 “통째”로 보내줘야 했다. 

이는 사용자가 필요로 하는 정보만을 얻기 위해서 새로운 url을 호출할 때마다 모든 페이지를 새로 그려야 한다는 문제점이 있다. 

- 페이지의 변환이 적다면 상관없겠지만 페이지가 민감하게 변해야 한다면 이는 매우 큰 손해이다.

==> 따라서 우리는 “비동기적”으로 정보를 요청하는 Ajax라는 기술이 필요했다. (이미 페이지를 렌더링하고 나서도 경우에 따라 일부 데이터를 받아오는 것)

 

- 실제로는 데이터 전송의 흐름이 XML에서 JSON으로 넘어오면서 XML은 거의 쓰이지 않음. 어쨌든 ajax를 사용하면 데이터를 비동기적으로 받는 것이 가능해짐

- 서버측으로 다양한 데이터 교환 형식(JSON)의 정보를 주고 받을 수 있다.

- 구현: JavaScript에서 “XMLHttpRequest” 객체를 이용해 Ajax를 구현할 수 있다.

 

✅XMLHttpRequst(XHR)객체

: 서버와 상호작용하기 위해 사용되는 객체로, 웹 브라우저에서 제공하는 Web API이기 때문에 브라우저 환경에서만 정상적으로 동작됨.

- node.js환경에서는 제공되지 않으므로 XMLHttpRequest 생성자 함수를 호출해서 이를 생성한다.

- 요청 전송(클라->서버): XMLHttpRequest의 내장 함수인 open()을 이용해 GET(데이터 읽어오기 요청) / POST(데이터 전송 요청) 전송

 

 

✅API(Application Programming Interface)

:프로그램들이 서로 상호작용하는 것을 도와주는 매개체. 

- 서버와 데이터베이스에 대한 출입구 역할을 한다. (허용된 사람들에게만 접근성을 부여해 줌)

- 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. 

- 모든 접속을 표준화한다. (기계/운영체제가 어떤 것이든 상관없이 누구나 동일한 액세스 가능) 

 

➡️정리하자면 

1. XHR이라는 웹 API를 이용해서 서버와 클라이언트 간의 데이터를 비동기적으로 교환한다. 

2. 이때 교환되는 데이터 형식이 JSON이다.

3. JSON 형식의 서버의 응답을 자바스크립트 변수에 저장하면 이 변수는 JSON 데이터가 변환되어서 생겨난 자바스크립트 객체와 같다.

4. 이 변환된 자바스크립트 객체를 사용하면 자바스크립트 언어로 JSON 안에 묶여 있는 자료들에 접근이 가능해진다.

 

 

npm에 대한 궁금증으로 JSON, Ajax, XHR, API까지 찾아보게 되었는데 제대로 이해했는지 모르겠다.

 

 

✅ JavaSript

: 자바스크립트는 웹사이트에 interactivity(예를 들면, 게임, 버튼이 눌리거나 폼에 자료가 입력될 때 반응, 동적인 스타일링과 애니메이션)을 더해 주는 프로그래밍 언어이다.

- 캐러셀 기능(이미지를 차례대로 바꿔볼 수 있는 기능)을 가진 이미지 갤러리, 변화하는 레이아웃, 그리고 버튼이 클릭될 때의 반응과 같은 간단한 것부터 경험이 더 쌓이면 게임이나 움직이는 2D 및 3D 그래픽, 포괄적인 데이터베이스 지향적인 앱과 더 많은 것을 만들 수 있다.

- 자바스크립트 그 자체는 상당히 작지만 아주 유연하다. 개발자들은 코어 자바스크립트 언어(core JavaScript language) 위에서 동작하는 많은 다양한 도구를 개발해왔는데, 이를 이용하면 많은 확장 기능을 아주 손쉽게 사용할 수 있다.  다음이 그 예시:

  • 브라우저 응용 프로그래밍 인터페이스 (APIs) — 브라우저에 내장된 API로 HTML을 동적으로 생성하고 CSS 스타일을 설정하거나, 사용자의 웹캠으로부터 비디오 스트림을 수집하거나 조작하는 것, 또는 3D 그래픽이나 오디오 샘플을 생성하는 것과 같은 다양한 기능을 제공한다.
  • 제3자 (third-party) API를 활용해 개발자는 트위터나 페이스북 같은 다른 컨텐츠 공급사부터 제공되는 기능을 자신의 사이트에 통합할 수 있다.
  • 써드파티 프레임워크와 라이브러리를 HTML에 적용함으로써 사이트와 어플리케이션을 빠르게 구축할 수 있다.