This

• 일반적인 프로그래밍 언어에서의 this는 self(자기자신)을 가리키는 참조변수다.
• javascript에서는 함수 호출 방식에 따라 this가 결정된다.

javascript에서 함수가 호출될 때, 기존 매개변수로 전달되는 인자 값에 대해서 arguments 객체와 this 인자가 함수 내부로 암묵적으로 전달된다.

함수 호출 방식과 this

자바스크립트는 함수 호출 시 어떻게 호출 되는가에 따라서 동적으로 this가 결정된다.

• 함수 호출 시 this: window
• 메소드 호출 시 this: 메소드 객체
• 내부 함수 호출 시 this: window
• 엄격모드(strict mode)에서의 this: undefined
• 이벤트 리스너 호출 시 this: 이벤트 객체
• 생성자 함수 호출 시 this: 생성된 새 객체

Arrow 함수는 일반적인 this 바인딩과 다르게 Lexical this를 가진다.

• Arrow 함수 호출 시 this: 함수 선언 시의 상위 스코프의 this

this 바인딩 우선순위

EC(Execution Context)가 생성될 때마다 this의 바인딩이 일어나며 우선순위 순으로 나열해보면 다음과 같다.

1. new를 사용했을 때 해당 객체로 바인딩된다.

var name = "global";
function Func() {
    this. name = "Func";
    this.print = function f() { console.log(this.name)' };
}
var a = new Func();
a.print(); //Func

2. call, apply, bind와 같은 명시적 바인딩을 사용했을 때 인자로 전달된 객체에 바인딩된다.

function func() {
    console.log(this.name);
}

var obj = { name: 'obj name' };
func.call(obj); // obj name
func.apply(obj); // obj name
(func.bind(obj))(); // obj name

call과 apply는 함수를 호출하는 함수이다. 그러나 그냥 실행하는 것이 아니라 첫 번째 인자에 this로 세팅하고 싶은 객체를 넘겨주어 this를 바꾸고 나서 실행한다. bind함수가 call, apply와 다른 점은 함수를 실행하지 않는 점이다. 대신 새로운 바인딩한 함수를 생성한다.

3. 객체의 메소드로 호출할 경우 해당 객체에 바인딩된다.

var obj = {
    name: 'obj name',
    print: function p() { console.log(this.name); }
};
obj.print(); // obj name

4. 이외의 경우 this는 전역 객체이다.

브라우저의 경우 this는 window 객체이고, 엄격모드에서는 undefined 값이 된다. 따라서 네 가지 바인딩이 아래 우선순위를 따른다.

new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

예외 상황

Arrow function

ES6부터 사용할 수 있는 화살표 함수(arrow function)는 기존의 컨텍스트 바인딩 규칙을 따르지 않는다. 기존 네 가지 컨텍스트는 실행 시점에 바인딩 규칙이 적용된다. 동적 바인딩이라 할 수 있다.

반면 화살표 함수는 실행하지 않고도 바인딩 규칙을 알 수 있다. 이미 정해졌다는 점에서 정적 바인딩이다. 화살표 함수는 코드상 상위 블록의 컨텍스트를 this로 바인딩하는 규칙을 가진다.

따라서 화살표 함수에서는 call, apply, bind로 this를 변경할 수 없다.

window.x = 1;
const normal = function () { return this.x; };
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 })); // 1

참고 사이트

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/this.md

암시적-바인딩과-new-바인딩의-우선순위

자바스크립트 this 바인딩이란?

https://iamsjy17.github.io/javascript/2019/06/07/js33_15_this.html

https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/

시맨틱 마크업(Semantic Markup)이란

시맨틱(semantic)은 "의미론적인"이란 뜻을 가지고, 마크업(markup)은 HTML 태그로 문서를 작성하는 것을 말한다. 따라서 시맨틱 마크업은 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

작성 방법

각 태그를 용도에 맞게 사용하여 문서를 작성한다.

• 헤더/푸터에 <header>와 <footer>태그 사용
• 메인 컨텐츠에 <main>과 <section> 사용
• 독립적인 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1> 사용
• 순서가 없는 목록으로 <ul>, <li> 사용
• 내비게이션에 <nav> 사용

위와 같이 각 태그가 가지고 있는 의미에 맞게 사용하고, css 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.

예전에는 <div> 요소가 모두 묶어서 포함시킬 수 있어 header도 <div>로 footer도 <div>로 묶어 사용하였기 때문에 HTML에서 가장 많이 사용되었다. 그러다 전체 웹사이트를 구조적으로 분리해서 분리된 각각의 틀을 의미가 있는 요소들로 묶은 것이 시맨틱 요소들이다.

시맨틱 마크업을 쓰는 이유

• 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
• 웹 접근성 측면에서, 시각장애가 있는 사용자가 그 의미를 더 잘 파악할 수 있다.
• 단순히 <div>, <span>에 둘러싸인 요소들보다 코드의 가독성이 좋아 유지보수에 좋다.

시맨틱 마크업을 사용할 때 어려운 점

<strong>, <b>태그는 동일한 효과를 부여한다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold" 의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong> 의 경우는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다" 라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

<article> 태그는 독립적이고 독립적인 콘텐츠를 지정할 때 쓰이는데, 그 자체로 의미가 있어야 하고 사이트의 나머지 부분과 독립적으로 배포도 가능해야 한다. <section>태그는 공통된 내용을 담고 있는 부분을 묶어준다. 그리고 <section> 안에 <article>을, 또 <article> 안에 <section>을 사용할 수도 있다. 어떤 상황에서 <section>과 <article>을 써야 하는 걸까?

시맨틱 마크업을 사용할 때 애매한 태그들

• <strong> vs <b>
• <section> vs <article>

• <i> vs <em>

  <i>태그는 시각적으로 글자가 기울어져 보이게 하는 효과를 줄 때 사용 <em>태그는 문서에서 기울임 효과를 이용하여 강조하고 싶을 때 사용

• <button> vs <a>

  <button>은 글쓰기, 로그인 등 특정한 액션을 위해서 사용 <a>는 다른 페이지로 이동하기 위해 링크를 걸 때 사용

참고 사이트

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/semantic.md

https://uiweb.tistory.com/15

https://designup4.tistory.com/79

https://wook-2124.tistory.com/172

📂 모듈 번들러(Module Bundler)

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image 등)을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만드는 도구.

Module

여러 기능들에 관한 코드가 모여있는 하나의 파일. 사칙연산을 하는 계산기를 예로 들면 사칙연산 4가지 기능을 계산기라는 파일로 관리하는 하나의 모듈이라고 볼 수 있다.

모듈 번들러를 쓰는 이유

현대의 프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이기 때문에 모듈이 서로 의존성을 띄고 있어 다음과 같은 문제가 생긴다.

• 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)
• 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
• ES6+ 스펙의 코드를 어떻게 처리할 것인가?

위 문제들을 해결하기 위해 등장한 것이 모듈 번들러로 유명한 번들러로는 Webpack, Parcel, Rollup 등이 있다.

🔧 트랜스파일러(Transpiler)

트랜스파일링(Transpiling)

트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하며, 이를 위한 도구가 트랜스파일러이다.

트랜스파일러를 쓰는 이유

모든 브라우저가 ES6+의 기능을 제공하지는 않기 때문에 이를 ES5 코드로 변환시키는 과정이 필요하고, 트랜스파일러가 이 작업을 수행해준다. 사실 ES6+의 기능 뿐만 아니라 리액트의 JSX를 자바스크립트 코드로 변환시킨다거나 타입스크립트를 자바스크립트로 변환시키는 등의 역할도 트랜스파일러의 기능 중에 하나이다.

ES6+나 JSX를 변환시키는 바벨(Babel), 타입스크립트를 변환시키는 타입스크립트 트랜스파일러(Typescript Transpiler) 등의 트랜스파일러가 있다. 보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용한다.

transpile vs compile

compile

한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 의미

• Java -> bytecode
• c => assembly

transpile

한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미

• es6 코드 -> es5 코드
• c++ -> c
• typescript -> javascript

참고 사이트

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/bundler-transpiler.md

https://velog.io/@cjh951114/%EC%A7%81%EB%AC%B4-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8-02.-%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%AA%A8%EB%93%88-%EB%B2%88%EB%93%A4%EB%9F%AC%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

https://ideveloper2.tistory.com/166

📚 스택(Stack)이란

한쪽으로만 자료를 넣고 뺄 수 있는 후입선출(LIFO: Last-In First-Out) 구조를 가진 자료구조.

데이터를 차곡차곡 쌓아 올린 형태이며, LIFO 구조이기 때문에 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다.

📚 스택의 사용 사례

• 웹 브라우저 방문 기록(뒤로 가기)
• 실행 취소(undo)
• 역순 문자열 만들기
• 후위 표기법 계산

📚 스택 기본 연산

• push(): 스택에 원소 추가
• pop(): 스택 가장 위에 있는 원소를 삭제하고 그 원소를 반환
• peek(): 스택 가장 위에 있는 원소를 반환(삭제는 하지 않음)
• isEmpty(): 스택이 비어있으면 True, 비어있지 않다면 False를 반환
• size(): 스택의 원소 개수 반환

📚 파이썬으로 스택 구현하기

파이썬은 스택 자료구조는 따로 제공하지 않고, 리스트(list)를 통해 구현할 수 있다. S.append() 리스트 맨 끝에 원소를 추가한다. 시간복잡도는 O(1)이다. S.pop(i) 리스트의 i번째 원소를 삭제한다. S.pop(-1)은 맨 앞에 있는 원소를 삭제한다. 시간복잡도는 마찬가지로 O(1)이다.

클래스로 스택 구현

class Stack:
    # 리스트를 이용한 스택 구현
    def __init__(self):
        self.top = []

    # 구현 함수
    # 스택에 원소 삽입
    def push(self, item):
        self.top.append(item)
    # 스택 가장 위에 있는 원소를 삭제하고 반환
    def pop(self):
        if not self.isEmpty():
            return self.top.pop(-1)
        else:
            print("Stack underflow")
            exit()
    # 스택 가장 위에 있는 원소를 반환
    def peek(self):
        if not self.isEmpty():
            return self.top[-1]
        else:
            print("underflow")
            exit()
    # 스택이 비어있는 지를 bool 값으로 반환
    def isEmpty(self) -> bool:
        return len(self.top)==0
    # 스택의 크기를 int 값으로 반환
    def size(self) -> int:
        return len(self.top)

참고 사이트

https://velog.io/@yeseolee/Python-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-%EC%8A%A4%ED%83%9DStack

https://jud00.tistory.com/entry/%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-%EC%8A%A4%ED%83%9DStack%EA%B3%BC-%ED%81%90Queue%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://calmlife.tistory.com/11