# 개발 환경 세팅

{% hint style="success" %}
매번 개발 환경 세팅 할 때 마다 애먹었던 이유는 **기술의 변화가 빠르기 때문!**

**전체적인 흐름을 파악**하고 앞으로의 **변경에 대응할 수 있는 능력을 키우자.**
{% endhint %}

## TypeScript + React + Jest + ESLint + Parcel 개발 환경 세팅

### npm

> npm init

**npm init시 묻는 옵션 내용**

```bash
package name: (my-app)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

About to write to /Users/jeongtaeung/Develop/my-app/package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)
```

{% hint style="info" %}
npm init -y -> 추가적인 옵션 물음에 전부 적용하겠다!
{% endhint %}

### package.json

```json
{
  "name": "my-app", // 디폴트 값 상위  디렉토리명, kebab-case로 많이 사용하는 추세
  "version": "1.0.0", // 프로젝트 시멘틱 버전
  "description": "", // 프로젝트 내용 설명
  "main": "index.js",
  "scripts": {
    // 실행 예약어들
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

### .gitignore

> 잊지말고 꼭 작성하자. 최소 `/node_modules` 를 통으로 깃에 올리는 일을 사전에 방지할 수 있다.

```bash
touch .gitignore
```

**.gitignore**

```
// 모두 같은 의미
/node_modules/ -> 패키지 내 루트에 있는 녀석 + 폴더 강조
node_modules/  -> 폴더라는 의미만  강조
node_modules   -> 폴더든 뭐든 알게뭐야 그냥 노드 모듈즈지 ㅋㅋ
```

**.gitignore 그냥 가져다 쓰자**

1. [.gitignore 생성 웹사이트](https://www.toptal.com/developers/gitignore)
2. [github gitignore repo 🥰](https://github.com/github/gitignore)

### dependencies

**devDependencies는 뭔데?**

> 배포될 때 쓰이는 것이 아닌 도구로서 쓰이는 것들을 devDependencies로!

```bash
npm install --save--dev [package]
npm i -D [package] // 축약형
```

* 배포하는 경우 devDependencies를 빼고 설치 가능하다
* 배포할 때 devDependencies를 제외하게 되면 배포하는 크기를 줄일 수 있고 악의적인 공격을 막을 수 있다? -> 좀 더 알아 볼 것

{% hint style="warning" %}
dependency와 devDependency 차이를 완벽히 이해해서 매 프로젝트 마다 깔쌈하게 분리하여 작성해보자
{% endhint %}

### 타입스크립트 설치

```bash
npm i -D typescrript
npx tsc --init
```

{% hint style="info" %}
tsconfig.json 파일의 jsx 속성은 변경하자

"jsx":"react-jsx"

-> react-jsx 모드는 jsx가 사용되는 모든 파일에서 import React 없이 사용할 수 있도록 해준다.

-> React 17 에서 React는 React.createElement를 사용하지 않고 JSX를 자동으로 변환하는 기능이 추가 되었다. 이 기능을 지원하려면 'jsx' 속성은 "react-jsx" 설정해야 한다.

**지금 내 tsconfig.json에 jsx가 preserve 설정인데도 자동 변환 기능이 잘되는데??**

-> 설정해놓은 값이 react-jsx가 아니여도 npm start 실행 시 강제적으로 'react-jsx'로 덮어씌워 적용된다고 한다
{% endhint %}

### ESLint 설치

```bash
npm i -D eslint
npx eslint --init
```

**with Jest**

> Jest를 설치하기 전 미리 설정해두자.

```js
env: {
  browser: true,
  es2021: true,
  jest: true,
},
```

**.eslintignore**

> eslint를 실행할 때 제외할 파일들을 지정 가능

```
/node_modules/
/dist/
/.parcel-cache/
```

### React 설치

```bash
npm i react react-dom

// 관련 타입 설치
npm i -D @types/react @types/react-dom
```

{% hint style="info" %}
요즘 나오는 라이브러리들은 타입이 내장되어 있어 @types와 같은 모듈을 따로 설치 안해줘도 되지만 예\~전에 출시된 라이브러리들은 따로 존재하기에 각각 설치해줘야 한다.
{% endhint %}

### 테스팅 도구 설치 Jest with SWC

```bash
npm i -D jest @types/jest @swc/core @swc/jest \
  jest-environment-jsdom \
  @testing-library/react @testing-library/jest-dom
```

**jest.config.js 파일을 작성해 테스트에서 SWC를 사용하자**

> 타입스크립트 + SWC 환경에서는 추가적인 설정이 필요하다.

```bash
touch jest.config.js
```

* [코드 링크](https://github.com/ahastudio/CodingLife/blob/main/20220726/react/jest.config.js)

```js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            jsx: true,
            decorators: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
      },
    ],
  },
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
};
```

### Parcel 설치

> parcel을 통해 웹 개발 서버를 띄울 수 있다.

```bash
npm i -D parcel
```

```json
{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "source": "./index.html", // origin "main": "index.js" -> 웹서버를 띄울것이므로
  "scripts": {
    "start": "parcel --port 8080",
    "build": "parcel build", // dist 파일 생성
    "check": "tsc --noEmit", // Only 컴파일, 파일생성 X
    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx .", // 형식들 적용
    "test": "jest",
    "coverage": "jest --coverage --coverage-reporters html",
    "watch:test": "jest --watchAll"
  },
  ...
}
```

* [package.json 참고용](https://github.com/ahastudio/CodingLife/blob/main/20220726/react/package.json)

**index.html**

```html
<!DOCTYPE html>
<html>
  /.../
  <body>
    <p>Hellow world</p>
    <!-- import/export 키워드를 사용하는 js 파일은 모듈이라는 개념으로 불리게 된다.-->
    <!-- 이런 모듈타입의 js를 HTML에서 가지고 올 때 type="module" 추가로 작성해주어야 한다. -->
    <script type="module" src="./src/main.tsx"></script>
  </body>
</html>
```

## 키워드 정리

### SWC (stands for Speedy Web Compiler)

> **Rust로 짜여진 컴파일러**로, 현재는 JavaScript/TypeScript **트랜스파일링**을 주로 담당하며 **Babel의 역할을 대체**한다 👋

* **속도와 성능 개선에 초점**을 맞추고 있으며, 기존의 Babel 등의 트랜스파일러를 **압도적으로 뛰어넘는 성능**을 보여준다.
* TypeScript 컴파일은 지원하지만, 타입 체킹을 수행하지 않기 때문에 엄밀히 말하면 tsc를 완전히 대체하지는 않는다.
* 1.2.67버전부터 소스 압축(minification) 및 죽은 코드 제거(dead code elimination) 기능을 지원

**SWC(Rust)가 빠른 이유**

* Rust는 **저수준(기계어) 언어** 이기 때문이다. 자바나 자바스크립트 같은 고수준 언어는 컴퓨터가 해석할 수 있도록 변환하는 중간 단계(컴파일링)가 필요한데 Rust는 그 단계가 필요없다.
* Rust라는 프로그래밍 언어가 이벤트 루프 기반의 싱글 스레드 언어인 자바스크립트와는 다르게 병렬 처리를 고려해서 설계된 언어이기 때문에 **동시에 여러 파일을 처리**할 수 있어서 빠르다

**컴파일링? 트랜스파일링?**

* 컴파일링이란 사람이 이해하기 쉽게 추상화가 많이 된 고수준 언어에서 기계(컴퓨터)가 이해할 수 있는 저수준 언어로 변환하는 것을 의미한다.
* 트랜스파일링은 컴파일링의 하위 분류로 언어를 변환한다는 점은 동일하지만 유사한 두 언어 사이에서 변환해주는 한정된 역할을 제공한다. (Ex ES2021 <-> ES2013, Typescript <-> Javascript)
* 트랜스파일이 컴파일의 하위 범주이기 때문에 구분하지 않고 부를때도 있지만 차이는 명확히 인지하고 넘어가자

### Webpack? Vite? TurpboPack?

> 여러개 파일을 하나의 파일로 합쳐주는 **번들러(bundelr)**

**번들러(bundler)란?**

> 하나의 시작점(entry point)로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.

## 더 공부해야 할 것들

1. [**fnm (Fast Node Manager)**](https://fnm.vercel.app/)
2. [**parcel**](https://medium.com/better-programming/all-you-need-to-know-about-parcel-dbe151b70082)
3. [**.bin**](https://simsimjae.medium.com/%ED%8C%A8%ED%82%A4%EC%A7%80-%EC%95%88%EC%97%90%EB%8A%94-bin%EC%9D%B4%EB%9D%BC%EA%B3%A0%ED%95%98%EB%8A%94-%EC%88%A8%EA%B9%80-%ED%8F%B4%EB%8D%94%EA%B0%80-%EC%A1%B4%EC%9E%AC%ED%95%9C%EB%8B%A4-%EC%9D%B4-%ED%8F%B4%EB%8D%94%EB%8A%94-%EB%AD%90%EB%95%8C%EB%A7%A4-%EC%9E%88%EB%8A%94%EA%B1%B4%EC%A7%80-%EA%B6%81%EA%B8%88%ED%95%B4%EC%84%9C-%EC%B0%BE%EC%95%84%EB%B3%B4%EC%95%98%EB%8B%A4-8257ddaa1a7e)
4. [**why use should SWC**](https://medium.com/@KasraKhosravi/why-you-should-use-swc-and-not-babel-45b9dd15d058)
5. [**An In-Depth Explanation of package.json’s Dependencies**](https://medium.com/better-programming/package-jsons-dependencies-in-depth-a1f0637a3129)

## 간단 회고 (2023.03.06 월)

글쓰는건 너무 x 100 어렵다..😭 강의를 들으면서 정리하려고 하니 시간이 너무 소요된다. 비효율적으로 공부하는 것 같은데.. 어떻게 하면 좋을것인가 좋은 방법을 찾아보자!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_road/week-1/setting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.