Programming
-
Closure에 대하여Programming/javascript 2022. 2. 10. 21:13
앞서 작성한 Execution Context에 나온 개념을 이해하였다면 해당 개념의 예중 하나인 Closure(이하 클로저)에 대하여 알아보자. 클로저란, 함수와 함수가 선언된 어휘적인 환경(Lexical Environment)의 조합이라고 보면 된다. 여기서 필요한 개념은 JS가 변수의 Scope를 어떻게 지정하는지를 알아야하는데 Lexical Environment인 Lexical Scoping에 대하여 알아본다. 우선, 어휘적 범위 지정인 렉시컬 스코핑은 한 함수의 내부에 다시 선언된 함수의 케이스를 생각하면 쉽다. function human(){ // let elem = "test"; function name(){ // console.log(elem); }; name(); }; human(); 과 ..
-
Execution Context에 대하여Programming/javascript 2022. 2. 10. 21:10
실행 문맥(EC; Execution Context)는 JS에서 중요한 개념 원리 중 하나로, hoisting, this, scope, closure와 관련된 근본적인 개념이다. JS의 실행과 흐름 그리고 코드에 대한 정보가 EC를 통하여 관리되기 때문에 이를 이해하는 것이 몹시 중요하다고 할 수 있다. 우선, EC는 자바스크립트 엔진(인터프리터)이 로직으로 짜여진 코드의 함수와 변수, scope와 this 등 정보가 필요한데 이러한 것들이 실행되는 위치를 설명한다는 의미에서 Execution Context라고 한다. JS의 엔진은 EC를 객체로써 관리하며 코드를 EC 객체 내에서 실행 시킨다. •Call Stack이란, 실행 스택(execution stack), 제어 스택(control stack), 런..
-
CI/CD에 대한 이해Programming/etc. 2022. 2. 10. 21:09
CI / CD란, 지속적인 통합 및 배포는 신속하고 지속적인 소프트웨어 제공을 통한 고객 만족이라는 애자일 선언문(Agile Manifesto)의 12가지 원칙 중 첫번째 원칙이자 DevOps의 중요한 요소이기도 하다. 보통 DevOps에서 사용 되는 CI/CD의 경우 Monolithic Architecture(하나의 단일 시스템 구조) 보다 MSA(Micro Service Architecture, 모듈 느낌의 작은 시스템이 상호작용(API)하여 하나의 거대한 시스템을 이루는 구조)에 더 적합한 방식이라고 할 수 있는데, 구성된 마이크로 서비스 아키텍처에 API로 소프트웨어를 연결 하는 경우가 많다. 여기서 CI(Continuous Intergration; 지속적인 통합)은 애플리케이션의 코드가 변경 혹..
-
MVC,MVP,MVVM 패턴의 이해Programming/Design Pattern 2022. 2. 10. 15:03
소프트웨어 디자인 패턴이란, software engineering의 software design에서의 특정한 부분에서 반복적으로 발생하는 문제에 대하여 재사용이 가능하게끔 하는 해결책이다. 우선 들어가기에 앞서서 MVC 패턴은 자바와 스프링 프레임 워크를 처음 접하던 2016년 부터 써왔으며, 첫직장에서 엘라스틱 서치와 더불어 자바, 스프링,JSP 등을 이용하여 특허검색 시스템을 개발하면서 실무에서 사용해봤기 때문에 무척이나 익숙하였고, 이후 리액트와 노드 등을 이용하여 서비스를 개발할 때에도 은연중에 모델과 뷰 그리고 컨트롤러를 분리하는 디자인 패턴을 기본적으로 적용하여 개발하였었다. 하지만 자바+스프링 만큼 뚜렷하게 구분이 되었던 것은 아니고 뷰는 리액트, 모델과 컨트롤러는 노드를 이용하여 사용자의 ..
-
CORS(Cross-Origin Resource Sharing)에 대하여Programming/etc. 2022. 2. 10. 14:56
노드를 사용하여 백엔드를 구축하면 초반에 필히 셋팅 해주는 것 중에하나가 바로 CORS(Cross-Origin Resource Sharing)에 관한 것이다. 직역하면 교차 출처 자원 공유인데, 이는 추가 HTTP 헤더를 사용하여 어떠한 출처에서 실행 중인 웹 앱이 다른 출처에 선택한 자원에 접근 할 수 있는 권한을 부여하는 브라우저 체제이다. (출처:MDN 교차 출처 리소스 공유) 웹 앱은 리소스가 자신의 출처(프로토콜(https://),도메인(호스트,www.stackoverflow.com), 포트(:443))와 다를 때 교차 출처 HTTP 요청을 실행한다.(같으면 동일 출처(Same Origin)이다.) 이는 보안상의 이유로 브라우저가 스크립트에서 시작한 교차 출처 HTTP 요청의 제한으로 인한 것이..
-
일반 함수와 생성자 함수의 차이점Programming/javascript 2022. 2. 10. 14:51
생성자 함수와 일반 함수는 같은 함수이다. 이게 무슨 뜻 이냐면, 선언적 차이 일 뿐 별 다른 차이가 존재하지 않는다는 뜻이다. 첫째로, 생성자 함수의 코딩컨벤션(Coding Convention)은 객체와 같이 첫 글자가 대문자로 시작한다는 것이다. 이를 지키지 않을 경우 코드인스펙션(Code Inspection)을 통하여 정정하여야 하니 주의하자. 둘째로, 생성자 함수를 호출 및 초기화 할 땐 new 연산자를 사용한다. ex) function Pet(name){ // this.name = name; this.alive = true; }; let pet = new Pet("cozy"); console.log(pet.name);//cozy; console.log(pet.alive);//true; 위와 같이..
-
function과 arrow function의 차이점Programming/javascript 2022. 2. 10. 14:50
1. 일반 function은 this가 동적으로 바인딩 되지만, ex) function test () { // return{ // prop:10, func: function(){ // return this.prop; }; }; }; console.log(test.call({prop:100}).func()); 는 10이 출력된다.(매개변수 무시, 기존 값 출력) Arrow function의 this 키워드는 바로 상위의 함수에 정적 바인딩 된다. ex) function test(){ // return{ // prop:10, func: () => { // return this.prop; }; }; }; console.log(test.call({prop:100}).func()); 는 100이 출력된다.(기존 ..
-
var, let, const의 차이점Programming/javascript 2022. 2. 10. 14:43
매우 기초적인 것이고 이미 이전에도 여러번 본 것이지만, 그래도 정리를 해두는게 확실히 기억에 남으니 기록을 남긴다 •변수 선언 방식의 차이 var-변수재선언, 변수재할당 가능(mutable), 변수 선언과 초기화가 한번에 진행 let-변수재할당 가능(mutable), 변수 선언과 초기화가 따로 진행 const-모두 불가능, 초기 선언만 유효(immutable) •변수 호이스팅(1) 방식의 차이 호이스팅(hoisting): javascript에서 인터프리터가 변수와 함수의 선언 전에 미리 메모리(Memory) 공간을 할당 하는 것을 말한다.(출처:MDN 용어 사전, https://developer.mozilla.org/ko/docs/Glossary/Hoisting) var - 변수의 선언과 동시에 초기화..