거꾸로 바라본 세상
템플릿 리터럴(Template Literals)
Language/Javascript 2023. 4. 20. 09:17

템플릿 리터럴(Template Literals) ES6는 템플릿 리터럴(Template Literals)은 일반 문자열과 비슷해보이지만 ' 또는 " 같은 통상적인 따옴표 문자 대신 백틱(Backtick) (`) 문자를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; console.log(template); 방법1 일반적인 문자열에서 줄바꿈은 허용되지 않고 공백(white-spce)를 표현하기 위해 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용해야한다. 템플릿 리터럴은 일반적인 문자열과 다르게 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모..

[ES6] Class(클래스)
Language/Javascript 2023. 4. 20. 09:16

[ES6] Class(클래스) 클래스는 프로토타입 기반 객체 지향 패턴을 더 쉽게 사용할 수 있게 할 수 있는 대체제로 클래스 패턴 생성을 더 쉽고 간단하게 생성할 수 있다. //클래스 선언 class Person { //constructor 생성자 constructor(name) { this._name = name; } Hello() { console.log('Hello! ' + this._name); } } const me = new Person("Paik"); const friends = new Person("Lee"); me.Hello(); friends.Hello(); 인스턴스 생성 new 연산자를 이용하여 클래스 인스턴트를 생성한다. class Foo {} const foo = new Foo(..

[ES6] Arrows
Language/Javascript 2023. 4. 20. 09:16

[ES6]-Arrows Arrows 함수는 function 키워드 대신 화살표('=>') 를 사용하여 함수를 선언하는 축약형 함수이다. Arrows는 표현식 본문(Expression Bodies)와 상태 블럭 본문(Statement block bodies)를 지원한다. 콜백 함수에서 사용하면 간결하게 표현이 가능. //매개변수 지정 방법 () => {...} // 매개변수가 없는 경우 x => {...} // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x,y) => {...} //매개변수가 여러 개의 경우, 소괄호를 생략할 수 없다. //함수 몸체의 지정 방법 x => { return x * x} //signle line block x => x * x //함수의 몸체가 한줄구문이라면 중괄호를..

[ES6] Scope 연산자 let, const
Language/Javascript 2023. 4. 20. 09:11

Scope 연산자 let, const 기존 ES6 변수들을 선언할 수 있는 방법은 var 키워드이다. var키워드를 사용할 때 주의를 기울이지 않으면 심각한 문제를 일으킨다. [문제점] Function-level scope(함수레벨 스코프) 함수의 코드 블록만을 스코프로 인정한다. 그러므로 전역함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역변수를 남발할 가능성이 크다. for문 변수 선언문에서 선언한 변수를 블록 외부에서 참조할 수 있다. var 키워드 생량 허용 : 암묵적 전역 변수를 만들어 낼 가능성이 크다. 변수 중복 선언 허용 : 의도하지 않은 변수값의 변경이 일어날 가능성이 크다. 변수 호이스팅 : 변수를 선언하기 이전에 참조할 수 있는 것. 대부분의 문제는 전역변수로 인해 발생한다..

[JS] 호이스팅(Hoisting)
Language/Javascript 2023. 4. 20. 09:06

호이스팅 (Hoisting) 자바스크립트의 인터프리터가 함수선언과 변수선언의 선언들이 속해 있는 스코프의 최상단으로 끌어올릴수 있는 방법에 대한 일종의 비유이다. 이로인해 자바에서 작성했다면 분명히 잘못된 것을 컴파일하면 실패하는 것들이 자바스크립트에서는 전혀 문제가 되지 않은 것을 볼 수 있다. travel = 'No Plan'; var traval; console.log(traval); //undefined function travel() { console.log('Traveling'); } travel(); //TypeError: travel is not a function function workout() { goToGym(); var goToGym = function..

[ES6] 객체 프로퍼티와 프로퍼티 속성
Language/Javascript 2023. 4. 20. 09:05

객체 프로퍼티와 프로퍼티 속성 자바스크립트에서 객체는 논리적인 프로퍼티의 집합이며 속성(Attributes)은 프로퍼티의 상태를 정의하고 설명하는데 사용한다. 프로퍼티의에는 데이터 프로퍼티(Data Property), 접근 프로퍼티(Access Property)가 있다. 데이터 프로퍼티(Data Property) value : 자바스크립트의 모든 자료형 writeable : 데이터 프로퍼티의 변경가능 여부 정의 enumerable : for-in 구분을 이용해 열거 가능 여부 정의 configurable : 제거 가능 여부, 접근 프로퍼티 변경 여부, 쓰기 불가 여부, enumerable 속성의 수정 가능여부 정의 접근 프로퍼티(Access Property) get 접근자(get accessor) : F..

Observer Pattern(관찰자 패턴)

Observer Pattern(관찰자 패턴) Observer Pattern은 Observer 라는 Child List를 가지고 있는 주체를 필요로 하는데, 주체는 자신의 메서드 중 하나를 호출해 Observer에게 상태 변경을 알린다. 즉, 주체(Subject)는 이벤트를 발생시키는 역할을 하고, 관찰자(Observer)는 이벤트 수신하는 역할을 한다. 이 패턴은은 이벤트 처리를 기반으로 시스템을 구현할 때 필수고, MVC패턴의 중요한 부분이기도 하다. 대부분의 UI라이브러리는 Observer Pattern을 사용한다. 그리고 런타임 중 객체 사이에 일 대 다(1:N) 의존성을 등록할 수 있다. 장점 응용 프로그램 사이의 결합도를 낮출 수 있다. 효율적으로 이벤트를 배포하는데 도움이 된다. UML 다이어..

11. Docker Application 배포
CI-CD/Docker 2023. 4. 19. 09:44

Docker Application 배포 Docker network 생성 docker network create --gateway 172.18.0.1 --subnet 172.18.0.0/16 ecommerce-network RabbitMQ 설치 https://hub.docker.com/_/rabbitmq/tags 에서 사용하고자하는 버전 다운로드 docker pull rabbitmq:latest 실행 ## -d :detach mode ## --name : 도커이름 ## --network : 설정한 도커 네트워크 docker run -d --name rabbitmq --network ecommerce-network \ -p 15672:15672 -p 5672:5672 -p 15671:15671 -p 5671..

10. Docker Compose
CI-CD/Docker 2023. 4. 19. 09:36

Docker Compose Docker Compose는 여러 컨테이너들을 모아서 관리하기 위한 도구로써 docker-compose.yml라는 파일에 컨테이너 구성정보를 정의하여 동일 호스트 상의 여러 컨테이너를 일괄적으로 관리 할 수 있다. Docker Compose 시작 $ docker-compose up Docker Compose 컨테이너의 상태 $ docker-compose ps Name Command State Ports -------------------------------------------------------------------------------- redis_1 docker-entrypoint.sh redis ... Up 6379/tcp webserver_1 python /opt/..

9. Dockerfile
CI-CD/Docker 2023. 4. 19. 09:35

Dockerfile을 사용한 구성 관리 Dockerfile은 Docker상에서 작동시킬 컨테이너의 구성정보를 기술하기 위한 파일. docker build 명령을 통해 Dockerfile에 기술된 구성정보를 바탕으로 Docker 이미지를 작성한다. Dockerfile의 기본 서식 명령 인수 명령은 대소문자 상관없이 사용가능하며 관례적으로 대문자를 통일해 사용. 명령 설명 FROM 베이스 이미지 지정 RUN 명령 실행 CMD 컨테이너 실행 명령 LABEL 라벨 설정 EXPOSE 포트 익스포트 ENV 환경변수 ADD 파일/디렉토리 추가 COPY 파일 복사 ENTRYPOINT 컨테이너 실행 명령 VOLUME 볼륨 마운트 USER 사용자 지정 WORKDIR 작업 디렉토리 ARG Dockerfile 안의 변수 ON..