실행할 코드에 제공할 환경 정보들을 모아놓은 객체

• 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.
• 자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 된다. (여기서 환경은 : 전역공간이 될 수 있고, 함수 즉 함수 내부의 환경이 될 수 있다.)
  

실행 컨텍스트의 생성 시점

• 자바스크립트 엔진이 스크립트를 처음 마주할 때 전역 컨텍스트를 생성하고, 콜 스택에 push 한다.
• 엔진이 스크립트를 쭉 읽어내려가면서 함수 호출을 발견할 때마다, 함수의 실행 컨텍스트를 스택에 push 한다.

중요한 점은 함수 실행 컨텍스트는 함수가 실행될 때! 만들어진다는 점!

함수를 선언할 때가 아니라 실행할 때이다.

실행 컨텍스트의 종류

1. 전역 실행 컨텍스트 (Global Execution Context (GEC))

브라우저에 파일이 처음 로드될 때 자바스크립트 코드가 실행을 시작하는 기본 실행 컨텍스트이다.

• Global Variable, Global Scope 등과 같은 Global 개념이며 전역으로 자바스크립트가 실행 될 때의 실행 환경을 GEC 라고 부른다.
• 함수나 객체에 없는 모든 전역 코드, 즉 코드가 글로벌 실행 컨텍스트 내에서 실행된다.
• 또한 자바스크립트 엔진이 싱글 스레드이기 때문에 자바스크립트 코드를 실행할 수 있는 글로벌 환경은 1개만 존재한다.

2. 함수 실행 컨텍스트 (Functional Execution Context (FEC))

함수 실행 컨텍스트는 함수 호출을 찾을 때마다 자바스크립트 엔진에 의해 생성된 컨텍스트로 정의된다.

• 자바스크립트가 함수마다 스코프를 가지는 것처럼 각 함수는 고유한 실행 컨텍스트를 가진다.
• 글로벌 실행 컨텍스트와는 달리 1개 이상일 수 있다.
• 전역 실행 컨텍스트 코드를 실행하는 동안 자바스크립트 엔진이 함수 호출을 찾으면 해당 함수에 대한 새로운 함수 실행 컨텍스트를 생성한다.

3. Eval (안쓴다고 보면됨)

• Eval 함수는 문자로 표현된 JavaScript 코드를 실행하는 함수로 Eval 함수를 호출 및 실행 하게 될 때 그 내부적으로 실행 컨텍스트가 생성 된다.
• 하지만 문자열로부터 Eval 함수를 실행하는 것은 엄청나게 위험하다고 한다.
• Eval 함수를 사용하면 해커가 위험한 코드를 사용할 수 있다고 한다. 그러한 이유로 잘 다루지 않는다.

실행 컨텍스트 실행 순서

var temp = 'temp';

function foo (){
  console.log('hi');
}

function f002 (){
  foo();
}

foo2();

(1) 콜스택엔 전역 컨텍스트를 제외하곤 다른 컨텍스트가 없기에 전역 컨텍스트와 관련된 코드를 진행합니다.
(2) 전역 컨텍스트와 관련된 코드를 진행 중 a함수를 실행하였기에 a 함수의 환경 정보들을 수집하여 a 실행 컨텍스트를 생성, 콜스택에 담습니다.
콜스택 최상단에 a 실행 컨텍스트가 있기에 기존의 전역 컨텍스트와 관련된 코드의 실행을 일시적으로 중단한 후 a 실행 컨텍스트의 코드를 실행합니다.
(3) a 함수 내부에서 b 함수를 실행하였기에 b 함수의 환경 정보들을 수집, 실행 컨텍스트를 생성, 콜스택에 담습니다. 
이전과 똑같이 콜스택 최상단에 b 실행 컨텍스트가 있기에 기존 a 실행 컨텍스트와 관련된 코드의 실행을 일시적 중단합니다.
(4) b 함수가 종료된 후 b 실행 컨텍스트가 콜스택에서 제거됩니다. 
제거 후 콜스택 최상단에는 a 실행 컨텍스트가 있기에 이전에 중단된 지점부터 코드 진행이 재개됩니다.
(5) a 함수 또한 종료된 후 실행 컨텍스트가 콜스택에서 제거됩니다.
이후엔 전역 공간에 실행할 코드가 남아있지 않다면 콜스택에서 전역 컨텍스트 또한 제거되며 콜스택에 아무 것도 남지 않은 상태로 종료됩니다.

참고자료1

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.

• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

this 바인딩이란?

this와 this가 가리킬 객체를 바인딩하는 것이다.

• 식별자와 값을 연결하는 과정을 말한다.
• 변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.

하지만 자바스크립트의 경우 Java와 같이 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다.

함수 호출 방식과 this 바인딩

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

! 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical scope)는 함수를 선언할 때 결정된다. this 바인딩과 혼동하지 않도록 주의하기.

함수의 호출하는 방식

1. 함수 호출
2. 메소드 호출
3. 생성자 함수 호출
4. apply/call/bind 호출

프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

실세계에 존재하고 인지하고 있는 객체를 소프트웨어의 세계에서 표현하기위해 객체의 핵심적인 개념, 기능만 추출하는 추상화를 통해 모델링하려는 프로그래밍 패러다임이다. 즉, 우리가 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상이다.

• 컴퓨터 프로그래밍의 패러다임 중 하나
• 컴퓨터 프로그래밍을 명령어의 목록이 아닌, 여러 개의 독립된 단위 (객체)들의 모임으로 파악한다
• 각각의 객체는 메세지를 주고 받고, 데이터를 처리할 수 있다
• 프로그램을 유연하고 변경이 쉽게만들기때문에 대규모 소프트웨어개발에 많이 사용된다
• 유지 보수 간편, 보다 직관적인 코드 분석을 가능하게 한다

객체 지향 프로그래밍 언어

C++ , C# , Java , Python ,Dart , Ruby , Swift 등이 있다.

특징?

추상화

불필요한 정보는 숨기고 중요한 정보만 표현함으로써 프로그램을 간단히 만드는 것

추상화로 'car'를 구현해두면 car class에 volvo,nissan과 같은 브랜드 네임만 추가하여 객체를 생성할 수 있다.

• 객체에서 공통된 속성과 행위를 추출
• 공통의 속성과 행의를 찾아서 타입을 정의

캡슐화

객체의 속성과 행위를 하나로 묶고, 실제 구현 내용 일부를 내부에 감추어 은닉하는 것

속성과 기능을 정의하는 변수와 메소드를 클래스라는 캡슐에 넣어 분류함. 때문에 재활용이 용이하고 이를 통해 정보은닉을 활용할 수 있다.

• 데이터 구조(변수)와 데이터를 다루는 방법들(함수)을 결합 시켜 묶는 것
• 낮은 결합도를 유지할 수 있도록 설계

상속

새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있게하는 것

• 클래스의 속성과 행위를 하위클래스가 물려받아 데이터와 연산을 이용할 수 있게하는 기능
• 재사용으로 코드가 줄어들고 범용적으로 사용이 가능하며 자료와 메서드의 자유로운 사용 및 추가가 가능하다
• 그러나, 상위 클래스의 변경이 어렵고 불필요한 클래스가 증가할 수 있으며 상송이 잘 못 사용될 수도있다

다형성

어떤 한 요소에 여러 개념을 넣어 놓는 것으로 일반적으로 오버라이딩이나 오버로딩을 의미한다객

• 객체지향 프로그래밍은 하나의 클래스 내부에 같은 이름의 행위를 여러개 정의하거나 상위 클래스의 행위를 하위클래스에서 재정의하여 사용할 수 있다

오버라이딩

• 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 것

오버로딩

• 같은 이름의 메서드가 인지나 개수나 자료형에 따라 다른 기능을 하는 것

장점

• 클래스 단위로 모듈화시켜 개발하기 때문에 업무 분담이 편리하고 대규모 소프트웨어 개발에 적합
• 클래스 단위로 수정이 가능하기 때문에 유지보수 편리
• 클래스를 재사용하거나 상속을 통해 확장하므로써 코드 재사용이 용이

단점

• 처리속도가 상대적으로 느림
• 객체의 수가 많아짐에 따라 용량이 커질 수 있음
• 설계가 어렵다

객체지향적으로 설계하기 위해선 SOLID 원칙을 지켜야한다 !

자바스크립트는 객체지향 프로그래밍 언어인가?

Javascript는 완전한 객체 지향 언어이다.

자바스크립트는 클래스 개념이 없어서 다른 객체지향 프로그래밍언어들과 차이가 있다. 하지만, 별도의 객체 생성 방법들이 존재한다.

• 객체 리터럴
• Object() 생성자 함수
• 생성자 함수

// 객체 리터럴
var obj1 = {};
obj1.name = 'Lee';

// Object() 생성자 함수
var obj2 = new Object();
obj2.name = 'Lee';

// 생성자 함수
function F() {}
var obj3 = new F();
obj3.name = 'Lee';

자바스크립트는 이미 생성된 인스턴스의 자료구조와 기능을 동적으로 변경할 수 있다. 객체지향의 상속, 캡슐화 등의 개념은 프로토타입 체인과 클로저 등으로 구현할 수 있다.

자바스크립트는 클래스, 생성자, 메소드 모두 함수로 구현 가능하다.

웹에서 카카오를 통해 로그인 할 수 있는 방식은 다양하지만, 그 중 이번에 사용해볼 방식은 JavaScript를 이용한 방식! 이전에 REST API를 이용한 방법을 해봤어서 JavaScript를 이용해서 해보고싶었음! KAKAO-REST-API

먼저 Kakao SDK for JavaScript를 사용한 로그인 구현 방법이다.

KAKAO JavaScript SDK 로그인 문서

핸드폰에 카카오톡 앱이 설치되어있다면 바로 카카오톡 앱을 실행하여 로그인을 할 수 있도록 제공한다.(간편로그인) 만약 카카오톡 앱이 설치가 안되어있다면, Rest API 방식에서 본 로그인 페이지가 나타난다.

1. KAKAO JavaScript SDK를 적용하고자하는 프로젝트에 포함한다.

//index.html
//<script defer src="https://developers.kakao.com/sdk/js/kakao.js"></script> 이건 맨처음 삽입했던 스크립트
  <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.4.0/kakao.min.js"
    integrity="sha384-mXVrIX2T/Kszp6Z0aEWaA8Nm7J6/ZeWXbL8UpGRjKwWe56Srd/iyNmWMBhcItAjH" crossorigin="anonymous"></script>

2. JavaScript SDK 초기화 함수를 호출한다.

(JAVASCRIPT_KEY는 [내 애플리케이션] > [앱 키]에서 확인한 JavaScript 키를 할당해야한다.) SDK를 계속 초기화하지 않고, 초기화 여부를 판단하여 false일 경우에만 초기화 시킨다.

//login.tsx
const { Kakao } = window;
  useEffect(() => {
    if (!Kakao.isInitialized()) { //SDK 초기화 여부 판단 함수
     Kakao.init(process.env.REACT_APP_KAKAO_KEY); //SDK 초기화 함수
    }  
  }, []);

이제 실제 로그인 버튼 작동시 발생하는 플로우다.

3. 유저가 카카오 버튼을 누르면 Kakao.Auth.authorize()함수를 호출해 간편로그인을 요청한다.

이 함수에는 많은 파라미터를 담을 수 있는데, 나의 경우 redirectUri과 throughTalk만 사용했다. 파라미터 문서 참고

 Kakao.Auth.authorize({
    redirectUri: REDIRECT_URI,
    throughTalk: Boolean(navigator.userAgent.match(/Android/i)) ? false : true,
  });
//뒤에 설명할 안드로이드 이슈로 인해 throughTalk 값을 위와 같이 처리함!
//throughTalk는 간편 로그인 사용 여부에 대한 값이다. 디폴트는 true!

4. Kakao.Auth.authorize()를 호출하면 JavaScript SDK가 카카오톡을 실행시킨다.

4-1. 카카오톡이 핸드폰 백그라운드에 설치되어있는지 확인한다.

4-2. 카카오톡이 설치되어있으면 카카오톡실행, 미설치 환경에선 카카오계정으로 로그인 시도. 이후 과정은 REST API와 동일하다.

(사용자는 카카오톡 동의화면에서 서비스 이용에 필요한 동의항목에 동의하고 로그인하거나 취소할 수 있음)

5. 사용자가 동의후 로그인을 계속 시도할 때 인가코드값을 담은 쿼리스트링을 redirectUri로 리다이렉팅한다.

(카카오톡 인증서버가 사용자의 선택에 따라 요청 처리 결과를 담은 인가코드값을 줌)

http://localhost:8000/sign-in?code="Blah blah_Blah blah"

6. 리다이렉팅 한 컴포넌트에서 인가 코드값을 가지고 accessToken값을 발급받는다.

여기부터는 REST AI와 동일하다.

Rest API 방식과 차이점

SDK를 활용한 로그인 방식도 REST API와 같이 리다이렉트된 페이지에서 인가 코드를 받아서 처리하는 방식은 동일하다 ! 차이점은 앱을 먼저 구동시키냐 아니냐의 차이!

Rest API 방식은 카카오 쿠키가 존재하면 빠르게 로그인 페이지를 넘어가는데, SDK방식은 카카오 쿠키가 존재하더라도 무조건 카카오앱을 실행하여 로그인한다.

📌 헤매였던 포인트

JS SDK로그인 방식은 간편로그인 방식으로 디바이스 백그라운드에 카카오톡이 있는지 여부를 체크한다. (그래서 인지 대체로 앱 로그인에서 많이 쓰임) 모바일 웹으로 로그인을 할 경우에도 마찬가지로 동작한다. 하지만 Android 모바일 웹에서는 카카오톡이 있음에도 응답값을 발생하지 못하는 이슈가 생겼다.

JS SDK에서 authorize로 로그인 시, iOS와 달리 Android는 브라우저에서 응답을 받지못하기 때문에 Android에서만 throughTalk:false를 이용하여 카카오톡이 아닌 카카오 계정으로 로그인 처리를 해야했다. 카카오톡 안드로이드 SDK 로그인 이슈 미리보기

KAKAO REST API 문서

카카오 로그인 페이지를 먼저 접속한 후, 카카오톡으로 로그인 버튼을 통해서 카카오톡 앱에서 로그인을 할 수 있도록 제공한다.

1. 카카오 인가 코드를 받기위한 url에 직접 접속한다.

(이때 Query string에 필수 값들을 넣어 url에 접속해야함)

const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code `;

return (<LoginButton onClick={() => (window.location.href = KAKAO_AUTH_URL)}>로그인하기</LoginButton>)

2. 카카오 디벨로퍼 플랫폼에 등록해놓은 Redirect URI + Query의 code값으로 일회용성 인가코드를 부여 받는다.

3. 리다이렉팅된 컴포넌트에서 인가코드값을 가지고 카카오 token을 가져온다.

const KAKAO_CODE = new URL(location.href).searchParams.get("code");

const goToLogin = async (KAKAO_CODE: string) => {
     try {
        const response = await fetch(`https://kauth.kakao.com/oauth/token`, {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" },
            body: `grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${KAKAO_CODE}`,
        });

        return response.json();
    } catch (error) error;
  };

  useEffect(() => {
    KAKAO_CODE ? goToLogin(KAKAO_CODE) : navigate(`/login`);
  }, [KAKAO_CODE]);

4. token까지 가져왔으니 로그인 처리를 하면된다.

하지만 나는 해당 토큰 값을 통해 유저의 정보를 가져오고자 한다!

export const getKakaoUserInfo = async (accessToken) => {
    try {
        const response = await fetch(`https://kapi.kakao.com/v2/user/me`, {
            method: "GET",
            headers: {
                Authorization: `Bearer ${accessToken}`,
                "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"},
           });

        const data = response.json();

        const userInfo = {
            social: "kakao",
            userId: data.id,
            email: data.kakao_account.email,
            gender: data.kakao_account.gender,
        };
        return userInfo;
    } catch (error) error;
};

5. 그리고 우리 리소스 서버로 정보 전달 ! 끄읏-

JS에서는 변수에 접근할 수 있는 범위

• 직역하면 범위라는 뜻
• 식별자(변수)를 찾기 위한 규칙

스코프 종류

1. 전역 스코프

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

• Global scope
• 코드 어디에서든지 참조 가능
• ex) 함수 밖에서 선언된 변수는 전역으로 사용가능하다

2. 지역 스코프

함수 내에서 선언된 매개변수와 변수는 외부에서는 유효하지 않는 지역 스코프를 지닌다

• 함수 레벨 스코프라고 할 수도있다
• Local scope / Function-level scope
• 함수 코드 블록이 만든 스코프로, 함수 자신과 하위 함수에서만 참조할 수 있다.

스코프 특징

1. 블록 레벨 스코프

• 코드 블록 ({}) 내에서만 참조(접근)가능한 범위

  2. 함수 레벨 스코프

• 함수 코드 블록 내에서만 참조(접근) 가능한 범위

  3. 렉시컬 스코프

• Scope의 또다른 특징으로, 상위 스코프를 결정
• 함수를 어디서 선언 하였는지에 따라 상위 스코프를 결정
• JavaScript 및 대부분의 프로그래밍 언어에서 사용하는 방법 (자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다)

  4. 동적 스코프

• 함수를 어디서 호출 하였는지에 따라 상위 스코프를 결정

지역변수와 전역변수가 중복 선언된 경우

• 전역 영역에서는 전역 변수만 참조가능
• 함수 내에서는 지역과 전역 변수 모두 참조가능 => 변수명이 중복된 경우 지역변수를 우선 참조한다. => 중첩 스코프는 가장 인접한 지역을 우선하여 참조한다.

전역 변수의 문제점

1. 암묵적 결합을 허용하는 것.

• 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용하는 것이다.

  2. 전역 변수는 생명 주기가 길다.

• 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행한다

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

• 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 말하며, 검색 속도가 가증 느리다.

  4. 네임스페이스 오염

• 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.
• 전역 변수는 선언되면 프로그램 실행이 끝날 때 까지 메모리 공간을 차지하기 때문에, 메모리 부족의 원인이 될 수 있다.

애플리케이션 개발 단계부터 배포까지 자동화하여 애플리케이션을 더욱 짧은 주기로 고객에게 제공하는 방법

CI

빌드/테스트 자동화 과정, "지속적인 통합"을 의미

• 애플리케이션의 버그 수정이나 새로운 코드 변경이 정기적으로 빌드 및 테스트되면서 공유되는 레파지토리에 통합되는 것을 의미한다.
• 모든 사람에게 동일 작업 기반을 제공한다
• 커밋할때마다 빌드와 일련의 자동 테스트가 이루어져 동작을 확인하고 변경으로 인해 문제가 생기는 부분이 없도록 보장한다

1. 코드 변경사항을 주기적으로 빈번하게 merge한다

• 가능한 작은 단위로 나누어 주기적으로 빈번히 개발하고 계속해서 통합해 나가는 것이 중요

2. 통합 단계의 자동화

• 매번 코드치고, 형상관리 시스템(github)에 코드 올리고 빌드하고 테스트하고 귀찮은 일. 이 일을 자동화 할 수 있다

장점

• 코드의 검증에 들어가는 시간이 줄어든다
• 개발 편의성이 증가한다
• 항상 테스트 코드를 통과한 코드만이 레포지토리에 올라가기 때문에, 좋은 코드 퀄리티를 유지할 수 있다.

CD

배포 자동화 과정, 지속적인 서비스 제공 및 지속적인 배포

• 코드변경이 파이프라인의 이전단계를 모두 성공적으로 통화하면 수동 개입 없이 해당 변경 사항이 프로덕션에 자동으로 배포된다.
• 지속적 배포를 채택하면 품질저하없이 새로운 기능을 사용자에게 빨리 제공할 수 있다.
  

CD적용 흐름

CI를 적용하여 코드 검증 > 배포 환경과 비슷한 곳에서 검증 진행 > 검증된 소프트웨어를 실제 프로덕션 환경으로 배포

장점

• 개발자가 배포보다는 개발에 더욱 신경 쓸 수 있도록 도와준다.
• 개발자가 원클릭으로 수작업 없이 빌드,테스트,배포까지의 자동화를 할 수 있다.

CI/CD 종류

• Jenkins
• CircleCI
• TravisCI
• Github Actions
• etc

CI/CD를 적용 후의 과정

1. 개발자들이 개발하여 feature브랜치에 코드를 push한다.
2. git push를 통해 Trigger되어 CI서버에서 알아서 Build, Test, Lint를 실행하고 결과를 전송한다.
3. 개발자들은 결과를 전송받고 에러가 난 부분이 있다면 에러부분을 수정하고 코드를 master 브랜치에 merge한다.
4. master 브랜치에 코드를 merge하고 Build, Test가 정상적으로 수행이 되었다면 CI서버에서 알아서 Deploy 과정을 수행한다.

CDN (Content Delivery Network)?

지리적으로 분산된 서버들을 연결한 네트워크

• 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게한다.

CDN이 중요한 이유

• CDN의 주 목적은 대기시간을 줄이거나 네트워크 설계로 인해 발생하는 통신 지연을 줄이는것이다.
• 서버와 사용자 간의 통신 트래픽은 아무 먼 물리적인 이동을해야하는데, CND은 클라이언트 - 웹 사이트 서버 중간에 서버를 두어 효율성을 높인다.
• 웹서버에 대한 트래픽을 줄이고, 대역폭 소비를줄여 애플리케이션의 사용자 환경을 개선한다.
  

CDN사용시 이점

1. 페이지 로드 시간 단축 가까운 CDN 서버에서 콘텐츠를 전송해주기 때문에 페이지 로드 시간을 단축 할 수 있다.
2. 대역폭 비용 절감 CDN은 캐싱 및 기타 최적화를 통해 Origin 서버가 제공해야하는 데이터의 양을 줄여 웹 사이트 소유자의 호스팅 비용을 절감할 수 있다.
3. 콘텐츠 가용성 제고 CDN 서비스는 대용량 트래픽을 처리하고 웹 서버의 부하를 줄일 수 있다.
4. 웹 사이트 보안강화 DDoS 공격과 같은 가짜 트래픽을 여러 중간 서버 간에 분산하여 Origin 서버에 미치는 영향을 줄일 수 있다.

동작방식

• 여러 지리적 위치에 접속 지점(POP) 또는 CDN 엣지 서버 그룹을 설정하는 방식으로 작동한다
• 지리적으로 분산된 네트워크는 캐싱, 동적 가속 및 엣지 계산의 원리를 기반으로 작동한다

캐싱

• 더 빠른 데이터 접근을 위해 동일한 데이터의 여러 복사본을 저장하는 프로세스
• 네트워크의 여러 서버에 정적 웹사이트 콘텐츠를 저장하는 프로세를 의미

캐싱 동작 과정

1. 지리적으로 멀리 떨어진 웹사이트 방문자가 사이트에 정적 웹 콘텐츠 요청
2. 요청이 웹 애플리케이션 서버 또는 origin 서버에 도달
3. origin 서버는 원격 방문자에게 응답을 보낸다.또한 해당 방문자와 지리적으로 가까운 CDN POP에 응답 복사본을 보낸다
4. CDN POP 서버는 복사본을 캐싱된 파일로 저장한다
5. 다음에 해당 방문자 또는 해당 위치에 있는 다른 방문자가 동일한 요청을 하면, origin 서버가 아닌 캐싱 서버가 응답을 보냄
   

동적 가속

• 웹 애플리캐이션과 클라이언트 사이의 중개 CDN서버로 인해 발생하는 동적 웹 콘텐츠 요청에 대한 서버 응답 시간을 단축하는 것.
• 사용자가 요청이 있을 때마다 콘텐츠가 변경될 수 있기 떄문에 동적 웹 콘텐츠에서는 캐싱이 제대로 동작하지 않는다.
• CDN 서버는 모든 동적 요청에 대해 origin 서버와 다시 연결해야 하지만 자신과 origin 서버 간의 연결을 최적화하여 프로세스를 가속화 한다.

엣지 로직 계산

• 클라이언트와 서버간의 통신을 단순화하는 논리적 계산을 수행하도록 CDN 엣지 서버를 프로그래밍할 수 있다. ```
• 사용자 요청을 검사하고 캐싱 동작을 수정한다.
• 잘못된 사용자 요청을 확인하고 처리한다
• 응답하기 전에 콘텐츠를 수정하거나 최적화한다 ```

소프트웨어의 개발 과정을 정의한것

• 프로그래머들이 협업을 하고 프로그래밍을 만듦에 있어 일관성을 유지하고 효과적으로 개발하기 위한 방법론
• 소프트웨어 개발 전 과정에 지속적으로 적용할 수 있는 방법, 절차, 기법이다.
• 소프트웨어를 하나의 생명체로 간주하고 소프트웨어 개발의 시작부터 시스템을 사용하지 않는 과정까지의 전 과정을 형상화한 방법론이다

폭포수 방법론

Waterfall Model로 모든 과정을 순차적으로 하나씩 진행하는 방법론

• 소프트웨어의 개발 과정을 요구분석 > 설계 > 구현 > 시험 > 통합 > 운영 및 유지보수의 단계로 구분하여 순차적으로 진행하는 프로세스 모델

특징

• 통상적으로 크고 복잡하며 장기간 지속되는 프로젝트에 사용하는 것이 적합함
• 미리 정의된 요구사항을 수집하고 전체적으로 분석 및 디자인을 한 뒤 한번에 완성
• 일에 필요한 모든 사항들을 완벽하게 측정 및 계획 수립 후,각 단계를 순차적으로 진행

• 단, 한 단계가 완전히 끝나지 않으면 다음단계로 넘어가지 않는다

장점

• 명확한 문서화로 인해 전체 과정을 이해하기 쉽다
• 구조화된 방식
• 오래된 방식이라 벤치마킹이 쉬움

단점

• 개발 중간 요구사항 및 수정 변경이 어려움
• 즉각적인 유저 피드백이 어려움
• 전 단계가 종료되어야 다음단계수행가능

애자일 방법론

짧은 단위의 소프트웨어 개발 사이클을 반복하면서 고객의 요구 변화에 유연하고 신속하게 대응하는 방법론

특징

• 프로세스를 간소화함으로써 변화에 신속대응 할 수 있다.
• 결과물에 대해 빠른 피드백이 필요한 팀에게 용이하다.

장점

• 개발과정이 빠르고 유연하다
• 짧고 반복적인 스프린트로 구성
• 소규모 팀들이 여러과제를 각각 할당받아 처리 가능하다
• 개발과정중에 신속하게 제품 변경이 가능하다

단점

• 서비스 수정에 빠른 이해도와 빠른 작업력이 필요하다
• 빈번한 수정사항으로 번거로움이 발생할 수 있다.

function 키워드를 가지고 정의함

function main() { 
    return 'function';
};

• 함수 선언식과 함수 표현식으로 정의할 수 있다.
• js에서 모든 함수는 실행 될때마다 함수 내부에 this라는 객체가 추가됨
• this에 바인딩할 객체가 정적으로 결정되는 것은 아니고, 함수를 호출할 때 함수가 어떻게 호출되는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
• arguments 사용 가능

일반 함수에서 this가 바인딩 되는 상황

• 함수 실행시에는 전역(window) 객체를 가리킨다.
• 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
• 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

const main = () => 'function';

• 문법이 간결하다
• 자체적으로 가리키는 this가 없다.
• 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
• 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다
• arguments 사용 불가 / rest 파라미터를 사용하면 사용가능하다

차이점

• 문법의 차이
• 가장 큰 차이점인 this와 arguments바인딩 방식 차이
• 화살표 함수는 new로 호출이 불가하다

자바스크립트에서 함수를 정의하는 방법

1. named function declaration (명명 함수 선언)

   function hello() {
   // ...
   }

2. anonymous function expression (익명 함수 표현)

   var hello = function () {
   //...
   }

3. named function expression (명명 함수 표현)

   var hello = function originalName() {
   // ...
   }

4. Immediately-invoked expression (즉시 실행 표현)

   var hello = (function () {
   //...
   })()

5. function constructor

   var hello = new Function()

6. arrow function (화살표 함수)

   var hello = () => {
   //...
   }

   
   

함수 선언식

함수 선언은 function으로 시작한다

function foo() {
    return "이것은 함수입니다.";
}

• 선언 된 함수는 나중 사용을 위해 저장되며, call 될 때 실행된다.

  foo();

함수 표현식

함수가 변수로 저장될수 있다

var x = function (a, b) {return a * b};

• 함수 표현식이 변수에 저장되면, 변수는 함수처럼 사용할 수 있다.
• 변수에 저장된 함수는 함수명이 필요 없으며, 변수 이름을 통하여 호출된다.

차이

• 함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 인터프리터가 해당 코드 줄에 도달할 때만 로드된다.
• 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
  • 함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
• 일반적으로 두표현식을 같이 사용할 수 있지만, 함수표현식은 함수 이름이 필요없기에 가독성이 더 높다는 장점이 있다.

즉시 실행 함수(IIFE)

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

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

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

• 소괄호(())로 함수를 감싸서 실행하는 문법을 사용한다.
• 즉시실행함수에도 이름을 붙여 기명 즉시실행함수로 사용 할 수 있다.
• 즉시실행함수는 선언과 동시에 호출되어 반환되어 재사용 할 수 없기 때문에 이름을 지어주는 것이 의미가 없다.

사용 이유

• 필요없는 전역 변수의 생성을 줄일 수 있다.
• private한 변수를 만들 수 있다.

일반함수vs화살표함수 즉시실행함수

멘토링 시작

시작과 동시에 내 주변은 세상 고요했다. 저녁시간이기도 했고 요일이 가져다 주는 적막함도 있었다.

먼저 다가갈까 한참 고민하던 중 한 개발자분이 다가오셔서 질문 타임이 시작되었다.

질문

🙋‍♂️ 업로드한 이미지를 이용해 fromData를 만들고, react query를 사용해 데이터를 서버에 보내고싶어요.

• 개발자님이 만든 데이터가 원하는 모양새로 만들어졌는지 확인해보셨나요?
• (머릿속에 그린 로직을 순차적으로 진행하면 막히는 부분에 집중해서 해결할 수 있어요!)
• 사용하고 있는 메서드의 사용법이 작성하신 코드가 맞나요?
• (제가 에러, 라이브러리, 메서드를 서치하는 방법에 대해 공유해드렸어요!)

질문에 있어 정답 보단 모르는 것을 어떻게 풀어나갈지에 초점을 두고 멘토링을 이어나갔다. 그러다보니 아무래도 결과를 도출해내는 시간이 오래걸렸다. (결국 나혼자 해결해내야하는 것들이 많은데 당장의 정답보단 해결방법을 공유하는게 훨씬 좋다고 생각했음..!) 그리고 그 시절 나를 생각해봤는데 나의 멘토링 방식이 많이 답답하셨을 것 같다(ㅎㅎ…ㅋㅎ) 정답과 방법 그 중간 어딘가쯤으로 조율을 잘 해봐야겠다☘️

키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다

• 자바스크립트는 객체기반의 스크립트 언어이다
• 원시타입(숫자, 문자열, 불리언, undefined)을 제외한 나머지 값들(함수, 배열, 정규표현식 등) 즉, 자바스크립트를 이루고 있는 거의 모든것이 객체이다.
• 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 없다.
• 프로퍼티 값이 함수일 경우 '메소드'라 부른다.

함수와 메서드의 차이점

• 호출방식의 차이
• 재사용가능여부

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
}

함수

object type중의 하나로서 반복하여 사용되는 독립된 명령

• 객체에 속하지 않고 독립적으로 존재함
• 자바스크립트에서 일급 객체로 취급되어 변수에 할당, 다른 함수에 전달, 함수에 반환할 수 있다.
• 재사용이가능하다

메서드

객체 내부에 정의된 함수

• 객체의 프로퍼티에 할당된 함수로, 해당 객체의 상태를 조작하거나 동작을 수행하는데 사용함
• 재사용이 불가능하다
• 클래스 함수 라고도 부른다

자바스크립트에서 객체 생성 방법

1. Object() 객체 생성자 함수 사용

• 자바스크립트에 내장되어 있는 Object() 생성자 함수 를 사용하는 방법

2. 객체 리터럴 방식

• {} 를 사용하여 객체를 생성

3. 생성자 함수 사용

• 함수를 통해서 객체를 생성하는 방식

함수,메서드

브라우저에서 제공하는 도구로써 웹사이트 디버깅을 빠르게 할 수 있도록 도와준다.

• 운영체제의 종류마다 개발자 도구를 여는 방법이 다르다.
• 브라우저마다 개발자 도구가 있다.
• 개발자도구에는 여러 패널들이 존재한다. (elements, console, source, network, application...)

elements

로딩 된 웹페이지의 요소와 스타일 검사 및 편집이 가능하다.

• DOM과 Css를 편집해서 볼 수 있지만 수정 요소가 저장되지는 않는다.

console

웹페이지에서 발생하는 메세지를 확인할 수 있다.

• 에러를 확인하거나 console.log() 메서드의 실행 결과를 확인하는데 쓰인다.
• 자바스크립트 코드를 입력해 실행해보거나 페이지를 제어할 수 있다.

source

로딩 된 페이지의 자바스크림트 코드를 디버깅 할 수 있다.

• 웹페이지에 포함된 모든 리소스를 열어볼 수 있다.

network

로딩 된 웹페이지에 관련된 모든 네트워크 요청 정보와 성능을 확인 할 수 있다.

• 웹페이지에서 통신하고 있는 모든 정보가 표시되는 곳이며 http 네트워크 통신, 페이지 로딩 성능 테스트, 이미지 영상 등의 소스 확인이 가능하다.

application

WebStorage, Session, Cookies를 확인하고 관리할 수 있다.

웹스토리지

쿠키와 비슷하게 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능이다.

세션스토리지

window.sessionStorage 객체

• 브라우저를 닫을 시 데이터가 삭제된다.
• 동일한 탭이여도 다른 도메인이면, 다른 세션 스토리지가 생성된다. (탭/윈도우 단위로 세션 스토리지가 생성된다.)
• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
• 윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)

로컬스토리지

window.localStorage 객체

• 사용자가 직접 데이터를 지우지 않는 이상, 데이터를 유지할 수 있다
• 도메인별로 생성되고, 다른 도메인의 로컬스토리지에 접근 불가하다
• 서로다른 탭이여도 동일한 도메인이면 공유한다.
• 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 입력 폼 저장, 일회성 로그인 등)

데이터 저장하기

localStorage.setItem('key', 'value')
sessionStorage.setItem('key', 'value')
setcookie('key', 'value', '지속시간(초단위)')

저장된 데이터 가져오기

localStorge.getItem('key')
sessionStorage.getItem('key')
document.cookie

세션스토리지, 로컬스토리지 차이

• 로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
• 로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체 사용

코드 내에 함수를 사용하여 명시적으로 타입을 변환하는 명시적 형변환 비교, 산술, 논리연산자 이용시 JS엔진이 필요에 따라 자동으로 타입을 변환함

명시적 타입 변환이란? (명시적 형변환 explicit coercion)

어떤 자료형으로 선언된 변수를 다른 자료형으로 변환하는것을 말함

• 묵시적 형 변환과 비슷하지만 큰데이터에서 작은 데이터로 변환될 때 일부를 잘라서 작은 데이터 크기로 맞춰주는것을 말함

명시적 타입의 변환 형변환 함수

1) String Type

String() : 인자를 문자열로 변환한다. toString() : 인자로 기수를 받을 수 있다.

//String
String(22) // "22"

//toString
const foo = 22;
foo.toString()  //”22"
foo.toString(2) // "10110"

2) Number Type

Number() : 인자를 숫자로 변환한다. parseInt() : 인자를 정수형의 숫자로 변환한다. 이때 인자가 숫자 0으로 시작할 경우 8진수로 변환하고, 0x로 시작한다면 16진수 숫자로 변환한다. 또한 앞 부분에 공백 뒤에 문자가 나오는 경우 NaN을 반환한다.

//Number
Number("123")  //123

//parseInt
parseInt(333.234) //333
parseInt(0134) // 92 (8진수)
parseInt(0x1b) // 27 (16진수)
parseInt(  "가나") //NaN

3) Boolean Type

Boolean : 인자를 불리언 값으로 변환한다.

Boolean("1") //true

//falsy value
값이 없는 경우
0
-0
null
false
NaN
undefinded
""

암묵적 타입 변환이란? (암시적 형변환 implicit coercion)

대입 연산 혹은 산술연산에서 컴파일러가 자동으로 타입을 변환함

(비교, 산술, 논리연산자 이용시 JS엔진이 필요에 따라 자동으로 타입을 변환함)

• 데이터 손실이 최소화되는 방향으로 변환이 진행됨
• JS에서는 정해지지 않은 값 유형을 예상되는 유형으로 강제 변환하려는 성질을 말한다 -> 이로 인해 사용자는 숫자 값을 넘겨야하는 곳에 문자열을 넣을 수도있고, 문자열을 넣어야하는 곳에 객체를 넘기는 실수를 할수도있다.

• JS의 주요기능이긴하나, 가장피해야 할 기능이다.

암묵적 타입 형변환

1) String Type

연산자 사용 시 피연산자 중 문자열이 하나라도만 있으면 String Type으로 변환된다. undefined 나 null도 문자열로 변환된다.

const bar = {
  toString: () => ' promise is a boy :)'
};
1 + bar; // "1 promise is a boy :)"

2) Number Type

연산자를 제외한 산술 연산자(-, /, *, >, < 등) 사용시 Number Type으로 변환된다.

3 * '3'; // 9
1 + '2' + 1; // 121

숫자 이외의 글자가 들어있는 문자열, 배열 및 undefined는 숫자 타입으로 변환되지 않고 NaN(Not a Number)을 반환한다.

4 * []; // 0
4 * [2]; // 8
4 + [2]; // "42"
4 + [1, 2]; // "41,2"
4 * [1, 2]; // NaN

3) 엄격하지 않은 동등 비교 (==)

true == 1;    // true  (true를 1로 변환) 
false == 0;   // true  (false를 0으로 변환)
'1' == true;  // true  ('1'를 true로 변환)
'1' == 1;     // true  ('1'를 1로 변환)

truthy / falsy 값

truthy

자바스크립트에서, truthy인 값(참 같은 값) Boolean(불리언) 문맥에서 true로 평가되는 값이다.

• falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다.

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

falsy

falsy인 값(거짓 같은 값)은 Boolean 문맥에서 false로 평가되는 값이다

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

암시적 형변환 JS의 형변환 truthy / falsy

프로그래밍 언어에서 여러 종류의 데이터를 식별하는 분류를 말한다. 즉, 변수에 저장되는 값의 종류

• 데이터를 종류에 따라 분류하여 저장하기 위해 데이터 타입 필요
• 자료형 또는 데이터 타입이라 불림

데이터 타입의 종류

1. 기본 타입(원시 타입: Primitive Type)

변경 불가능한 값으로 객체를 제외한 모든 타입은 불변 값을 정의할 수 있다.

숫자(number)

• ECMAScript는 Number와 BigInt 두 가지의 내장 숫자 타입을 가지고 있다
• JS는 모든 수를 실수로 처리한다.
• 메모리에 64비트 부동소수점 형식의 2진수로 저장한다
• 메모리에 있는 어떤 형식의 값을 참조하든지 모두 10진수로 해석한다
• 숫자 외에 추가로 특별한 값 3가지를 가지고 있음
  • Infinity: 양의 무한대
  • Infinity: 음의 무한대
  • NaN: 산술 연산 불가 (not-a-number)

문자열(string)

• 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.
• JS의 문자열은 원시타입이며, 변경 불가능한 값이다.
• 작은따옴표(''), 큰따옴표(""), 템플릿 리터럴(``)으로 문자열을 할당할 수 있다.
• ES6부터 도입된 템플릿 리터럴을 이용하면, 줄바꿈이나 공백이 모두 적용된다.

불리언(boolean)

• true or false

undefined

• undefined 타입의 값은 undefined가 유일하다.
• 개발자가 의도적으로 할당하기 위한 값이 아니라, 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다.
• 변수를 참조했을 때 undefined가 반환된다면, 참조한 변수가 선언 이후 값이 할당된 적이 없는, 초기화되지 않는 변수이다

null

• null 하나의 값만 가질 수 있다.
• 변수에 null을 할당하는 것은 변수가 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거
• 변수에 이전 참조값을 더이상 참조하지 않겠다는 의미
• 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환함

심벌(symbol)

• ES6부터 새로 생긴 데이터 타입
• 변경불가능한 유일한 값을 생성할 때 사용하며, 값 자체의 확인이 불가하여 외부로 노출되지 않는다.
• 다른 값과 중복되지 않는 유일한 값이다
• Symbol 함수를 호출함으로써 생성할 수 있다. 다른 타입들과 다른 점은 new 연산자를 이용한 래퍼 객체의 생성이 불가능하다.

  //에러
  const sym = new Symbol();// Uncaught TypeError: Symbol is not a constructor
  //const sym1 = Symbol()
  var sym_01 = Symbol('key');
  console.log(typeof sym_01); // symbol

템플릿 리터럴

• ES6에 도입된 새로운 문자열 표기법으로, 런타임에 일반 문자열로 변환되어 처리된다
• 백틱을 통해 문자열을 생성한다
• 줄바꿈, 표현식 삽입${ }의 기능을 한다

2. 참조 타입(객체 타입: Object/Reference Type)

원시타입을 제외한 모든 것은 객체타입이며 변경가능한 값이다.

• 데이터 크기가 정해져 있지 않다
• 변수에 할당될 때 값이 직접 해당 변수에 저장되는 것이 아니라 , 변수의 값이 저장된 힙 메모리의 주소값을 저장한다.
• 변수가 가지고 있는 메모리 주소를 이용해 변수의 값에 접근한다.
• 주소값을 참조하기 때문에, 원본 데이터의 값이 바뀌면 복사한 데이터의 값도 변경된다.
• 객체, 배열, 함수, 정규표현식도 모두 객체다.

데이터 타입의 필요성

1. 값을 저장할 때 확보해야하는 메모리 공간의 크기 결정

• 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야한다.
• 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다.

  2. 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 알기 위해

• 값을 참조할 때도 한번에 읽어 들여야 할 메모리 공간의 크기. 즉, 메모리 셀의 갯수(바이트)를 알아야한다.
• 컴파일러 또는 인터프리터는 심벌 테이블이라고 부르는 자료 구조를 통해 식별자를 키로 바인딩된 값의 메모리 주소, 데이타 타입, 스코프 등을 관리 한다.

  3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

• 모든 값은 2진수. 즉, 비트의 나열로 저장된다.
• 값은 데이터 타입에 따라 다르게 해석될 수 있다.

정적 타이핑

변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 데이터타입을 사전에 정의한다.

• 시점: 변수선언시점 변수의 타입결정
• 타입변경: 변수의 타입을 변경 하지 못함, 미리 변수에 선언한 타입에 맞는 값만 할당 가능하다
• 컴파일언어가 많다 (C, C++, JAVA, Kotilin, Go, Haskell, Rust, Scala)
  • 컴파일 시점에 타입 체크한다 : 선언한 데이터타입에 맞는 값을 할당했는지 검사 ➡️ 에러발생 ➡️ 프로그램실행 막음
• javascript를 정적으로 사용하기위해선 typescript 사용 TypeScript, C, Java, C++, C#

동적 타이핑

변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다. 유연성⬆️ 신뢰성⬇️

• 시점: 값을 할당하는 시점에 변수의 타입이 동적으로 결정된다. (변수를 선언할 때 타입을 선언하지 않음) 값이 타입을 가짐! 그리고 그 값이 변수에 할당된 !
• 타입변경: 타입을 언제든지 변경 가능하다. 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.
• 인터프리터언어가 많다 (JavaScript, Pyton, PHP, Ruby, Lisp, Perl)
• javascript는 동적타이핑! Python, Ruby, Javascript

정적 타이핑과 동적 타이핑의 차이

• 타입 선업 시점
• 타입추론
• 재할당 가능여부
• 에러발생 시점

*동적 타입
- 변수의 타입 선언 없이 값을 할당.
- 변수에 값이 할당되는 과정에서 동적으로 타입을 추론.
- 변수의 타입 결정 이후에도 같은 변수에 여러 타입의 값을 교차하여 할당 가능.
- 사용이 간편하지만 코드 예측이 어려워 예상치 못한 오류 발생 가능성이 있음
*정적 타입
- 타입을 명시적으로 선언.
- 타입 결정 이후에는 타입 변경 불가능.
- 잘못된 타입의 값이 할당되면 에러 발생.

타입변환과 단축 평가

타입변환

개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 타입이 자동 변환되는 것 => 타입변경

명시적 타입변환

• 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법
  • 표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법. String(), Number(), Boolean()
  • 빌트인 메서드를 사용하는 방법
  • 암묵적 타입 변환을 이용하는 방법

암묵적 타입변환

• 자바스크립트 엔진이 표현식을 평가할 때, 개발자의 의도와 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 하는것
  • 문자열 타입으로 변환
  • 숫자 타입으로 변환
  • 불리언 타입으로 변환

단축평가

표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것 => 타입변경 x

논리 연산자를 사용한 단축평가

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

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

  'cat' || 'dog'   // cat
  false || 'dog'   // dog
  'cat' || false   // cat
  

'cat' && 'dog' // dog false && 'dog' // false 'cat' && false // false

#### 옵셔널 체이닝 연산자
- ES11에서 도입된 옵셔널 체이닝 연산자 ?
- 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고,
- 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 
```js
var elem = null;
var value = elem?.value;
console.log(value);   

null 병합 연산자

• ES11(ECMAScript2020)에 도입된 null 병합 연산자 ??
• 좌항의 피연산자 null 또는 undefined인 경우 우항의 피연산자를 반환하고,
• 그렇지 않으면 좌항의 피연산자를 반환한다.
• null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

  var foo = null ?? 'default string'
  console.log(foo);        // "default string"

동적, 정적 타이핑 동적, 정적 타이핑 차이 타입변환과 단축평가 JS vs TS

웹 환경에서는 클라이언트와 서버가 HTTP 프로토콜을 이용해 통신을 하는데, HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 쿠키와 세션이 사용된다.

위에서 말한 약점은 다음과 같다. HTTP 프로토콜 환경은 "connectionless, stateless"한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야한다.

비연결성 (connectionless)

클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버림

• TCP 연결을 맺고 클라이언트가 요청(Request)을 보내면 서버는 응답(Response)을 보내고 연결이 끊어진다.
• HTTP 1.1 버전으로 커넥션을 계속 유지하는 keep-alive 옵션이 디폴트이긴하나, HTTP 1.0 버전은 기본적으로 connectionless이다.

Stateless(무상태)

통신이 끝나면 상태를 유지하지 않음

• HTTP는 상태를 따로 저장하지 않는다. 즉, 연결이 끊어지는 순간 모든 상태 정보가 사라지게 된다.
• 따라서, 서버는 클라이언트가 첫 번째 통신 때 보낸 정보를 두 번째 통신 때 알 수 없다.

➡️ ex) 쿠키나 세션은 웹사이트에 로그인 한 후, 재접속시 이전 로그인 상태값을 유지할 수 있도록 할 수 있다.

쿠키(Cookie)

클라이언트(로컬)에 저장되는 키와 값이 들어있는 작은 데이터 파일이다

특징

• 쿠키는 클라이언트에 저장되어 필요시 정보를 참조하거나 재사용할 수 있다.
• 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.
• 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
• 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장가능하다.
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

구성요소

• 이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
• 값 : 쿠키의 이름과 관련된 값
• 유효시간 : 쿠키의 유지시간
• 도메인 : 쿠키를 전송할 도메인
• 경로 : 쿠키를 전송할 요청 경로

쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키 사용 예시

• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니

세션(Session)

일정 기간 동안 같은 사용자(클라이언트)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다.

• 클라이언트가 요청을 보내면, 서버의 엔진이 클라이언트에게 고유 ID를 부여함 => 이것이 세션이다.
• 세션ID로 클라이언트를 구분해서 클라이언트의 요구에 맞는 정보를 제공한다.
• 세션은 쿠키를 사용하여 비슷한 역할을 하고, 동작원리도 비슷하다. BUT 분명 다름
• 사용자 정보파일을 브라우저에 저장하는 쿠키와 달리 서버에서 저장,관리 된다
• 서버에서 클라이언트를 구분하기 위해 세션ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
  • 물론, 접속시간에 제한을 두어 일정시간 응답이 없으면 정보가 유지되지 않게 설정 가능
• 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질 수록 서버 메모리를 많이 차지하게 된다.
  • 동시 접속자 수가 많은 웹사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이된다

세션의 동작 방식

1. 클라이언트가 서버에 접속 시 세션 ID를 발급 받음
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

세션 사용 예시

• 로그인 같이 보안상 중요한 작업을 수행할 때 사용

세션과 쿠키의 차이점

1. 정보 저장 위치

쿠키 : 브라우저 세션 : 서버

2. 보안성

쿠키 : 클라이언트 로컬(브라우저)에 저장되기 때문에 데이터가 변질되거나 request에서 스니핑 당할 우려가 있어 보안에 취약함 세션 : 쿠키를 이용해서 sessionid만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋음

3. 속도

쿠키 : 클라이언트 로컬에 데이터가 저장되어있기 때문에 빠름 세션 : 서버의 처리가 필요하기 때문에 비교적 느림

4. 라이프사이클(만료시간)

쿠키 : 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있음. 또한, 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때 까지 유지될 수도 있음 세션 : 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제됨. ex) 크롬에서 다른 탭을 사용해도 세션을 공유됨. 다른 브라우저를 사용하게 되면 다른 세션을 사용할 수 있음.

3. 속도

쿠키 : 브라우저에 데이터가 저장되어있기 때문에 빠름 세션 : 서버의 처리가 필요하기 때문에 느림

세션과 쿠키 쿠키와 세션

인터넷에서 데이터를 주고 받을 수 있는 프로토콜(= 규칙)

HTTP 프로토콜의 특징

1. Client와 Server 구조

클라이언트가 HTTP 메세지 양식에 맞춰 요청을 보내면, 서버는 HTTP 양식에 맞춰 응답한다.

• Client-Server 구조는 Request-Response 구조와 같은 것이다.
• Server에서 비즈니스 로직과 데이터를 Client에 독립적으로 처리할 수 있도록 만든 구조이다.
• 웹 브라우저와 웹 서버의 소통을 위해 디자인 되었다

2. 무상태성(Stateless)

HTTP에서는 서버가 클라이언트 상태를 저장하지 않는다. 따라서 응답과 요청이 독립적이다.

• 장점 : 서버 확장성이 높다. 무상태는 응답 서버를 쉽게 바꿀 수있기 때문에 무한한 서버 증성이 가능하다.
• 단점 : Request를 보낼 때 Client가 추가 데이터를 전송해야한다.

3. 비연결성(Connectionless)

실제로 요청을 주고 받을 때만 연결을 유지하고, 응답을 주고나면 (TCP/IP) 연결을 끊는다.

• 불필요한 연결을 하지 않아, 최소한의 자원으로 서버를 유지할 수 있다.
• HTTP 1.0 기준으로 HTTP는 연결을 유지하지 않는 모델이다.

HTTP/1.1 와 HTTP/2.0

HTTP/1.1

특징

• 기본적으로 Connection당 하나의 요청을 처리 하도록 설계
• 동시 전송이 불가능하고 요청과 응답이 순차적으로 이뤄짐
• HTTP문서안에 포함된 다수의 리소스(Images.CSS.Script)를 처리하려면 요청할 리소스 개수에 비례해서 Latency(대기 시간)이 길어짐 => 대기시간에는 동작을 수행 할 수없음

문제점

1. Pipelining의 HOL(Heod Of Line) Blocking 문제 위같은 상황을 해결하기 위해 나온 Pipelining 모델 Client는 응답에 상관없이 요청을 보내고 Server에서는 응답을 요청이 들어온 순서대로 보낸다. 이때 Client에서 응답의 순서가 잘못되거나 중간에 빠졌다면 누락이 발생한 요청을 다시보내게된다.

Client에서는 1,2,3 요청을 보냈는데, 서버에서 처리하는데 1번은 100초 2번은 20초 3번은 10초가 소요된다고 가정할때. 1번 응답을 먼저 보내야하므로 2,3번 응답은 계속 Blocking된다.

2. 연속된 요청간에 중복된 헤더들

HTTP/2.0

특징

• 성능에 초점을 두어 하나의 Connection에 여러개의 메세지를 동시에 주고 받을 수있음
• Multiplexed Streams: connection 한 개로 동시에 여러 개의 메시지를 주고 받을 수 있으며, 응답은 순서에 상관없이 stream으로 주고 받는다.
• Stream Prioritization: 리소스 간의 의존관계에 따른 우선순위를 설정하여 리소스 로드 문제를 해결함 ex. 문서 내에 CSS파일 1개와 이미지 파일 2개가 존재하고 이를 클라리언트가 요청하는 상황에서 이미지 파일보다 CSS 파일의 수신이 늦어진다면 렌더링에 문제가 생기게 되는데 이를 해결함.
  • Server Push : 클라이언트가 요청하지 않은 리소스를 서버가 사전에 푸쉬를 통해 전송할 수 있다. ex. 푸쉬가 가능하면 클라이언트가 추후에 HTML문서를 요청할 때 해당 문서 내의 리소스를 사전에 클라이언트에서 다운로드할 수 있도록 하여 클라이언트의 요청을 최소화할 수 있음
• Header Compression : 헤더 정보를 HPACK 방식으로 압축한다.

위 그림처럼 클라이언트가 요청을 두 번 보낸다고 가정하면, HTTP1.1의 경우 헤더 중복이 발생해도 중복 전송한다. 하지만 2.0의 경우 헤더에 중복이 있는 경우 Static/Dynamic Header Table 개념을 이용하여 중복을 검출해내고, 해당 테이블에서의 index값 + 중복되지 않은 Header 정보를 Huffman Encoding 방식으로 인코딩한 데이터를 전송한다.

공개키 (비대칭키) 방식이 뭔가요?

대칭키 암호화 방식은 암복호화에 사용하는 키가 동일한 암호화 방식을 말한다.

• 해당 키를 아는 사람이 문서를 복호화할 수 있게 된다.
• 공개키 암호화 방식에 비해 연산 속도가 빠르다는 장점이 있지만, 키를 교환해야 하는 문제가 발생한다.
• 키를 교환하는 중 키가 탈취될 수도 있다
• 사용자가 증가할수록 각각의 키가 필요하기에 관리해야 할 키가 방대하게 많아진다.

=> 이러한 문제를 해결하기 위한 방법으로 키의 사전 공유, 키 배포 센터 사용, Diffie-Hellman 키 교환, 공개키 암호화 방식이 있다

공개키 암호화 방식은 암복호화에 사용하는 키가 서로 다른 암호화 방식을 말한다.

• 효율은 떨어지지만, 대칭키 암호화 방식의 키를 교환해야 하는 문제를 해결하기 위해 등장했다.

예시로 A가 B에게 데이터를 보낸다고 할 때, A는 B의 공개키로 데이터를 암호화해서 보내고 B는 본인의 개인키로 해당 암호화된 데이터를 복호화해서 보게 된다. 암호화된 데이터는 B의 공개키에 대응되는 개인키를 갖고 있는 B만이 볼수 있게 된다. 공개키는 키가 공개되어 있기 때문에 따로 키 교환이나 분배를 할 필요가 없게 된다. 중간 공격자가 B의 공개키를 얻는다고 해도 B의 개인키로만 복호화가 가능하다.

-> 키 전달 문제를 해결하여 더 안전하지만, 암호화와 복호화를 위해 복잡한 수학 연산을 수행하기 때문에 대칭키 알고리즘에 비해 속도가 느리다는 단점이 있다.

HTTPS와 HTTP 차이

HTTPS(https://)는 SSL(Secure Socket Layer) 인증서를 사용하는 HTTP(http://)이다.

• SSL(또는 TLS) 인증서는 일반 HTTP 요청 및 응답을 암호화한다. 따라서 HTTPS는 HTTP보다 더 안전한 보안용 프로토콜이라고 할 수 있다.
• HTTPS를 사용한 웹 페이지를 통해 전송되는 모든 데이터는 추가적인 보안 계층이 있다. => 이를 TLS(전송 계층 보안) 프로토콜이라고한다.
• 모든 유형의 데이터는 변경되거나 손상될 수 없는 HTTPS 사이트를 통해 전달되며 제3자로부터 보호된다.

SSL: 보안 소켓 계층(Secure Sockets Layer)

서버와 브라우저 사이에(또는 두 서버 사이) 안전하게 암호화된 연결을 만들 수 있게 도와주고 서로 민감한 정보를 주고받을 때 정보가 도난당하는 것을 막아준다.

HTTPS

공개(비 대칭)키 방식으로 대칭키를 전달하고, 서로 공유된 대칭키를 가지고 통신하게 된다.

순서

1. A는 B의 공개키로 암호화 통신에 사용할 대칭키를 암호화해서 B에게 보낸다.
2. B는 암호문을 받고 자신의 비밀키로 복호화한다.
3. B는 A로부터 얻은 대칭키로 A에게 보낼 평문을 암호화하여 A에게 보낸다.
4. A는 자신의 대칭키로 암호문을 복호화한다.
5. 앞으로 해당 대칭키로 계속 통신한다. 즉, 사용자 측에서는 대칭키 알고리즘을 통해 안전하게 키 교환을 한 후 해당 키로 대칭키 알고리즘을 통해 통신하게 된다.

URL(Uniform Resource Locator) ?

사용자가 원하는 정보의 위치와 종류를 파악할 수 있도록 웹페이지의 정보 구조를 반영한 것

• 웹페이지의 정보 구조가 제대로 반영된 URL은 좋은 UX(사용자 경험)이며 이는 SEO(검색엔진최적화) 기획에서 중요한 지표이다.
• URL의 구성 및 구성 요소는 사용자 경험, SEO 외에도 해당 웹사이트의 보안에도 중요하다.

HTTP 특징 HTTP 특징2 연결성, 비연결성 HTTP1.1 / HTTP2.0 대칭키,공개키

하나의 값(데이터)을 저장할 수 있는 저장 공간(메모리 공간)이며, 메모리 공간을 식별하기 위해 붙인 이름이다.

식별자란?

어떤 값을 구별해서 식별할 수 있는 고유한 이름. (=변수 이름)

• 식별자는 값이 저장되어 있는 메모리 주소를 기억해야하기 때문에, 메모리 주소와 매핑관계를 맺는다. => 식별자의 기억은 값❌ 메모리 주소⭕️

식별자 네이밍 규칙은 어떤 것들이 있나요?

• 특수문자를 제외한 문자, 숫자,언더스코어(_),달러기호($)를 포함할 수 있다.
• 단, 특수문자를 제외한 문자, 언더스코어, 달러기호로 시작해야한다. 숫자로 시작하는것은 허용하지 않음
• 예약어는 식별자로 사용할 수 없다.

예약어란?

예약어는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다. 자바스크립트의 예약어는 다음과 같다.

await ,break ,class ,false ,for ,if ,this등등

네이밍 컨벤션은 어떤 것들이 있나요?

• 함수의 이름에는 카멜 케이스(Camel Case) : userList, newTodoList, firstName
• 생성자 함수, 클래스의 이름에는 파스칼 케이스(Pascal Case) : UserList, NewTodoList, FirstName

변수 선언이란?

변수를 생성하는 것

• 변수를 사용하기 위해선 반드시 선언이 필요하다.
• var, let, const 키워드를 사용해 선언한다.
  

호이스팅이란?

변수 또는 함수가 코드의 최상단으로 끌어 올려진 것처럼 동작하는 JS고유의 특징이다.

• 실제로 코드가 끌어올려진 것은 아니고, JS의 parser가 내부적으로 끌어올려서 처리한 것이다.
• var,jet,cinst,funtion,funtion*,class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다.
• 모든 선언문은 런타임 이전 단계에서 먼저 실행된다.
  

실행 컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아 놓은 객체

• JS는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게된다.

렉시컬 환경이란?

특정 코드가 작성, 선언된 환경(장소)을 의미

• 총 4개의 실행 컨텍스트(1개의 글로벌 실행 컨텍스트와 3개의 개별적 실행 컨텍스트)가 생성된다.
• 각각의 실행 컨텍스트는 하나의 개별적인 소우주이다.
• 바꿔 말하면, sayMyName 함수, fineName 함수, printName 함수의 렉시컬 환경은 global이다.
• 만약 findName()이라는 함수 내에 let yourName = 'blahblah'라고 선언되어 있다면, 변수 yourName의 렉시컬 환경은 findName이다.

🔅 어떤 변수나 함수의 값은 '어디에서 선언했는지', 즉 렉시컬 환경이 어디인지가 중요!

• findName 함수는 글로벌 실행 컨텍스트, 즉 global 함수 내에서 선언이 되어있다.
• findName 함수의 렉시컬 환경은 글로벌 실행 컨텍스트
• 글로벌 실행 컨텍스트 내에 존재하는 global이라는 객체 내의 property로 지정되어 있다.
• findName, printName, sayMyName 함수 모두 global 객체의 property 중 하나이다.

TDZ란? (Temporal Dead Zone)

스코프의 시작과 초기화 시작 사이의 구간을 의미한다. 즉, 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간

• TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않는다. 그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 된다.
  

JS 변수 생성 단계

1. 선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다. 초기화 전까지는 TDZ 상태이다.
2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 undefined다. myValue = undefined
3. 할당(Assignment): 변수 객체에 값을 할당한다. myValue = 150

var 키워드

• es5까지 변수를 선언할 수 있는 유일한 방법이였다.
• 중복선언이 가능하다.
  • 문제점: 동일한 이름의 변수가 선언 될 경우 먼저 선언된 변수 값이 변경됨
• 함수레벨 스코프
  • 문제점: 오로지 함수의 코드 블록만 전역 스코프로 인정됨

    var x = 1;
    if (true) {
    //x는 전역변수이다. 이미 선언된 x가 있으므로, x변수는 중복선언됨.
    var x = 10;
    }
    console.log(x); // 10

• 변수 호이스팅
  • 변수 선언문이 스코프의 맨앞으로 끌어 올려져서 동작함
    • 변수의 메모리 공간을 선언전에 미리 할당하는 것.
    • 에러는 안나지만, 가독성을 떨어뜨리고 오류를 발생시킬 수 있다.

      // 변수 호이스팅에 의해 foo 변수 선언 (1. 선언 단계)
      // undefined로 초기화 (2. 초기화 단계)
      console.log(foo); // undefined
      // 변수에 값 할당 (3. 할당 단계)
      foo = 123;
      console.log(foo); // 123
      // 변수 선언은 런타임 이전에 js 엔진에 의해 암묵적으로 실행됨 (값 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됨!)
      var foo;

let 키워드

• 중복 선언 금지

• 블록 레벨 스코프

  • 모든 코드 블록(if문, for문, while문 등)을 지역 스코프로 인정

• 변수 호이스팅이 발생하지 않는 것처럼 동작

  • 선언단계와 초기화 단계가 분리되어 진행됨
    • 런타임 이전에 js 엔진에 의해 암묵적으로 선언 단계 진행 > TDZ 단계 > 초기화 > 할당
    • 초기화는 변수 선언문에 도달했을 때 실행됨 (var 키워드로 선언한 변수는 선언 즉시 undefined로 초기화)
  • 자바스크립트는 let, const를 포함한 모든 선언을 호이스팅함! 호이스팅이 발생하지 않는 것처럼 동작할 뿐

  console.log(foo); // ReferenceError: foo is not defined
  let foo;
  console.log(foo); // undefined
  foo = 10;
  console.log(foo); // 10

const 키워드

• 상수(재할당이 금지된 변수)를 선언하기 위해 사용
  • 상수는 상태 유지, 가독성, 유지보수의 편의를 위해 적극적으로 사용할 것
  • 일반적으로 대문자로, 스네이크 케이스로 표현 (ex. const TAX_RATE = 0.1; )
• let 키워드와 대부분 동일한 특징을 가짐
  • 블록 레벨 스코프
  • 변수 호이스팅이 발생하지 않는 것처럼 동작
• let과의 차이점
  • 선언과 동시에 초기화해야 함
  • 재할당 금지
  • 하지만 const 키워드로 선언된 변수에 객체를 할당한 경우 값 변경 가능 (재할당을 금지할 뿐 불변은 아님)
  • 객체는 원시값과 달리 재할당 없이도 직접 변경이 가능하기 때문 → 참조값은 변하지 않음

    const person = { name: 'Lee', age: 20 }
    person.name = 'Won';
    console.log(person); // { name: 'Won', age: 20 }

let VS var VS const

• 변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.
• const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 좀 더 안전하다. ``` 권장사항
• ES6를 사용한다면 var 키워드는 사용하지 않는다.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전하다.

  <br />
  

리터럴이란?

데이터(값) 자체를 의미. 즉, 변수에 넣는 변하지 않는 데이터를 의미한다

const a = 1; a는 상수 (= 메모리 위치(공간)이며, 메모리 값을 변경할 수 없다) 1은 리터럴 (= 메모리 위치(공간) 안에 저장되는 값)

리터럴 표기법이란?

코드 상에서 데이터를 표현하는 방식을 리터럴이라 하고, 변수를 선언함과 동시에 그 값을 지정해주는 표기법을 의미한다.

var no = 3; var obj = { name: 'JY', age: 20 };

데이터 타입이란?

변수에 저장하는 데이터 종류를 말한다.

• 정적 타입 언어(static typed language) : 변수에 타입이 있는 언어
• 동적 타입 언어(dynamic typed language) : 변수에 타입이 없는 언어

JS는 동적 타입 언어로 모든 타입에 데이터를 저장할 수 있고, 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있다.

데이터 타입 분류

원시타입 : 값을 그대로 할당

• Number
• String
• Boolean
• null
• undefined
• +ES6: Symbol

  참조타입 : 값이 저장된 주소값을 할당 (참조타입 데이터의 집합체)

• Object
• Array
• Function
• RegExp(정규표현식)
• +ES6: map, set, weakmap, weakset

실행컨텍스트 데이터타입

정적인 HTML문서를 프로그램 구현을 통해 동적페이지로 변경하거나 사용자와의 상호작용을 담당한다

특징

• JS로 작성한 프로그램을 script라고 부른다

  • script는 웹페이지의 html 안에 작성할 수 있으며, 웹페이지를 불러올 때 script가 자동으로 실행된다.

• JS는 브라우저 뿐만아니라 서버에서도 실행가능하다(Node.js)

  • JS엔진이 들어있는 모든 디바이스에서도 동작한다.

  • node.js 환경) 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.

  • 브라우저 환경) 웹페이지 조작, 클라이언트-서버 간 상호작용에 관한 모든 일을 한다.

• 일반 프로그램언어와 비슷한 구조를 가지고있다

• 동적이며 타입을 명시할 필요가 없는 인터프리터 언어이다

• 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다

• HTML의 내용,속성,스타일을 변경할 수 있다

• 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다

• AJAX 기술을 이용하여 서버와 실시간 통신 기능을 제공한다

• ECMAScript 문법을 통해 브라우저마다 표준화된 JS를 동작시킬 수 있다

자바스크립트 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터이다

ex) 구글의 V8(node.js에서도 사용함), 파이어폭스의 SpiderMonkey

자바스크립트 엔진 특징

브라우저마다 다른 엔진을 사용한다

구성요소

1. 메모리힙

데이터 메모리 할당이 일어나는 곳

• 데이터 임시저장, 변수 선언, 함수 저장, 호출 등의 작업이 발생하는 공간이다.
• 가비지 컬렉션이 메모리를 자동으로 관리하고 사용하지 않는 메모리는 자동으로 해제한다.

메모리힙 작동 예시 const num1 = 531; 라는 코드는 num1이라는 변수를 위해 메모리 공간을 할당하고, 그 공간에 531이라는 값을 할당하는 것

가비지 컬렉션(Garbage Collection)

쓸모 없어진 객체가 차지하는 메모리를 자동으로 해제하는 것

동적 할당된 메모리 영역(메모리힙) 가운데 더 이상 사용할 수 없게 된 영역을 탐지하여 자동으로 해제하는 기법이다. 여기서 더 이상 사용할 수 없게 된 영역이란, 어떤 변수도 가리키지 않게 된 영역을 의미한다.

2. 콜 스택(호출스택)

코드가 실행될 때마다 호출 스택이 쌓이는 곳

• 코드를 읽어내려가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간이다.
• 실제로 코드를 실행했을 때, 다음에 실행되어야 할 코드를 순서대로 기록을 하며, 순차적으로 코드를 실행할 수 있게 도와준다. 즉, 기본적으로 우리가 프로그램 상에서 어디에 있는지를 기록하는 자료구조이다.
• 호출 스택은 전역함수 -> 지역함수 순으로 쌓인다. 즉, 전역함수가 제일 먼저 호출 된 후, 지역함수가 순차적으로 쌓이게 된다.

콜스택 실행 순서 함수를 실행하면 > 그 함수가 콜스택의 가장 상단에 위치하게 된다.(선입후출) > 함수의 실행이 종료되면 > 그 함수는 스택에서 제거(pop)된다.

호출 스택의 각 단계를 스택프레임이라고 한다.

Call Stack은 정해진 스택 사이즈가 존재하고, 하나씩 쌓이기 때문에 정해진 용량을 초과하면 에러가 발생된다. 이것을 Stack Overflow라고 한다.

기본적으로 자바스크립트는 하나의 Call Stack을 가지고 코드를 순차적으로 처리하기 때문에 (싱글)단일 스레드이며 동기식 언어라고 할 수 있다. 한번에 한가지 작업만 실행하기 때문에 무한루프는 발생할 수 있어도 동기화 문제인 데드락은 발생할 수 없다.

이렇게 하나씩만, 그것도 순서대로 처리하는 자바스크립트 런타임에서 어떻게 비동기처럼 보일까 ? 처리가 오래걸리는 함수(event)를 효율적으로 관리할 수 있는 방법 ? 정답은 JavaScript 런타임에서 제공하는 비동기 콜백을 만드는것은 이벤트 루프이다.

자바스크립트 엔진 동작원리

자바스크립트를 웹 브라우저에서 작동하기 위해서는 JS 엔진, Web APIs, Callback Queue(Task Queue), Event Loop 영역이 필요하다

실행 순서

1. 코드가 Call Stack에 쌓인 후, 비동기 함수는 Web API에게 위임한다
2. Web API는 비동기 작업을 수행하고, 콜백 함수를 Callback Queue에 push한다
3. 이벤트 루프는 Call Stack에 비어있을 때, Callback Queue에 대기하고 있던 콜백 함수를 콜스택으로 push한다
4. 콜스택에 쌓인 콜백 함수가 실행되고, 콜스택에서 pop 된다

JS 엔진

JS 엔진에서는 콜스택을 이용하여 동기적으로 요청을 처리하고 나머지 영역에서 웹브라우저 환경 속에서의 자바스크립트가 비동기적으로 처리할 수 있게 지원해주는 역할을 한다

Web APIs

브라우저 자체에서 제공하는 api로, 비동기 작업등을 실행할 수 있는 DOM, Ajax, setTimeout 등이 있다

Web APIs는 JS엔진 밖에 존재하며, 자바스크립트를 비동기적으로 작동시킬 수 있다.

Callback Queue(Task Queue)

비동기 적으로 실행된 콜백함수가 보관되는 영역, 선입선출로 출력된다.

• Web API에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간이며, 이벤트 루프가 정해준 순서대로 위치하게 된다. ex) setTimeout에서 타어머가 완료 되고 실행되는 함수(첫번째 인자), addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(두번째 인자) 등이 저장된다

  • Task Queue setTimeout, setInterval, setImmediate, I/O, UI 렌더링 등의 콜백 함수가 저장된다.
  • ** MicroTask Queue** ES6에 들어오면서 새로운 컨셉인 MicreTask Queue가 도입되다. Promise, Object.observe 등의 콜백 함수가 저장된다.
  • Animation Frames requestAnimationFrame 콜백 함수가 저장됩니다

• Event Loop에서 콜백 함수를 꺼내서 처리할 때 우선순위는 Microtask Queue -> Animation Frames -> Task Queue

  
  

Event Loop

콜스택을 사용하는 자바스크립트 엔진과 상호연동하기 위해서 사용하는 장치

• 이벤트 루프를 통해서 동시성을 지원받을 수 있다.
• 이벤트 루프는 Call Stack과 Callback Queue를 감시하여, Call Stack이 비어있을 경우 Callback Queue에서 함수를 꺼내 Call Stack에 추가하는 기능을 한다.
• 이벤트 루프가 Callback Queue에서 Call Stack으로 콜백 함수를 넘겨주는 작업은 콜스택에 쌓여있는 함수가 없을 때만 수행한다. => 이와 같은 반복적인 행동을 틱(tick)이라고한다.

* 이벤트 루프가 반드시 Call Stack이 비어져있는 상태에서만 Call Stack으로 Push 하는 이유는 ? 자바스크립트가 싱글 스레드 언어이면서 동기화 문제를 피하기 위함이다. ex) Call Stack에서 어떤 함수를 잘 처리하도 있는데 갑자기 이벤트 루프가 새로운 함수를 보내면 작업중이던 함수를 중단하고 새 함수를 처리해야한다. => 이 경우 예상한 결과값을 도출해내지 못한다

• requestAnimationFrame : 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출한다. 이 메서드는 리페인트 이전에 실행할 콜백 인자로 받는다

• Parser : 파서는 컴파일러의 일부로서 컴퍼일러나 인터프리터에서 원시프로그램을 읽어들여, 그 문장의 구조를 알아내는 구문분석을 행하는 프로그램이다.
• AST : 컴파일러를 만들 때 사용하는 데이터 자료구조다

자바스크립트 기초 자바스크립트 엔진 동작원리 자바스크립트 런타임 자바스크립트 엔진의 실행방식 JS 런타임 이벤트 루프

인터넷에서 웹 서버의 모든 정보를 통신하여 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램

• HTML문서, 이미지, 폰트 등 사용자가 선택한 자원을 전송 및 표현하는 응용 소프트웨어
• 웹브라우저마다 다른 렌더링 엔진을 가지고 있다 ex) Google Chrome(Webkit -> Blink), Apple Safari (Webkit), Naver Whale, Microsoft Edge
  ### 브라우저 구성요소

(1) 사용자 인터페이스

브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄, 뒤로 가기 버튼, 플러그인 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤할 수 있는 부분.

(2) 브라우저 엔진

사용자가 주소창에 입력한 URI 값을 렌더링 엔진에게 전달해주는 역할을 한다. 또 새로고침, 뒤로 가기 버튼을 눌렀을 때 그 명령 또한 렌더링 엔진에게 전달.

(3) 자료 스토리지

자료를 저장하는 레이어다. 쿠키나 세션 등 모든 종류의 자원을 하드디스크에 저장한다.

HTML5 명세에는 브라우저가 지원하는 웹 데이터베이스가 정의.

(4) 렌더링 엔진

사용자가 URI를 입력→ URI에 해당하는 데이터를 네트워크 레이어에 전달→ 응답으로 받은 리소스 또는 스토리지에 캐싱된 리소스를 가져와 인터프리터, UI 백엔드에 전달

또 HTML, CSS 코드를 파싱 해서 렌더 트리를 구성해 전달해 주는 등의 총체적인 역할

(5) 네트워크 레이어

렌더링 엔진으로부터 HTTP 요청을 받아서, 서버에게 요청→ 응답 리소스를 받아 렌더링 엔진에게 돌려준다.

(6) 자바스크립트 인터프리터

• 자바스크립트는 html 태그를 동적으로 움직이는 역할을 수행
• 렌더링 엔진은 받아온 리소스 중에서 자바스크립트는 인터프리터에 주고, 나머지(HTML, CSS, image 등)를 파싱 하고 그림.
• 크롬에서는 v8이라는 엔진을 사용하여 자바스크립트를 파싱한다.

(7) UI 백엔드

렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할을 한다.

`유저 인터페이스` 주소표시줄, 이전/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용하는 곳
`렌더링 엔진` HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 곳
`브라우저 엔진` 유저 인터페이스와 렌더링 엔진을 연결하는 곳
`네트워킹` 각종 네트워크 요청을 수행하는 곳
`UI 백엔드` 체크박스 등 기본적인 위젯을 그려주는 곳
`자료(데이터) 저장소` localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 곳
`자바스크립트 해석기(인터프리터)` 자바스크립트 코드를 실행하는 곳 (크롬은 V8엔진을 사용한다)

브라우저렌더링 ?

브라우저는 크게 4단계를 거쳐 렌더링을 수행한다.

0. 접속

사용자 브라우저 접속

사용자가 > 브라우저 주소표시 줄에 url을 입력하면 > UI스레드는 입력된 내용이 검색어인지, url인지 확인하고 > 입력된 내용을 파싱하여 검색결과로 이동할지, 요청한 사이드로 이동할지 결정한다.

1. 요청 (Resource Downloading)

HTML, CSS, JavaScript와 같은 리소스를 서버에 요청 후 다운

사용자가 enter를 누르면 > (브라우저에서) UI 스레드가 네트워크 호출을 시작 > 네트워크 스레드는 서버로부터 웹사이트에 필요한 리소스를 요청 처리 > 응답 결과가 HTML 파일이면 > 응답결과를 렌더러 프로세스에 전달한다

2. 트리 구축

Document, CSS가 각 트리를 구축하고 이들을 결합한 렌더 트리 형성

2-1 브라우저의 렌더링 엔진은(렌더러 프로세스의 메인스레드) > 전달받은 HTML 문서를 파싱해 > DOM(Document Object Model)Tree 구축 (html문서에 있는 모든것들은 DOM을 구성하게 되고, DOM을 구성하는 각 노드는 서로 연관성을 가짐) 2-2 뒤이어 다운 받은 CSS파일과 함께 포함된 스타일 요소를 파싱해 > CSSOM Tree 구축 (CSSOM은 DOM이 어떻게 화면에 그려질지 알려주는 역할) 2-3 ** 만든 DOM 트리와 CSSOM 트리를 결합하여 **렌더트리 형성 > 렌더트리는 최종적으로 화면에 표시되는 모든 노드와 노드의 스타일 정보를 포함함

렌더트리는 - 렌더링 엔진이 만든다 - DOM트리의 최상단 document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아 규칙을 적용한다 > 그러면서 렌더와 관련된 요소들을 렌더트리에 포함시킨다 (렌더트리에 포함되지않는 것 : meta 태그, display:none)

*3. Layout *

페이지에 출력될 노드들의 크기와 위치, 레이어간의 순서 정보를 계산

브라우저의 자바스크립트 엔진에서 > JS는 > DOM API를 사용해 렌더 트리 변경, 리플로우 리페인트를 한다 (각 요소를 어디에 배치할 지 결정)

4. 페인팅

배치된 엘리먼트(노드)들에게 색을 입히고, 레이어 위치를 결정

[실제 그리기] 렌더트리를 기반으로 HTML요소의 레이아웃 계산, HTML 요소 페인팅을 한다. (HTML 문서의 최상위 요소부터 실행)

Critical Rendering Path

사용자 동작에 의해 자바스트립트가 실행되어 css의 변경 또는 애니메이션 재생이 일어났을때 3가지의 경우로 동작과정이 일어난다. (css별로 일어나는 동작과정은 모두 다르다 ! 이를 통해 성능 최적화를 시킬 수 있음)

리플로우 reflow?

요소의 크기나 위치가 바뀔때, 혹은 브라우저 창의 크기가 바뀌었을때 다시 발생한다.

• layout부터 paint 모두 재실행
• 레이아웃 수치를 다시 계산해서 바뀌고, 이에 맞춰서 페인트도 다시 해줘야하고, 레이어를 합성하는 과정까지 다 다시해야한다

리페인팅 repaint?

주로 배경이 이미지나 텍스트,색상, 그림자 등 레이아웃의 수치변화를 시키지 않는 스타일의 변경만 일어났을때 발생한다

• paint만 재실행하는 것
• 레이아웃변경이 일어나지 않기때문에 성능적인 이점이 있다

레이어의 합성

레이아웃과 페인트를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상 가장 큰 이점을 가짐

레이어 : 페인팅할 영역을 나누어 놓은 것

브라우저 렌더링 방식 2가지

CSR(Client Side Rendering)

서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트는 그것을 받아 랜더링을 시작하는 방식

장점 : 빠른속도와 서버 부하 감소, 변경된 부분의 데이터만 가져옴 단점 : 모든 파일이 다운로드 되고 랜더링이 끝나기 전까지 사용자가 볼 수 있는 게 없다. 적합한 상황 :

• 네트워크가 빠를때
• 브라우저에 노출될 데이터양이 많을 때
• 상호작용이 많은 웹사이트
• 사용자 경험을 높이고 싶을때
• 데이터가 개인정보고 구성되어 있을때

SSR(Server Side Rendering)

서버에서 렌더링 준비를 끝마친 상태로 클라이언트에게 전달하는 방식

장점 : 초기 로딩 속도가 빠름 단점 : 요청시마다 새로고침 => 페이지 전체를 새로 변경하기 때문에 깜빡임생김, 바뀔 필요가 없는 부분도 요청 적합한 상황 :

• SEO 최적화
• 최초 로딩이 빨라야할 때
• 상호작용이 별로 없는 웹사이트
• 네트워크가 느릴때
• 누구에게나 동일한 내용을 노출할때

크롬 브라우저 ?

웹브라우저 점유율이 가장 높다

빠르다

• 모든 작업을 빠르게 수행하도록 설계되어있다.
• 바탕화면에서 빠르게 시작할 수 있고 복잡한 웹 애플리케이션을 빠르게 실행할 수 있다.

안정적이다

• 기본적으로 제공되는 악성코드 및 피싱방지 기능을 사용한다.
• 최신 보안 수정사항 등을 자동으로 업데이트하여 안전하고 보호된 웹 환경을 유지한다.
• 온라인 상태에서 공유하는 정보를 보호하면서 개인정보를 안전하게 관리 할 수 있다.

다양한 기능을 제공한다

• 브라우저 설정을 간단하게 변경하고 크롬 웹스토어에서 앱, 확장 프로그램 및 테마를 추가 할 수 있다.
• 로그인 시 북마크, 기록 및 기타 설정을 모든 컴퓨터에서 동일하게 사용할 수 있다.
• 즐겨찾는 구글 서비스에 자동으로 로그인 할 수도 있다

사용자 친화적이다

• 간단한 인터페이스가 사용하기 쉽다

사파리 브라우저 ?

애플이 만들어낸 브라우저

특징

• 크롬 다음으로 점유율이 높다
• 사파리의 뉴스 기사 등을 읽을때 주위의 팝업창 등의 광고를 자동으로 안보이게 해주는 기능이있다.
• 크롬과 같은 엔진인 블링크를 사용한다
• 속도가 빠르다
• 상대적으로 메모리를 적게 먹는다
• 상대적으로 CPU를 적게 먹어 가볍게 돌아간다

보안

• 다운로드시 매번 확인을 거치고, 패스워드 자동입력도 인증을 거친다.
• 개발자 등록 심사도 깐깐함

애플 최적화

• 아이폰, 아이패드 등과 매끄럽게 연동된다.
• 트랙패드 최적화가 잘되어있다
• 맥의 경우 기본 탑재 브라우저이다.

렌더링 엔진 동작 과정

Parsing HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. Style 두 Tree를 결합하여 Rendering Tree를 만든다. Layout Rendering Tree에서 각 노드의 위치와 크기를 계산한다. Paint 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. Composite 레이어를 합성하여 실제 화면에 나타낸다.

웹 인터랙션 : 움직임이 있는 화면 및 액션. 즉, 웹상에서 움직임이 있거나 유저와 상호작용을 할 수 있는 화면 및 액션

브라우저 렌더링 테코톡 브라우저 렌더링 과정 브라우저 렌더링 방식 웹 브라우저의 종유와 특징 크롬 VS 사파리 블링크 vs 웹킷 display:none과 조건부렌더링 node

컴퓨터를 실행시키기 위한 방법이 차례대로 작성된 명령어 모음 (프로그래밍 = 컴퓨터 안에 있는 논리적인 기계)

즉,사용자 입력값을 처리 방법과 순서에 따라 처리하여 결과를 산출해내는 명령문 집합체

프로그래밍 실행 입력 > 수동적으로 적혀진 명령어대로 작동 > 작동된 명령에 대한 산출물만 나옴

프로그래밍 이란?

프로그램 언어를 이용해 프로그램을 만드는 일(구현의 모든 과정)

프로그램은 컴퓨터에게 내리는 명령어의 모음인데, 이 명령어의 모음을 만드는 일이 프로그래밍이다. 그리고 이 프로그래밍이 모여 소프트웨어가 된다. 명령어 모음(프로그램) > 명령어 모음 과정(프로그래밍) > 프로그램 모음 > 소프트웨어

프로그래밍 순서

문제 인식 > 프로그램 설계 > 프로그램 구현 > 테스트와 디버깅 > 프로그램 유지보수

1. 사용자로 부터 입력값 받음 (문제 인식)
2. 입력값으로 부터 수행해야하는 일을 판단함 (프로그램 설계)
3. 수행할 일의 처리 순서를 정함 (프로그램 설계)
4. 정해진 순서에 맞는 명령어를 선택함 (프로그램 설계)
5. 순서대로 명령어를 실행시켜 값을 산출함 (프로그램 구현)

프로그래밍 언어는 사람을 위한 언어로써 프로그래밍 언어로 작성된 프로그램을 '소스 코드(Source code)'라고한다. 이렇게 사람이 프로그래밍 언어로 입력하면 컴퓨터는 컴퓨터가 이해할 수 있는 언어인 이진 코드('0','1')로 번역을 한다. (컴퓨터 언어는 '머신 코드(Machine code)' 또는 '이진 코드(Binary code)'라고 부름) 소스코드를 컴퓨터가 이해할 수 있는 이진코드로 번역하기 위해서 '인터프리터' 또는 '컴파일러'를 활용한다.

컴파일러 란 ?

프로그램 실행시 프로그램 언어 전체를 스캔하여 미리 컴퓨터 언어로 번역한다

• 전체 파일을 스캔하여 한꺼번에 번역한다.
• 초기 스캔시간이 오래 걸리지만, 한번 실행 파일이 만들어지고 나면 빠르다. => 미리 파일을 만들어 두면 다음 실행시 이전에 만들어 놓은 파일을 실행한다.
• 컴퓨터 언어 번역하는 과정에서 비교적 더 많은 메모리를 사용한다. => 번역하는 과정에서 오브젝트코드라는 파일을 생성하기 때문.
• 전체 코드를 스캔하는 과정에서 모든 오류를 한꺼번에 출력해주기 때문에 실행 전에 오류를 알 수 있다.
• 대표적인 언어로 C, C++, JAVA 등이 있다. (Java → bytecode / TypeScript → JavaScript / Java → bytecode)

인터프리터 란

프로그램 실행시 한번에 한 문장씩 컴퓨터 언어로 번역한다

• 프로그램 실행시 한 번에 한 문장씩 번역한다.
• 한번에 한문장씩 번역후 실행 시키기 때문에 실행 시간이 느리다.
• 컴파일러와 같은 오브젝트 코드(실행파일) 생성과정이 없기 때문에 메모리 효율이 좋다.
• 프로그램을 실행시키고 나서 오류를 발견하면 바로 실행을 중지 시킨다. 실행 후에 오류를 알 수 있다. => 한문장 읽고, 바로 프로그램 실행의 반복. 이때 오류발생시 프로그램 중단
• 대표적인 언어로 Python, Ruby, Javascript 등이 있다.

!!인터프리터는 프로그램 언어를 바로 이진코드로 변환하지 않음!! 프로그램 실행시 > 프로그램 언어를 > 먼저 바이트 코드로 번역하고 > 바이트코드를 위한 "가상머신"이라는 프로그램을 통해 > 이진코드로 번역되어 실행된다

트랜스파일러 란 ?

한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 프로그래밍 언어로 변환해주는 도구

• 컴파일러의 일종인 트랜스파일러( source to source compiler )
• 주로 최신 버전의 언어를 구형버전으로 변환하거나 다른 언어로 변환하는데 사용된다
• 트렌스파일러는 소스코드를 분석하고 변환하는 과정을 거쳐 원본 코드와 동일한 동작을 하는 대상 언어 코드를 생성한다
• 언어간의 문법 차이나 기능 지원 차이를 극복하여 크로스플랫폼 개발이나 브라우저 호환성을 향상시킴
• 개발 효율성을 높일 수 있다 (C ++ → C / ES6 → ES5 (Babel) / typescript || coffeescript → Javascript / sass || scss → css)

자바스크립트의 트랜스파일러 "babel"

최신 버전의 자바스크립트 코드를 오래된 버전의 자바스크립트 코드로 변환해주는 역할

babel은 가장 인기 있는 자바스크립트 트랜스파일러 중 하나이다. 최신 문법과 기능을 지원하는 자바스크립트를 오래된 브라우저에서도 실행할 수 있게 됨!

장점

1.크로스 브라우징 다양한 브라우저에서 호환성을 확보하기 위해 ES6+ 문법을 ES5 이하의 문법으로 변환준다. 이를 통해 모든 브라우저에서 일관된 동작을 보장할 수 있다.

2.최신 문법 사용 최신 자바스크립트 문법과 기능을 사용할 수 있다. 이는 개발자가 더 효율적이고 가독성이 좋은 코드를 작성할 수 있게 도와준다.

3.확장성 플러그인과 프리셋 시스템을 제공하여 개발자가 원하는 변환 규칙을 추가하고 설정할 수 있다. 이는 개발자가 프로젝트에 필요한 변환 로직을 자유롭게 커스터마이징할 수 있게 해준다.

4.다른 도구와의 통합 다양한 빌드 도구와 통합하여 사용할 수 있다. ex) Webpack과 함께 사용하여 모듈 번들링과 트랜스파일링을 한번에 처리할 수 있다.

단점

1.추가적인 빌드 단계 소스 코드의 변환 과정이 추가된다. 이는 빌드 시간을 증가시킬 수 있으며, 개발 환경 설정이 조금 더 복잡해질 수 있다.

2.성능 문제 소스 코드를 변환하는 과정에서 성능에 영향을 줄 수 있다. 특히 큰 규모의 프로젝트에서는 트랜스파일링 속도가 느려질 수 있다.

*3.오래된 환경 지원의 한계 * 오래된 브라우저와 환경에서의 호환성을 제공하지만, 일부 기능이 완벽하게 지원되지 않을 수 있다. 모든 크로스브라우징 이슈를 해결하지 못할 수 있다는 의미.

대표적인 자바스크립트 트랜스파일러

• TypeScript: TypeScript는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하는 동시에 ES6+의 기능을 활용할 수 있습니다. TypeScript 컴파일러를 사용하여 TypeScript 코드를 JavaScript 코드로 변환할 수 있습니다.
• Bublé: Bublé은 ES2015 이상의 자바스크립트 코드를 ES5로 변환해주는 경량화된 트랜스파일러입니다. Bublé은 빠른 변환 속도와 간결한 결과 코드를 제공합니다.
• SWC: SWC는 Rust로 작성된 고성능 자바스크립트/타입스크립트 트랜스파일러입니다. Babel과 비슷한 기능을 제공하면서도 빠른 컴파일 속도를 가지고 있습니다.
• Closure Compiler: Closure Compiler는 구글에서 개발한 자바스크립트 트랜스파일러입니다. 코드 압축과 최적화 기능을 포함하여 효율적인 자바스크립트 코드를 생성할 수 있습니다.

플러그인

바벨은 소스코드를 받아서 다른 소스코드로 반환하게 되는데, 이 과정에서 바벨은 파싱과 출력만 담당하게되고 변환 작업은 '플러그인'이 처리하게 된다. 커스텀하게 사용가능하다.

프리셋

바벨의 수많은 플러그인들을 목적에 맞게 여러가지 플러그인을 모아놓은 것을 '프리셋' 이라고 한다. n개의 plugin과 1개의 preset 커스텀하게 사용가능하다.

폴리필

바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다. 때문에 ECMAScript2015+에 없는 Promise는 ECMAScript5 버전으로 변환하지 못한다. 이처럼 변환하지 못하는 것들을 "폴리필"이라는 코드조각을 추가해서 변환할 수 있게한다.

모듈 번들러

각각의 모듈 의존성을 해결하여 여러개의 자바스크립트 파일을 하나의 파일로 번들링해주는 도구

컴퓨터 프로그래밍 컴파일러와 인터프리터 컴파일 vs 인터프리터 vs 트랜스파일러 트랜스파일러 바벨