분류 전체보기

Project/Prostargram

Prostargram - Husky로 커밋하기 전 타입 체크, 린팅, 포맷팅 하기

서론 Git에서 제공하는 Git Hook이라고 하는 기능이 있습니다. 여러 이벤트(커밋 전, 커밋 후, 푸시 전, 푸시 후 등)가 발생 했을 때 사전에 정의한 쉘 스크립트를 실행하여 반복적인 동작을 자동화하기가 편합니다. (어떤 유형이 있는지 궁금하다면 여기로) 이 Git Hook만을 별도로 설정하려면 사람들마다 개별로 적용하거나, 실수로 적용하는 것을 잊었을 때와 같은 상황이 발생하여 동일한 환경을 구축하는 데 번거로운 점이 있습니다. (참고: 가비아 - husky로 git hook하자) 이 Git Hook을 설정하기 편하도록 도와주는 라이브러리가 바로 Husky입니다. 우선적으로 Prostargram에서는 커밋을 하기 전, 작성된 TypeScript 코드에 대한 타입 체크를 하고, ESLint 규칙과..

Project/Prostargram

Prostargram - ESLint + Prettier 설정

서론 개발자들을 모두 개인의 습관, 선호 등으로 인해 작성한 코드의 형태가 다 제각각입니다. 심지어는 본인이 코드를 작성할 때도 다르곤 합니다.. 협업을 하더라도 초기에는 입을 모아 코드 컨벤션을 정하여 지키자고 서로 약속하지만, 평소의 습관대로가 아니기 때문에, 의식적으로 매번 그 컨벤션을 지키려고 하는 것도 어렵습니다. 때문에, 이런 코드의 작성 형태가 일관적일 수 있도록 정적 분석 도구인 ESLint와 Prettier를 사용합니다. ESLint는 사전에 정의된 규칙대로 코드가 작성되지 않으면, 친절하게도 작성된 코드가 어떤 규칙과 맞지 않는지 빨간 줄을 그어 알려줍니다. Prettier는 사전에 정의한 따옴표 종류 (작은 따옴표, 쌍따옴표), 탭의 길이, 세미 콜론 유무 등에 대해서 단축키 또는 저..

도서/Learn Docker in a month of lunches

3장. 도커 이미지 빌드하기

이번 장에서 하게 될 것 - 이미지를 어떻게 만드는지 알기 - Dockerfile 구문 사용해보기 - 애플리케이션을 컨테이너화 할 때 사용하게 되는 핵심 패턴 중 일부 1. 도커 허브에서 이미지 사용하기 지난 글에서 "docker container run" 커맨드를 통해 로컬에 캐시되어 저장되지 않더라도 어딘가에서 다운로드 받아온다는 것을 확인했다. 이 동작이 가능한 이유는 도커 내부적으로 소프트웨어 배포 기능이 내장되어 있기 때문이다. 컨테이너 실행을 통해 이 동작을 하도록 도커에게 맡길 수도 있지만, 도커 CLI를 사용해 이미지를 다운로드 할 수 있다. 예제 - 커맨드 docker image pull diamol/ch03-web-ping - 실행 결과 다운로드 받은 이미지의 이름은 "diamol/ch..

도서/Learn Docker in a month of lunches

2장. Docker의 기본적인 사용법

이번 장에서 하게 될 것 - 컨테이너에서 애플리케이션을 실행하기 - 정확히 컨테이너가 무엇인지 알기 - 왜 컨테이너가 앱을 실행하는 방법 중 경량화 된 방법인지 알기 1. 컨테이너로 "Hello World" 실행하기 우선 Docker를 사용해 어떻게 애플리케이션을 실행시킬 수 있는지 직접 해보자. 그리고 난 뒤, 어떻게 동작하는지 알아볼 것이다. 예제 - 커맨드 docker container run diamol/ch02-hello-diamol - 실행 결과 위 커맨드는 다음와 같은 의미로 사용이 되었다. docker container run (이미지를 가져오는 패키지가 어디에 위치하는지는 나중에 다루기 때문에 지금은 그냥 넘어가도록 하자.) 여기에서 말하는 이미지(Image)란, 어떤 특정 이름으로 패키..

도서/Learn Docker in a month of lunches

1장. 시작하기 전에

1. 컨테이너가 IT 세상을 장악한 이유 도커가 없던 시절의 IT 업계는 협업하기 위한 동일한 환경을 만들기 위해 동일한 툴 들을, 동일한 특정 버전으로, 반복적으로 설치해야 했다. 그 마저도 개발 환경 셋팅과 관련 문서가 없으면 많은 시간을 들여가면서 발생할 수 있는 많은 문제들에 시행 착오를 겪어야 했을 터였다. 도커 컨테이너가 등장하면서 빌드, 배포, 앱의 관리 등을 도커 하나로, 하나의 커맨드만으로도 동일한 환경을 만들 수 있게 되었다. 기존 환경을 만들기 위한 동일한 툴, 특정 버전의 툴 들을 도커 하나로 중앙 집중화 시킬 수 있게 되었고 이는 모든 사람이 동일한 환경을 쉽게 셋팅할 수 있게 만들어 줄 수 있다. 1.1. 클라우드에 앱을 이전하기 클라우드가 발전함에 따라 많은 회사들이 자사의 애..

자바스크립트

자바스크립트의 비동기부터 이벤트 루프까지

코드는 무조건 순서대로 실행되어야....지!....? 일반적으로 자바스크립트에서는 작성된 코드를 위에서부터 아래방향으로, 순서대로 실행합니다. 자바스크립트가 오로지 순차적으로만 실행된다면 어떤 일이 발생할 지 알아봅시다. 최초 코드 상태 전역 코드 (main()) 실행 "task start" 출력 코드 실행 외부 데이터 요청 코드 실행 N시간 동안 아무런 응답이 없다면.. 위 예시 처럼 모든 코드가 위에서 아래로 순차적으로만 동작한다면, 그 중 하나의 작업이 너무 오래 걸리거나 평생 응답이 오지 않는다면, 자바스크립트는 다음 코드를 실행하지 못하고 영원히 멈춰 있게 될 겁니다. 이러한 이유로 자바스크립트에서는 시간이 오래 걸리거나, 바로 응답을 받을 수 없는 요청에 대해서 비동기 작업으로 처리할 수 있..

도서/코어 자바스크립트

1장. 데이터 타입 (04. 기본형 데이터와 참조형 데이터 - 불변 객체)

불변 객체 불변 객체를 만드는 간단한 방법 참조형 데이터의 '가변'은 데이터 자체가 아닌 내부 프로퍼티를 변경할때 성립합니다. 데이터 자체를 변경하고자 하면(새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않습니다. 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용하면 객체의 불변성을 확보할 수 있습니다. 불변 객체가 필요한 경우 var user = { name: 'Jaenam', gender: 'male' }; var changeName = function (user, newName) { var newUser = user; newUser.name = newName; return ..

도서/코어 자바스크립트

1장. 데이터 타입(04. 기본형 데이터와 참조형 데이터 - 변수 복사 비교)

변수 복사 비교 // 1. var a = 10; var b = a; // 2. var obj1 = { c: 10, d: 'ddd' }; var obj2 = obj1; 변수 영역 주소 1001 1002 1003 1004 ... 데이터 이름: a 값: @5001 이름: b 값: @5001 이름: obj1 값: @5002 이름: obj2 값: @5002 데이터 영역 주소 5001 5002 5003 5004 ... 데이터 10 @7103 ~ ? 'ddd' 객체 @5002의 변수 영역 주소 7103 7104 ... 데이터 이름: c 값: @5001 이름: d 값: @5003 기본형 데이터의 변수 복사 변수 영역의 공간을 확보합니다. (@1001) a라는 식별자를 지정합니다. 데이터 영역에서 10이라는 데이터를 검..

도서/코어 자바스크립트

1장. 데이터 타입 (04. 기본형 데이터와 참조형 데이터 - 불변값, 가변값)

기본형 데이터와 참조형 데이터 불변값 변수와 상수를 구분하는 성질은 '변경 가능성'입니다. 값을 변경할 수 있으면 변수 변경할 수 없으면 상수 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리입니다. 불변값과 상수는 다른 개념입니다. 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리입니다. 불변값 기본형 데이터(숫자, 문자열, boolean, null, undefined, Symbol) 숫자와 문자열의 예시 // 1. var a = 'abc'; a = a + 'def'; // 2. var b = 5; var c = 5; b = 7; 변수 a에 데이터 할당 후 다른 데이터로 재할당 하는 경우 a에 'abc'를 할당했다가 뒤에 'def'를 추가합니다. 'abc'와 'abcde..

도서/코어 자바스크립트

1장. 데이터 타입 (01. 데이터 타입의 종류 ~ 03. 변수 선언과 데이터 할당)

기본형과 참조형 자바스크립트가 구분하는 데이터 타입은 크게 두 가지로 분류할 수 있습니다. 기본형primitive type string, number, boolean, undefined, null, Symbol 참조형reference type Object(Array, Object, RegExp 등) 기본형은 값이 담긴 주소값을 바로 복제하는 반면, 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다는 점이 다릅니다. 이게 어떤 것을 의미하는지 알아보기 전에, 메모리와 데이터, 변수와 식별자 등에 대해서 알아보겠습니다. 메모리와 데이터 메모리 컴퓨터는 저장 할 때, 모든 데이터를 0과 1로 변경하여 저장합니다. 이 0과 1로 저장할 수 있는 하나의 단위를 비트bit라고 합니다. 수 많..