[JS] Front-end 간략한 용어집 -1 : 구조, 데이터 통신, 스코프/클로저

해당 글에서는 Front에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다.

 

 

1️⃣ 구조

---

1. 컴파일러(Complier)

---

💡 ‘프로그래밍 언어(고급 언어)’를 컴퓨터가 이해할 수 있는 ‘기계어’로 변환하는 컴파일을 수행하는 것을 의미합니다.

• [예시] typescript → Javascript로 컴파일을 수행합니다.
• [예시] Java(.java) → Java(.class)로 컴파일을 수행합니다.
• [참고] Typescript의 경우 컴파일 단계에서 사전에 오류가 될 사항에 대해 오류를 찾아서 런타임 되기 이전에 확인할 수 있습니다.

 

 

2. 트랜스 파일러(Transplier)

---

💡 트랜스 파일링(Transpling)을 통하여 '특정 언어'를 '다른 언어'로 바꿔 주는 것을 의미합니다(문법의 변환을 수행합니다)

• [참고] Typescript를 Javascript로 변환하는 Typescirpt 트랜스 파일링 수행합니다.
• [참고] JSX 파일을 JS파일로 babel을 이용하여 트랜스 파일링 수행합니다.
• [참고] CSSS 파일을 CSS파일로 babel을 이용하여 트랜스 파일링 수행합니다.
• [참고] ES6+ 문법을 EC5로 babel을 이용하여 트랜스 파일링 수행합니다.
  (cf. 모든 브라우저가 ES6+ 문법을 이해 할 수 없기에 ES5 문법으로 트랜스 파일링을 수행합니다)

 

 

3. 인터프리터(Interpreter)

---

💡 ‘프로그래밍 언어(고급언어)’를 '컴파일' 변환 없이 바로 컴퓨터가 이해할 수 있는 언어로 사용되는 언어를 의미합니다.

• [예시] Javascript는 별도의 컴파일 과정 없이 수행이 된다.

 

 

4. 런타임(Runtime)

---

💡 '컴파일' 과정이 끝난 '기계어'를 '응용 프로그램(Application)' 환경에서 동작시키는 것을 의미합니다

• [종류] Javascript 런타임 - Node.js, Deno, Bun, Gulp.js

 

 

5. 모듈 번들러(Module Bundler)

---

💡 애플리케이션에서 필요한 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(Bundle)으로 구성하는 기능을 수행하는 것을 의미합니다.

• [종류] Webpack, rollup, Parcel

 

 

6. SPA(Single Page Application)

---

💡 하나(Single)의 페이지(Page)로 구성된 애플리케이션(Application)을 의미합니다.
💡 최초 페이지를 불러온 뒤 다른 웹 페이지를 불러올 때 페이지 주소의 변경 없이 동적으로 화면을 불러올 수 있는 특징이 있습니다.

• [종류] 웹 프레임워크 : React.js / Vue / Angular
• SPA의 경우 CSR: Client Side Rending 방식을 통해 렌더링을 수행합니다.
• 최초 페이지 로드 시 전체 정적 리소스를 다운로드합니다.

 

 

7. 컴포넌트(Component)

---

💡  재 사용이 가능한 독립된 모듈을 의미합니다.

 

 

8. MPA(Multi Page Application)

---

💡 여러 개(Multi) 페이지(Page)로 구성된 애플리케이션(Application)을 의미합니다.
💡 페이지의 이동마다 주소가 변경되며 전체 페이지의 렌더링을 수행합니다.

• [종류] JSP, PHP, ASP
• MPA의 경우 SSR:Server Side Rendering 방식을 통해 렌더링을 수행합니다.
• 새로운 페이지의 요청이 있을 때마다 정적 리소스를 다운로드합니다.

 

 

9. 서버 사이드 렌더링(SSR: Server Side Rendering)

---

💡 서버에서 사용자에게 보여줄 페이지를 모두 구성한 뒤 페이지를 렌더링 하는 방식을 의미한다. 

• [종류] JSP / PHP / Thymeleaf
• [참고] 검색엔진(SEO)의 최적화되어 있고, 초기 페이지 렌더링 속도가 빠릅니다.

 

 

10. 클라이언트 사이드 렌더링 (CSR: Client Side Rendering)

---

💡 서버에서 전체 페이지를 최초 렌더링하고 사용자의 요청에 따라 클라이언트 내(브라우저)에서 렌더링 하는 방식을 의미합니다.

• 클라이언트 내에서 렌더링 하기에 페이지간 이동이 빠르고 서버 부하가 감소됩니다.

 

 

11. 검색 엔진 최적화(SEO: Search Engine Optimiztion)

---

💡 검색엔진 최적화로 웹 사이트 결과에 더 잘 보이도록 최적화하는 것을 의미한다.

• [참고] 검색 엔진은 웹 페이지를 크롤링하면서 페이지에서 페이지로 링크를 따라가며 찾은 콘텐츠의 색인을 생성합니다.
  크롤러는 일정한 규칙을 따르므로 해당 규칙에 밀접하면 웹 사이트의 검색 결과가 보다 높은 곳에 노출이 됩니다.

 

 

12. 데이터 바인딩(Data Binding)

---

💡 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Data)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 방식을 의미합니다.

 

 

12. 단방향 데이터 바인딩(One-way Data Binding)

---

💡 컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Data)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 방식을 의미합니다. 

 

 

13. 양방향 데이터 바인딩(Two-way Data Binding)

---

💡 컴포넌트 내에서 '양방향 데이터 바인딩'은 Javascript(Data)와 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서(Binding) 되어서 둘 중 하나만 변경되어도 함께 변경되는 방식을 의미합니다.

 

 

😄 참고 글 모음

---

[TS] 타입스크립트(Typescript) 이해하기-1 (정의, 동작원리, 특징)

[JS/Library] Webpack 이해하기 - 1 : 주요 용어

[JS] 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR) 이해하기

[JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)

 

 

 

 

 

2️⃣ 데이터 통신

---

1. HTTP(HyperText Transfer Protocol)

---

💡 서버와 클라이언트 간에 데이터를 주고받기 위한 프로토콜을 의미하며 ‘TCP/IP’ 계층에서 동작하여 평문(Plain Text) 형태로 데이터를 주고받는 방식을 의미한다.

 

 

2. 프로토콜(Protocol)

---

💡 컴퓨터들 간에 데이터 통신을 위해서 사용하는 통신 규약을 의미한다.

[참고] “A에서 B로 00 형태로 보내겠다”라는 규칙과 같다

 

 

 

3. HTTPS(HyperText Transfer Protocol over Secure Socket Layer)

---

💡  HTTPS는 신뢰성을 보장받은 CA 인증 기관으로부터 발급받은 ‘SSL 인증서’를 기반으로 서버와 클라이언트 간에 '암호화된 데이터(대칭키 암호화)'를 주고받는 것을 의미한다.

 

 

4. 인증기관 : CA(Certificate Authority)

---

💡 SSL 인증서를 발급하는 기관이며 인증서에는 서버의 비 대칭키(공개키, 개인키), 전자서명이 포함되어 있습니다.

 

 

5. 대칭키 암호화 방식(Symmetric Key)

---

💡 '동일한 키'를 통해 '암호화'와 '복호화'에 함께 사용하는 암호화 기법을 의미합니다.

• [참고] 암호화를 할 때 키로 '1234'라는 값을 사용했다면 복호화를 할 때 '1234'라는 값을 통해 복호화를 진행합니다.

 

 

6. 비대칭키 (=공개키 암호화 방식) (Asymmetric Key)

---

💡 비 대칭키에는 암호화만 할 수 있는 ‘공개 키(Public Key)’와 이를 복호화할 수 있는 ‘개인 키(Private Key)’ 두 가지를 이용한 암호화 기법을 의미한다.

• [참고] 공개 키는 타인이 가지고 있고, 비 공개키는 나만 가지고 있습니다.

 

 

 

7. 동기(Synchronous) 처리 방식

---

💡 데이터 통신으로 ‘요청(Request)'을 하였을 때, 어떠한 요청에 대한 ‘응답(Response)'을 받을 때까지 기다리다 수행이 완료된 후 다음 코드가 수행되는 처리 방식을 의미한다.

 

 

8. 비동기(Asynchrous) 처리 방식

---

💡 데이터 통신으로 ‘요청(Request)’을 하였을 때, 어떠한 요청에 대한 ‘응답(Response)'을 기다리지 않고 다음 코드가 수행되는 처리 방식을 의미한다.

 

 

9. 블로킹(blocking I/O)

---

💡 I/O가 동작되고 있는 동안에 다른 일을 처리하지 못하는 상태를 의미하며, I/O 동작이 종료될 때까지 다음 처리가 안 되는 방식을 의미한다.

 

 

10. 논 블로킹(Non-Blocking I/O)

---

💡 I/O가 동작을 하면서 request를 받으면 바로 다음 처리에 요청을 보내 놓고 다른 작업을 처리하다가 먼저 요청한 작업이 끝나면 이벤트를 받아서 응답을 보내는 방식을 의미한다.

 

 

11. 콜백 함수(Callback function)

---

💡 특정 함수 내에서 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 의미합니다.

 

 

12. Promise

---

💡 자바스크립트 내에서 발생하는 ‘비동기 처리’를 간편하게 처리할 수 있도록 도와주는 ES6에서 추가된 객체입니다.

• [참고] 무한 콜백 상태(Callback Hell)에 대한 대안으로 ES6+에 등장하였습니다.

 

 

13. Promise 체이닝

---

💡 일괄적인 '비동기 처리'를 위해 Promise를 하나로 묶어서 일괄로 전송을 하는 방식을 의미합니다.

 

 

14. async await

---

💡 ES8에 추가된 문법이며, 기존 '콜백 함수'와 'Promise'의 문제점으로 가지고 있었던 복잡도 문제를 개선하기 위한 비동기 처리를 위한 통신 방법을 의미합니다.

 

 

15. async

---

💡 암묵적으로 해당 함수는 Promise를 사용하여 결과를 반환한다.

 

 

16. await

---

💡 Promise가 이행상태(fulfilled)이거나 거부 상태(rejected)가 되던지 끝날 때까지 기다리는 함수를 의미합니다.

 

 

17. HTTP Client

---

💡 클라이언트 측에서 서버로 API를 요청을 할 때 사용하는 내장 함수 혹은 라이브러리들을 의미합니다.

• [Restful API HTTP Clinet 종류] Ajax, Fetch API, Axios, React Query, SWR
• [GrahpQL API HTTP Client 종류] Apollo client, graphql-request

 

 

18. Fetch API

---

💡 Javascript ES6 이후 등장하여 자바스크립트의 내장되어 있는 함수로 클라이언트에서 서버로 요청하고 'Promise' 타입으로 반환받는 함수를 의미합니다.

• [참고] 동일하게 기존의 JQuery 라이브러리 내에 'Ajax'가 동일한 용도로 존재하였습니다.

 

 

19. Axios

---

💡 Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트를 의미합니다.

- [참고] JSON으로 request, reponse를 받는 구조에 대한 파싱 처리를 도와줍니다.

 

 

20. 소켓 통신(Socket)

---

💡 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환하는 데이터 교환 방식을 의미합니다. 이때 데이터는 ‘패킷(packet)’ 형태로 전달되며, 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이뤄집니다.

 

 

😄 참고 글 모음

---

[JS] Promise 이해하기 -1 (콜백함수, 정의, 요청상태)

[JS] Promise 이해하기 -2 (Promise 체이닝, Promise.all, async/await)

 

 

 

3️⃣ 스코프와 클로저

---

 

1. 스코프(Scope)

---

💡 선언된 변수에 대해서 접근할 수 있는 '유효한 범위'를 의미한다.

 

 

2. 전역 스코프(Global Scope)

---

💡 '전역'으로 선언된 변수에 대해 접근과 조작이 가능한 유효한 범위를 의미한다.

 

 

3. 지역 스코프(Local Scope)

---

💡 변수가 함수 혹은 블록 내에서 접근(호출)이 가능한 유효한 범위를 의미한다

• [종류] 지역 스코프에는 블록 스코프와 함수 스코프가 존재합니다.

 

 

4. 블록 스코프(Block Scope)

---

💡 선언한 변수가 블록(중괄호 내)에서 유효한 범위를 의미한다.

 

 

5. 함수 스코프(Function Scope)

---

💡 선언한 변수가 함수 내에서 유효한 범위를 의미한다.

 

 

6. 스코프 체인(Scope Chain)

---

💡 현재 스코프 레벨에서 변수가 존재하지 않는 경우 상위 스코프에서 찾는 것을 의미합니다.

• [과정] 내부 → 외부 → 전체

 

 

7. 동적 스코프(Dynamic Scope)

---

💡 함수를 호출한 시점에 스코프를 결정하는 방식을 의미한다.

 

 

8. 정적 스코프(=렉시컬 스코프) (Static Scope)

---

💡 함수를 선언한 시점에 스코프를 결정하는 방식을 의미합니다.
💡 함수가 중첩되어 있을 때, 내부 함수 내에 해당 변수가 존재하지 않을 경우 상위 스코프에서 해당 변수를 찾는 방식을 의미합니다.(= 스코프 체인)

 

 

9. 이벤트 버블링(Event Bubbling)

---

💡 이벤트가 발생하였을 때, '상위 요소'로 이벤트가 전파되어 가는 특성을 의미합니다.

 

 

10. 이벤트 캡쳐링(Event Capturing)

---

💡  이벤트가 발생하였을 때, '하위 요소'로 이벤트가 전파되어 가는 특성을 의미합니다.

 

 

11. 이벤트 위임(Event Delegation)

---

💡 이벤트 버블링, 캡처링 요소를 이용하여 각 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고 공통이 되는 부모 핸들러에서 관리하는 방식을 의미합니다.

 

 

12. 이벤트 루프(Event Loop)

---

💡 JS의 경우 자바스크립트 코드를 ‘싱글 스레드 (메인 스레드)’에서 하나의 일을 처리합니다. 하나의 일에 대해서 처리를 수행하고 다른 일이 들어왔을 때 처리가 될 때까지 기다린다면, ‘동시성’이 보장이 되지 않습니다. JS는 싱글 스레드이기도 하면서 비동기 처리방식(논 블록 방식)이기에 하나의 일에 대해서 기다리지 않고 다른 일을 처리하여 ‘동시성’이 보장이 됩니다.

💡 여기서 이벤트 루프는 ‘콜 스택(Call Stack)’에서 실행 중인 컨텍스트가 있는지, 그리고 이벤트 큐(Event Queue) 내에 대기 중인 함수가 있는지에 대해서 반복적으로 확인을 합니다. 콜 스텍에 순차적으로 들어온 함수를 처리하고 콜 스택이 비어져 있을 경우 이벤트 큐에 대기 중인 함수를 콜 스택으로 이동시키는 행동을 수행합니다.

 

 

13. 클로저(Closure)

---

💡  함수 안에 함수를 선언한 환경에서의 관계에서 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미합니다. 이유는 선언되었을 때의 환경(렉시컬 스코프)을 기억하기 때문에 접근이 가능합니다.

 

 

😄 참고 글 모음

---

[JS] 스코프(Scope) 이해하기

[JS] 클로저(Closure) 이해하기

[JS] 이벤트 버블링, 이벤트 캡처링, 이벤트 위임 이해하기

 

 

 

 

오늘도 감사합니다😀