[WEEK1] seulgi

CH01_들어가며/1.1_웹_개발의_역사/seulgi.md

@@ -1 +1,93 @@
-<!-- 정리할 내용을 작성해주세요. -->
+# 웹 개발의 역사
+
+## 1) 자바스크립트의 탄생
+
+- 1990년대, 마이크로소프트의 "인터넷 익스플로러"와 넷스케이프 커뮤니케이션즈의 "넷스케이프 네비게이터"가 많이 사용되는 웹 브라우저였다.
+- 1995년, 다양한 콘텐츠 표현을 위해 새로운 언어가 필요해지고 Javascript가 탄생했다.
+
+### Javascript는 어떤 언어였는가?
+
+- C, 자바와 같은 언어와 유사한 기본 문법
+- 객체 지향 언어인 셀프(Self)의 프로토타입 기반 상속 개념
+- Lisp 계열 언어 중 하나인 스킴(Scheme)의 일급 함수 개념
+
+위의 개념들이 차용된 경량의 프로그래밍 언어였다.
+
+> [!NOTE]
+> **Self언어?** <br />
+> 1980년대 후반에 Sun Microsystems에서 개발한 객체지향 프로그래밍 언어. Smalltalk에서 영향을 받았고, 프로토타입 기반 프로그래밍(Prototype-based Programming) 개념을 중심으로 설계되었다. <br /> 특징으로는 클래스가 없고, 메세지 기반 프로그래밍으로 객체들 간 메세지를 주고받으며 동작하는 동적 타이핑 언어다.
+
+> [!NOTE]
+> **Lisp 계열 언어?** <br /> Lisp(LISt Processing)은 1958년에 개발된 함수형 프로그래밍 언어 중 하나로 코드를 데이터처럼 다룰 수 있는 유연한 구조가 특징이고, 수많은 Lisp 계열 언어가 파생되었다. <br /> 모든 것이 리스트(List) → (함수 인자1 인자2 ...) 형태로 코드와 데이터 경계가 없고 메모리 관리를 자동으로 수행하는 동적 타이핑 언어이다.
+
+<br /> <br />
+
+## 2) 자바스크립트 표준, ECMAScript의 탄생
+
+### 기존의 웹 브라우저 경쟁 구도에서 문제점을 알아보자!
+
+경쟁 상대이던 넷스케이프와 마이크로소프트가 각각 자신들의 브라우저에 새로운 기능을 늘렸으나 각 추가 기능들은 각자의 브라우저에만 동작했다.
+
+DOM구조가 다르기에 크로스 브라우징 이슈로 인해 개발자들은 두 개의 스크립트를 따로 개발해야 하는 어려움이 있었다. 브라우저는 자바스크립트의 변화를 따라가지 못했고, 자바스크립트에 추가되는 기능은 런타임 환경인 브라우저에서도 이 기능을 지원할 수 있어야 하는데
+
+<u>새로운 버전의 브라우저가 출시되 자바스크립트의 새로운 기능을 지원하더라도
+사용자가 예전 버전의 브라우저를 사용한다면 이 기능이 무용지물되는 문제를 해결하기 위해
+자바스크립트에서는 **폴리필(Polyfill), 트랜스파일(transpile)** 과 같은 개념이 등장</u>했다.
+
+> [!NOTE]
+> **폴리필(Polyfill), 트랜스파일(transpile)** <br /> 폴리필은 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인이고, 트랜스파일은 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정이다. (유명한 폴리필 라이브러리로 core.js와 polyfill.io가 있고, 트랜스파일러로는 babel이 있다.)
+
+### 자바스크립트 표준화 문제가 대두되다..!
+
+이런 문제들과 jQuery와 같이 브라우저 호환성을 고민하지 않아도 되는 라이브러리만으로는 해결할 수 없었고,<br />
+모든 브라우저에서 동일하게 동작되는 표준화된 자바스크립트의 필요성이 제기되었다.
+
+넷스케이프는 컴퓨터 시스템 표준을 관리하는 Ecma 인터내셔널에 자바스크립트 표준화를 위한 자바스크립트 기술 규격을 제출했다.
+
+Ecma 인터내셔널은 ECMAScript라는 이름으로 자바스크립트 표준화를 공식화했다.
+
+> 정적 웹사이트에서 동적 웹 애플리케이션으로의 전환이 가속화된 계기!
+
+<br /> <br />
+
+## 3) 웹사이트에서 웹 애플리케이션으로의 전환
+
+### 웹사이트?
+
+웹사이트도 물론 HTML, CSS와 더불어 자바스크립트로 구축한 사례가 있지만,
+웹사이트는 수집된 데이터 및 정보를 특정 페이지에 표시하기 위한 정적인 웹이다.
+
+- 단방향 정보 제공이기 때문에 사용자와 상호 작용하지 않는다.
+- HTML에 링크가 연결된 웹페이지 모음
+- 콘텐츠가 동적으로 업데이트 되지 않는다.
+
+### 웹 애플리케이션?
+
+사용자와 상호작용하는 쌍방향 소통의 웹.
+검색, 댓글, 좋아요 등 웹 페이지 내부에 수많은 애플리케이션이 동작하고 있기 때문에 이렇게 부른다.
+
+<br /> <br />
+
+## 4) 개발 생태계의 발전
+
+대규모 웹 서비스 개발의 필요성이 커지며 웹 페이지를 통이 아닌 컴포넌트 단위로 개발하는 방식이 생겨났다. (+ Ajax로 비동기 요청을 해서 페이지 일부 데이터를 로드도 가능해졌다.)
+
+웹 서비스가 웹 애플리케이션 특성을 지니게 되면서 컴포넌트 베이스 개발 방법론(CBD)이 등장했다.
+
+### CBD(Component Based Development?)
+
+서비스에서 다루는 데이터를 구분하고 그에 맞는 UI를 표현할 수 있게 컴포넌트 단위로 개발하는 접근 방식이다. 재사용할 수 있는 컴포넌트를 개발 또는 조합해서 하나의 애플리케이션을 만드는 개발 방법론이다.
+
+- 컴포넌트는 모듀로가 유사하게 하나의 독립된 기능을 재사용하기 위한 코드 묶음
+- 모듈과는 달리 런타임 환경에서 독립적으로 배포/실행할 수 있는 단위
+- 다른 컴포넌트와의 의존성을 최소화하거나 없애야 한다.
+
+### 의존성이란?
+
+의존하고 있는 대상의 변경에 영향을받을 수 있는 가능성.
+
+<br /> <br />
+
+## 5) 개발자 협업의 필요성 증가
+
+결과물이 커졌기에 서비스 개발 이후 유지보수를 하는 데 협업의 중요성이 높아졌다.

CH01_들어가며/1.2_자바스크립트의_한계/seulgi.md

@@ -1 +1,83 @@
-<!-- 정리할 내용을 작성해주세요. -->
+# 자바스크립트의 한계
+
+## 1) 동적 타입 언어
+
+자바스크립트는 동적 타입 언어라 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다.
+
+<br />
+<br />
+
+## 2) 동적 타이핑 시스템의 한계
+
+```js
+const sumNumber = (a, b) => {
+  return a + b;
+};
+
+sumNumber(100); // NaN;
+sumNumber("a", "b"); // "ab"
+```
+
+위의 예시처럼 숫자를 계산하려는 함수로 의도했지만 의도와 다르게 동작할 수 있는 문제가 있다. 동적 타입 언어라는 특성으로 함수를 호출할 때 사용되는 인수 값에 따라 a,b 타입이 결정되기 때문이다.
+
+자바스크립트 엔진에서는 주석, 함수 이름, 개발자의 의도는 고려 대상이 아니다.
+
+<br />
+<br />
+
+## 3) 한계 극복을 위한 해결 방안
+
+자바스크립트 인터페이스의 필요성을 느끼고, JSDoc, propTypes, 다트 같은 해결 방안이 등장했다.
+
+### JSDoc
+
+- 모듈, 네임스페이스, 클래스, 메서드, 매개변수 등에 대한 API 문서 생성 도구다.
+- 주석에 @ts-check를 추가하면 타입 및 에러 확인이 가능하다.
+- 자바스크립트 소스코드에 타입 힌트를 제공하는 HTML 문서를 생성할 수 있다.
+- 주석 사용이기 때문에 강제성을 부여하긴 어렵다.
+
+### propTypes
+
+- 리액트에서 props 타입 검사용으로 사용하는 속성이다.
+- prop에 유효한 값이 전달되었는지 확인 가능한데, 전체 타입 검사는 어렵다.
+- 리액트라는 특정 라이브러리만 사용 가능하다.
+
+### 다트
+
+- 구글에서 자바스크립트 대체를 위한 새로운 언어이다.
+- 타이핑이 가능하나, 새로운 언어라는 단점이 있다.
+
+<br />
+<br />
+
+## 4) 타입스크립트의 등장
+
+마이크로소프트는 자바스크립트의 슈퍼셋 언어인 타입스립트를 공개했고 아래와 같은 장점을 지녀 많은 환영을 받았다.
+
+> [!NOTE]
+> **슈퍼셋(Superset)?** <br /> 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다.
+
+### (1) 안정성 보장
+
+- 타입스크립트는 정적 타이핑을 제공해 컴파일 단계에서 타입 검사를 해줘 자바스크립트의 빈번한 타입 에러를 줄여준다.
+- 런타임 에러를 사전에 방지해 안정성을 보장해준다.
+
+### (2) 개발 생산성 향상
+
+- VSCode 등의 IDE에서 타입 자동 완성 기능을 제공한다.
+- 변수와 함수 타입을 추론하고, 리액트 사용 시 어떤 prop을 넘겨야 하는지 매번 확인하지 않아도 되는 등 개발 생산성이 향상된다.
+
+> [!NOTE]
+> **IDE (Integrated Development Environment, 통합 개발 환경)란?** <br /> 코드를 작성하고, 실행하고, 디버깅하는 모든 작업을 하나의 프로그램에서 할 수 있도록 도와주는 개발 도구. 쉽게 말해서 코딩에 필요한 모든 기능이 한곳에 모여 있는 소프트웨어이다.
+
+### (3) 협업에 유리
+
+- 인터페이스, 제네릭 등으로 인터페이스가 기술되면 코드를 쉽게 이해할 수 있다.
+- 자동 완성 기능이나 기술된 인터페이스로 코드를 쉽게 파악 가능하다.
+
+> [!NOTE]
+> **타입스크립트 인터페이스?** <br /> 객체 구조를 정의한다. 특정 객체가 가져야 하는 속성과 메서드 집합을 인터페이스로 정의해 객체가 그 구조를 따르게 한다.
+
+### (4) 자바스크립트에 점진적으로 적용 가능
+
+- 슈퍼셋 언어이기 때문에 점진적 도입이 가능하다.

CH02_타입/2.1_타입이란/seulgi.md

@@ -1 +1,130 @@
-<!-- 정리할 내용을 작성해주세요. -->
+# 타입이란
+
+## 1) 자료형으로서의 타입
+
+모든 프로그램이 언어는 변수를 선언하는 것부터 시작한다.
+
+### 변수란?
+
+프로그래밍 언어에서 변수란 값을 저장할 수 있는 공간이자 값을 가리키는 상징적인 이름이다.<br />
+개발자는 변수를 선언하고 그 변수에 특정한 값인 데이터를 할당한다.
+
+### 변수에 저장할 수 있는 값의 종류를 알아보자.
+
+변수에 저장할 수 있는 값의 종류는 프로그래밍 언어마다 다르나 최신 ECMAScript 표준을 따르는 자바스크립트는 아래와 같은 데이터 타입(자료형)을 정의한다.
+
+- undefined
+- null
+- Boolean
+- String
+- Symbol
+- Numeric(Number, BigInt)
+- Object
+
+> 데이터 타입은 여러 종류의 데이터를 식별하는 분류 체계로 컴파일러에 값의 형태를 알려준다. <br /> 모든 데이터를 해석할 때는 데이터 타입 체계가 사용된다.
+
+<br />
+<br />
+
+## 2) 집합으로서의 타입
+
+프로그래밍에서 타입은 수학의 집합과 유사하다. <br />
+타입은 <u>값이 가질 수 있는 유효한 범위의 집합</u>이다.
+
+### 타입 시스템의 이점은 뭘까?
+
+타입 시스템은 코드에서 사용되는 **유효한 값의 범위를 제한해서 런타임에서 발생할 수 있는 유효하지 않은 값에 대한 에러를 방지**해준다.
+유효하지 않는 값에 대해서는 집합에 속하지 않는 타입이라고 알려주며 에러가 발생한다.
+
+> 집합의 경계처럼 해당 값 안에 들어갈 수 있는 타입의 집합으로 제한해 옳지 않는 값이라면 에러를 미리 알려주는 것이다.
+
+```ts
+function double(n: number) {
+  return n * 2;
+}
+
+double("z"); // Error!!
+```
+
+또, 위의 예시처럼 일단 타입을 제한하면 타입스크립트 컴파일러는 함수를 호출할 때 호환되는 인자로 호출했는지를 판단한다.
+
+<br />
+<br />
+
+## 3) 정적 타입과 동적 타입
+
+타입을 결정하는 시점에 따라 정적 타입(static type), 동적 타입(dynamic type)으로 분류할 수 있다.
+
+### 정적 타입(static type) 시스템?
+
+정적 타입 시스템에서는 모든 변수의 타입이 컴파일타임에 결정된다. <br />
+C, 자바, 타입스크립트 등이 정적 타입 언어이다.<br />
+번거로울 수 있지만 컴파일타임에 타입 에러를 발견할 수 있기 때문에 프로그램의 안정성을 보장할 수 있다.
+
+### 동적 타입(dynamic type) 시스템?
+
+변수 타입이 런타임에서 결정된다.<br />
+파이썬, 자바스크립트가 대표적인 동적 타입 언어로 직접 타입 지정이 필요없다. <br />
+다만, 언제 프로그램에 오류가 생길 지 모르는 불안감이 있다.
+
+> 런타입에서 타입을 예측할 수 없다면 매우 위험한 상황이다.
+
+### 컴파일타임과 런타임?
+
+개발자가 작성한 소스코드를 실행하려면 몇 가지 과정을 거쳐야 한다.<br />
+시점에 따라 컴파일타임 / 런타임으로 구분 가능하다.
+
+기계(컴퓨터, 엔진)가 소스코드를 이해할 수 있도록 기계어로 변환되는 시점을 컴파일타임이라 한다.<br /> 이후 변환된 파일이 메모리에 적재되어 실행되는 시점을 런타임이라 부른다.
+
+> 소스코드 -> ( 컴파일 ) -> 기계어 -> 변환 파일 -> 메모리 적재 -> ( 런타임 ) -> 실행
+
+<br />
+<br />
+
+## 4) 강타입과 약타입
+
+모든 프로그래밍 언어에는 값의 타입이 존재한다.
+
+### 암묵적 타입 변환(implicit coercion/conversion)?
+
+개발자가 의도적으로 타입을 명시하거나 바꾸지 않았는데도 컴파일러 또는 엔진 등에 의해서 런타임에 타입이 자동으로 변경되는 것을 암묵적 타입 변환이라 한다.
+
+암묵적 변환은 다른 데이터 타입 간 연산을 할 수 있는 편리함을 제공하지만, 작성자의 의도와 다르게 동작해 오류가 발생할 가능성도 높다.
+
+> 암묵적 타입 변환 여부에 따라 타입 시스템을 "강타입(strongly type)", "약타입(weakly type)"으로 분류할 수 있다.
+
+### 강타입 (strongly type)? 약타입(weakly type)?
+
+#### 강타입 특징 언어에서는,
+
+서로 다른 타입을 갖는 값끼리 연산을 시도하면 컴파일러 또는 인터프리터에서 에러가 발생한다.
+
+> 파이썬, 루비, 타입스크립트 언어가 강타입!
+
+#### 약타입 특징을 갖는 언어에서는,
+
+서로 다른 타입을 갖는 값끼리 연산할 때는 컴파일러 또는 인터프리터가 내부적으로 판단해서 특정값의 타입을 변환하여 연산을 수행한 후 값을 도출한다.
+
+> C++, 자바, 자바스크립트는 약타입!
+
+### 타입시스템?
+
+타입 검사기가 프로그램에 타입을 할당하는 데 사용하는 규칙 집합을 **"타입시스템"** 이라고 한다.
+
+타입 시스템은 크게 두 가지로 구분된다.
+
+- 자동 타입 추론 시스템
+- 명시적으로 알려줘야하는 타입 시스템
+
+타입스크립트는 두 가지 타입 시스템의 영향을 모두 받았고, 개발자는 직접 타입 명시 / 타입스크립트가 추론하는 방식 중에 선택할 수 있다.
+
+<br />
+<br />
+
+## 5) 컴파일 방식
+
+컴파일의 일반적인 의미는 사람이 이해할 수 있는 방식으로 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 바꿔주는 과정이다.
+
+> 개발자 -> 고수준 언어로 소스코드 작성 -> 컴파일러 -> 바이너리 코드로 변환(고수준 - 저수준 간 코드 변환)
+
+그러나 타입스크립트의 **컴파일 결과물은 사람이 이해할 수 있는 방식인 자바스크립트 파일**이고, 타입스크립트를 컴파일하면 타입이 모두 제거된 **자바스크립트 소스코드만 남는다.**