자바스크립트 : 알아야 될 용어정리

DOM의 개념 (Document Object Model)

"XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스"

클라이언트 사이드에서 사용하는 API를 말한다.

 

TCP School

 

http://tcpschool.com/javascript/js_dom_concept

코딩교육 티씨피스쿨

---

랜더링 (rendering)

"랜더링이란 HTML,CSS,JavaScript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다."

 

랜더링 과정

DOM -> Render Tree 생성 -> Layout -> paint

 

랜더링 최적화

액션이나 이벤트에 따라 html 요소의 크기나 위치등이 변경할 경우 Layout과정을 다시 수행함

Reflow -> Repaint

 

너무 정리가 잘 되있어서 좋다.

https://velog.io/@kimu2370/%EB%9E%9C%EB%8D%94%EB%A7%81

랜더링

---

마크업 언어(markup 言語, markup language)

마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.

https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4

마크업 언어 - 위키백과, 우리 모두의 백과사전

 

데이터의 구조화를 쉽게 정리하고 조회하기 위해 구별을 위한 라벨을 붙이는것

---

 

토큰(token)

문법적으로 더 이상 나눌 수 없는 기본적인 언어요소

데이터와 데이터를 구분하는것?

 

[텀즈] token ; 토큰

---

스펙

버전이 다른 데이터(토큰)를 교환할 수 있게 표준화? 시키는 과정 (HTML5 같이)

---

HTML5

"HTML5라고 불리우는 개념은 단순히 웹 문서를 작성할 때 사용되는 마크업 랭귀지(HTML)의 문법적(syntactic) 버전뿐만 아니라 새로운 DOM API 스펙을 포함하는 것이다."

https://namu.wiki/w/HTML5

---

응용프로그램(Application Software)

게임, 미디어 플레이어가 여기에 들어가있고, 오피스 프로그램, 웹 브라우저 등등 상상할 수 있는 온갖 소프트웨어는 응용 소프트웨어라고 할 수 있다.

https://namu.wiki/w/%EC%9D%91%EC%9A%A9%20%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4?from=%EC%9D%91%EC%9A%A9%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8 

 

---

API

(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)

 

"API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다.
쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다."

 

http://blog.wishket.com/api%EB%9E%80-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85-%EA%B7%B8%EB%A6%B0%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8/

API란? 비개발자가 알기 쉽게 설명해드립니다! - Wishket

 

API를 이해하기 위해 위 링크에서 조금더 글을 참조해봤다.

API유형을 보니 더 이해가 잘되는 것 같다.

아래 ->는 내가 이해하기 위해 표시했다.

 

API유형

1) private API
: private API는 내부 API로, 회사 개발자가 자체 제품과 서비스를 개선하기 위해 내부적으로 발행합니다. 따라서 제 3자에게 노출되지 않습니다.

-> 프로그램 개발에 필요한 테스트용 API

 

2) public API
: public API는 개방형 API로, 모두에게 공개됩니다. 누구나 제한 없이 API를 사용할 수 있는 게 특징입니다.

-> 국회도서관 api, 기상청 api, 교통정보 api

 

3) partner API
:partner API는 기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있습니다. 비즈니스 관계에서 사용되는 편이며, 종종 파트너 회사 간에 소프트웨어를 통합하기 위해 사용됩니다.

-> 업체간의 협력관계가 성립되었을때

---

클라이언트 사이드

 

"넷플릭스로부터

당신이 받은 것은 웹 페이지라는

이상한 언어로 적혀져 있는 코드이다.

이 코드는 웹 브라우저라는 애플리케이션에 의해

당신의 컴퓨터를 빌려 모든 처리를 하고 화면으로 보여준다."

https://nitro04.blogspot.com/2020/06/web-sever-side-client-side-1.html

[ Web ] 서버 사이드(Sever Side) ? 클라이언트 사이드(Client Side)? 1 [서론, 클라이언트 사이드(Client Side)

 

사용자의 하드웨어의 발달에 따라 작업을 처리하는데 문제가 없어졌기 때문에 클라이언트 사이드가 가능해짐

 

---

서버 사이드

https://nitro04.blogspot.com/2020/06/web-sever-side-client-side-2.html

[ Web ] 서버 사이드(Sever Side) ? 클라이언트 사이드(Client Side)? 2 [서버 사이드(Sever Side), 결론]

"제한적인 서버 수에 비해 사용자가 압도적으로 많기 때문에

혹은 많을 수 있기 때문에 가급적 서버의 부담을 줄일 수 밖에 없다.

 

하지만 서버가 수용할 수 있는 한계는 있고,

 

사용자는 많거나 많을 수 있는 상황에서

 

사용자 유효성 검사, DB관련 처리 등의 제외하고는

 

클라이언트에서 처리하는 것이 효율적이다."

 

 

클라이언트 사이드와 서버 사이드의 완급조절?은 프로그램 운영에 있어 중요한 문제인 것 같다.

---

싱글 페이지 애플리케이션(Single Page Application, SPA)

싱글 페이지 애플리케이션은 서버로 부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써

사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다.

 

위에서 있던 클라이언트 사이드의 개념과 비슷한말 인것 같다.

[IT정보] 싱글 페이지 애플리케이션(Single Page Application, SPA) 개념

모든 정적 리소스를 최초에 한번만 다운로드한다.

이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽이 감소됩니다.

전체 페이지를 다시 랜더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공합니다.