프로그래밍 용어정리 2편
신입/초보 개발자들을 위한 용어정리
1편 & 1편에서 다뤘던 키워드
https://brunch.co.kr/@ryuhyeon/151
1. 모듈 module
2. 번들 bundle
3. 번들크기 bundle size
4. 트리 쉐이킹 tree shaking
5. 리펙토링
6. 번들링 툴: 웹팩, 롤업, 파셀
7. ES모듈
8. 런타임환경
9. 스크립트 언어
이번 편에서 다룰 키워드
0. 렌더링 Rendering
1. SPA: Single Page Application
2. SEO: Server Engine Optimization
3. 트래픽 Traffic
4. CSR: Client-side Rendering
5. SSR: Server-side Rendering
6. 모질라 재단
7. 어플리케이션: Application
8. MIT & 오픈소스
9. 크롤링
0. 렌더링 Rendering
: 프로그래머가 작성한 글로 된 코드가, 사용자가 모니터를 통해 시각적으로 구현된 결괏값을 볼 수 있게 테이블, 버튼 따위로 변환되어 브라우저에서 출력하는 과정. Render는 구현하다, 연출하다 따위의 의미를 갖고 있고, IT 업계에서는 이 용어를 그대로 받아들여 사용한다.
출처: 네이버 영한사전1. SPA: Single Page Application
줄여서 스파라고 불리는 이 용어는 브라우저에서 하는 렌더링의 큰 갈래 중 하나이다. 브런치 같은 이런 홈페이지는 웹(WEB)이라고 부르고, 사용자가 보는 웹 화면(홈페이지 등)은 크게 두 가지 방향으로 개발할 수 있다. 첫째는 서버에서 렌더링 하는 방법(SSR)이고, 두 번째는 클라이언트에서 렌더링 하는 방법(CSR)이다.
SPA가 출시되기 전 기존의 웹은 서버에서 렌더링(SSR)을 했다. 사용자가 보고 있던 화면에서 단 하나의 데이터만 변해도, 항상 코드의 처음부터 끝까지 모두 다시 읽어서, 다시 그림을 그려야 했다.
이런 방법은 단순 변화에도 매번 모든 데이터를 다뤄야 했기 때문에, 홈페이지의 특성, 목적 등에 따라 상당히 비효율적이라는 의견이 있었다. 그래서 이러한 문제를 해결하기 위해 2003년 초, 미국의 IT 회사인 넷스케이프(Netscape)에서 '데이터가 바뀐 부분만 다시 렌더링 하면 되지 않을까?'라는 의견이 제시되기 시작했다. 이 의견을 받아들여 개발자들이 붙었고, 해당 코어를 개발하면서 점점 SPA 웹의 가닥이 잡히기 시작했다. 그렇게 2005년 AJAX가 개발되면서 '동적 페이지 렌더링' 시대가 시작되었다.
* AJAX는 [웹 브라우저] 편에서 따로 상세히 다룰 예정이니 용어 정리에서는 제외하도록 하겠다.
- 미국 IT 회사 넷스케이프 나무위키(Netscape)
https://namu.wiki/w/Netscape%20Navigator
- 공식 홈페이지
2. SEO: Server Engine Optimization 검색 엔진 최적화
검색 엔진은 말 그대로, 사용자가 [검색어]를 입력하면, 서비스 제공자는 그 데이터를 받아 내부에서 엔진을 돌려 검색어가 들어간 정보를(웹 페이지, 비디오, 오디오, 사진 따위) 찾는다. 그리고 이 정보를 하이퍼링크로 제공하는 소프트웨어 시스템이다. 전 세계적으로 가장 유명한 것은 구글이고, 국내에서 가장 유명한 것은 네이버이다. 물론 국내 웹은 구글처럼 '검색'에 특화된 것이 아닌, 다양한 기능을 제공하는 '포털'의 개념이 좀 더 컸지만, 뭐. 이 항목에 예제로 포함해도 괜찮을 것 같아서 일단 포함했다. 구글은 '검색' 엔진으로 시작하여 '포털' 사이트로 개념이 확장되었으니 거기서 거기 아닌가. 히히.
위에도 작성한 내용을 좀 더 간략하게 다시 살펴보자. 검색 엔진의 주요 역할은 사용자가 입력하는 값(검색어 등)을 받아, 이와 매칭되는 관련된 모든 정보를 하이퍼링크로 제공하는 시스템이다. 하이퍼링크(hyperlink)란 하이퍼텍스트(hypertext)를 기반으로 하는 '연결 기능' 정도로 이해하면 될 것이다. IT 업계에서 단어 link는 파트(DB, Back, Front 따위)에 상관없이 말 그대로 '연결'을 의미한다. 위의 넷스케이프 공식 홈페이지의 URL 주소값을 클릭하면 해당 페이지로 이동하는데, 바로 이러한 기술을 하이퍼링크라고 부른다.
Hyper라는 단어는 '들뜬, 흥분한'이라는 형용사로, IT 업계에서는 이 의미를 그대로 차용했다. '들뜬', '흥분한'이라는 뜻의 근본적 의미는 본래의 것에서부터 '좀 더 나아간 것, 좀 더 과장되는 것' 등이다. 그래서 IT 업계에서는 이를 '이상의' 등으로 해석하는 편이다. Hypertext는 '글자 이상의' 즉, 아무런 기능이 존재하지 않고, 단순히 자음과 모음으로만 작성된 것(글자)이 어떠한 기능(클릭 시 해당 링크로 이동 따위의)을 가진 글자라는 의미다.
어쨌든, SEO는 사용자의 검색어를 크롤링(9번에 설명 있음)하여 데이터를 찾아내고, 찾아낸 데이터를 사용자에게 표출하는 기능이며, '최적화'의 의미는 '결과 값의 품질과 양'을 개선하는 것이라고 이해하면 된다.
즉, 검색 엔진 최적화란
사용자가 검색한 내용에 대한 품질, 양 따위를 보다 더 개선하여 제공하는 디지털 마케팅의 절차라고 이해하면 된다.
3. 트래픽 Traffic
트래픽은 네이버 같은 사이트에 방문하는 사람이나 데이터의 수량이라고 이해하면 된다. 말 그대로 '교통'과 같다. 실제 도로 위에는 수많은 차들이 있다. 트래픽은 말 그대로 '교통량'. 사이트에 방문하는 사람 혹은 데이터 따위를 한 명의 운전자로 취급하여 수를 측정하는 것이다.
트래픽은 어느 파트에서 어떤 용어와 함께 사용하냐에 따라 의미가 약간씩 달라진다.
나는 웹 개발자이기 때문에 크게 세 가지로, 단순하게 살펴보도록 하자.
* 이 용어는 컴퓨터공학의 [네트워크]와 관련 있는 항목이기 때문에 차후 기회가 된다면 좀 더 상세히 작성하도록 하겠다.
1. 네트워크 트래픽(Network Traffic): 네트워크를 통해 전달되는 데이터의 양
2. 웹 트래픽(Web Traffic): 웹 사이트를 접근하는 인원수
3. 말 트래픽(Malicious, Suspicious Traffic): 해킹 따위를 위해 접근하는 데이터 패킷 따위의 양
접두사(prefix) mal-은 단어의 앞에 붙여 '안 좋은, 잘못된' 따위의 의미를 추가한다. 그래서 대화를 할 땐 접두사만 빼서 의미를 전달(말 트래픽, 말펑션 따위)하거나 '이상감지' 따위로 바뀌 말하는 곳도 많다. 개발자 마음이다.
* 데이터 패킷(초 간단 설명)
- 네트워크에서 주고받는 데이터 단위(유닛)
- 네트워크 상으로 전달되는 데이터는 모두 동일한 형태를 갖는다.
- 머리 / 데이터 / 꼬리 = header / payload / footer
- 헤더에 넣는 데이터: 수발신자 정보, 시퀀스 번호, 프로토콜 따위
- 페이로드에 넣는 데이터: 실제 데이터
- 꼬리에 넣는 데이터: 에러 확인용 첵섬(checksum) 데이터
* 첵섬(checksum): 데이터 오류 확인용 데이터.
- 데이터 패킷 형식에 footer가 있는 경우, footer에 데이터 넣고 없으면 header에 몰아서 넣음
4. CSR: Client-side Rendering
클라이언트 사이드는 사용자가 보고 있는 화면단을 의미한다. 즉, 프런트엔드 단에서 렌더링을 한다는 의미다. 이는 사용자의 요청에 따라 매번 서버에서 모든 코드를 재렌더링 해야 했던 기존의 방법에서 벗어나, 좀 더 효율적으로 렌더링을 하자는 의견이 나와 도입된 SPA 웹의 기본 렌더링 방법이다.
[웹 브라우저] 편에서 보다 더 상세히 다루도록 하겠다.
5. SSR: Server-side Rendering
서버 사이드 렌더링은 사용자가 보고 있는 화면을 매번 서버에서 렌더링 하는 것을 의미한다. 웹이 개발될 때 기본으로 렌더링 하던 방법이다.
[웹 브라우저] 편에서 보다 더 상세히 다루도록 하겠다.
6. 모질라 재단
웹 개발자라면 반드시 알아야 하는 재단 중 하나인 모질라 재단. 모질라 재단은 미국 캘리포니아 샌프란시스코에 위치한 비영리 재단법인이다. 모질라 프로젝트를 지원하기 위해 2003년 설립되었다.
모질라 프로젝트는 웹 발전 프로젝트다. 이 재단의 대표 제품이 지난 포스팅에서 다룬 오픈소스 브라우저인 파이어폭스다. 그리고 프론트 개발자라면 반드시 숙지하고 있어야 하는 자바스크립트 (표준)이라 일컬어지는 (공식) 문서인 MDN이다.
모질라 재단은 개발자들을 위해 웹과 관련된 거의 모든 정보를 문서화하기 시작했고, 이게 쌓이고 쌓인 MDN 홈페이지는 개발자들 사이에서 거의 성전처럼 여겨지고 있다. 물론 W3C처럼 이와 비슷한 사이트들이 많지만, 보다 더 전문적이며 개발자 친화적인 사이트는 MDN 뿐일 것이다.
다국어를 지원하니 한국어 버전으로 관련 내용을 쉽게 접할 수 있음으로 초보 개발자라면 이 사이트를 활용할 줄 알아야 한다.
- MDN 홈페이지
https://developer.mozilla.org/ko/
7. 어플리케이션: Application
어플리케이션은 특정 기능/목적을 실행하기 위해 만들어진 응용 소프트웨어 = 프로그램을 의미한다. 이는 우리가 사용하는 웹 브라우저, 카카오톡, 파일, 터미널 등 '소프트웨어'로 취급되는 모든 것을 의미할 수 있다. 하지만 OS, 커널 따위와 같은 '하드웨어'에 바로 붙는 '시스템'은 어플리케이션이 아니다. 이는 '시스템'이다.
8. MIT & 오픈소스
MIT는 미국에 있는 세계에서 가장 유명한 공과대학 중 하나인 메사추세츠 공과대의 줄임말이다. Massachusetts Institute of Technology. 웹이 점점 발달하면서 이 학교의 학생, 연구원들이 비영리를 목적으로 모두가 사용할 수 있고, 모두가 개발에 참여할 수 있는 소스를 전부 오픈한 저작권을 만들었다. 이게 바로 MIT 라이센스 (MIT License)이다.
즉, MIT 라이센스라는 것은 해당 라이브러리나 프로그램 따위를 메사추세츠 공과대에서 만든 라이센스가 아니라, 비영리를 목적으로 하는 라이센스이기 때문에 누구든지 가져다 써도 된다는 의미다.
오픈소스 역시, 다양한 개발자들의 참여를 증진하고 보다 더 많은 사람의 의견을 받기 위해 소스를 전체 공개하여 누구나 가져다 사용할 수 있는 것으로, 이 역시 MIT에서 시작되었다. 그래서 보통 MIT와 오픈소스 중 하나만 얘기해도, 두 의미를 내포한다고 생각한다.
이거 저작권 뭐야?
MIT요.
이거 유료야?
오픈이요.
9. 크롤링
크롤링(Crawling)은 위의 '검색 엔진'에서 사용하는 가장 중심이 되는 기술 중 하나로, 검색 엔진이나 봇이 웹을 돌아다니면서 데이터를 긁어다 모으는 것을 의미한다. 데이터를 추출하는 데 있어 가장 단순한 기술 중 하나로, 복사 붙여 넣기와 비슷한 개념이다.
