개발자가 되기 위해 꼭 알아야하는 it 용어

좋은 디자인 시스템의 예
 
구글의 머리티얼 디자인
(https://material.io/)
 
애플디자인리소스
(https://me2.kr/pdset)
 
에어비엔비 디자인(https://me2.kr/x5rz3)
 
DOM/Virtual DOM 더 알아보기
 
HTML이 DOM인가요?
DOM은 HTML 문서를 읽어 웹브라우저에 보여주기 때문에 HTML 자체가 DOM이라고 생각하기 쉽습니다.
다음 세가지 중 어떠한 것이 DOM인지 생각해본 후 답을 확인해보세요.
 
1. 내가 작성한 HTML
2. 페이지 소스보기에서의 코드
3. 웹브라우저의 개발자 도구에서 보이는 코드
 
정답은 3번입니다. HTML 문서를 읽어 웹 브라우저에 보여주는 것이 DOM의 역할이라고 했는데, 왜 3만 정답일까요?
 
1번은 HTML이 파싱되어서 브라우저에 보여졌다면 DOM이 맞습니다. 그러나 파싱되기 전 날것의 HTML은 DOM이 아닙니다. 내가 작성한 HTML 코드에 오류가 있다면 웹브라우저는 오류 그대로를 보여주지않기 때문에 답이 아닙니다.
 
2번 또한 완벽한 정답은 아닙니다. 내가 작성한 HTML코드가 해당페이지를 보여주기 때문에 1번과 같은 이유로 DOM이 아닐 수도 있습니다. 또한 백엔드 언어를 사용한 템플릿 파일을 이용하면 컴파일된 결과를 보여주기 때문에 HTML 코드가 변형되거나 압축되었을 수도 있습니다. 
 
3은 완전한 DOM입니다. 내가 작성한 HTML코드에 오류가 있을 때 브라우저가 자동으로 HTML을 보여주기 때문입니다. 개발자 도구에 보이는 코드는 교정 이후의 HTML을 보여주는 것입니다. 
 
 
크롤링의 정의
 
크롤링을 공부할 때 스크래핑과의 관계를 명확하게 알아야합니다. 크롤링은 웹을 돌아다니며 정보를 탐색하는데 목적이 있지만, 스크래핑은 정보를 추출하는데 목적이 있습니다. 크롤링은 하나의 페이지에서 웹링크를 반복적으로 찾고 가져오는 행위라면, 스크래핑은 웹페이지의 정보를 가지고 오는 행위입니다. 
 
크롤링은 어떻게 접하게 될까?
크롤링을 사용하는 대표적은 예로 가격 비교 사이트가 있습니다. 가격 비교 사이트는 여러 쇼핑몰에 흩어져있는 제품 정보를 수집해서 최저가로 판매하는 사이트를 찾아주는데, 이때 여러 사이트에서 제공하는 제품 정보를 크롤링을 통해 수집하고 분석합니다.
 
크롤링 더 알아보기
 robots.txt는 사이트의 루트 디렉토리에 있는 텍스트파일입니다. 사이트가 http://a.com 이라면 http://a.com/robots.txt 에서 확인할 수 있습니다. 이 문서는 앞서 설명한 검색 엔진지 크롤링을 해야하는 페이지와 무시해도 되는 페이지를 알려주는 역할을 합니다.
 

User-agent: Googlebot
Disallow:  /

User-agent: Yeti
Allow:  /

 
User-agent에는 제어할 검색 엔진의 이름을 작성하면 되고, 'Allow/Disallow'에는 경로를 작성하면 됩니다. 
위의 코드는 Googlebot은 전부 차단하고, Yeti는 전부 허용하는 코드입니다. robots.txt를 작성하지 않으면 기본적으로 모든 검색 엔진이 사이트를 크롤링할 수 있기 때문에 사이트 특성에 맞게끔 설정하는 것이 중요합니다.
 
웹스토리지를 알아야하는 이유
웹스토리지는 쿠키의 단점을 보완하여 등장한 저장기술입니다. 따라서 쿠키와 웹스토리지 각각의 특징을 알고, 경우에 따라 적절한 저장 방식을 선택해야합니다. 각 상황에 적합한 데이터 저장 기술을 사용하기 위해서는 웹 스토리지에 대한 학습이 필요합니다.
 
웹스토리지의 메소드
-setItem(key, value)
 
-getItem(key)
 
-removeItem(key)
 
-clear()
 
 
웹팩
프론트엔드 개발자들이라면 함수 파일들을 내보내고 (export) 그 파일을 다른곳에서 받아오는(import) 일을 하며 모듈의 개념을 접해본 경험이 있을 것입니다. 웹팩은 작성한 코드들을 빌드하는 과정에서 사용합니다.
 
PWA Progressive Web App
 
어떤 웹사이트에 접속했는데 '앱을 설치하시겠습니까?' 라는 팝업창이 뜨는 경우가 있습니다 이때 앱을 설치하면 앱스토어를 거치지않고 바로 컴퓨터 바탕화면 혹은 스마트폰 홈 화면에 설치됩니다. 이렇게 설치된 앱이 바로 PWA입니다. 우리에게 친숙한 스타벅스도 PWA도 만들어진 웹앱을 서비스하고 있습니다.
 
PWA의 핵심 기능
일반적인 모바일 웹앱에 PWA를 도입하면 검색 엔진 최적화가 가능하고 스마트폰의 주소록, 카메라에 접근과 같은 기본 웹 앱에서는 불가능한 네이티브 기능을 사용할 수 있다는 이점이 있습니다. 이외에도 다음과 같은 PWA핵심 기능이 존재합니다.
 
1. 푸쉬알림
2. 앱 설치 기능
3. 네트워크 독립성과 캐싱
 
푸시알림
푸시알림의 네이티브 앱의 성공에 꼭 필요한 기능입니다. 이 기능의 유무에 따라 앱의 재방문율, 실행 시간이 크게 달라집니다. 웹API의 푸시 알림 관련 API들을 사용할 수 있다는 점이 가장 큰 매력입니다. 이 API들은 서비스 워커와 마찬가지로 백 그라운드에서 동작하기 때문에 사용자가 다른 앱을 사용중이거나 앱을 완전히 종료한 상태에서도 푸시알림을 보낼 수 있습니다.

CORS 와 SOP의 비교
SOP는 브라우저와 매우 밀접한 관련이 있을 것이라 예상할 수 있습니다. SOP는 보안을 위해 브라우저가 가지고 있는 정책입니다. 그렇다면 브라우저는 서로 다른 도메인으로부터 리소스를 받아올 떄 무엇을 보고 판단할까요? 클라이언트와 서버 각각의 도메인 URL의 Scheme, Host, Port 만 보고 판단합니다.
 
http:// => Scheme
 
localhost:=> Host
 
8080=> Port
 
 
 
 
스위치:
pc들이 데이터를 동시에 보내려다 부딪히는 경우를 충돌발생했다고 합니다. 허브에 연결된 pc들을 하나의 콜리전 도메인안에 있기 때문에 어느 한 순간에는 한 pc만 데이터를 보낼 수 있습니다. 콜리전 도메인이 너무 커지면 콜리전에 의해 영향을 받는 pc가 너무 많아져 통신 속도가 점점 떨어지게 됩니다. 스위치를 콜리전 도메인을 작게 분할하여 데이터 전송 시 충돌 가능성을 낮춰주는 장비입니다.
스위치는 예를 들어 1번 포트에 연결된 pc가 2번 포트에 연결된 pc와 데이터를 주고받는 동안에도 3번 포트에 연결된 pc와 4번 포트에 연결된 pc가 서로 데이터를 주소받을 수 있게 하는 장비입니다. 이렇게 포트별로 콜리전 도메인을 나누기 때문에 통신이 일어나면 나머지 모든 pc는 기다려야하는 허브와 달리 다른 pc들도 동시 통신이 가능합니다. 이것이 스위치와 서브의 가장 큰 차이점입니다. 
 
 
샤딩의 정의
샤딩은 데이터베이스 테이블을 조각내어 각각 새로운 노드에 저장하는 데이터 관리 방법을 의미합니다. 하나의 데이터베이스에서 다루기에는 데이터의 양이 너무 많을 때 여러 노드에 데이터를 나누어 처리속도를 향상시킬 수 있습니다.
 
 
샤딩 알아보기
샤딩은 수평적 분할이라고도 합니다. 데이터를 수평적으로 분할한다는 것은 데이터 테이블의 행을 기준으로 나누는 것입니다.
 
데브옵스는 어디서 접하게 될까?
클라우드로 인해 코드로 인프라 관리가 가능해졌고, 운영의 모든 부분이 자동화되었습니다. 데브옵스 엔지니어가 구축한 자동화 파이프라인을 통해 지속적으로 통합, 배포, 테스팅, 모니터링을 접할 수 있습니다. 마이크로서비스아키텍처에서도 데브옵스를 쉽게 접할 수 있습니다. 작은 서비스 단위로 구성된 마이크로서비스는 개발과 운영을 하나의 팀에 두고 유기적으로 협력합니다.
 
도커는 어떻게 접하게 될까?  
도커는 엔지니어와 개발자들을 위해 사용됩니다. 예를 들어 설명해 보겠습니다.
A 회사는 솔루션 프로그램을 개발해 여러 회사에 납품하고 있습니다. 초창기에 는 엔지니어가 솔루션에 3-4개의 소프트웨어를 설치해서 납품했습니다. 그런데 시간이 지날수록 솔루션이 업그레이드되고 지방까지 솔루션을 납품하는 일이 잦아졌습니다. 엔지니어는 매번 솔루션을 납품할 때마다 8개의 소프트웨어를 설치해야 하고 납품하는 업체는 많아지는데 설치 시간은 길어집니다. 이때 도커를 사용합니다.
 
도커는 컨테이너라는 독립된 공간에서 여러 개의 자원들을 원하는 대로 묶어 이 미지를 만들고, 이 이미지를 배포해 운영합니다. 여기서 이미지는 특정 프로세스를 실행하기 위한 모든 파일(설치 프로그램, 소스코드,라이브러리, 환경 설정 값 등)을 하나로 묶은 형태를 의미하고, 도커파일 (Dockerfile)을 만든 뒤 빌드하면 생성되는 파일입니다. 따라서 엔지니어가 소프트웨어를 각각설치하지 않고 매번 설치하는 소프트웨어를 이미지로 만들어 배포하면 손쉽게 설치할 수 있습니다
 
도커 알아보기

도커 플랫폼에서는 빌드 및 소스코드를 담고 있는 도커파일을 Push 합니다. 그리 고 해당 이미지는 도커 레지스트리에 저장되고, 엔지니어와 개발자들은 해당 이미지를 사용할 수 있습니다. 또한 통합 테스트 중 에러가 발생하면 에러 발생 이 전 시점의 이미지를 가져와서 다시 사용하는 롤백(Rollback) 기능을 제공합니다.

> 3.2 특징
•3.2.1 쉽고 빠른 실행 환경 구성
도커파일을 이용하면 쉽고 빠르게 실행 환경을 구성할 수 있습니다. [그림 443 ]처럼 원하는 소프트웨어를 묶어서 배포하면 여러 소프트웨어를 설치하지 않고 하나의 이미지로 설치가 가능합니다. 도커파일은 리눅스 명령어와 간단한 도커 명령어로 구성되어 있어 작성이 쉽습니다. 잘 작성된 도커파일 하나가 수많은 사람에게 도움을 줄 수 있습니다.
"32.2 가벼운 용량, 비용 절감 효과
•물리적인 서버는 무겁고 유지 비용도 만만치 않습니다. 도커 컨테이너는 물리적인 서버에 비해 상대적으로 가볍습니다. 그 이유를 좀 더 정확히 알기 위해서는 도커파일의 정의를 살펴봐야 합니다.
도거파일은 ' 이미지+단계별 소스코드+빌드한 내용이 담긴 텍스트 파일로 코드실행에 필요한 os, 버전, 각 파일 경로에 설치할 팔일들의 설정만 포함되어있습니다. 따라서 도커파일의 용량은 일반적으로 mb 크기고, 일부는 gb용량입니다. 이는 하드웨어 용량과 비교했을 때 적응 용량이고, 구동또한 보다 신속하게 이루어집니다.
 
쿠버네티스는 어디에서 접하게 될까?
모놀리식(monolitic)을 마이크로서비스로 나누거나 마이크로서비스 기반 시스 템을 처음부터 구축할 때 수많은 서비스만큼 수많은 컨테이너가 생성됩니다. 이 런 분산 시스템에서 정신없이 많은 컨테이너들을 능숙하게 관리하는 쿠버네티스를 만날 수 있습니다.

>3.1 등장 배경
관리해야 하는 컨테이너 이미지가 점점 많아지면서 컨테이너만으로 구성된 인프라의 문제점이 드러나기 시작합니다. 처음 몇 개 정도의 컨테이너는 수동으로 직접 관리할 수 있었지만 그 수가 수십 개에서 수백 개에 이르게 되면서 각 서버 인스턴스의 상태 체크, 배포, 죽은 컨테이너를 다시 살리는 업무, 갑작스러운 사 용자 증가/감소에 따른 호스트 서버의 성능 스케일업/스케일아웃 업무 등을 자동으로 처리해 줄 툴이 필요해졌습니다. 그래서 등장한 것이 컨테이너 오케스트레이션 툴입니다.

> 3.2 역사
구글은 2014년 중순에 자사 내부 컨테이너 클러스터 관리 서비스인 보그(Borg)
를 오픈 소스 버전으로 공개했고, 2015년 7월 21일에는 쿠버네티스 V1.0을 출시 했습니다. 이때 구글은 리눅스 재단(Linux Foundation)과 파트너십을 맺고 클라 우드 네이티브 컴퓨팅 재단(Cloud Native Computing Foundation, CNcF)을 설 립했습니다. 이후로 CNCF가 쿠버네티스를 관리하고 있습니다.
현재는 구글, 아마존, 애저 등 주요 클라우드 벤더와 IBM, 오라클 같은 소프트웨어 벤더들이 각자의 브랜드로 쿠버네티스 배포만을 제공하고 있으며. 컨테이너 오케스트레이션의 사실상의 표준으로 자리 잡은 형국입니다.

> 3.3 개념
쿠버네티스의 개념은 크게 두 가지로 나누어 설명할 수 있습니다. 첫째, 선언적 구성과 컨트롤러입니다. 사용자가 '원하는 상태(Desired State)를 선언해 두면 쿠버네티스가 능동적으로 조치합니다. 마치 에어컨 온도를 24도로 설정(선엔)
해 두면 실내 온도가 24도 보다 높을 때 에어컨이 작동되고 낮으면 멈추는 것과 같은 개념입니다. 이러한 선언은 YAML형태로, 이루어집니다.
컨트롤러는 선언문(YAML)이 원하는 상태를 확인하고 현재 상태를 관찰한 후불 일치할 경우 자동으로 조치를 취합니다. 그 결과 현재의 상태는 원하는 상태와 일치하게 됩니다. 쿠버네티스는 수많은 컨트롤러로 구성되어 있으며 각 컨트롤 러는 자체적인 컨트롤 루프를 수행합니다.

둘째, 암시적/동적 그룹화입니다.명시적/정적 그룹화는 '우리 팀원은 앨리스, 밥, 캐롤입니다'와 같은 명시적 표현입니다. 암시적/동적 그룹회는 '우리 팀원은 오렌지색 옷을 입은 사람들입니다'와 같은 암시적 표현입니다. 오렌지색 옷의 착용 여부에 따라 구성원이 언제든 바뀌기 때문에 동적 그룹입니다. 이와 같은 맥락에서 서버를 애완동물(Pet)보다는 가축(Catle)에 비유합니다. 쿠버네티스 의 암시적/동적 그룹화는 레이블(Label)과 레이블 셀렉터(Label Selector)로 수행 됩니다.


쿠버네티스 사용하는 이유:

클라우드 시대로 넘어오면서 빠르고 유연하게 자원을 사용할 수 있게 되었지만, 클라우드 회사마다 자원을 사용하는 방법이 달라 클라우드 플랫폼별로 설정을 다르게 해야 했습니다. 하지만 쿠버네티스 클러스터를 설치하면 클라우드 플랫 폼에 상관없이 동일한 설정을 이용해서 앱을 구축할 수 있습니다.
요즘 대부분의 사용자들은 무중단 웹 서비스를 기대합니다. 개발자들 역시 새 버전을 하루에도 몇 번씩 배포하는 것을 기대합니다. 이러한 목표는 컨테이너와 쿠버네티스를 통해 실현할 수 있습니다.

6.1 미니큐브(Ninikube)
'미니큐브는 쿠버네티스의 라이트 버전으로 개인 노트북이나 PC의 가상환경에 서 간단하게 쿠버네티스 클러스터를 생성할 수 있습니다. 미니큐브는 쿠버네티 스를 처음 사용해 보는 개발자가 간단히 테스트할 때 유용합니다. 미니큐브는 마스터 노드의 일부 기능과 하나의 노드만 제공합니다. 

 

CDN Contents Delivery Network

웹 또는 앱이 많은 사용자들을 보유하고 있거나 전 세계 또는 먼 곳에 컨텐츠를 제공할 때 CDN를 이용합니다. 온라인 동영상 스트리밍 서비스를 제공하는 넷플릭스는 CDN기술을 활용해 전 세계 사람들에게 콘텐츠를 안정적으로 제공하고 있습니다. 또한 보안을 강화하고 싶을 때도 CDN이 활용됩니다.

 

해시

입력데이터를 고정된 길이의 데이터로 변환된 값입니다.

 

해싱

해싱은 앞에서 설명한 해시함수를 통해서 해시 값을 출력하고, 해시 테이블에 저장하고, 검색하는 모든 과정을 말합니다. 자료 구조중 배열(Array)과 연결리스트(Linked list)의 단점을 보완하기 위해 두 가지를 조합한 형태입니다.

 

CPU (Central Processing Unit) 

컴퓨터의 두뇌이자 컴퓨터 프로그램 실행에 핵심적인 역할을 하는 장치입니다.

 

ALU (Arithmetic Logic Unit)

프로그램이 실행되는 곳은 CPU입니다. 그런데 좀 더 구체적으로 살펴보면 CPU 내부에는 실제 연산을 담당하는 ALU라는 장치가 있습니다. 그 밖에 나머지 장치들은 연산할 때 도움을 줍니다.

 

ALU가 처리하는 연산은 두 가지입니다. 하나는 덧셈이나 뺄셈 같은 산술 연산이고, 나머지 하나는 AND나 OR같은 논리 연산입니다. 아주 복잡한 프로그램이라도 CPU입장에서는 이 두가지 형태의 연산으로 이루어집니다.

 

레지스터

CPU명령이 들어갔을 때 ALU는 앞서 들어온 연산을 처리 중이고 컨트롤 유닛은 앞서 들어온 명령어를 해석하고 있는 상황이라면 바로 처리가 어렵습니다. 따라서 컨트롤 유닛이나 ALU가 필요로 하는 명령어 및 데이터를 임시로 저장하는 메모리 공간이 필요한데, 이 것을 레지스터라고 합니다. 

 

클럭신호

클럭신호는 CPU를 구성하는 요소는 아닙니다. 그러나 CPU구성요소에 타이밍을 제공하는 신호로서 매우 중요한 의미를 지닙니다

CPU성능을 말할 때는 클럭 신호를 함께 표시합니다. 예를 들어 CPU 클럭 속도가 1.6Mhz라면 1초당 1,600,000 번의 클럭이 발생한다는 의미입니다. 

CPU는 클럭이 발생할 때마다 그 클럭에 맞춰서 연산을 합니다. 따라서 CPU 클럭 속도가 높을수록 초당 처리하는 명령어의 개수가 많아져 컴퓨터의 전체 성능이 좋아집니다.

 

메모리구조

 

낮은번지

코드영역

데이터영역

힙영역

스택영역

 

높은 번지

 

코드영역

프로그램이 컴파일되면 모든 코드는 코드 영역으로 적재됩니다. 그리고 코드영역의 코드들을 CPU가 하나씩 가져가서 처리합니다. 코드 영역의 자원들은 프로그램이 모두 종료될 때 해제됩니다.

 

데이터영역

전역변수와 정적변수(static) 변수가 저장되는 공간입니다. 두 변수의 공통점은 프로그램이 끝나기 전까지 해제되지 않는다는 것입니다. 해제되지않고 프로그램이 종료되기 전까지 남아있어야 하는 변수는 데이터 영역에 할당됩니다.

 

힙영역

동적할당영역으로 프로그램이 실행되는 도중에 일시적으로 필요할 때 메모리를 할당하고 사용 후 반납되는 영역입니다.

 

**힙이 동적이다. 이렇게 외워 

 

스택영역

정적할당영역으로 지역변수와 매개변수가 저장되는 공간입니다. 메인 메소드를 포함한 모든 메소드가 적재되는 공간으로 메소드의 순서에 따라 할당되고 해제됩니다. 스택방식은 후위선출 (LIFO) 방식으로 나중에 들어온 코드가 실행 후 먼저 해제되는 방식을 사용합니다.

 

XSS (Cross-Site Scripting)

사이트 간 스크립팅이라고 불리우며 웹 앱에서 지주 나타나는 취약점 중 하나로 해커가 웹페이지에서 악성 스크립트를 삽입해 사용자의 로그인 정보들을 탈취하는 공격 방식입니다.

 

 

DDos Distributed Denial of Service

수십대 의 PC(좀비 PC) 을 동시에 접속시켜 과부하를 일으켜 서버를 마비시키는 방법입니다. 이로 인해 과도한 트래픽이 발생하고 서버가 작동하지 않게 됩니다.

 

IDS(Intrusion Detection System)/IPS(Intrusion Prevention System)/
WAF(Web Application Firewal)의 정의

IDS, IPS WAF는 외부 침입을 탐지하고 방지하는 시스템들입니다. IDS (침입 탐지 시스템)는 방화벽이 탐지할 수 없는 악의적인 네트워크 트래픽을 탐지하는 시스템이고, IPS(침입 방지 시스템)는 침입을 탐지하고 탐지에 대한 방지도 할 수 있는 시스템입니다. WAF(웹 방화벽)는 웹 앱 앞에서 네트워크 트래픽을 분석 해 모니터링하고 제어하는 시스템입니다.