# 개발 용어
## PWA
PWA (프로그레시브 웹 앱, Progressive Web Apps)은 웹과 네이티브 앱 기능의 이점을 모두 가진 웹 앱이다. 즉, 웹 기술을 사용한 웹이지만 앱처럼 만드는 기술이며, 설치 가능한 앱으로 만들어 준다.
만약 앱으로 만들어 사용할 계획이 아니라면 사용할 필요는 없다.
{% hint style="info" %}
그럼 앱을 만들 때 대부분 PWA로 만드는가?
아니다. 네이티브 앱 개발자는 익숙하지 않은 웹 기술을 공부해야 하기 때문에 기존 방식으로 만든다.
{% endhint %}
#### 참고
* [프로그레시브 웹 앱 소개 → MDN ](https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction#%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C_%EC%9B%B9_%EC%95%B1%EC%9D%B4_%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94)
* [프로그레시브 웹 애플리케이션 → 위키백과 ](https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C_%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98)
## 레거시 시스템
레거시 시스템(Legacy System)은 낡은 기술이나 방법론, 컴퓨터 시스템, 소프트웨어 등을 말한다. [하위 호환](https://namu.wiki/w/%ED%95%98%EC%9C%84%20%ED%98%B8%ED%99%98)을 위해 신규 프로그램 속에 남겨두는 기존 프로그램의 소스 코드를 뜻한다.
## 빌드 시스템
내가 만든 애플리케이션을 사용자에게 배포할 수 있는 형태로 변환하는 체계를 말한다.
## 번들링
여러개로 나눠진 파일을 하나로 합치는 것을 말한다. \
웹팩과 바벨이 번들링 역할을 해주는 도구이다.
## 베타 버전(Beta version)
정식 발표 전 오류 발견 및 완성도를 높이기 위해 사용자에게 배포하는 시험용 소프트웨어
#### 참고
* [위키피디아 → 소프트웨어 배포 생명 주기(Software release life cycle)](https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EB%B0%B0%ED%8F%AC_%EC%83%9D%EB%AA%85_%EC%A3%BC%EA%B8%B0)
## [트리거(Trigger) ](https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%ED%8A%B8%EB%A6%AC%EA%B1%B0)
트리거(Trigger)란 영어로 방아쇠라는 뜻이다, 방아쇠를 당기면 총알이 나간다. 트리거(Trigger)는 DML 문(INSERT, UPDATE, DELETE)이 실행되었을 때, 데이터베이스에서 자동으로 동작하도록 작성된 프로그램다. 즉, **사용자 직접 호출이 아닌, 데이터베이스에서 자동적으로 호출 된다.**
## Icon Font
아이콘 폰트란 아이콘으로 이루어진 폰트 생성하여 아이콘을 마치 하나의 글자처럼 표현하는 방식이다.
규모가 큰 프로제트에서 수많은 아이콘을 사용한다면 아이콘 폰트로 변환해서 사용하면 좋다. 하지만 아이콘을 많이 사용하지 않는 작은 규모에 프로젝트에서는 꼭 아이콘 폰트로 변환하여 사용할 필요는 없다.
참고
* [아이콘 폰트(IconFont)의 모든 것](https://webdir.tistory.com/476)
* [IconMoon → 아이콘 이미지를 아이콘 폰트로 변환 ](https://icomoon.io/app/#/select/font)
* [iconmonstr → IconFont를 제공](https://icomoon.io/app/#/select/font)
* [Nerd Fonts](https://www.nerdfonts.com/#features)
## Tree shaking
모듈 단위로 개발할 때 사용하지 않는 모듈을 털어서 빼는 기술이다. (용량을 줄일 수 있음),
리액트를 Webpack 없이 바로 JS에서 사용하게 되면 Tree shaking이 안된다.
## [버저닝 ](https://semver.org/lang/ko/)
| 구분 | 설명 |
| ----- | ---------------------------------------------------- |
| 1.0.0 | 메이저 버전
|
| 0.1.0 | 마이너 버전 |
| 0.0.1 | 패치 버전 |
{% hint style="info" %}
[리액트 버전 ](https://ko.reactjs.org/versions/)
{% endhint %}
## BaaS
[Backend as a Service](https://itwiki.kr/w/BaaS#FaaS.EC.99.80.EC.9D.98_.EC.B0.A8.EC.9D.B4)(백엔드는 서비스다)의 약자이다. 백엔드 개발자 없이 간단한 서비스를 만들 때 사용한다. 예를들어 Firebase와 같은 도구가 BaaS를 제공한다.
## CSR, SSR, SPA, MPA
{% embed url="" %}
## 애자일 기법 vs 폭포수 기법
폭포수 기법(직렬식 기법) 애자일 기법(병렬식 기법)
## Git va Github
### Git
버전 관리 시스템(VCS)으로 무료 공개 소프트웨어이며, 작업을 관리하는 도구(툴)이다. 작업한 내용을 `commit`하거나 `push`, `pull` 하는 등의 기능은 `Git`이라는 도구의 기능이다.
### GitHub
코드저장소(Git)을 웹에 옮겨 놓은 원격(온라인)저장소이다. 내가 한 작업을 저장소에 올려 다른 사람들이 볼 수 있도록 하거나 같이 작업할 협업자를 초대하는 등의 기능으로 사용한다. **절대! `Git`과 `Github`를 같은 도구로 보면 안 된다!**
GitHub를 [대체할 수 있는 저장소](https://www.google.com/url?hl=ko\&q=https://technologyadvice.com/blog/information-technology/github-alternatives/\&sa=D\&ust=1606221596932000\&usg=AFQjCNH5ONiIcWNG66mENKjIAIgmR8iuRA)는 많다. 그중에서 GitHub가 가장 대중화된 것뿐이다!
* 프로젝트를 관리할 때 사용하기 좋음. (여러 사람이 참여하여 수정 가능)
* 분산 버전 관리
파일 변화를 시간에 따라 기록, 특정 시점의 버전을 다시 가져올 수 있다.
* 코드 변경 이력 확인 가능, 코드 복구 가능
* 코드 이전 이력과 비교 가능
## GUI
GUI (그래픽 유저 인터페이스)이며 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 방법이다. 즉, 우리가 마우스로 클릭하며 사용하는 것처럼 그래픽 환경으로 시스템 제어하는 것을 말한다.
## CLI
CLI ([Command-line interface)](https://ko.wikipedia.org/wiki/CLI)은 명령어를 통해 시스템 제어하는 것을 말한다. (예: Bash, zsell 등)
## 디버깅(debugging)
또는 디버그(debug)라고 한다. 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻한다.
### 소프트웨어 버그(software bug)
또는 줄여서 버그(bug)는 소프트웨어가 예상하지 못한 잘못된 결과를 내 거나, 오류가 발생하거나, 착오나 오작동이 발생하는 등의 문제를 뜻한다.
## DOM API
웹에서의 네이티브 개발 환경
* 웹의 문서(`Document`)에 접근하고 접근한 문서 객체에 속성을 변경하거나, 이벤트를 연결하는 기능을 사용하는 환경을 말한다.
* 여기서 중요한 건 `DOM`은 **웹에서 사용되는 네이티브 환경**이다.
### DOM (Document Object Model)
문서 객체 요소들 간의 부모, 자식, 형제 관계(Model)를 말한다.
* 문서 객체 모델, 문서는 객체들로 이루어져 있다. 그 객체들은 구조에 따라 관계를 형성한다. 예를 들어 ``안에는 ``,``가 있는데 이 둘은 형제 관계이다. 이때 이들의 **문서 객체 사이의 관계(Document Object Model)**를 DOM이라고 한다.
### API (Application Programming Interface)
사용자가 사용할 수 있도록 웹 환경에서 작동하는 애플리케이션(프로그램)을 개발(프로그래밍)하기 위한 환경 또는 방법이다. (프로그램들이 서로 소통하는 방법이다)
* 예) 세계 날씨 정보 앱에서 한국의 날씨가 알고 싶다면 '한국' 버튼을 눌러서 한국의 날씨를 쉽고 빠르게 볼 수 있다. 여기서 '버튼'은 코드를 사용해서 누를 수 있다.
* 예) 문서의 객체에 접근하고, 접근한 객체에서 다른 형제나 부모에 접근하는 행위
* 예) 접근한 객체의 속성을 변경하거나 이벤트는 행위
* 예) `React API`, `Node API` 등등
{% hint style="info" %}
**애플리케이션(Application)**
여기서 말하는 앱은 스마트폰의 앱만 이야기하는 것이 아니다. 여러 운영체제의 앱을 포함하여 말한다.
**인터페이스(Interface)**
사용자가 기기를 쉽게 동작시키는 데 도움을 주는 시스템을 의미한다. 즉, 상호작용하는 곳이다.
예) TV의 인터페이스는 리모컨과 TV의 버튼, 스마트폰의 인터페이스는 터치하는 손과 터치를 받는 스크린 등
{% endhint %}
## [알고리즘](https://shhn0509.gitbook.io/hanna-s/dev-term/algorithm)
설계 가능한 루트에서 목표하는 곳까지 가는 최선의 방법을 찾는 프로그래밍
## 프로그래밍
시간의 순서에 따라서 일어나야 하는 일을 컴퓨터에게 알려주는 일
## 프로그램
프로그래밍을 통해 만든 것
## 정적 메서드
정적 메서드(static method)는 객체를 생성하지 않고도 사용할 수 있는 메서드를 말한다.
## 가비지 컬렉션
가비지 컬렉션은 (Garbage Collection) 뜻풀이 그대로 "쓰레기 수집"이다. 웹에서 메모리를 관리하는 기법의 하나이며 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요 없게 된 영역을 제거해 버리는 기능을 한다.
`JavaScript` 프로그램에 적용해서 보자면 함수의 실행이 끝나면 해당 함수는 가비지 컬렉터에 의해 소멸된다. 하지만 `Closure`가 함수의 어휘 환경(`Lexical Environment`)이 사라지는 것을 막고 환경 메모리(`Environment Record`)에 저장된 값을 기억하고 있다.
* [\[MDN\]자바스크립트의 메모리관리](https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management)
## CDD vs DDD
| 구분 | 설명 | 장점 | 단점 |
| --------------------------------- | -------------- | --------------------------------------------------------------- | ---------------------------------------------------------------- |
| CDD(Component Driven Development) | 컴포넌트 방식의 UI 설계 | 마크업과 스타일링을 단위별로 쪼개서 진행하기 때문에 스타일링을 생각하면서 마크업을 진행할 수 있다는 장점이 있다. | 각 단위별로 작업을 진행하기 때문에 큰 그림을 보기가 힘들다. 웹 표준 검사 등을 작업이 끝난 후에 확인해야 한다. |
| DDD(Document Driven Development) | 페이지 단위의 UI 설계 | 큰 그림을 먼저 그리고 시작하기 때문에 전체적인 구성을 생각하고 진행할 수 있다는 장점이 있다. | 미처 고려하지 못한 스타일링을 위해 마크업을 수정해야 해야 하는 일이 발생할 수 있다. |