클로저

함수가 속한 렉시컬 스코프(Lexical Environment)를 기억하여, 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 해주는 기능.

쉽게 설명하면, 클로저는 "폐쇄,갇히다" 라는 뜻으로 사용되고 있는데, 자바스크립트에서는 함수가 선언될(생성될) 그 당시에 주변의 환경과 함께 갇히는 것을 말한다.

또 다르게 설명하면, 내부함수는 외부함수의 지역변수에 접근할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 것이다.

렉시컬 스코프

함수가 선언이 되는 위치에 따라서 상위 스코프가 결정되는 스코프입니다. 함수가 선언이 될 때, 스코프가 생성된다.

외부 함수의 변수를 참조하는 내부 함수

const outer = () => {
  let a = 1;
  const inner = () => {
    console.log(++a); //2
  };
  inner();
};
outer();

inner 함수 내부에서는 a를 선언하지 않았기 때문에 환경레코드에서 값을 찾지 못해서 외부 환경 참조에 지정된 상위 컨텍스트인 outer의 렉시컬환경에 접근해서 다시 a를 찾는다.

outer의 함수의 실행컨텍스트가 종료되면 렉시컬 환경에 저장된 식별자들(a, inner)에 대한 참조를 지운다.

주소에 저장되어있던 값들은 자신을 참조하는 변수가 하나도 없게 되서 가비지 컬렉터의 수집 대상이 된다.

클로저를 사용하는 이유

데이터를 보존할 수 있다.

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다. 클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.

정보의 접근 제한 (캡슐화)

‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다. 이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

모듈화에 유리하다.

클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다. 이와 같이 함수의 재사용성을 극대화 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고한다. 클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.

클로저 생성하는 방법

함수가 생성될때마다 생성된다.

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념

자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.

• 호이스팅이 발생한다.(선언된 변수를 위로 끌어올린다.)
• 외부 환경 정보를 구성한다.
• this 값을 설정한다.

실행 컨텍스트 구성

• 전역공간은 자동으로 컨텍스트로 구성된다.
• 함수를 실행한다.
• eval()함수를 실행한다.
• block을 만든다 (ES6+)

var a = 1; // 전역 컨텍스트
function outer () { // outer 컨텍스트
  function inner () { // inner 컨텍스트
    console.log(a); // undefined
    var a = 3;
    console.log(a); // 3
  }
  inner();
  console.log(a); // 1
}
outer();
console.log(a); // 1

1. 프로그램 실행 : [전역컨텍스트]
2. outer 실행 : [전역컨텍스트, outer]
3. inner 실행 : [전역컨텍스트, outer, inner]
4. inner 종료 : [전역컨텍스트, outer]
5. outer 종료 : [전역컨텍스트]

실행 컨텍스트 구성할때 생기는 것

VariableEnvironment

• 현재 컨텍스트 내의 식별자들의 대한 정보
• 외부 환경 정보
• 선언 시점의 LexicalEnvironment의 스냅샷 (최초 실행 시의 스냅샷을 유지)

LexicalEnvironment

• 처음에는 VariableEnvironment와 같음
• 변경 사항이 실시간으로 반영 됨
• 환경 레코드로 인해서 호이스팅이 발생한다.
• 외부 환경참조로 인해 스코프와 스코프체인이 형성된다.

ThisBining

• 식별자가 바라봐야할 대상 객체

환경 레코드와 호이스팅

자바스크립트 엔진은 코드를 실행하기전에 식별자를 수집한다.

환경 레코드

현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.

• 매개변수 식별자
• 함수 자체
• 함수 내부의 식별자

Host Object (호스트 객체)

• 전역 실행 컨텍스트는 변수 객체를 생성하는 대신 전역 객체를 활용한다.
• 브라우저의 Window 객체, Node의 Global 객체 등이 해당한다.
• 이들은 Host Object로 분류된다.

즉, 코드가 실행 되기 전에 자바스크립트의 엔진은 이미 실행 컨텍스트에 속한 변수명들을 모두 알고 있게 되는 셈이다.

호이스팅

자바스크립트 엔진의 실제 동작 방식 대신에 자바스크립트 엔진은 "식별자들을 최상단으로 끌어올려놓은 다음, 실제 코드를 실행한다" 라고 생각해 코드 해석에 문제되는 것이 없다.

자바스크립트 엔진이 실제로 변수를 끌어올리지 않지만, 편의상 끌어올리는 것이라고 간주한다.

외부환경참조와 스코프

scope

스코프란 식별자에 대한 유효범위이다.

• Scope A의 외부에서 선언한 변수는, A의 외부/내부 모두 접근 가능하다.
• A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.

자바스크립트는 오직 함수에 의해서 스코프가 생성된다.

scope chain

• 식별자의 유효범위를 안에서 바깥으로 차례로 검색해나가는 것
• 이를 가능하게 하는 것이 외부환경참조이다.

실행 컨텍스트 스택

생성된 실행 컨텍스트는 스택으로 관리된다.

자바스크립트 엔진은 먼저 전역 코드를 평가하여 저역 실행 컨텍스트를 생성한다. 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다.

소스코드의 타입

4가지의 타입의 소스코드는 실행 컨텍스트를 생성한다.

전역 코드 global code

• 전역 코드 전역에 존재하는 소스코드를 말한다.
• 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다.

전역 변수를 관리를 위해 최상위 스코프인 전역 스코프 생성 필요 var 키워드로 선언된 전역 변수, 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야한다. 전역코드 평가 -> 전역 실행 컨텍스트가 생성.

함수 코드 function code

• 함수 내부에 존재하는 소스코드를 말한다.
• 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다.

함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리. 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야한다. 함수 코드 평가 -> 함수 실행 컨텍스트 생성.

eval 코드 eval code

• 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다.

strict mode에서 자신만의 독자적인 스코프를 생성한다. eval 코드 평가 -> eval 실행 컨텍스트 생성.

모듈 코드 module code

• 모듈 내부에 존재하는 소스코드를 말한다.
• 모듈 내부의 함수,클래스 등의 내부코드는 포함되지 않는다.

모듈별로 독립적인 모듈 스코프를 생성한다. 모듈 코드 평가 -> 모듈 실행 컨택스트 생성.

소스코드의 평가와 실행

평가 과정

• 실행 컨텍스트를 생성
• 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록

실행 과정

• 선언문을 제외한 소스코드가 순차적으로 실행되기 시작(런타임)
• 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득.
• 변수 값 변경과 같은 소스코드 실행결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록

this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다.

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다.

함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것철 this도 지역 변수처럼 사용할 수 있다.

단, this가 가르키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

this 바인딩

바인딩이란 식별자와 값을 연결하는 과정을 의미한다. this 바인딩은 this가 가리킬 객체를 바인딩하는 것이다.

하지만 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩 될 값. 즉, this 바인딩이 동적으로 결정된다.

객체 리터럴

객체 리터럴의 메서드 내부에서의 this는 메서드를 호출한 객체, 즉 circle을 가리킨다.

const circle = {
  radius: 5,
  getDiameter() {
       // this는 메소드를 호출한 객체를 가리킨다.
    return 2 * this.radius;
  }
};

console.log(circle.getDiameter()); //10

생성자 함수

생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.

function Circle(radius) = {
  // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.redius = radius;
};

Circle.prototype.getDiameter = function () {
 // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
 return 2 * this.radius;
}

// 인스턴스 생성
const circle = new Circle(5);
console.log(circle.getDiameter()); //10

자바스크립트만 다르다.

java, c++ 같은 클래스 기반 언어의 this는 클래스가 생성하는 인스턴스를 가리킨다.

자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩 될 값, 즉 this 바인딩이 동적으로 결정된다. 또한, strict mode 역시 this 바인딩에 영향을 준다.

함수 호출 방식과 this 바인딩

this 바인딩은 함수 호출 방식. 즉, 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

렉시컬 스코프와 this 바인딩은 결정 시기가 다르다.

함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다. 하지만 this 바인딩은 함수 호출 시점에 결정된다.

일반 함수 호출

this에는 전역 객체가 바인딩된다.

일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩된다.

foo(); // window

2. 메서드 호출

this에는 전역 객체가 바인딩된다.

프로토타입 메서드 내부에서 사용된 this도 일반 메서드와 마찬가지로 해당 메서드를 호출한 객체에 바인딩 된다.

const obj = { foo };
obj.foo(); // obj

3. 생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 미래에 생성할 인스턴스가 바인딩된다.

new foo(); // foo{}

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

apply,bind,call 메서드는 Function.prototype의 메서드이다. 즉, 이들의 메서드는 모든 함수가 상속받아 사용할 수 있다.

apply와 call 메서드의 본질적인 기능은 함수를 호출하는 것이다. this와 콜백 함수 내부의 this가 상이하면 문맥상 문제가 발생한다. 따라서 콜백 함수 내부의 this를 외부 함수 내부의 this와 일치시켜야한다. 이때 bind 메서드를 사용해서 this를 일치시킬 수 있다.

const bar = {name : "bar"};

foo.call(bar); // bar
foo.apply(bar); // bar
foo.bind(bar); // bar

자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업애 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.

• 린트도구 : 소스코드를 실행하기 전에 소스코드를 스캔하여 문법적 오류만이 아니라 잠재적 오류까지 찾아내고 오류의 원인을 리포팅해주는 도구

stirct mode가 제한하는 오류는 물론 코딩 컨벤션을 설정 파일 형태로 정의 하고 강제할 수 있기 때문에 더욱 강력한 효과를 얻을 수 있다.

사용방법

전역의 선두 또는 함수 몸체의 선두에 'use strict' 추가한다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다.

맞는 방법

'use strict'

function foo (){
    x = 10; // reference Error
}

foo();

틀린 방법 (제대로 동작하지 않음)

function foo (){
    x = 10; // 에러 발생 안됨
  'use strict'
}

foo();

전역에 strict mode는 피해야한다.

외부에 서드파티 라이브러리를 사용하면 non-strict-mode인 경우가 있어서 전역에 strict mode를 적용하는 것은 바람직 하지 않다.

이럴땐 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분하고 즉시 실행 함수의 선두에 strict mode를 적용한다.

함수 단위로 strict mode를 적용하는 것도 피하자.

어떤 함수는 적용하고, 어떤 함수는 적용 안하는 것은 바람직하지 않다 모든 함수에 일일이 strict mode를 적용하는 건 번거롭다. 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 문제가 발생할 수 있다.

=> 그래서 strict mode는 즉시 실행 함수로 감싼 스크리브 단위로 적용하는 것이 바람직하다.

strict mode가 발생시키는 에러

• 암묵적 전역
• 변수, 함수, 매개변수의 삭제
• 매개변수 이름의 중복
• with 문의 사용

strict mode를 적용에 의한 변화

일반 함수의 this

strict mode에서 함수를 일반 함수로서 호출하면 this에 undefined가 바인딩된다. 생성자 함수가 아닌 일반 함수 내부에서는 this를 사용할 필요가 없기 때문이다.

arguments 객체

strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않는다.

객체지향 프로그래밍

독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임

프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적인 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.

객체지향프로그래밍은 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목을 시도한 것에서 시작됐다.

• 실체 : 특징이나 성질을 나타내는 속성

사람은 이름, 주소, 성별, 나이 등 다양한 속성을 갖는다. 이때 이름이 강영현이고, 주소는 JYP인 성별은 남성이며, 나이는 31살인 사람과 같이 속성을 구체적으로 표현하면 특정한 사람을 다른 사람과 구별하여 인식 할 수 있다.

추상화

다양한 속성중에서 프로그램에 필요한 속성만 간추려내서 표현하는 것이 추상화

사람에게는 다양한 속성이 있지만, 우리가 구현하려는 프로그램에서는 사람의 "이름", "주소" 라는 속성에만 관심이 있다고 했을때, 다양한 속성중에서 프로그램에 필요한 속성만 간추려내서 표현하는 것이 추상화이다.

객체

속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조

객체지향프로그래밍 특징

캡슐화(Encapsulation)

데이터와 코드를 외부로부터 영향을 받지 않게 하고 데이터의 역할, 기능단위로 만드는 캡슐형태다.

상속(Inheritance)

상위 클래스의 속성을 하위 클래스가 물려 받는것 이다.

추상화(abstraction)

추상화는 필요없는 특성은 제거하고 공통적인 속성과 기능을 추출하여 정의하는것을 말한다

다형성(Polymorphism)

상위 클래스의 특징을 가지고 있지만 하위 클래스만의 다양한 형태의 클래스가 존재함을 말한다. 상속되었을 때 자식이 부모의 유전자를 가지고 있지만 자식만의 특징을 가지고 있는 것과 비슷하다

자바스크립트는 객체지향 프로그래밍일까?

아니다. 자바스크립트는 객체 지향 언어로 개발되지 않았기때문에 객체지향 프로그래밍으로 보기 어렵다.

하지만 자바스크립트에 Class 속성을 사용해서 객체 지향 프로그래밍을 할 수 있다.

참고자료

일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 없다라는 의미.

일급 객체 특징

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
• 변수나 자료구조등에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.*

// 1. 함수는 무명 리터럴로 생성할 수 있다.
const increase = function (num) {
    return ++num;
}

// 2. 함수는 객체에 저장할 수 있다.
const predicates = {increase,decrease};

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 함수의 반환값으로 사용할 수 있다.
function makeCounter(predicate){
    let num = 0;

    return function(){
        num = predicate(num);
        return num;
    }
}

함수형 프로그래밍

함수형 프로그래밍은 함수의 응용을 강조한다. 프로그래밍이 문이 아닌 식이나 선언으로 수행되는 선언형 프로그래밍 패러다임을 따르고 있다.

함수형 프로그래밍에서는

• 순수함수 : 어떤 외부 상태에 의존하지도 않고, 변경하지도 않는, 즉 부수 효과가 없는 함수
• 비순수함수 : 외부 상태에 의존하거나 외부 상태를 변경하는 즉, 부수 효과가 있는 함수

순수함수

어떤 외부 상태에도 의존하지 않고 외부 상태를 변경하지도 않는 함수

• 동일한 인자가 전달되면 언제나 동일한 값을 반환하는 함수
• 어떤 외부 상태에 의존하지 않고 오직 매개변수를 통해 함수 내부로 전달되 인수에게만 의존해 반환값을 만듦.
• 함수 외부 상테에 의존하는 함수는 외부 상태에 따라 반환값이 달라짐.
• 함수의 외부 상태를 변경하지 않음.

var count = 0;

// 순수함수
function increase(n){
    return ++n;  
}

// 순수함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); //1

비순수함수

외부 상태에 의존하거나 외부 상태를 변경하는 함수

• 함수의 외부 상태에 따라 반환값이 달라지는 함수.
• 외부 상태에 의존하는 함수
• 함수의 외부 상태를 변경하는 부수효과(side effect)가 있다.

var count = 0;

// 비순수함수
function increase(){
    return ++count;
}

// 비순수함수는 외부 상태를 변경해 상태 변화를 추적하기 어려움.
increase();
console.log(count); //1

생성자 함수

new 연산자와 함께 호출하여 객체를 생성하는 함수

생성자 함수에 의해 생성된 객체를 인스턴스라고 한다.

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성해서 반환한다.

빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가해서 객체를 완성할 수 있다.

const person = new Object();

person.name = "Lee";
person.sayHello = function () {
    console.log("Hi, My name is" + this.name);
}

console.log(person); //{name : "Lee", sayHello: f}
person.sayHello();

자바스크립트는 Object 생성자 함수 이외에도 String,Number,Boolean,Function,Array,Date,ReExp,Promise,Date 등 빌트인 생성자 함수를 제공한다.

빌트인 생성자 함수 예시

const strObj = new String("Lee");
console.log(typeof strObj); //Object
console.log(strObj); //String {"Lee"}

const numObj = new Number(123);
console.log(typeof numObj); //Object
console.log(numObj); //Number {123}

객체리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴로 객체 생성을 하게되면, 훨씬 더 직관적이고 간편하다. 하지만, 객체 리터럴로 객체 생성을 하면 단 하나의 객체만 생성한다.

동일한 프로퍼티를 갖는 여러개의 객체를 생성할땐, 매번 똑같은 걸 쓰면서 생성하기 때문에 매우 비효율적이다.

const circle1 = {
 radius : 5,
  getDiameter() {
   return 2 * this.radius;
  }
}

const circle2 = {
 radius : 5,
  getDiameter() {
   return 2 * this.radius;
  }
}

console.log(circle1.getDiameter()) //10
console.log(circle2.getDiameter()) //20

생성자 함수를 사용했을때의 장점

• 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

const Circle(radius){ this.radius = radius; this.getDiameter = const = () => { return 2 * this.radius; } }

const circle1 = new Circle(5); const circel2 = new Circle(10);

console.log(circle1); //10 console.log(circle2); //20

## 생성자 함수의 인스턴스 생성과정

생성자 함수의 역할은

* 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로서 동작하여 인스턴스를 생성하는 것
* 생성된 인스턴스를 초기화 (인스턴스 프로퍼티 추가 및 초기값 할당)하는 것.

자바스크립트 엔진은
암무적인 처리를 통해 인스턴스를 생성하고 반환한다.
new 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 아래의 과정을 거쳐 인스턴스를 생성하고 초기화 한 후 암묵적으로 인스턴스를 반환한다.

### 1. 인스턴스 생성과 this 바인딩

빈 객체가 암묵적으로 생성된다. (빈 객체가 생성자 함수가 생성한 인스턴스)
생성된 빈 객체, 즉 인스턴스는 this에 바인딩 된다.
**그래서 생성자 함수의 내부의 this가 생성자 함수가 생성할 인스턴스를 가르키는 이유.**

#### new연산자를 붙히지 않았을 경우 this

`new`연산자를 붙히지 않았을 경우에는 결국 일반 함수로 호출하는 것이 단점,
`this`는 무엇을 가르키는가?

* 일반함수로서 호출 👉🏻 전역객체
* **메소드**로서 호출 👉🏻 메소드를 호출한 객체 ( 마침표 앞의 객체 )
* **생성자 함수**로서 호출 👉🏻 생성자 함수가 생성할 인스턴스 ( 객체 )

### 2. 인스턴스 초기화

> 생성자 함수에 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다.

즉, this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고,
생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여,
초기화하거나 고정값을 할당한다.

### 3. 인스턴스 반환

> 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

만약 this가 아닌 다른 객체를 명시적으로 반환하면 this가 반한되지 못하고 return 문에 써놓은 객체가 반환된다.
하지만, 명시적으로 원시값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다.
그래서 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하기 때문에
생성자 함수 내부에서는 return 문을 반드시 생략한다.

### 코드로 살펴보기

```    javascript
const Circle = (radius) => {
    //1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.
    //2. this에 바인딩되어 있는 인스턴스를 초기화한다.

      this.radius = radius;
      this.getDiameter = const = () => {
     return 2 * this.radius; 
    }
    //3. 암묵적으로 this를 반환한다.
    return {};
}

// 인스턴스 생성. Circle 생성자 함수는 명시적으로 반환한 객체를 반환한다.
const circle = new Circle(1);
console.log(circle); // {}

테스트

테스트를 소프트웨어의 관점에서 정의하면 "애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위"

테스트 예

• DB에 데이터를 입력하는 API를 개발 > API 호출 > DB값 검증
• 디자인 시안에 맞게 HTML/CSS를 작성 > 브라우저에서 실제 렌더링된 결과를 확인
• 새로운 기능을 추가하기 위해 기존 모듈을 리팩토링 > 영향을 받는 다른 모듈의 실행 결과를 확인
• 버그를 수정하기 위해 기존 함수를 수정 > 버그가 수정 확인 & 영향을 받는 다른 모듈의 실행 결과를 확인
• 개발 환경에서 테스트된 어플리케이션을 리얼 환경에 배포 > 배포 과정에서 발생한 문제가 없는지 확인

테스트를 왜 해야하는가?

• 더 적극적으로 리팩토링 등의 코드 개선을 할 수 있어 코드 품질이 향상
• 개발 단계에서의 제품 품질이 향상되어 테스터와의 불필요한 커뮤니케이션 비용이 감소
• 테스트는 코드가 의도한대로 동작한 다는 것을 보장
• 코드를 수정할때 테스트가 존재하지 않는다면 코드 수정시 발생할 수 있는 사이드이팩트 예상 어려움.

유닛 테스트

코드의 Unit단위를 테스트

장점

• 프론트엔드 코드에서 유닛은 컴포넌트나, 서비스가 될 수 있다.
• 제일 작은 단위를 테스트하기 때문에 모든 시나리오를 테스트할 때 테스트의 양이 가장 적어서 효율적이다.
• TDD 사용시 가장 작은단위 부터 기능대로 동작하는지 확인하면서 개발하기 좋다.
• 별도의 통합이 필요없기 때문에 백엔드 API가 구현이 안되어도 작성할 수 있다.

단점

• 단위 테스트는 의존성이 있는 모듈을 제어하기 위해 필연적으로 모의 객체(Mocking)을 사용할 수 밖에 없기 때문에, 각 모듈이 실제로 잘 연결되어 상호 작용하는지에 대해서는 검증하지 못한다.
• 모듈의 사소한 API 변경에도 영향을 받기 때문에 작은 단위의 리팩토링에도 쉽게 깨지는 문제가 있다.

통합 테스트

통합된 기능을 테스트

장점

• 유닛테스트가 단일 컴포넌트나 단일 서비스를 기준으로 테스트를 했다면, 유닛들 간의 데이터를 주고받는 환경을 테스트한다.
• 통합테스트 전략에 따라 프론트엔드 전체 유닛들만 통합하여 테스트하거나, 백엔드와 데이터베이스까지 전체를 통합해서 테스트하는 경우도 있다.
• 전체 유닛의 상호작용에 대해서 테스트가 가능하다.

단점

• 단일 모듈이 복잡한 알고리즘이나 분기문을 갖고 있을 때 단위 테스트에 비해 테스트가 번거롭다.
• 테스트 중복이 발생할 확률이 높다는 단점이 있다.

E2E 테스트

end to end의 약자로, 소프트웨어의 가장 끝단인 사용자로 부터 가장 끝단인 백엔드 인프라까지 테스트

장점

• 주로 유저 스토리를 기반의 시나리오를 기반으로 테스트를 진행한다.
• 사용자 관점에서 전체 시나리오를 테스트하기 때문에 코드의 변경에도 테스트를 변경할 필요 없다.
• 다른 테스트와 달리 전체 시나리오를 테스트하기 떄문에 소프트웨어의 무결성을 보장하기 가장 좋다.
• 사용자 관점에서 전체 시나리오를 테스트하기 때문에 전체를 테스트하기 위해선 굉장히 많은 테스트가 필요하다.
• 프론트엔드만 따로 테스트하는 것이 불가능하며, 백엔드와의 통합이 필요하다.
• 전체 테스트를 하는데 시간이 오래걸려 자주 테스트하기 어렵다.

단점

• 단위 테스트나 통합 테스트에 비해 테스트의 실행 속도가 느리다.
• 개발 단계에서 빠른 피드백을 받기 어렵다.
• 세부 모듈이 갖는 다양한 상황들의 조합을 고려해야 하기 때문에 테스트를 작성하기가 쉽지 않다.
• 큰 단위의 기능을 작은 기능으로 나누어 테스트할 수가 없어 필연적으로 테스트 사이에 중복이 발생된다.
• 테스트 실행 환경의 예상하지 못한 문제들(네트워크 오류, 프로세스 대기로 인한 타임아웃 등)로 인해 테스트가 가끔 실패하는 일이 발생되기도 한다.

스코프란?

자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 즉, 스코프는 식별자가 유효한 범위를 말한다.

var x = 'global';

function foo(){
    var x = 'local'
    console.log(x); //1
}

foo();

console.log(x); //2

x라는 이름으로 두개의 변수를 선언했다. 자바스크립트 엔진은 어떤 변수를 참조해야 할 것인지를 결정해야한다. = 식별자 결정 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야할 것인지 결정한다. 따라서 스코프란, 자바스크립트엔진이 식별자를 검색할 때 사용하는 규칙이다.

만약 스코프라는 개념이 없다면, 같은 이름을 갖는 변수는 충돌을 일으켜, 프로그램 전체에서 하나밖에 사용할 수 밖에 없게 된다.

전역 스코프

코드 가장 바깥 영역

전역에 변수를 선언하면, 전언 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조할 수 있다.

지역 스코프

함수 몸체 내부 영역

지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다. 지역 변수는 자신이 선언된 지역과 하위 지역에서만 참조할 수 있다. 지역변수는 자신의 지역 스코프와 하위 스코프에서 유효하다.

렉시컬 스코프

자바스크립트는 렉시컬 스코프를 따라 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 즉 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.

이처럼 함수의 상위 스ㅗ프는 함수 정의가 실행될 때 정적으로 결정된다. 함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸된다. 변수에 생명주기가 없다면, 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.

변수는 자신이 선언된 위치에서 생성되고 소멸된다. 전역 변수의 생명 주기는 애플리케이션의 생명주기와도 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸된다.

var x = 1;

function foo(){
    var x = 10;
      bar();
}

function bar(){
    console.log(x);
}

foo();
console.log(x); //referror : x is not defined

전역 변수의 생명 주기

함수와 달리 전역 코드는 호출이 없어도 실행된다. = 진입점이 없어도 코드가 로드되고 해석된다. 전역코드는, 더 이상 실행할 문이 없을때 종료된다.

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다는 것을 말한다.

// 전역 변수 x 생성
var x = 'global' // 전역 변수 x 값 할당

function foo(){ // 지역 변수 x 생성
    var x = 'local' // 지역 변수 x 값 할당
    console.log(x);
    return x; 
    // 지역 변수 x 소멸
}

foo();
console.log(x);

전역 변수의 문제점

암묵적 결합

전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것. 그렇게 되면, 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다. 변수의 유효범위가 크면 클수록 코드의 가독성은 나빠지고, 의도치않게 상태가 변경될 수 있는 위험성도 높아진다.

긴 생명 주기

전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다. 또한 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다. 생명주기가 긴 전역 변수는 변수의 이름이 중복될 가능성이 있다. 변수 이름이 중복되면 의도치 않은 재할당이 이뤄진다.

스코프 체인 상에서 종점에 존재

전역 변수는 스코프 체인 상에서 종점에 존재한다. 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 말한다. 즉, 전역변수의 검색 속도가 가장 느리다.

네임스페이스 오염

자바스크립트의 가장 큰 문제는, 파일이 분리되어 있다해도 하나의 전역 스코프를 공유한다는 것. 따라서 다른 파일 내에서 동일한 이름으로 정의된 전역 변수나,함수가 같은 스코프안에 존재할 경우 예상치 못한 결과를 가져온다.

전역 변수의 사용을 억제하는 방법

전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야한다. 즉, 변수 스코프는 좁을수록 좋다.

즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

네임스페이스 객체

전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다.

모듈 패턴

클래스를 모방한, 관련 있는 변수와, 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 자바스크립트의 강력한 기능인 클로저를 기반으로 동작한다.

클로저

전역 변수를 억제할 수 있는 기능.

함수

수학에서의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것. 프로그래밍 언어의 함수는

일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.

프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다. 함수 내부로 입력을 전달받는 변수를 매개변수 입력을 인수 출력을 반환값이라 한다.

함수는 함수 정의를 통해 생성한다.

기본 함수

//함수 정의 
function add(x,y){
    return x+y;
}

//함수 호출
add(1,2); //3

화살표 함수

• ES6부터 도입
• function 키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 선언
• 화살표 함수는 익명함수로 정의
• 화살표 함수는 생성자 함수로 사용할 수 없음
• 기존함수와 this, 바인딩 방식이 다름
• prototype 프로퍼티가 없음
• arguments 객체를 생성하지 않음.

const add = (x,y) => x+y;
console.log(add(2,3)); //5

화살표 함수와 기본 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor

화살표 함수는 인스턴스를 생성할 수 없어서 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

const Foo = () => {};

// 화살표 함수는 생성자 함수로서 호출 할 수 없다.
new Foo() //TypeError : Foo is not a constructor

2. 중복된 매개변수 이름을 선언 할 수 없다.

일반 함수는 중복된 매개변수 이름을 선언해도 에러가 발생하지 않는다. 단, strict mode에서 중복된 매개변수 이름을 선언하면 에러가 발생한다. 화살표 함수에서도 중복된 매개변수 이름을 선언하면 에러가 발생한다.

3. 화살표 함수는 함수 자체의 this,arguments,super,new,target 바인딩을 갖지 않는다.

화살표 함수는 this,arguments,super,new,target 참조하면, 스코프 체인을 통해 상위 스코프의 this,arguments,super,new,target 를 참조한다.

함수를 정의하는 방법

• 함수 선언문

  function add(x,y){
    return x+y;
  }

• 함수 표현식

var add = function(x,y){
    return x+y;
}

• 생성자 함수

var add = new Function('x','y', 'returnx+y');

• 화살표 함수

var add = (x,y) => x+y;

💡 변수 선언과 함수 정의

변수는 선언한다. 함수는 정의한다로 표현한다. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.

함수 선언문

함수 선언문은 표현식이 아닌 문이다.

function add(x,y){
    return x+y;
}

//undefined

그래서 함수 선언문을 실행하면 완료 값 undefined가 출력된다. 만약 표현식인 문이라면 완료 값 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야된다.

표현식이 아닌 문은 변수에 할당 할 수 없다. 함수 선언문도 표현식이 아닌 문이라 변수에 할당 할 수 없다.

함수 표현식

자바스크립트는 함수의 객체 타입의 값이다. 자바스크립트의 함수는 값처럼 변수에 할당 할 수도 있고, 프로퍼티 값이 될 수도 있고, 배열의 요소가 될 수도 있다.

이처럼 값의 성질을 갖는 객체를 일급 객체라고 한다.

자바스크립트 함수는 일급 객체이다. 함수가 일급 객체라는 건, 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다.

함수는 일급객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 함수 정의 방식을 함수 표현식이라고 한다.

함수 표현식과 함수 선언문의 차이

호이스팅

함수 선언식은 함수 전체를 호이스팅한다. 정의된 범위의 맨 위로 호이스팅이 되서 함수 선언전에 함수를 사용할 수 있다.

함수 표현식은 별도의 변수에 할당한다. 변수는 선언부와 할당부를 나누어 호이스팅한다.

//함수 선언문
hoisted(); // 동작
function hoisted() {
  console.log("호이스팅됨");
}

// 함수 표현식
notHoisted(); // 에러: 함수가 아직 정의되지 않았습니다.
var notHoisted = function () {
  console.log("호이스팅되지 않음");
};

변수 할당

함수 선언문에서는 함수 이름이 변수에 자동으로 할당된다. 함수 표현식에서는 함수를 변수에 할당하는 것이 명시적으로 이루어진다.

// 함수 선언문
declaration(); // 동작
function declaration() {
  console.log("함수 선언문");
}

// 함수 표현식
expression(); // 에러: 함수가 아직 정의되지 않았습니다.
var expression = function () {
  console.log("함수 표현식");
};

익명 함수

함수 선언문은 함수 이름을 생략할 수 없다. 함수 표현식은 함수를 익명으로 만들 수 있다.

// 함수 선언문
function named() {
  console.log("이름 있는 함수");
}

// 함수 표현식
var anonymous = function () {
  console.log("익명 함수");
};

즉시 실행 함수 (IIFE)

정의되자마자 즉시 실행되는 함수

function () {
    console.log("IIFE");
})();

// 화살표 함수로도 사용 가능하다
(() => {
    console.log("IIFE");
})();

왜 사용할까?

1. 필요없는 전역 변수의 생성을 줄일 수 있다. 함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다. 즉시실행함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다.

2. private한 변수를 만들 수 있다. 즉시실행함수는 외부에서 접근 할 수 없는 자체적인 스코프를 가지게된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호 할 수 있다는 장점이 있다.

어떻게 사용할까?

1. 단 한 번의 사용이 필요한 함수 즉시실행함수는 한 번의 실행 이후 없어지기 때문에 단 한번의 사용한 필요한 함수에 사용된다.
2. 자바스크립트 모듈 자바스크립트 모듈을 만들때에도 즉시실행함수가 많이 활용된다.

모든 팀원이 이해(understandability)하기 쉽도록 작성된 코드인 것 같다.

좋은 코드, 클린 코드에 대한 정의는 많지만, 내가 실무에서 봤을때 좋은 코드라고 느꼈던 부분은,

1. 알기 쉬운 변수명, 함수명
2. 읽기 쉬운 코드
3. 중복을 줄인 코드

사실 일하다보면, 정말 많은 클린코드의 원칙, 좋은 코드의 원칙을 지키기란 정말 어려운 것 같다. 이후에 리팩토링을 하더라도, 우선적으로 내가 실무를 하면서 지키고 있었던 나만의 코드 룰을 몇가지 소개해보려고 한다.

변수,함수명 잘 짓기

나는 영어를 아주 잘하지 못한다. 그래서 그런지, 뭔가 내가 한눈에 봐도 딱 알아차릴 수 있는 변수명과 함수명을 좋아한다. 내가 알아볼 수 있다면, 남들도 당연하게 알아볼 것이라고 생각한다ㅎ

나는 변수명 지을때,

1. 명사에 가깝게 짓기 (단수형으로)

   const editMode  //수정모드;
   const folder  //폴더 

2. 배열일때는 여러개인걸 명시 (복수형으로)

 const selectedItems = // 선택된 아이템들

3. 함수의 역할 (어떨때 실행되는 함수인지)

개인적으로 함수명 짓기가 제일 어려웠다. 뭔가 어느정도까지 함수의 역할을 함수명에 적어줘야하는지 감이 잘안왔는데

예를들어 초기화 버튼을 클릭 후, 진짜 초기화 하냐는 alert가 있을때 clickOpenResetAlert를 처럼 함수 동작에 관해서 써줘야할지 View 그대로 초기화 버튼을 클릭하다. 라는 것에 관해서 써줘야할지 너무 애매했다. 하지만 나의 선택은 View와 가깝게 작성을 했고 무조건 동사로 작업했다.

view에 가깝게 이름을 지은 이유는, 누군가 내 코드를 고쳐야하는 일이 생길 경우에 화면을 동작하면서 볼 가능성이 더 높을 것 같다고 생각했다. 그래서 좀 더 화면을 동작하자마자 알 수 있는 직관적인 이름을 지으려고 했다.

const clickViewTotalPrice = // 총금액보기를 클릭하세요
const clickReset = // 초기화 버튼 클릭 후 alert
const clickConfirmReset = // alert에 초기화 클릭

읽기 쉬운 코드

1. props로 내려주는 interface 정리

위는 변수, 아래는 함수로 정리해서 항상 작업해줬다. 확실히 어떤 정보들을 받고, 어떤 행동들을 하는지 한눈에 구분이 되서 보기 편리했다.

interface ViewProps {
    searchKeyword : string;
    items : Item[];
    onChangeSearchKeyword : () => void;
    onClickEditMode : () => void;
    onClickItem : () => void;
}

2. import 쪽도 정리 (개인적..ㅎ)

회사 코드 이외의 외부 사람들의 코드를 보는 버릇을 들이진 못했다. 남이 짠 코드도 많이 봐야한다고 하는데 이건 그냥 내 취향이다.. 나는 {} / * as / 이런 순서로 정리하거나, 기능 관련으로 import 를 정리되어있는 코드를 보기 편해한다.

import React, { useState } from "react";
import { Widgets } from "app/view";
import { Util } from "app/view-model";
import * as DataModel from "app/service/settlement-input/data-model";
import styled from "styled-components";
import useDebounce from "app/service/hooks/useDebounce";

3. 조건문 보다는 switch가 더 나을수도

사실 회바회 인 것 같다. 회사에서도 switch 문을 더 선호했고, 나도 줄줄이 늘어져있는 if else / ? : 보다는 가독성이 swich가 더 낫다고 생각한다.

    if(yellow){
        로직
    } eles if(red){
        로직
    }
    else{
        로직
    }

    switch (color) {
        case "yellow" :
        로직
        case "red" :
        로직
    }

중복을 줄인 코드

1. 컴포넌트 분리

자주 사용 되고, 반복적으로 발생되는 위젯,컴포넌트,코드들은 재활용 할 수 있게 컴포넌트로 분리해서 작업해준다.

2. util 사용, custom hooks 사용

함수가 너무 자주사용되고, 반복적으로 발생된다면, util 폴더를 생성해서, 계산하는 함수, 날짜를 구하는 함수를 사용해서 import 해서 꺼내쓰는 식으로 구현하는 편이었다.

//util 폴더안에 있는 함수
  getSliceTime = (saveTime: string) => {
        const now = new Date(saveTime);
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
        return `${hours}:${minutes}:${seconds}`;
    };

   validatePhoneNumber = (phonenumber: string) => {
        const regex = new RegExp(/^(010|011)[0-9]{3,4}[0-9]{4}$/g);
        return regex.test(phonenumber);
    };

//custom hooks
import React from "react";

export default function useInnerWidth(): number {
    const [innerWidth, setInnerWidth] = React.useState<number>(window.innerWidth);

    React.useEffect(() => {
        window.addEventListener("resize", setWidth);

        return () => {
            window.removeEventListener("resize", setWidth);
        };
    }, []);

    const setWidth = () => {
        setInnerWidth(window.innerWidth);
    };

    return innerWidth;
}

함수 쪼개기

서로 다른 두 대상을 한꺼번에 다루는 코드를 발견하면 각각을 별개모듈로 나누는 방법이다.

예를 들어 입력값이 처리 로직에 적합하지 않은 형태로 들어오는 경우, 본 작업에 들어가기 전에 입력값을 다루기 편한 형태로 가공한다. 혹은 로직을 순차적인 단계들로 분리하거나 해도 된다.

하나의 함수를 잘게잘게 쪼개서 적절한 이름을 짓고 나눠서 작성하는게 중요하다. 함수를 잘게 쪼개서 관리하면 디버깅 하기도 편리하다.

1. get 함수는 따로 빼준다.

나는 회사에서 작업했을때 get 관련 함수는 꼭 따로 빼줬다. 언제 어느때에 정보를 불러올지 모르고, get 함수는 게다가 복잡성이 커질 우려가 높았다.

그래서 init함수에다가 get 함수를 분리하지 않고 그냥 넣었을경우, 디버깅이 너무 어려웠고 코드 자체가 읽기 싫어지고 어려웠다.

약간 모듈화에 가깝게 생각해서 get 함수들을 다 모듈화 시켜놓고 필요한 함수들에서 불러오는 식으로 진행했더니 함수가 너무 깔끔해졌었다.

(React.query를 쓰고나서는 진짜..극락..)

2. Private Method, 큰 함수를 작은 함수로 분리

회사 실무코드에서는 DataModel이란 클래스를 생성해서 프론트에서 가져다쓰기 좋게 가공해주는 영역이 있었다.

Private Method: 클래스 내에서 특정 함수가 다른 함수에 의해만 호출될 경우, 그 함수를 클래스의 내부(private) 메서드로 만들어 정보 은닉을 유지하고 클래스 인터페이스를 단순화시켰다.

큰 함수를 작은 함수로 분리 : 위와 비슷한 사례인데, 너무 함수의 역할이 커지면, 함수의 역할을 분리해서 작업 한 후 필요한 곳에서 실행시키는 방식이다.

결론

바쁜 스타트업이나 프로젝트 개발 시간이 제한된 상황에서 코드 품질을 100%까지 유지하려는 것은 현실적으로 어렵다고 생각한다. 마감 기한을 지키면서 완벽한 코드를 작성하는 것은 너무 이상적이다. 따라서 프로젝트 개발과 코드 품질 사이에는 trade-off가 필요하다고 생각했다.

그래서 나만의 최소한의 규칙을 정해서 이정도는 무조건 코드를 짤때 최소한의 조건을 지켜야지!하며 나와의 약속을 하고 코드를 짠다.

개발 프로세스 중에 코드 품질을 유지하기 위해 나만의 최소한의 규칙을 정하는 것은 중요한 단계다. 이러한 규칙은 개발하는 동안 코드를 작성할 때 필수적으로 지켜야 하는 기준으로써, 코드의 가독성과 안정성을 보장할 수 있다.

부족한 부분은 시간적 여유가 생겼을때 '클린 코드'나 '리팩토링'과 책을 통해 학습하고 코드를 평가하며 점차 품질을 향상시키는 데 노력해야한다고 생각한다.

여유가 생길때마다 리팩토링이란 책이나, 클린코드 책을 통해서 좋은 코드의 조건을 계속 숙지해 나아가면서 점차 시간이 여유로워질때는 리팩토링을 하고 실무에서 나와의 최소 조건을 늘려나가는 것도 하나의 방법이라고 생각한다.

원시 값과 객체 비교

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입과 객체 타입으로 구분할 수 있다.

원시 값

변경 불가능한 값

원시 값을 변수에 할당하면, 변수에는 실제 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. "값에 의한 전달"

객체

변경 가능한 값

객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. "참조에 의한 전달"

자바스크립트에서 데이터타입을 2가지로 나누는 이유

자바스크립트 엔진이 평가된 값에 따라 타입을 나눈다.

메모리 공간 확보에 있다.

값은 2진수로 메모리에 저장되며, 변수는 해당 메모리 공간의 주소값을 가리키게 되는데, 이때 필욯나 최소 메모리 공간의 데이터 타입에 따라 다르다. 이외에도 데이터 타입이 필요한 이유에는 몇가지가 더 있다.

• 값을 저장할때 확보해야하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에 읽어 들인 2진수를 어떻게 해석해야할지 결정하기 위해

값에 의한 전달

숫자, 문자, Boolean 등 원시값이 담긴 객체에서 이뤄진다.

• 전달하는 변수에 저장된 “값”을 다른 메모리 공간에 복사하여 전달받는 변수에 전달한다.
• 원본과 사본 어느 한 쪽을 변경해도 다른 쪽이 영향을 받지 않는다.
• 즉 둘은 별개의 값이 되며, 서로 간섭할 수 없다.

참조에 의한 전달

객체와 배열 등 객체 타입의 값을 할당할 때 이뤄진다.

• 전달하는 변수에 저장된 “참조값(할당된 객체가 담긴 메모리 주소)”을 다른 공간에 복사하여 전달받는 변수에 전달한다.
• 변수들이 메모리 주소를 통해 같은 객체에 접근할 수 있다. 즉, 두 개의 식별자가 하나의 객체를 “공유” 한다.
• 원본과 사본 어느 한 쪽에서 객체를 변경하면 서로 영향을 주고받는다.

SaaS

서비스형 소프트웨어(SaaS)는 인터넷 브라우저를 통해 최종 사용자에게 애플리케이션을 제공하는 클라우드 기반 소프트웨어 모델

• 고객이 필요에 따라 액세스할 수 있는 서비스 및 애플리케이션을 호스팅.
• 유지 관리 방식이나 기본 인프라의 관리 방식에 대해 고민할 필요가 없어진다.
• 사용량에 따른 구독이나 요금제 시스템

예시로는, 웹 기반 이메일. 이메일 제품의 추가 기능을 관리하거나 이메일 프로그램이 실행되는 서버 및 운영 체제를 유지 관리할 필요 없이 이메일을 보내고 받을 수 있다.

SaaS를 사용하는 이유

SaaS 공급업체들은 하드웨어, 소프트웨어 도구 및 애플리케이션을 자체 데이터 센터 또는 클라우드 환경에서 관리한다. 사용자들은 그냥 사용목적에 맞게만 사용할 줄만 안다면 다른건 크게 신경쓰지 않아도 되기 때문에 편리하다.

• 클라우드 접근성
• 저렴한 선결제 비용
• 지속적으로 발생하는 비용 감소
• 빠른 배포
• 온디맨드 확장성
• 신뢰성
• 자동 업데이트
• 통합
• 실시간 데이터 분석

비즈니스 유형 종류

B2C (Business to Consumer)

기업과 개인과의 거래

야놀자, 네이버

B2B (Business to Business)

기업과 기업간의 거래

flex, 레몬베이스

D2C(Direct to Consumer)

소비자 직접 거래

나이키, 젝시믹스

O2O(Online to Offline), O4O(Online for Offline)

온라인 플랫폼을 활용해 오프라인에서 서비스를 제공

배달의 민족, 카카오택시, 에어비앤비

C2M(Customer to Manufacture)

소비자와 생산자 간의 거래

올웨이즈, 핀둬둬

C2C(Customer to Customer)

소비자 간 거래

당근마켓, 중고나라, 번개장터

비즈니스 로직이란?

사용자의 요구사항을 해결하기 위한 실질적인 코드 한 문장

1. 회원이 작성한 아이디 값을 저장
2. 회원정보가 있는 데이터베이스 연결
3. 데이터베이스에 회원이 작성한 아이디 값이 있는지 중복검사
4. 회원의 아이디가 이미 있는지 없는지 여부를 데이터화 하여 저장
5. 데이터베이스 연결 끊기
6. View 영역에게 가공된 데이터 전달

위에 설명한 한줄한줄이 전부 비즈니스 로직으로 불릴 수 있다.

브라우저와 node.js의 차이

우선 공통점은 둘다, 자바스크립트 언어를 기반으로 실행되며, 자바스크립트 엔진을 내장한다.

목적

node.js는 서버 개발 환경을 제공하는 것이 목적 브라우저는 HTML, CSS, JS를 실행하여 웹 페이지를 화면에 띄우는 것이 목적

참고자료

🤷‍♀️ 왜 갑자기?

최근에 사이드프로젝트도 많이 해보고 있고, 이직 준비를 하면서 겪었던 과제를 해결하면서 내가 어떤 개발자이지? 내가 지금 뭐를 중심적으로 개발했지? 라는 생각을 하게 됐다. 공통적으로 내가 대답한 답은,

"사용자의 쉬운 경험, 사용자의 익숙한 경험"을 중시 했던 것 같다.

내 생각 뿐만이 아니라, 실제로 프론트엔드가 UIUX를 공부 해야할 이유가 있다.

• 유저들의 기대치와 요구사항이 계속 변화하고 있다.
• 경쟁이 치열한 시장에서는 우수한 UI/UX가 제품 또는 서비스의 주요 차별화 요소가 되고 있다.
• 더 나은 경험을 위해 기술적 혁신과 함께 UI/UX 디자인 및 개발도 계속 발전하고 있다.

이런 생각들을 하다 나와 같은 연차와 나와 같은 생각을 하고 있는 사람들을 위해 블로그를 작성한다.

UI/UX

UI

UI (User Interface)는 사용자와 시스템 또는 애플리케이션 간의 상호작용을 표현하는 디자인 요소와 요소의 배치를 의미한다.

화면 디자인, 버튼, 메뉴, 아이콘, 색상, 레이아웃 등과 관련이 있다. 사용자가 시스템 또는 애플리케이션을 어떻게 조작하고 상호작용하는지를 시각적으로 표현한다.

UX

User Experience(사용자 경험)는 사용자가 제품, 서비스 또는 애플리케이션과 상호작용하는 과정에서 느끼는 전반적인 경험을 의미한다.

사용자의 만족도, 편의성, 효율성, 접근성 및 사용자의 감정과 관련이 있다. 사용자의 요구사항을 충족, 작업을 쉽게 수행할 수 있도록 설계하고 최적화하는 데 초점을 맞춘다.

예시 사진

이것보다 UIUX의 예시를 설명하는데에 더 나은 사진을 못 본듯.

UI의 케찹은

진짜 이쁘고, 감성적이고, 옛날 레트로 갬성을 불러일으키고, 누가봐도 이쁘다. 하지만, 딱봐도 병으로 생겨서 케찹짤때 겁나 불편하다고 생각이 든다.

UX의 케찹은

케찹을 짤때 아래로 향하게 툭툭 내려치면서, 케찹을 짯던 기억이 있을텐데, 그걸 아주 쉽게 보완했다. 아예 세워놓는 디자인을 통해 우리가 불필요한 행동을 하지 않게 되었고, 훨씬 편해졌다.

결론

UI가 괜찮다고 해서 UX까지 괜찮은 건 아니라는 걸 알려주는 이미지이다. 그리고 UX가 편리해지게 UI도 같이 변경되면서, UX는 UI를 포함하고 있다고 말할 수 있다.

이렇게 UIUX가 별개가 아니듯, 좋은 UX가 좋은 UI가 아니고 좋은 UI가 좋은 UX가 아니다.

개발자가 꼭 알아야해?

나는 꼭 알아야된다 주의의 개발자긴 하지만, 공부 안해서 나쁠 건 없다고 생각한다.

• 최근 채용공고에서 UIUX에 관심이 많은 사람 우대 조건에 많이 보이고 있다.
• 복잡해진 웹 때문에, 정보 표현하는 방식이 다양해지면서 사용자 입장에서 더 고려를 해야한다.

📜 10가지 UX 법칙

제이콥의 법칙

유저는 익숙한 경험을 토대로 새로운 제품을 판단한다.

다른 서비스에서 축적된 경험으로 다른 서비스를 이해하려고 할때 멘탈 모델이라고 부른다. 기존 방식을 아예 버린 후, 아예 새롭게 UX를 제공한다면, 유저는 새롭게 학습해야해서 불쾌할 수 있다.

*멘탈 모델 : 시스템, 사물이 실제로 어떠한 방식으로 작동할 것이라고 생각하는 인간의 사고 과정을 구조화

피츠의 법칙

목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.

• 터치할 수 있는 영역간의 거리는 적당해야한다. (입력 오류가 안날 수 있는 정도)
• 너무 크기가 커서도, 너무 작아서도 안된다.
• 모바일 특성상 사용자 시선이 중심으로 집중되서, Horizontal 보다 Vertical 형태가 더 좋다.

힉의 법칙

선택지가 너무 많으면 인지 부하가 증가한다.

• 선택지의 갯수가 증가할수록, 사용자의 인지 부하도 증가된다. (뇌 자체에서 선택시간이 길어짐)
• 사용자가 빠르게 목적을 달성 할 수 있도록 그룹핑 해주는 형식도 좋다.

밀러의 법칙

인간의 작업 기억 용량과 작업의 복잡도 사이의 관계를 설명하는 심리학적 원리

• 보통 사람은 작업을 7(+-2)개의 항목 밖에 기억하지 못한다.
• 심리학자 조지 밀러라는 사람이 정보 처리 용량의 관한 한계에 대한 논문 자료도 있다.
• 사람은 글자 수가 아니라, 정보 덩어리로 기억한다. (글자수 7 = 단어 7)
• 덩어리화의 대표적인 예시가 핸드폰 번호

포스텔의 법칙

유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.

• 사용자의 입력은 무조건 수용하되, 사용자에게 요청하는 정보의 양은 보수적으로 책정한다.
• 한번에 너무 많은 정보를 입력 요청하게 되면, 피로감과 에너지 소모가 커진다.

피크엔드의 법칙

사용자의 경험은 평균이나 합계가 아니라 절정의 순간이나, 마지막 순간에 느낀 감정을 바탕으로 판단된다.

• 우리가 앱을 사용하면서 중요한 순간, 특히 실패했던 경험을 더 오래 기억하려는 경향이 있다.

테슬러의 법칙

모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.

• 토스는 은행별 계좌번호 고유의 패턴을 파악해서 추천 은행명을 표시해준다.
• 필연적인 복잡성이 발생할때, 사용자를 어드바이스해 불편함의 간극을 줄이는 게 서비스 제공자 역할

심미적 사용성 효과

사람들은 보기 좋은 디자인이 사용성이 뛰어나다고 인식한다.

• 예를들어 금융앱이 딱딱하고 복잡하고 어렵다라는 인식이 있었는데 토스는 이쁘고, 사용성도 뛰어난 것
• 사람들은 웹사이트가 어떤지 평가하는데 50m/s 가 걸린다고 한다.

폰 레스토프 효과

동일한 요소들 중에서 눈에 띄는 요소가 기억에 더 오래 남는 현상을 말한다.

• 비슷한 여러 객체가 있을땐, 특정 기능을 강조하거나 유도하기 위해 보색 컬러 같은 시각적인 효과를 적용한다.
• 예를들어, 온보딩 기능, 알림 기능
• 시각적 강조를 남발하면, 집중력이 떨어질 수 있고, 산만해질 수 있다.

도허티 임계

사용자와 컴퓨터 간의 인터랙션 시 가장 적절한 시간 범위를 나타내는 개념

• 사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내의 시스템 피드백을 제공한다.
• 정보를 전달할때 딜레이가 생길땐, 스켈레톤 UI, 로딩 애니메이션으로 역동적인 볼거리를 제공해 지루함을 해소시킨다.

마무리

실제로 난 정말 편하고 간단하고 이쁜 서비스만 찾아다녔다. 주식을 처음 시작하려고 할때도, 증권앱 어떤 걸로 할지 고민하다가 토스가 너무 내 눈엔 쉽고 편했어서 나의 첫 증권앱이었다. UIUX 법칙을 공부해보면서, 토스가 얼마나 고민한지 느껴졌고, 실제 다녔던 회사에서도 왜 그렇게 디자인 리뷰가 길어졌는지도 너무 이해가 됐다.

UIUX 법칙을 공부하면서, 실제 사용자로써, 개발자로써 공감가는 것들도 너무 많았다. 더 나은 서비스, 더 나은 제품을 만들려면, 프론트엔드로써 사용자 중심의 UX 공부는 더 필수라고 느껴졌고, 의견이나, 아이디어를 제공할 수 있는 지식을 길러야한다고 느꼈다.

사실 요즘, 프론트엔드가 아닌 다른 개발자로 방향을 전환해야하나 싶었는데, 아직 그 고민은 너무 일렀다. 조금 더 사용자들이 쉽게 접근하고 이해할 수 있는 인터페이스를 많이 개발해보고, UX적으로 좋고, 유명한 프로젝트를 경험해보고 싶다.

참고자료

자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시타입을 제외한 나머지 값들은 모두 객체이다.

객체

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 프로퍼티 값으로 함수를 사용할 수도 있고, 프로퍼티 값이 함수일 경우, 일반함수와 구분하기 위해 메소드라고 부른다.

객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고, 조작할 수 잇는 동작을 의미하는 메소드로 구성된 집합이다. 객체는 데이터와 그 데이터에 관련되는 동작을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

자바스크립트 객체는 객체지향의 상속을 구현하기 위해 프로토타입이라고 불리는 객체의 프로퍼티와 메소드를 상속 받을 수 있다.

프로퍼티

프로퍼티 키(이름)와 프로퍼티 값으로 구성

프로퍼티키는 프로퍼티를 식별하기 위한 식별자.

프로퍼티 명명 규칙

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• 프로퍼티 값 : 모든 값

Symbol은 ES6(ES2015)에서 도입된 새로운 원시 데이터 타입

메소드

객체에 제한되어있는 함수를 의미한다.

• 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
• 해당 객체의 상태와 데이터에 접근하거나 수정하는 작업을 수행하기 위해 사용
• 객체의 프로퍼티에 할당된 함수로, 그 객체의 상태를 조작하거나 동작을 수행하는 데 사용

함수와 메소드 차이

코드 블록을 감싸고 실행할 수 있는 작업의 단위를 나타내는 프로그래밍 개념

함수

• 일련의 코드 문장들을 묶어 재사용 가능한 블록으로 정의한 것
• 어떤 객체에 속하지 않고 독립적으로 존재할 수 있다.
• 자바스크립트에서 함수는 일급 객체로 취급되어 변수에 할당하고,다른 함수에 전달하며, 함수에서 반환할 수 있다.

객체 생성 방법

객체 리터럴

가장 일반적인 자바스크립트 객체 생성 방식.

중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다

var emptyObject = {};

Object 생성자 함수

객체 리터럴 방식으로 생성된 객체는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다.

자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용해서 객체를 생성한다. 개발자가 일부러 Object 함수를 사용해 객체를 생성해야하는 일은 거의 없다.

var person2 = {
  name: 'Kim',
  gender: 'female',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

생성자 함수

자바스크립트의 생성자 함수는 이름 그대로 객체를 생성하는 함수

일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다. 그래서 생성자 함수명은 첫문자를 대문자로 기술하여 혼란을 방지한다.

• 생성자 함수 이름은 일반적으로 대문자로 시작한다. (생성자 함수임을 인식할 수 있도록 도움)
• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킴.
• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');

개발자 도구

개발자도구는 브라우저에서 제공하는 하나의 도구 사이트를 즉시 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들 수 있다.

📎 개발자도구 단축키

• 개발자도구 : cmd + option + I / ctrl + shift + I
• 개발자도구 Element 패널 : cmd + option + c (option > shift로 대체가능)
• 개발자도구 Console 패널 : cmd + option + j (option > shift로 대체가능)

Console 패널

console은 객체이다. Console에는 로그인메서드를 포함한 다양한 메서드가 존재한다. 프론트엔드의 경우에는 디버깅시 다른도구를 사용하는 것 보다 console.log를 사용한다.

📎 Console패널의 기능

• 자바스크립트 코드를 바로 실행하고 에러 확인 가능
• 중단시점에서 변수체크와 값을 수정하고 평가 가능

📎 Console 내용 전부 지우기

console창에 여러가지들을 테스트한 뒤에 콘솔창을 확인해보면 이전 console에 출력한 내용까지 확인된다.

콘솔 내용을 아예 다 지우고 빈 console창을 나타내게 하고싶을땐, console.clear();를 사용해주면 된다.

Console.clear();를 대체하는 내용 지우는 방법

1. ctrl + L (맥은 cmd + k)
2. :출입금지_기호: 아이콘 클릭
3. clear(); 😱 Preserve log upon navigation 이 적용 되어 있으면, 작동이 안된다.😱

📎 Console 내용 남아있게하기

👉 Cmd + option + j > console 옆 톱니바퀴아이콘 클릭 > network > Preserve log 체크

📎 Console Error와 Warning 제외하기

Console 창에서 에러와 경고메세지를 제외하고 콘솔을 보고싶을땐,

Console창에서 filter 옆에 Default levels 누르고 창이 뜨고 Warnings 와 Errors를 체크나 해제하면 된다.!

📎 요소패널 이용하면서 콘솔패널이용하는 방법

Cmd + option + I 를 누르고 Element 패널이 나타나면 esc를 눌러서 맨 하단에 console패널이 나오는 것을 확인해라!

Element 패널

코드를 분석하고 실시간으로 확인할 수 있게 하는 기능이 있고, 레이아웃과 디자인 테스트 가능하다.

• 웹 페이지의 구성 (dom)
• 구성요소의 스타일 속성 (css)
• Css 수정,ul 수정

📎 스타일 순서

! important -> inline style -> id selector -> class selector -> tag selector -> * selector -> 상위 요소에 의해 상속된 속성

📎 user agent stylesheet

• margin 값을 정해두지 않아서 브라우저 임의대로 설정 되어 있는 것 결과물이 의도한 것과 조금 다를 수 있다.
• 그래서 * {margin:0;padding:0;}을 사용함
• 브라우저의 기본 스타일 값을 의미. ( Default ) 브라우저 마다 스타일 기본값이 다름.

Network 패널

현재 보고있는 페이지에서 실시간으로 통신하고 있는 정보가 표시되고, api 크롤링과 로딩 성능 테스트도 가능하다.

📎 XHR 탭 기능

브라우저에서 서버에 API를 호출할때 호출or응답이 정상적으로 이루어지는지 알 수 있다. 그래서 프론트와 백엔드 개발자의 소통 역할을 하는 탭이다.

Application 패널

브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있다.

• 프로그레시브 웹 앱 디버그
• 스토리지, DB 및 캐시 검사 및 관리
• 쿠키 검사 및 삭제
• 리소스 검사

Local Storage & Session Storage

서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다. 서버는 클라이언트가 누구인지 계속 인증을 받아야하는데, 클라이언트에서는 번거로움을 해결하기 위해 쿠키, 세션스토리지, 로컬 스토리지를 사용해서 서버에게 인증 정보를 가지고 있다가 제공한다.

Local Storage

• 사용자가 지우지 않는 이상 데이터의 영구성이 보장
• 사용자가 지우지 않는 이상 계속 클라이언트 웹브라우저에 남아있다
• storage 3가지 중 허용 용량이 가장 크다(10mb).
• 지속적으로 필요한 정보를 저장하기에 좋다.

ex) 자동 로그인 정보 / 장바구니

Session Storage

• 윈도우나 브라우저 탭을 닫을 경우 사라진다.
• 즉 데이터의 영구성을 보장하지 않는다. 일회성의 데이터

ex) 비회원 장바구니/ 일회성 로그인 / 잠깐 동안 필요한 정보

동적으로 크기가 조정되는 가변적인 자료구조

배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행 길이도, 각 요소의 자료형도 고정되어 있지 않다. 밀집성을 보장하지 않는다. 연속적인 메모리 공간에 저장되지 않으며, 다양한 데이터 타입을 저장한다.

자료구조의 배열

동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조

배열의 요소는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접되어 있다. 고정된 크기를 가지며, 각 요소가 연속적인 메모리 공간에 저장한다.

배열 메서드 종류

배열 리터럴

const arr = [
  'zero', 'one', 'two', 'three', 'four',
  'five', 'six', 'seven', 'eight', 'nine'
];

배열 생성자

const arr = new Array(1, 2, 3);

const arr2 = new Array(20); // 인수 하나만 넘겨줄때는 그 인수가 배열길이
arr2.length // 20

고차 함수

함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드

함수형 프로그래밍의 핵심이기도 하며, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성

종류

• forEach
• map
• find
• findIndex
• filter
• reduce
• reduce
• some
• sort
• every

forEach, map

공통점은 "배열을 이용한다"는 점

map은 새로운 배열을 반환

map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.

리턴값을 보내지 않는 forEach()

let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
    return value;
});
console.log(a);   //undefined

forEach 문 밖으로 리턴값을 받지 못한다.

##

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻

한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념. 즉, 교차되는 출처 자원들의 공유

컴퓨터적으로는, CORS는 추가 HTTP 헤더를 사용해서 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

웹 애플리케이션은 리소스가 자신의 출처(도메인,프로토콜,포트)와 다를때 교차 출처 HTTP 요청을 실행한다.

출처

Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 한다.

동일 출처 정책 (Same-origin policy)

다른 출처로부터 조회된 자원들의 읽기 접근을 막아 다른 출처 공격을 예방한다.

다른 출처 자원을 가져오는 것을 굉장히 제한적으로 허용했고, SPA, 미디어 중심 웹사이트들이 더 늘어나며 규칙도 늘어났다.

그래서, 다른 출처 리소스에 접근성을 높이기 위해 CORS가 등장

CORS 에러

출처가 다를때

• Protocol이 다를때
• Host가 다를때
• 포트번호가 다를때

헤더 값이 요청의 출처와 일치하지 않는 도메인일 경우

access-control-allow-credentials 가 true로 설정되지 않았거나, access-control-allow-origin 헤더에 있는 값이 허용된 출처가 아닐때

캐시

데이터나 값을 미리 복사해 임시로 저장해 두는 장소

사이트를 불러 올때, 전에 불러왔던 사진을 접속때마다 불러오면 데이터의 낭비를 일으킨다. 캐시를 통해 클라이언트에 저장해둘 수 있고, 주기적으로 비워줘야한다.

실전 예시

그래서 우리가 어떤 기능을 웹사이트에 업데이트 후 다른 누군가가 확인하고 있을때, 예를들어, 업데이트 된 정보가 다른 누군가에게 확인이 되지 않을때, 우리는 캐시를 지워달라고 말한다.

snippet

재사용 가능한 소스코드나 텍스트의 작은 부분을 일컫는 프로그래밍 용어

쉽게 말해 자동완성 기능

자바스크립트에는 모든 타입이 있고, 값의 타입은 개발자에 의해 의도적으로 다른 타입으로 변환할 수 있다. 또는 자바스크립트 엔진에 의해 암묵적으로 자동 변환도 할 수 있다.

명시적 타입 변환(Type casting)

개발자에 의해 의도적으로 타입을 변환하는 것

예시

var x = 10;

// 명시적 타입 변환
var str = x.toString(); 
console.log(typeof str); // string

toString 메서드를 이용하여, number 의 타입을 string으로 변경해준다.

방법

문자열 타입 변환

• String 생성자 함수를 new 연산자 없이 호출하는 방법
• Object.prototype.toString 메소드를 사용하는 방법
• 문자열 연결 연산자를 이용하는 방법

console.log(String(1));  // "1"

숫자 타입 변환

console.log(Number('0'));  // 0

숫자 타입 변환

console.log(Number('0'));  // 0

불리언 타입 변환

• Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
• ! 부정 논리 연산자를 두번 사용하는 방법

console.log(Boolean('x'));       // true
console.log(Boolean(''));        // false

암묵적 타입 변환 (Type coercion)

자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 자바스크립트 엔진은 표현식을 평가할 때 문맥, 즉 컨텍스트(Context)에 고려하여 암묵적 타입 변환을 실행한다.

var x = 10;

// 암묵적 타입 변환
var str = x + '';

console.log(typeof str, str); // string 10
console.log(x); // 10

숫자 타입 x의 값을 바탕으로 새로운 문자열 타입의 값을 생성해 표현식을 평가한다. 하지만, 기존 값이 변경되지는 않는다.

방법

문자열 타입 변환

1 + '2' // "12"
true + '' // "true"

숫자 타입 변환

1 - '1'    // 0
1 * '10'   // 10
1 / 'one'  // NaN

불리언 타입 변환

if ('') console.log(x);

# 기존 값(변수)을 직접 변경하는 것은 아니다.

변수값을 변경하려면 재할당을 통해 새로운 메모리 공간을 확보하고, 그곳에 원시값을 저장하고 변수명이 재할당된 원시값이 저장된 메모리 공간의 주소를 기억하도록 해야하기 때문이다.

# 자바스크립트 엔진이 어떻게 움직일까?

자바스크립트 엔진이 표현식을 에러없이 평가하기 위해 기존 값을 바탕으로 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.

1. 변수 x의 숫자 값을 바탕으로 새로운 문자열 값 ‘10’을 생성
2. 표현식 ‘10’ + ‘‘를 평가
3. 자동 생성된 문자열 ‘10’은 표현식의 평가가 끝나면 아무도 참조하지 않으므로 가비지 컬렉터에 의해 메모리에서 제거.

# 좋은 코드

자신의 코드에서 암묵적으로 타입이 변환되는지, 명시적으로 변환되는지 예측이 가능한 코드로 작성해야한다. 예측하지 못하거나 예측한 내용이 결과와 일치하지 않는다면 버그를 날 가능성이 높아진다.

그럼 암묵적 코드를 안쓰면 되지 않을까?

좋은 생각이지만, 그렇게 접근하면 옳진 않다. 암묵적 코드가 명시적 코드보다 가독성 면이 좋을 수 있고, 자바스크립트 문법을 잘 이해하고 있는 개발자에게는 (10).toString()보다 10 + ''이 더욱 간결하고 이해하기 쉬울 수 있다.

truthy / falsy

truthy

참

if (true) {}
if ({}) {}
if ("0") {}
if ([]) {}

falsy

거짓

• undefined

• null

• false

• 0(+0, -0)

• NaN

• ""

  if (undefined) {}
  if (null) {}
  if (false) {}
  if (0) {}
  if (NaN) {}
  if ("") {}

ES6부터 도입 된, 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다.

• 다른 값과 중복되지 않는 유일무이한 값.
• 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용.
• 객체 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값.

데이터 타입

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자,문자열,불리언 등)의 종류.

코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야한다.

데이터 타입 데이터를 메모리에 저장할때,

• 확보해야하는 메모리 공간의 크기
• 할당할 수 있는 유효한 값에 대한 정보
• 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보

들을 컴퓨터와 개발자에게 알려준다.

데이터 타입 사용하는 이유?

• 한정된 메모리 공간을 효율적으로 관리하기 위해
• 2진수 데이터로 메모리에 저장 된 데이터를 다양한 형태로 사용하기 위해

데이터 타입 종류

원시 타입

변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다.

숫자 타입

• 자바스크립트는 모든 수를 실수로 처리.
• 정수만 표현하기 위한 별도의 데이터 타입이 존재하지 않음.
• 메모리에 64비트 부동소수점 형식의 2진수로 저장.
• 메모리에 있는 어떤 형식의 값을 참조하든지 모두 10진수로 해석.
• 숫자 타입은 특별한 값도 있음.(Infinity, -Infinity, NaN)

자바스크립트 엔진은 대소문자를 구별한다.

문자열 타입

• 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합
• 전 세계 대부분의 문자를 표현
• 나타내는 방법은 세 가지. (' ', " ", 백틱) - 문자열 나타낼 때 가장 일반적으로 작은따옴표가 사용.

템플릿 리터럴

• 템플릿 리터럴은 ES6부터 도입.
• 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공.
• 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리.
• ${}

불리언 타입

• true | false

undefined 타입

• var로 변수를 선언하면 자바스크립트 엔진이 자동적으로 undefined로 초기화시켜버림
• 변수를 참조했을 때 undefined가 반환된다면, 변수 선언 이후 값이 할당되지 않은, 초기화되지 않은 변수라는 뜻.

null 타입

• 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
• 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거
• 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행한다.

객체 타입 (참조 타입)

원시 타입을 제외한 모든 것이 객체 타입이다.

• 객체타입은 변경 가능한 값을 뜻한다.
• 객체타입을 복사해서 다른 변수에 할당 할 경우 해당 객체 타입의 주소값이 두번 째 변수의 메모리 공간에 저장된다.
• 원시타입을 복사해서 다른 변수에 할당 할 경우 해당 원시 타입의 원시값이 두번 째 변수의 메모리 공간에 값 자체가 저장된다.

동적 타이핑

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.

동적 타입 언어는 유연성은 높지만, 신뢰성은 떨어진다. 동적 타이핑 언어는 사용자가 직접 타입을 지정 하지 않는다. 사용자는 값을 대입하고, 자바스크립트 엔진은 사용자가 대입한 값을 바탕으로 타입을 지정한다.

dohee = "babo";

정적 타이핑

정적 타입언어는 명시적 타입선언을 하는 언어

정적 타입 언어는 컴파일 시점에 타입 체크한다 = 선언한 데이터에 맞는 값을 할당했는지 검사하는 처리. 만약 타입 체크 통과 못했다면 에러를 발생시킨다.

const dohee = "yeah";

타입 변환

기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것.

• 개발자 의도에 따라 값의 타입을 변환하는 것
  • 명시적 타입 변환
  • 타입 캐스팅
• 개발자 의도와는 상관없이 표현식을 평가하는 중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것
  • 암묵적 타입 변환
  • 타입 강제 변환
• 명시적 타입 변환이나, 암묵적 타입 변환이 기존 원시값을 직접 변경하는 것은 아님.
  • 원시 값은 변경 불가능 한 값이므로 변경 불가능.

자바스크립트는 가급적 에러를 발생시키지 않도록, 암묵적으로 타입 변환을 통해 표현식을 평가한다.

단축 평가

타입 변환하지 않고 그대로 반환하는 것.

• 단축 평가는 표현식을 평가하는 도중에 평가결과가 확정된 경우, 나머지 평가 과정을 생략.
• 단축평가를 사용하면 if 문을 대체할 수 있으며,
• 삼항 조건 연산자는 if-else 문을 대체할 수 있다.

진짜 말그대로 짧게 평가한다는 뜻..같은데..?

논리 연산자

논리합|| 또는 논리곱&&.

논리곱&&

두 개의 피연산자가 모두 true로 평가될 때 true를 반환. 좌항에서 우항으로 평가가 진행.

논리합||

두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환.

옵셔널 체이닝 연산자

ES11 부터 사용, 옵셔널 체이닝 연산자 ?

• 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아니면 우항의 프로퍼티 참조를 이어간다

null 병합 연산자

ES11 부터 사용, null 병합 연산자 ??

• 좌항의 피연산자 null 또는 undefined인 경우 우항의 피연산자를 반환,아니면 좌항의 피연산자를 반환.
• null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용.