프로그래밍 용어 정리 1편
신입/초보 개발자들을 위한 용어 정리
이 포스팅은 신입 개발자들을 위한 포스팅이다. 순서는 생각나는 대로 적었다.
이번 포스팅에서 다룰 키워드이다.
1. 모듈 module
2. 번들 bundle
3. 번들크기 bundle size
4. 트리 쉐이킹 tree shaking
5. 리펙토링
6. 번들링 툴: 웹팩, 롤업, 파셀
7. ES모듈
8. 런타임환경
9. 스크립트 언어
1. 모듈이란? Module
: 공통의 기능 혹은 특정된 기능만 엮은 코드를 하나의 파일로 따로 개발 = 기능의 독립화
1-1 왜 모듈을 사용하는가?
1. 개발 복잡성 줄이기
- 파일 하나에 만 줄짜리 코드 있으면 눈 빠진다. 모듈화(모듈링(moduling): 모듈 하는 과정, 작업)해서 따로 관리하는 것이 훨씬 단순하다.
2. 유지보수성 높이기
- 만 줄짜리 코드로 작성한 하나의 파일보다, 기능을 묶어 따로 뺀 파일만 관리하는 것이 유지보수에 훨씬 좋다. 한 파일에 몽땅 개발을 해 버리면, 어디서 어떤 변수가 어떻게 작용하는지 모두 파악해야 관련된 부분을 추려낼 수 있기 때문이다.
3. 재사용성 높이기
- 필요한 곳에, 가져다 쓰기만 하면 되기 때문에 코드 중복이 훨씬 줄어들고, 재사용에 용이하다.
2. 번들이란? Bundle
: 여러 파일을 하나로 결합
어느 프로그래밍 언어든지 간에, 코드를 작성한 파일이 단 1개만 있는 경우는 없다. 있을 수도 없고. 여하튼, 여러 개로 나누어진 파일을 하나로 합쳐 코드를 실행해야지 하나의 프로그램으로 사용할 수 있기 때문에, 위에서 모듈화 한 = 독립된 파일을 하나로 합치는 과정이 필요하다. 웹 개발, 특히 프론트앤드에서는 이를 '번들' 혹은 '번들링'이라고 부른다.
2-1. 번들 크기란? Bundle Size
1. 번들한 파일의 크기
* 이는 보통 자바스크립트(이하 js)파일, 라이브러리나 프레임워크 파일, 디펜던시 파일, 에셋(css 따위)등을 전부 합친 크기를 의미한다.
2. 번들 크기는 웹의 성능과 사용자 경험에 엄청나게 중요하기 때문에 빌드할 때 확인하는 것이 좋다.
번들 크기가 크다는 것은 속도의 저하를 의미한다. 또한 SEO에도 엄청난 영향을 끼치고 메모리에도 영향이 간다.
2-2. 트리 쉐이킹이란? Tree shaking
: 사용하지 않거나, 죽은 코드 삭제
: 나무를 흔들면 다 죽어가거나, 죽은 잎이 떨어진다. IT 업계에서는 이 의미를 그대로 차용하되, 나뭇잎을 '코드'로 사용하는 것뿐이다.
* '리펙토링(Refectoring)'과는 약간 다른 개념이다. 번들 크기를 줄일 때 트리 쉐이킹을 하는 경우가 많다.
2-3. (코드) 리펙토링이란? (code) Refactoring
1. 코드 유지보수를 좀 더 편하게 하기 위해, 프로그램을 실행했을 때 결과는 이전과 동일하지만, 코드의 구조를 변경하여 가독성 따위를 높이는 작업
* 용어는 '코드 리펙토링'이 보다 더 옳은 표현이지만, 어차피 다 개발잔데, '코드' 빼도 알아듣는다. 일반적으로 리펙토링이라고 부른다.
* 번들링과 크게 관련 없다. 리펙토링을 하는 경우는 '유지보수성을 높이기 위해서'인 경우가 대다수다. 리펙토링을 위에 적어버려서, 이곳에 그냥 작성했다.
2-4. 번들링 툴: 웹팩, 롤업, 파셀 따위란? Webpack, Rollup, Parcel
* [웹팩 공식 홈페이지] https://webpack.js.org/
* [롤업 공식 홈페이지] https://rollupjs.org/
* [파셀 공식 홈페이지] https://parceljs.org/
: 모두 번들링 할 때 사용하는 자바스크립트의 도구이다.
2-5. 웹팩, 롤업, 파셀의 차이점은?
웹팩(Webpack)
* 프로젝트 규모가 크거나 복잡할 때 주로 사용(vue의 기본 번들링 도구)
1. 일반적(번들링) 목적의 번들링 툴
2. 개발자 마음대로, 원하는 대로 번들링 할 수 있음
3. js, css, images, fonts, svg, 따위, 거의 모든 것을 번들링 할 수 있음
4. 뷰(vue), 리액트(React), 앵귤러(Angular) 따위의 대부분의 자바스크립트 프론트앤드 프레임워크에서 사용 가능
5. 코드 분할과 트리 쉐이킹 기능 제공
6. '개발자 마음대로'란 말은 '배우는데 좀 어려움'을 의미, 웹팩에 대해 공부 안 하면 활용 못 함
7. 온갖 에셋(image 따위)과 온갖 기능(트리 쉐이킹)을 제공하기 때문에 상대적으로 빌드 속도가 느림
---
롤업(Roll up)
* 프로젝트 규모가 작을 때 주로 사용 혹은 자바스크립트용 라이브러리 만들 때 주로 사용
1. 웹팩에 비해 개발자가 설정해서 개발자 마음대로 번들링 할 순 없음.
2. 그래서 설치나 사용이 간단함
3. 그러다 보니 당연히 웹팩에 비해 속도가 빠름
4. 트리 쉐이킹에 중점을 두어 번들링
5. '트리 쉐이킹'에 중점을 둔다는 의미는, ES module을 번들할 때 가장 좋다는 의미
6. 즉, 자바스크립트로 작성된 코드 번들링에 강하다는 의미
7. 웹 개발 시 사용하는 일반적 파일이 아닌 경우에는, 이 툴을 사용하면 번들링 할 때 까다롭거나, 오류가 날 수 있음
---
파셀(Parcel)
* 단순 웹에 주로 사용, 개발자 개인 포트 폴리오나(이하 포폴), 프로토타입 등에 주로 사용
1. 엄청 간단. 사용하는데 공부 많이 안 해도 큰 문제없음
2. 옵션 값 따위를 설정할 필요가 없음. 알아서 해줌.
3. 파셀 모토가 zero-config bundler임.
4. 파일 형식 자동 감지
5. HMR(hot module replacement)을 기본 기능으로 제공
6. 캐싱(caching)을 매우 빠르게 함
3. ES Module이란?
1. ECMAScript Module의 줄임말
2. ECMAScript: Ecma International이라는 정보통신 국제 표준화 기구에서 규격화한 표준화된 스크립트 프로그래밍 언어
3. ECMA: European Computer Manufacturers Association: 유럽 컴퓨터 제조 협회
4. 유럽에서 시작된 규격이 전 세계적으로 퍼지게 된 것이 ECMAScript
5. 이에 포함되는 스크립트 언어에는 가장 유명한 자바스크립트가 있고, 이 외에는 액션스크립트, J스크립트 등이 있음
6. 예전에 node(자바스크립트 런타임 환경)는 번외처럼 여겼는데, 이제 더 이상 번외로 생각 안 하고 노드까지 관리함
7. 웹 프로그램은 프로그래밍 언어의 종류 중 스크립트 언어를 사용한다.
4. 런타임 환경이란? Runtime Environment/System
1. 프로그밍 언어를 실행하기 위해 필요한 환경 혹은 실행용 모델 따위
* 한 프로그래밍 언어가 실행되기 위해서는 시스템 자원(cpu, ram 따위)이나 가상 머신(실행 엔진 따위) 따위가 필요하다.
* '컴퓨터'라는 것은 0과 1로 이루어진 전자기기이다. '프로그래밍 언어'는, 기계어인 0과 1로 코딩을 해서 프로그램을 짜는 것은 더럽게 어려우니, 이걸 보다 더 쉽게 하기 위해 인간의 '언어'를 사용하여 만들어낸 것이다. 인간의 언어를 기반으로 하여, 프로그램을 만들 때 사용하는 언어=프로그래밍 언어이다. 그러므로, 프로그래밍 언어는 어찌 되었든 간에, '컴퓨터'의 '하드웨어'와 반드시 연결되어야지 '실행'을 할 수 있는데, 이를 가능하게 해주는 모든 것(환경)을 의미한다.
* 웹 브라우저(browser) 역시 런타임 환경으로 취급
* 코드를 기계어(0과 1)로 변환하고, 자원(메모리 따위)을 할당하며 프로그램의 동작을 관리하는 것
* 자바스크립트의 런타임은 두 개뿐이다. 브라우저와 노드가 있다.
* 브라우저에 html로 작성한 코드를 불러오면 작동한다. 그 이유는 브라우저란, '스크립트 등으로 짜인 언어' 따위를 가동하기 위해 내부적으로 사용하는 '엔진'등이 이미 모두 구현된 하나의 또 다른 소프트웨어이기 때문이다. 만약, 브라우저를 사용하지 않을 거라면 사용하고 있는 개발툴(vscode 따위)에서 live server 같은 '가상 서버'를 띄우면 되고, 그것도 아니면 그냥 노드쓰면 된다.
* 대표적으로 vue는 구글 크롬의 v8 엔진을 사용한다.
* 크로스브라우징(cross browsing) 따위의 용어는, 각 브라우저를 만드는 회사마다 엔진이 다르기 때문에, 스크립트로 작성한 코드가 모든 브라우저에서 작동하지 않으니 최대한 많은 브라우저에서 작동될 수 있도록 짜는 코드를 의미한다.
* 위의 ES Module에서 작성한 ECMA의 역할은, 브라우저를 만드는 회사마다 지 맘대로 개발하지 말고, 프로그램 개발 시 서로 약속한 규칙을 지키면서 만들라는 소리다. 하지만 이는 '국제 법'따위로 제정된 것이 아니기 때문에, 브라우저를 만드는 회사마다 회사의 운영, 이익 따위를 위해 ECMA 규격을 '대강 맞추는 편'이다.
! 자, 그럼 여기서 프로그래밍에서 '규격'따위가 왜 필요하냐?
1. 전자기기의 '세계화'라는 것은, 많은 사람들이 사용할 수 있어야 한다.
2. 즉, 전 세계의 어디에서든지 해당 전자기기를 사용해야지 '세계화'를 할 수 있다. = 이익 창출
3. 기계는 0과 1로만 이루어져 있기 때문에, 내 맘대로, 내가 원하는 대로 만들 수 있었다. = 전 세계 표준 규격 없음
4. 규격이 없다는 것은, 너와 내가 통신할 때(데이터를 주고 받을 때) 중간에서 일종의 '합의점/convert' 따위를 거쳐야 한다는 것인데
5. 이게 시간과 돈, 인력이 엄청나게 깨지는 작업이다.
6. A라는 회사에서 하드웨어(컴퓨터)를 만들고, B라는 회사에서 OS를 만들었다면, B회사는 A회사에서 어떻게 하드웨어를 만들었는지 반드시 알고 있어야 하고(왜? OS는 프로그램이기 때문에, 이 프로그램을 하드웨어에 붙이려면, 그 하드웨어가 어떻게 돌아가는 질 알아야만 그대로 만들 수 있다), 이에 따른 분석이 필요하며(=자기네가 만든 게 아니니까, 분석을 해야 뭘 어떻게 개발할지 가이드가 나올 수 있다.), 이에 따른 개발을 진행해야 한다. 게다가 B회사에서 A회사에 맞는 OS개발이 불가능하다면, 이는 상품화해서 팔아먹을 수 없다.
7. 근데 만약에 C라는 회사에서 하드웨어(컴퓨터)를 만들었는데 그게 더 유명해져서 B회사가 C회사의 OS를 만들어서 팔아먹고 싶다면?
8. 그럼 또 C회사의 개발 로직을 전부 분석해야 해고, 이에 따른 개발을 진행해야 한다.
9. 즉, 일종의 '규격화된 기준'이 존재하지 않는다면 시간, 인력, 돈이 엄청나게 깨지는 경우가 발생하고
10. 기준을 제대로 맞추지 않은 회사라면, 그 회사는 시장에서 도태되어 망하게 된다.
11. 그러니까, '너도 나도 시간 안 깨지고, 도태되지 않게 약속 잘 지키면서 회사 돈 좀 벌자'를 위해 시작한 게 국제 규격이다.
12. MS에서 개발한 브라우저 중 하나인 인터넷 익스플로러(IE)는 이걸 안 지켜서 도태되었고, 결국 망했다.
13. 왜 도태되었냐면, ES 기준조차 안 지키니까 크로스브라우징 개발할 때 IE 코드만 더럽게 길어지고, 분석에도 엄청난 시간이 걸리게 되었다. 그렇다면? 회사는 IE 빼라고 한다.ㅋ 굳이 거기에 투자 안 한다. 그래서 어느 순간부터 크로스브라우징 개발에 IE가 빠지기 시작했고, 그러다 보니 자연스럽게 도태되었다.
5. 스크립트 언어란? Script Language?
1. 기존에 존재하는 프로그래밍 언어를 제어할 때 사용하는 언어
* 웹은 스크립트 언어를 사용한다.
* 브라우저는 각기 다른 IT 회사에서 만들어낸 소프트웨어/프로그램이다.
* 오픈소스(소스 다 까는 거, 숨기는 거 없는 거, 사내 개발자가 아니라, 외부 개발자도 그 개발에 참여할 수 있는 거, 무료인 거) 브라우저는 모질라 재단에서 만드는 파이어폭스(firefox/이하 파폭-단어 뜻 그대로 한국어로 번역하여 불여우라고 부르는 국내 개발자들도 많다. 나는 '파폭'으로 부른다.)라는 브라우저 하나뿐이다.
* 참고로 파폭은 가장 오래된 브라우저다. 위에 작성한 IE와 다르게, 규격 잘 지키면서 끝까지 살아남았다.
* 그래서 리눅스 따위를 최초 설치할 때, 기본적으로 설치할 수 있는 브라우저는 파이어폭스 하나뿐이다.
* 구글 크롬이나 MS 엣지 등은 각 회사에서 만든 브라우저다 보니까, 사용하려면 다운 받아서 사용해야 한다.
* 여하튼, 이런 브라우저를 제어하기 위해 사용하는 프로그래밍 언어의 종류가 바로 스크립트 언어이다.
