[WEEK1] seongho

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

@@ -0,0 +1,55 @@
+## 자바스크립트 & ECMAScript의 탄생
+
+90년대에는 넷스케이프의 `내비게이터`와 마이크로소프트의 `인터넷 익스플로러`가 가장 대중적으로 사용되던 브라우저 였음. <br />
+그리고, 1995년에 넷스케이프의 브랜든 아이큰은 웹의 다양한 콘텐츠를 표현하기 위한 언어인 자바스크립트를 만들었음. <br />
+이에 넷스케이프의 경쟁사였던 마이크로소프트도 자바스크립트에 대항하기 위해서 Jscript라는 자바의 파생 언어를 만들었고, 이에 따라서 경쟁관계였던 두 회사는 자신들의 브라우저에 새로운 기능을 빠르게 늘리기 시작했지만
+이렇게 추가된 기능은 각자의 브라우저에서만 동작했음. <br />
+
+특히 익스플로러와 내비게이터는 DOM구조가 완전히 달랐기 때문에 같은 코드라고 할지라도 브라우저 마다 다르게 동작하는 **_크로스 브라우징 이슈_** 가 발생했음..
+그래서 개발자들은 브라우저마다 다른 언어를 사용해서 코드를 짜야하는 불편함이 있었음.
+
+또한 자바스크립트에 새로운 기능이 추가되도 브라우저가 해당 기능을 지원해야 했고, 새로운 버전의 브라우저가 나온다고 해도 사용자가 이전 버전의 브라우저를 쓰면 무용지물이 되버렸음. <br />
+이런 문제를 해결하기 위해서 `폴리필`과 `트랜스파일`이라는 개념이 등장하게 됨.
+
+> [!NOTE] > **폴리필과 트랜스파일**
+>
+> <p style="color: #808080">폴리필은 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인을 말함. <br />
+> 트랜스파일은 최신 버전의 코드를 예전 버전의 코드로 바꿔주는 역할을 함 (babel)</p>
+
+이러니 `jQuery`같은 브라우저 호환성을 고민하지 않고 한번에 개발 가능한 라이브러리가 유행한것은 당연한 결과인것.
+이후 결국엔 `ECMAScript`라는 국제 표준화가 되었음.
+
+<br />
+
+## 웹의 발전과 개발 생태계의 발전
+
+`웹사이트`와 `웹 애플리케이션`의 차이는 뭘까 <br />
+
+- `웹 사이트` <br />
+  컨텐츠를 특정 페이지에 표시하기 위한 정적인 웹 으로써 단방향으로 정보를 제공하기 때문에 사용자와의 상호 작용하지 않으며, 컨텐츠가 동적으로 업데이트 되지 않음.
+
+- `웹 애플리케이션` <br />
+  사용자와 상호작용하는 쌍방향 소통의 웹을 말함. <br />
+  검색, 댓글, 채팅, 좋아요 등등 웹 페이지 내부에 많은 어플리케이션들이 동작하고 있어서 웹 애플리케이션이라고 함.
+
+이처럼 웹은 점점 발전했고, 일방적으로 컨텐츠를 보여주는 웹 사이트를 넘어서 웹 애플리케이션이 등장함에 따라 개발 환경도 변화하게 된다.
+
+웹 서비스가 대규모로 커지면서 웹페이지를 통으로 개발하는 방식이아닌, 컴포넌트 단위로 개발을 하게 되는 방식인 `CBD`가 등장하게 됨.
+CBD는 서비스에서 다루는 데이터를 구분하고 그에 맞는 UI를 표현할수있게 컴포넌트 단위로 개발하는 접근 방식임.
+
+> [!Note] > **CBD**
+>
+> <p style="color: #808080">재사용할수 있는 컴포넌트를 개발 또는 조합해서 하나의 애플리케이션을 만드는 개발 방법론</p>
+
+ <br />
+
+`컴포넌트`는 모듈과 유사하게 하나의 독립된 기능을 재사용하기 위한 코드 묶음임. <br />
+컴포넌트는 다른 컴포넌트와의 의존성을 최소화 하거나 없애는게 좋은데, 개발 과정에서 필연적으로 의존성은 생길수밖에 없음.
+따라서 개발자는 **_컴포넌트 간의 의존성을 파악해야 제대로 컴포넌트를 사용하고, 유지보수 하기에 용이함._**
+
+또 이런 개발 생태계의 발전은 JS개발자의 증가로 이어졌고, 협업의 필요성이 대두되는 계기가 되었다.
+
+개발에 투입된 인원이 많아질수록 코드를 파악하기 어려워지는 것은 당연한 수순이다.
+다른 동료가 작성한 코드를 사용할때마다 작성자에게 가서 물어보는 것은 너무나도 큰 코스트가 들게되고, 이마저도 작성자가 회사에 남아있어야 가능함. <br />
+따라서 유지보수를 위한 효과적인 협업 보완책이 필요해졌음. <br />
+그렇다면 JS는 과연 유지보수에 적합한 언어였을까?

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

@@ -0,0 +1,45 @@
+## 자바스크립트의 한계
+JS의 특징은 `동적 타입 언어` 라는것이다. <br />
+이는 **변수에 타입을 명시적으로 지정하지 않고, 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다는 것.**
+
+아래 코드를 봐보자
+```js
+const sumNumber = (a, b) => {
+  return a + b;
+};
+
+sumNumber(1, 2); // 3
+sumNumber(100); // NaN
+sumNumber('a', 'b'); // 'ab'
+```
+여기서 주목해야 하는 점은 함수를 실행할 때 인자에 하나의 숫자만 전달하거나, 숫자가 아닌 문자를 전달했다는 점인데, 어떤 에러도 없이 정상적으로 동작함.
+
+이는 개발자의 의도와는 다르게 동작할 수 있음을 뜻함.
+그런데도 JS엔진은 해당 코드를 문제없이 실행시켜 버림. 왜냐하면 JS가 동적 타입 언어이기 때문임. js엔진 입장에서는 주석, 함수이름, 개발자 의도 같은것들은 고려대상이 아닌 것. <br />
+그렇다면 개발자들은 이런 문제를 어떻게 해결하려고 했을까??
+
+개발자들은 이러한 문제로 골머리를 썩었고, js의 인터페이스의 필요성을 느끼게 됨. <br />
+따라서 `JSDoc`, `PropTypes`, `다트`와 같은 해결방안이 등장하게 되었음.
+모두 좋은 방안이었지만 **_"자바스크립트가 스스로 인터페이스를 기술할 수 있는 언어로 진화해야 한다!"_** 라는 목소리는 점점 더 켜졌다.
+
+<br />
+
+## 타입스크립트의 등장
+마이크로소프트는 js의 수퍼셋 언어인 `타입스크립트(ts)`를 공개했다.
+`다트`와 달리 js코드를 그대로 사용할 수 있었고, 아래와 같은 단점을 극복할 수 있었음.
+
+> [!NOTE]
+> **슈퍼셋**
+> <p style="color: #808080">기존 언어에 새로운 기능과 문법을 추가해서 보완하거나, 상향하는 것을 말함.</p>
+
+1. **안정성 향상**  <br />
+ts는 정적타이핑을 제공함으로써 컴파일 단계에서 타입 검사를 해주기 때문에 js를 사용했을 때 빈번하게 발생하는 타입 에러를 줄일 수 있고, 런타임 에러를 사전에 방지할 수 있어서 안정성이 크게 높아짐.
+
+2. **개발 생산성 향상** <br />
+변수와 함수 타입을 추론할 수 있고, 리액트를 사용할떄 어떤 prop을 넘겨야 하는지 매번 확인하지 않아도 바로 볼 수 있어서 개발 생산성이 크기 높아짐.
+
+3. **협업에 유리** <br />
+자동완성 기능이나, 기술된 인터페이스를 활용하여 코드를 쉽게 파악할 수 있음.
+
+4. **js에 점진적으로 적용 가능** <br />
+ts는 js의 슈퍼셋 언어이기 때문에 일부만 적용해도 문제없이 작동이 가능함.

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

@@ -1 +1,122 @@
-<!-- 정리할 내용을 작성해주세요. -->
+## 자료형으로서의 타입
+프로그래밍 언어에서 변수란 값을 저장할 수 있는 공간이자 값을 가리키는 이름임.
+개발자는 변수를 선언하고 그 변수에 특정 값인 데이터를 할당함.
+
+컴퓨터의 메모리 공간은 한정적임.
+따라서 특정 메모리에 값을 효율적으로 저장하려면 값의 크기를 알아야 함.
+개발자는 타입을 사용해서 값의 종류는 명시할 수 있고, 메모리를 더욱 효율적으로 사용 가능함. <br />
+ECMAScript에 표준을 따르는 js의 타입에는 **7가지 데이터 타입(자료형)** 이 있음.
+- `undefined`
+- `null`
+- `Boolean`
+- `String`
+- `Numeric (Number와 BigInt)`
+- `Object`
+- `Symbol`
+
+<br />
+
+## 집합으로서의 타입
+프로그래밍에서 타입은 수학의 집합과 유사함. 타입은 값이 가질 수 있는 범위의 집합을 말함.
+
+```ts
+const num: number = 123;
+const str: string = 'abc';
+
+function func(n: string) {
+  // ...
+}
+
+func(num); // error!
+func(str);
+```
+
+어떤 값이 T라는 타입이라면 컴파일러나 개발자는 이 값으로 어떤일을 할 수 있고, 어떤 일을 할 수 없는지를 사전에 알수 있음.
+위 예시는 마치 집합의 경계처럼 func함수의 인자로 들어갈 수 있는 값을 number타입의 집합으로 제한 하는것임.
+
+```js
+function doule(n) {
+  return n * 2;
+}
+
+double('a'); // NaN
+```
+해당 코드를 보면 개발자는 숫자를 인자로 받을 것 이라고 기대하지만, 의도치 않은 상황이 발생할 수도 있음.
+이때 ts로 타입을 제한하게 되면, 올바르지 않은 값이 들어왔을 경우 에러를 발생시킴.
+
+```ts
+function doule(n: number) {
+  return n * 2;
+}
+
+double('a'); // error!
+```
+
+<br />
+
+## 정적 타입과 동적 타입
+자바스크립트에도 분명히 타입은 존재함.
+다만, 컴파일 이전에 개발자가 직접 타입을 결정해주지 않아도 될 뿐임. <br />
+이처럼 타입을 결정하는 시점에 따라서 타입을 `정적 타입`과 `동적 타입`으로 구분이 가능함.
+
+- `정적 타입 시스템` <br />
+  1. 변수의 타입이 컴파일 타임에 결정됨.
+  2. 코드 수준에서 개발자가 타입을 명시해줘야 함.
+  3. 컴파일 타임에 에러를 발견할 수 있어서 **프로그램의 안정성을 보장**할 수 있음 <br />
+  `자바` `C`, `C++`, `ts`
+
+- `동적 타입 시스템` <br />
+  1. 변수 타입이 런타임에서 결정 됨.
+  2. 개발자가 직접 타입을 정의해줄 필요가 없음.
+  3. **프로그램의 안정성을 보장할 수 없음.** <br />
+  `파이썬`, `js`
+
+> [!NOTE]
+> **컴파일 타임과 런타임** <br />
+> 고급 언어로 작성된 프로그래밍 언어(소스코드)가 기계어로 변환되는 시점을 컴파일 타임이라고 하며, 이후 변환된 파일이 메모리에 적재되어 실행되는 시점을 런타임이라고 함.
+
+<br />
+
+## 강타입과 약타입
+개발자가 타입을 명시하거나, 바꾸지 않았는데도 컴파일러 또는 엔진에 의해서 런타임에 타입이 자동으로 변경되는 것을 `암묵적인 형 변환` 이라고 함. <br />
+이러한 `암묵적인 형 변환`의 여부에 따라서 타입 시스템을 `강타입`과 `약타입`으로 나눌 수 있음.
+- `강타입` <br />
+서로 다른 타입을 갖는 연산을 시도하면 컴파일러 또는 인터프리터에서 에러가 발생함.
+
+- `약타입` <br />
+서로다른 타입을 갖는 값끼리 연산을 할때는 컴파일러 또는 인터프리터가 내부적으로 판단해서 특정 값의 타입을 변환시킨 뒤, 연산을 수행함.
+
+```python
+# 파이썬
+print('2' - 1) # error!
+```
+```js
+// js
+console.log('2' - 1); // 1
+```
+```ts
+// ts
+console.log('2' - 1); // type error!
+```
+
+예시처럼 `c++`, `자바`, `js`에서는 **암묵적인 형 변환**이 발생함.
+이에 반해 `루비`, `파이썬`, `ts`에서는 타입 에러가 발생한다.
+결론적으로 `c++`, `자바`, `js`는 **_약타입 언어_** 로, `루비`, `파이썬`, `ts`는 **_강타입 언어_** 로 분류할 수 있음. <br />
+js는 `약타입 언어`이기때문에 런타임에서 발생할 수 있는 에러를 예측하고, 방지할 수 있는 코드를 작성하는 게 프로그램의 안정성 측면에서 도움이 됨.
+
+`타입 시스템` <br />
+-> 타입 검사기가 프로그램에 타입을 할당하는 데 사용하는 규칙 집합
+타입 시스템은 크게 두가지로 구분 됨.
+1. 어떤 타입을 사용하는지를 컴파일러에게 명시적으로 알려줘야 하는 타입 시스템
+2. 자동으로 타입을 추론하는 타입 시스템
+
+ts는 두가지 시스템의 영향을 모두 받았기 때문에, 두가지의 방식중에 선택할 수 있음.
+
+ <br />
+
+## 컴파일 방식
+`컴파일`이란 보통, 사람이 이해할 수 있는 방식으로 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 바꿔주는 과정을 말함(고급언어 -> 기계어). 즉 개발자가 js로 코드를 작성하면 컴파일러는 0과 1로 이루어진 `바이너리 코드`로 변환시킴. <br />
+이처럼 `컴파일`은 기본적으로 서로 다른 수준 간의 코드 변환을 의미함.
+
+**근데 ts는 컴파일을 하면 타입이 모두 제거된 js코드만 남게 됨.**
+이러한 이유 때문에 ts를 js에 **타입이라는 레이어**를 끼얹은 일종의 `템플릿 언어`또는 `확장 언어`라고 말하는 사람들도 있음.