하나씩 배워나가는 개발일지

대부분의 백엔드 개발자가 갖춰야 할 기본 스킬 중 하나가 Nginx다. 하지만 프론트엔드 개발자도 백엔드 개발자와의 원활한 협업을 위해서는 Nginx에 대한 기본 개념을 어느정도 알고있어야 한다고 생각이 들어서 Nginx에 대해 공부해보고자 한다. [ Nginx 공부 전 알아야 할 CS ]클라이언트서비스를 이용하기 위해 네트워크를 통해 요청을 보내는 주체웹 개발 영역에서 보통 클라이언트라 하면 크롬, 사파리, 익스플로러 등 웹 브라우저를 의미 웹 서버클라이언트의 요청에 따라 HTML, CSS, JS, 이미지 파일과 같은 정적 파일을 응답하여 제공하는 소프트웨어HTTP 프로토콜을 사용해 클라이언트와 통신대표 : Nginx, Apache 등 WAS클라이언트 요청에 대해 동적인 처리를 담당하는 영역웹 서버와 ..

[타입스크립트] 맵드 타입타입스크립트의 고급 타입인 맵드 타입(mapped type)이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 기능을 말한다. 예를 들어 인터페이스에 있는 모든 속성을 루프문 같이 순회해서 optional(?) 로 바꾸거나 readonly 로 지정할수 있으며 아예 지정된 타입을 바꿔서 변경된 타입을 반환할 수도 있다.   아직 맵드 타입에 대해 문법을 배우지는 않았지만 간단하게 살펴보자면 다음과 같다.interface Obj { prop1: string; prop2: string;}type ChangeType = { [K in keyof T]: number;};type Result = ChangeType;/*{ prop1: number; prop2: nu..

[타입스크립트] 조건부 타입조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정하는 기능을 말한다.위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데 보자마자 삼항 연산자가 생각 났을 것이다.유추한 바와 같이 자바스크립트의 삼항 연산자는 변수의 값을 조건에 따라 결정하는 것이라면, 타입스크립트의 조건부 타입은 값 대신 타입을 조건에 따라 결정하는 것이라고 보면 된다. 위의 조건부 타입 코드 문법을 풀이해보자면 타입은 T가 U에 할당될 수 있으면 타입은 X가 되고 그렇지 않다면 타입이 Y가 된다는 것을 의미한다.착각하지 말아야 할점은 조건부 타입도 유니온처럼 하나의 타입이라는 것이다.extends 키워드가 들어가서 제네릭 꺾쇠 괄호  안에 써..

[타입스크립트] 유틸리티 타입TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.예를 들어 JS에서 배열을 다룰 때 for, while문이면 충분하겠지만 따로 forEach문이나 배열 생성하는 map, 배열요소를 찾는 find나 filter와 같이 배열을 다루는데 편리하게 이용가능한 루프 헬퍼 함수를 지원하듯이, 타입스크립트에서도 타입 변경을 쉽고 용이하게 하기위해 헬퍼함수처럼 Utility Type을 제공한다고 생각하면 된다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입 변환이 가능하지만 유틸리티 타입을 사용하면 훨씬 더 간결한 문법으로 타입 정의가 가능할 뿐 아니라 이미 정의한 타입을 변환할 때 유용하게 쓸 수 있다..

도커(Docker)란?리눅스 컨테이너에 리눅스 어플리케이션을 프로세스 격리기술을 사용해 쉽게 컨테이너로 실행, 관리할 수 있게 해주는 오픈소스 프로젝트.도커는 일반적으로 도커 엔진(Docker Engine) 혹은 도커에 관련된 모드 프로젝트를 말한다. 도커 엔진(Docker Engine)은 컨테이너를 생성하고 관리하는 주체로서, 자체로도 컨테이너를 제어할 수 있고 다양한 기능을 제공해준다.도커의 생태계에 있는 여러 프로젝트들은 도커 엔진을 좀 더 효율적으로 사용하기 위한 것에 불과하기 때문에, 도커의 핵심은 도커 엔진이라고 할 수 있다.  Vitrual Machine(가상 머신) vs Docker Container(도커 컨테이너) 가상 머신(Virtual Machine) 가상 머신은 하이퍼바이저를 이용해..

Submodule이란일반적으로 하나의 repository에 해당 프로젝트의 모든 내용이 포함된다. 그러나 하나의 repo로 관리하기 어려운 대형 프로젝트 역시 존재한다. 쉽게 shared library(slib)를 가져다 쓰는 경우를 생각해볼 수 있다. 가령 무지성으로 slib의 내용을 싹싹 긁어다가 하나의 main repo로 병합하여 관리한다고 생각해보자.  위 경우 두 가지 문제가 발생할 수 있다:slib의 업데이트가 이뤄졌을 때, 버전 관리가 매우 번거롭다. (Why? main repo와 commit logs를 공유하기 때문에)main repo의 변화에 맞춰 slib의 내용이 변경될 경우, 이를 사용하는 다른 모든 repo의 내용 역시 manually하게 전부 변경 해야 함. 당연히 slib의 내용..

Package란?package: 완성된 프로그램 1. 다른 패키지의 부품으로써 사용되는 package$ var my = require('my-package'); 2. package 자체가 완제품으로써 사용되는 것$ my-package  Package의 특성1. 코드 모듈화공통된 기능을 별도의 코드베이스로 추출하여 npm 패키지로 만듦예로, 여러 레포지토리에서 공통으로 사용하는 함수나 유틸리티를 하나의 패키지로 모을 수 있음 2. 패키지 생성해당 코드를 포함한 새로운 프로젝트를 생성,package.json 파일을 작성하여 npm 패키지로 등록할 준비 3. 배포공통 기능을 npm 레지스트리에 배포 4. 각 프로젝트에서 사용개별 프로젝트에서 이 패키지를 의존성으로 추가npm install  명령어를 사용해 패..

JS의 얕은 복사, 깊은 복사를 이해하기 위해선 우선 자바스크립트의 값에 대해 알아야한다.자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값NumberStringBooleanNullUndefined 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2  참조값ObjectSymbol 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다const a = {number: 1};let b = a;b.number = 2console.log(a); // {number: 2}console...

Event Loop란? 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘이벤트 루프는 Call stack, Micro task queue, Macro task queue로 구성  JS Engine자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다.(그림의 왼쪽 영역)가장 유명한 것이 구글의 V8 Engine이다.자바스크립트는 단일 스레드 프로그래밍 언어인데, 이는 Call Stack이 하나 라는 의미이다.(멀티가 되지 않고, 하나씩 하나씩 처리한다는 의미!)Memory Heap : 메모리 할당이 일어나는 곳(ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨져 있음)Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임Stack(스택) : ..

원시타입과 객체타입원시타입숫자타입(number): 숫자. 정수와 실수 구분없이 하나의 숫자타입만 존재문자열타입(string): 문자열불리언타입(boolean): 논리적 참, 거짓undefined타입: var키워드로 선언된 변수에 암묵적으로 할당되는 값null타입: 값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌타입(symbol): ES6에서 추가된 7번째 타입(다른 값과 중복되지 않는 유일무이한 값)객체타입: 원시타입을 제외한 모든 것  Symbol타입주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용심벌은 Symbol 함수를 호출해 생성한다.이 때 생성된 심벌 값은 외부에 노출되지 않는다.또한, 다른 값과 절대 중복되지 않는 유일무이한 값var key = Symbol(..