[eslint-config-yceffort](https://github.com/yceffort/eslint-config-yceffort)를 사용하면서 개인적으로 굉장히 만족도가 높아졌다. 하지만 한가지 아쉬운 것은 테스트 코드가 없다는 것과, 배포를 할 때 별도의 절차 없이 내 로컬에서 그때 그때 수동으로 하고 있다는 것이었다. 여기에도 CI CD절차가 있다면 좋다고 생각했다.

## 방법1

간단한 방법으로는, 올바른 코드를 작성한다음에, 해당 코드를 `test`시에 `eslint`를 돌리는 방법이다.

`./tests/.eslintrc`

```json
{
  "extends": ["../index"],
  "rules": {
    // your custom rules..
  }
}
```

`camelcase.test.js`

```javascript
const hello_world = 'hello_world'
console.log(hello_world)
```

나의 eslintrc 옵션에서는 `camelcase`가 off로 되어 있고, 정상적으로 off가 되어 있다면 test 시에 eslint 에러가 나지 않을 것이다.

하지만 이 방법은 아쉽게도, lint가 정상적으로 작동하는지에 대해서만 알 수 있을 뿐, eslint가 실패시 원하는 에러가 뜨는지, 경고가 떴을 경우에는 해당 경고가 뜨는지 까지는 알 수 없다.

## 방법2

확실한 방법은 [eslint-nodejs-api](https://eslint.org/docs/developer-guide/nodejs-api)를 사용하는 것이다. nodejs api 레벨에서 테스트를 해보고, 그 결과를 가지고 좀더 정확히 분석하는 방법이다.

```javascript
const { ESLint } = require('eslint')
const config = require('../../../index')
const {
  rules: { curly },
} = require('../../../rules/style')

const RULE_ID = 'curly'

const eslint = new ESLint({
  // 특정 룰만 가져온 이유는, 다른 룰로 인해서 에러가 나는 것을 방지하기 위해서다.
  // 즉 순수하게 테스트 하고 싶은 룰에 대해서만 룰을 집어 넣었다.
  baseConfig: { ...config, rules: { curly } },
})

describe('eslint-config-yceffort curly', function () {
  it('right curly', async function () {
    const [result] = await eslint.lintFiles([`${__dirname}/curly.right.js`])

    const errors = result.messages.some((message) => message.ruleId === RULE_ID)

    // 올바른 케이스이기 때문에 true로 비교 하고 싶어서 이렇게 했다.
    expect(!errors).toBe(true)
  })

  it('wrong curly', async function () {
    const [result] = await eslint.lintFiles([`${__dirname}/curly.wrong.js`])

    const errors = result.messages.some((message) => message.ruleId === RULE_ID)

    // 잘못된 케이스이기 때문에 false로 비교 하고 싶어서 이렇게 했다.
    expect(!errors).toBe(false)
  })
})
```

`curly.wrong.js`

```javascript
if (true) {
  if (true) console.log('hello')
}
```

`curly.right.js`

```javascript
if (true) {
  for (let i of [1, 2, 3, 4, 5]) {
    console.log(i)
  }
}
```

github workflow 결과: https://github.com/yceffort/eslint-config-yceffort/runs/1345142937?check_suite_focus=true

## 결론

방법1은 작성하기 간단한 반면, 아주 정확하게 거를 수가 없다는 단점이 있고, 방법2는 작성하기엔 빡세지만 원하는 만큼 다양한 케이스에 대해서 테스트 코드를 작성할 수 있다는 장점이 있다.

방법2로 우리 조직의 `eslint-config`도 관리해보고 싶었지만, test case 작성이 너무 어렵다는 이유로 방법1을 선택했다. 🤔 (서운하지 않습니다.) 아무도 안쓰는 내 `eslint-config-yceffort`는 저렇게 관리해봐야겠다.


eslint-config 를 위한 테스트 코드를 작성하기 (CI)

[이 글](https://v8.dev/features/promise-combinators)을 번역 하고 요약했습니다.

| name | description | |
| -------------------- | ----------------------------------------------- | -------------------------------------------------------------------- |
| `Promise.allSettled` | does not short-circuit | this proposal 🆕 |
| `Promise.all` | short-circuits when an input value is rejected | added in ES2015 ✅ |
| `Promise.race` | short-circuits when an input value is settled | added in ES2015 ✅ |
| `Promise.any` | short-circuits when an input value is fulfilled | [separate proposal](https://github.com/tc39/proposal-promise-any) 🔜 |

## Promise.all

Promise를 배열로 받을 수 있으며, 모두 실행이 끝나거나 이 중 하나라도 reject 되면 끝나게 된다.

유저가 버튼을 클릭했을 때, CSS를 모두 다운로드 해서 완전히 새로운 UI를 그려주는 스펙을 상상해보자.

```javascript
const promises = [
 fetch('/component-a.css'),
 fetch('/component-b.css'),
 fetch('/component-c.css'),
]
try {
 const styleResponses = await Promise.all(promises)
 enableStyles(styleResponses)
 renderNewUi()
} catch (reason) {
 displayError(reason)
}
```

모든 요청이 성공해야 렌더링이 필요할 것이다. 만약 여기에서 하나라도 오류를 뱉게 된다면, 다른 작업이 끝나는 것을 기다리지 않고 바로 종료한다.

## Promise.race

`Promise.race`는 여러 개의 promise를 실행시킬 때, 아래와 같은 상황에서 유용하다.

1. 하나라도 먼저 끝나는 것을 원하는 경우
2. 바로 Promise가 리젝트 되었을 때 실행되길 원하는 경우

즉, Promise 중 하나가 거부되면 즉시 오류를 개별적으로 처리하게 된다.

```javascript
try {
 const result = await Promise.race([
 performHeavyComputation(),
 rejectAfterTimeout(2000),
 ])
 renderResult(result)
} catch (error) {
 renderError(error)
}
```

위 예제에서는 시간이 오래 걸리는 연산을 수행하거나, 2초후에 리젝트 되는 함수와 경쟁을 한다. 성공 또는 실패 중 첫번째로 실행되는 결과에 따라서 결과 또는 오류메시지를 처리할 수 있다.

## Promise.allSettled

`Promise.allSettled`는 모든 Promise 들이 종료되면, 성공과 실패와 상관없이 실행된다.
이는 Promise의 성공 실패가 중요하지 않고 단순히 종료되는 것을 확인하고 싶을 때 유용하다. 예를 들어, 모든 Promise가 끝나고 나면 로딩 스피너를 없애는 케이스가 존재할 수 있다.

```javascript
const promises = [
 fetch('/api-call-1'),
 fetch('/api-call-2'),
 fetch('/api-call-3'),
]

await Promise.allSettled(promises)
// 성공 실패와 관련없이 모두 종료가 되면 실행된다.
removeLoadingIndicator()
```

## Promise.any

`Promise.any`는 Promise가 하나라도 실행이 종료되면 실행된다는 점이 `Promise.race`와 유사하다. 다만 다른 점은, 하나가 실패한다고 해서 종료되지 않는다.

```javascript
const promises = [
 fetch('/endpoint-a').then(() => 'a'),
 fetch('/endpoint-b').then(() => 'b'),
 fetch('/endpoint-c').then(() => 'c'),
]
try {
 const first = await Promise.any(promises)
 // 첫번째로 성공한 Promise
 console.log(first)
 // → e.g. 'b'
} catch (error) {
 // 모든 Promise가 거절될 경우
 console.assert(error instanceof AggregateError)
 // 실패한 값을 프린트 한다.
 console.log(error.errors)
 // → [
 // <TypeError: Failed to fetch /endpoint-a>,
 // <TypeError: Failed to fetch /endpoint-b>,
 // <TypeError: Failed to fetch /endpoint-c>
 // ]
}
```

`Promise.any`에서 두 개 이상의 에러가 날 경우, 한번에 여러 에러들을 합칠 수 있는 [AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError)를 사용할 수도 있다.

```javascript
Promise.any([Promise.reject(new Error('some error'))]).catch((e) => {
 console.log(e instanceof AggregateError) // true
 console.log(e.message) // "All Promises rejected"
 console.log(e.name) // "AggregateError"
 console.log(e.errors) // [ Error: "some error" ]
})
```

Promise 관련 API 살펴보기

<a href="https://v8.dev/features/promise-combinators">이 글</a>을 번역 하고 요약했습니다.
<table>
<thead>
<tr>
<th>name</th>
<th>description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Promise.allSettled</code></td>
<td>does not short-circuit</td>
<td>this proposal 🆕</td>
</tr>
<tr>
<td><code>Promise.all</code></td>
<td>short-circuits when an input value is rejected</td>
<td>added in ES2015 ✅</td>
</tr>
<tr>
<td><code>Promise.race</code></td>
<td>short-circuits when an input value is settled</td>
<td>added in ES2015 ✅</td>
</tr>
<tr>
<td><code>Promise.any</code></td>
<td>short-circuits when an input value is fulfilled</td>
<td><a href="https://github.com/tc39/proposal-promise-any">separate proposal</a> 🔜</td>
</tr>
</tbody>
</table>
<h2 id="promiseall">Promise.all</h2>
Promise를 배열로 받을 수 있으며, 모두 실행이 끝나거나 이 중 하나라도 reject 되면 끝나게 된다.
유저가 버튼을 클릭했을 때, CSS를 모두 다운로드 해서 완전히 새로운 UI를 그려주는 스펙을 상상해보자.
<pre class="language-javascript"><code class="language-javascript">const promises = [
 fetch('/component-a.css'),
 fetch('/component-b.css'),
 fetch('/component-c.css'),
]
try {
 const styleResponses = await Promise.all(promises)
 enableStyles(styleResponses)
 renderNewUi()
} catch (reason) {
 displayError(reason)
}
</code></pre>
모든 요청이 성공해야 렌더링이 필요할 것이다. 만약 여기에서 하나라도 오류를 뱉게 된다면, 다른 작업이 끝나는 것을 기다리지 않고 바로 종료한다.
<h2 id="promiserace">Promise.race</h2>
<code>Promise.race</code>는 여러 개의 promise를 실행시킬 때, 아래와 같은 상황에서 유용하다.
<ol>
<li>하나라도 먼저 끝나는 것을 원하는 경우</li>
<li>바로 Promise가 리젝트 되었을 때 실행되길 원하는 경우</li>
</ol>
즉, Promise 중 하나가 거부되면 즉시 오류를 개별적으로 처리하게 된다.
<pre class="language-javascript"><code class="language-javascript">try {
 const result = await Promise.race([
 performHeavyComputation(),
 rejectAfterTimeout(2000),
 ])
 renderResult(result)
} catch (error) {
 renderError(error)
}
</code></pre>
위 예제에서는 시간이 오래 걸리는 연산을 수행하거나, 2초후에 리젝트 되는 함수와 경쟁을 한다. 성공 또는 실패 중 첫번째로 실행되는 결과에 따라서 결과 또는 오류메시지를 처리할 수 있다.
<h2 id="promiseallsettled">Promise.allSettled</h2>
<code>Promise.allSettled</code>는 모든 Promise 들이 종료되면, 성공과 실패와 상관없이 실행된다.
이는 Promise의 성공 실패가 중요하지 않고 단순히 종료되는 것을 확인하고 싶을 때 유용하다. 예를 들어, 모든 Promise가 끝나고 나면 로딩 스피너를 없애는 케이스가 존재할 수 있다.
<pre class="language-javascript"><code class="language-javascript">const promises = [
 fetch('/api-call-1'),
 fetch('/api-call-2'),
 fetch('/api-call-3'),
]

await Promise.allSettled(promises)
// 성공 실패와 관련없이 모두 종료가 되면 실행된다.
removeLoadingIndicator()
</code></pre>
<h2 id="promiseany">Promise.any</h2>
<code>Promise.any</code>는 Promise가 하나라도 실행이 종료되면 실행된다는 점이 <code>Promise.race</code>와 유사하다. 다만 다른 점은, 하나가 실패한다고 해서 종료되지 않는다.
<pre class="language-javascript"><code class="language-javascript">const promises = [
 fetch('/endpoint-a').then(() => 'a'),
 fetch('/endpoint-b').then(() => 'b'),
 fetch('/endpoint-c').then(() => 'c'),
]
try {
 const first = await Promise.any(promises)
 // 첫번째로 성공한 Promise
 console.log(first)
 // → e.g. 'b'
} catch (error) {
 // 모든 Promise가 거절될 경우
 console.assert(error instanceof AggregateError)
 // 실패한 값을 프린트 한다.
 console.log(error.errors)
 // → [
 // &#x3C;TypeError: Failed to fetch /endpoint-a>,
 // &#x3C;TypeError: Failed to fetch /endpoint-b>,
 // &#x3C;TypeError: Failed to fetch /endpoint-c>
 // ]
}
</code></pre>
<code>Promise.any</code>에서 두 개 이상의 에러가 날 경우, 한번에 여러 에러들을 합칠 수 있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError">AggregateError</a>를 사용할 수도 있다.
<pre class="language-javascript"><code class="language-javascript">Promise.any([Promise.reject(new Error('some error'))]).catch((e) => {
 console.log(e instanceof AggregateError) // true
 console.log(e.message) // "All Promises rejected"
 console.log(e.name) // "AggregateError"
 console.log(e.errors) // [ Error: "some error" ]
})
</code></pre>

다른 사람들이 쓴 리액트 코드를 볼 때 마다 몇가지 눈여겨 보는게 있는데, 그 중 하나가 jsx안의 조건절이다. 이 사람은 `&&`을 선호나는지, 아니면 3항연산자를 선호하는지 살펴본다. 근데 보통은 간단해서 그런지 `&&`를 쓰는 경우가 더 많은 것 같다. 예전에는 이 것과 관련해서 코드 리뷰를 올려볼까도 했는데, 멀쩡히 작동하는 코드인데 괜히 시비 거는 것 같아서, 고칠 코드도 많아서, 그리고 결정적으로 소심해서 그냥 그냥 넘어가고는 했다. 그렇다. 이 글은 그냥 소심한 반항인 것이다.

```jsx
export default function StudentsList({ students }) {
 return (
 <ul>
 {students.map(({ id, name, score }) => (
 <li key={id}>
 {name} {score}
 </li>
 ))}
 </ul>
 )
}
```

여기에 이제 `&&`로 다음과 같은 조건을 추가했다고 생각해보자.

```jsx
export default function StudentsList({ students }) {
 return (
 <ul>
 {students.length &&
 students.map(({ id, name, score }) => (
 <li key={id}>
 {name} {score}
 </li>
 ))}
 </ul>
 )
}
```

만약 `students`에 `[]` 빈 배열이 온다면 렌더링이 안되어야 할 것 같지만, 실제로는 `0`이 프린트 된다.

이 버그는 예전 회사에서도 봤던 버그고, 심지어 페이팔에서도 이러한 버그가 있었다고 한다.

![paypal-bug](https://kentcdodds.com/static/330366840b58941a34169d30db87884b/e3189/no-contacts.png)

자바스크립트에서 `0`은 `falsy`한 값으로 취급되기 때문에, `&&` 우측에 있는 값은 계산하지 않는다. 근데 어디까지나 `falsy`한 값인 거지, `null`이나 `undefined`처럼 렌더링을 안하는 값은 아니기 때문에 (순수하게 빈값으로 계산되지는 않으므로) 0이 나오게 된다.

![terrible](https://upload.inven.co.kr/upload/2014/12/23/bbs/i3324974586.jpg)

해결책은, `students.length === 0 && ...`을 쓰거나, 삼항연산자로 바꾸면 된다.

```jsx
export default function StudentsList({ students }) {
 return (
 <ul>
 {students.length
 ? students.map(({ id, name, score }) => (
 <li key={id}>
 {name} {score}
 </li>
 ))
 : null}
 </ul>
 )
}
```

아래와 같은 코드는 어떤가?

```jsx
// students가 undefined로 넘어왔다면?
export default function StudentsList({ students }) {
 return (
 students && (
 <ul>
 {students.map(({ id, name, score }) => (
 <li key={id}>
 {name} {score}
 </li>
 ))}
 </ul>
 )
 )
}
```

다음과 같은 에러가 날것이다.

```bash
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
```

(대충 또 끔찍하다는 이미지)

이 경우에는 `undefined && ...` 이 되기 때문에, `undefined`가 리턴되고, 위와 같은 에러가 뜨게 된다.

```javascript
0 && true // 0
true && 0 // 0
false && true // false
true && '' // ''
[] && true // true
```

이 처럼 `&&`는 자주 쓰는 `if`문 과 동작이 미묘하게 다르다. 그래서 이게 자바스크립트 퀴즈에 종종 나오곤한다.

```javascript
const notifications = 1

console.log(
 `You have ${notifications} notification${notifications !== 1 && 's'}`,
)
```

> 출처: https://quiz.typeofnan.dev/short-circuit-notifications/ `&&`은 정식 명칭으로 `Short-circuit evaluation`이다.

지금까지 말한 예제와는 조금 다르지만, 이것도 마찬가지로 의도 대로 동작하지 않는다.

```bash
You have 1 notificationfalse
```

## 그래서

명백하게 조건에 따라서 jsx에서 렌더링을 하고 싶지 않다면 삼항연산자를 썼으면 좋겠다.

- 우리가 이해하고 있는 `if`문 동작과 일치한다.
- 불필요한 버그나, 의도치 않은 동작 만들지도 않는다.
- jsx에 `null`이 명시적으로 표시되어 있으면 다른 개발자들도 이 부분에서 렌더링이 안되는 경우가 있다는 것을 명시적으로 알 수 있고 이를 유념할 수 있다.
- 삼항연산자가 더 이쁘다. 👀

사실 그냥 (몇 가지 합리적인 이유가 있는) 개인적인 취향임

JSX에서 && 대신에 3항 연산자를 더 선호하는 이유

nextjs 10.0.0이 릴리즈 되었다. 내가 좋아하는 오픈소스 중 하나 이기 때문에, 릴리즈 노트를 읽어보면서 당장 내 블로그에 적용해보았다. 그리고 적용하면서 어떤게 바뀌었는지 하나씩 확인해보려고 한다.

- 릴리즈노트: https://nextjs.org/blog/next-10

## 빌트인 이미지 컴포넌트, 그리고 자동 이미지 최적화

이미지는 마크업과 함께 웹에서 큰 트래픽을 유발하는 범인중 하나다. 이러한 이미지를 최적화 하기 위해, `next/image` 라는 전용 이미지 컴포넌트를 적용하였다. 브라우저에서 `Webp`가 사용 가능하다면, 해당 이미지를 변환해서 적은 용량으로 내려주고, 동시에 lazy loading도 해준다고 한다.

### 대상 이미지

![blog profile](./images/profile.png)

### 적용전

```typescript
const AuthorPhoto = styled.image`
 display: inline-block;
 margin-bottom: 0;
 border-radius: 50%;
 background-clip: padding-box;
 width: 75px;
 height: 75px;
 cursor: pointer;
`

return <AuthorPhoto alt={name} src={photo} />
```

```html
<img
 alt="yceffort"
 src="/profile.png"
 class="Author__AuthorPhoto-sc-1ywmx02-0 fMrwt"
/>
```

```bash
accept-ranges: bytes
access-control-allow-origin: *
age: 1331855
cache-control: public, max-age=0, must-revalidate
content-disposition: inline; filename="profile.png"
content-length: 30710
content-type: image/png
date: Wed, 28 Oct 2020 02:05:42 GMT
etag: W/"078a2ad86a1350e007d801e7f74b073ed415e5bdd60a60e5b65b9fafe972af03"
server: Vercel
status: 200
strict-transport-security: max-age=63072000
x-content-type-options: nosniff
x-frame-options: DENY
x-vercel-cache: HIT
x-vercel-id: icn1::chhv4-1603850742953-91ba1434fc9c
x-xss-protection: 1; mode=block
```

### 적용후

그리고 이를 `next/image`로 아래와 같이 바꿨다.

```typescript
import Image from 'next/image'

const AuthorPhoto = styled(Image)`
 display: inline-block;
 margin-bottom: 0;
 border-radius: 50%;
 background-clip: padding-box;
 width: 75px;
 height: 75px;
 cursor: pointer;
`

// width와 height를 지정해줘야 한다.
return <AuthorPhoto alt={name} src={photo} width={75} height={75} />
```

```html
<img
 alt="yceffort"
 data-src="/_next/image?url=%2Fprofile.png&amp;w=320&amp;q=75"
 data-srcset="/_next/image?url=%2Fprofile.png&amp;w=320&amp;q=75 320w"
 class="Author__AuthorPhoto-sc-1ywmx02-0 fMrwt"
 style="visibility: visible; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"
 src="/_next/image?url=%2Fprofile.png&amp;w=320&amp;q=75"
 srcset="/_next/image?url=%2Fprofile.png&amp;w=320&amp;q=75 320w"
/>
```

```bash
accept-ranges: bytes
access-control-allow-origin: *
age: 276
cache-control: public, max-age=0, must-revalidate
content-disposition: inline; filename="profile.png"
content-length: 18898
content-type: image/webp
date: Wed, 28 Oct 2020 02:06:37 GMT
server: Vercel
status: 200
strict-transport-security: max-age=63072000; includeSubDomains; preload
x-content-type-options: nosniff
x-frame-options: DENY
x-robots-tag: noindex
x-vercel-cache: HIT
x-vercel-id: icn1::q6js7-1603850797310-7e6bd3beb3f0
x-xss-protection: 1; mode=block
```

일단 이미지가 눈에 띄게 lazy loading이 되었고 (나중에 떴고) 이미지 사이즈도 webp를 사용하면서 눈에 띄게 줄어든 모습이다. 구글 크롬팀에서 이미지 성능을 향상 시킬 수 있는 리액트 컴포넌트를 만들 수 있도록 도와주었다고 하는데, 나중에 소스 코드를 보는 것도 재밌을 것 같다.

## 국제화 라우팅

당장 내가 쓸 일이 있을지는 모르겠지만, 언어별 라우팅을 지원한다. 그리고 최신 브라우저가 지원하는 `Accept-language`헤더를 기반으로 언어 감지를 할 수 있는 기능도 추가되었다고 한다.

```javascript
// next.config.js
module.exports = {
 i18n: {
 locales: ['en', 'nl'],
 domains: [
 {
 domain: 'example.com',
 defaultLocale: 'en',
 },
 {
 domain: 'example.nl',
 defaultLocale: 'nl',
 },
 ],
 },
}
```

## 성능 분석

nextjs를 사용하는 웹 어플리케이션의 성능을 분석할 수 있는 도구를 지원한다.

https://nextjs.org/analytics

당장은 vercel만 지원하는 것 같은데(?) 운좋게도(?) 블로그가 vercel로 서빙되고 있기 때문에 당장 시도해보러 갔다.

![analytics](./images/analytics1.png)

![analytics](./images/analytics2.png)

(점수가 깎이는 것은 아마도 메인페이지의 페이지 전환 버튼 때문인 것 같다. 현재 타이틀 제목 길이에 따라서 페이징 버튼이 위아래로 일관되지 못하게 움직이는 버그가 있다.)

일단 모양새와 제공데이터는 구글 라이트 하우스와 비슷한데, 차이가 있다면 page 별로 데이터도 지원한다는 것이다. 다만 서두에도 말한 것 처럼 vercel을 써야만 누릴 수 있는 기능이라 🤔 근데 라이트 하우스에 비해 크게 차별점도 없다면...

## 커머스 키트 제공

https://nextjs.org/commerce

Next.js가 본격적으로 돈을 벌 만한 비즈니스를 시작하는 것 같다. 간단하게 말헤 next.js로 커머스 사이트를 만들 수 있는 도구를 제공한다고 한다.

## 리액트 17 지원

react 17을 지원한다. breaking change가 없으므로 바로 적용 가능하며 react를 import 하지 않아도 사용할 수 있는 jsx transform 기능도 사용할 수 있게 되었다.

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

## getStaticProps, getServerSideProps 빠른 새로고침

이제 해당 두 함수에서 코드 변화가 일어나면, 자동으로 새로고침을 지원한다고 한다. 이게 안되었다는 걸 이제 알았는데(??????) 해보니까 잘된다.

## 써드 파티 리액트 컴포넌트에서 css 임포트 가능

```javascript
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
```

이를 바탕으로, 단일 컴포넌트 레벨에서 CSS 코드 스플리팅이 가능해졌다. 자세한 내용은 https://nextjs.org/docs/basic-features/built-in-css-support

## `href` 자동화

이전까지, 다이나믹 라우팅을 사용하기 위해서 `next/link`에서 `href` `as`를 넣어 주어야 했다.

```html
<link href="/categories/[slug]" as="/categories/books" />
```

여기서 `as`는 실제 브라우저 URL 바에서 보이는 주소인데, 이전까지는 `href`와 `as`를 아래와 같이 따로 넣어주어야 했다.

```javascript
const pids = ['id1', 'id2', 'id3']
{
 pids.map((pid) => (
 <Link href="/post/[pid]" as={`/post/${pid}`}>
 <a>Post {pid}</a>
 </Link>
 ))
}
```

그러나 나를 비롯해서 많은 개발자들이 `as`의 사용에 대해서 혼란이 있었던 것 같다. (`as`를 넣어야 하는데 까먹는 다든지) 그래서 `as`가 더이상 필요없어졌다고 한다. 이제는 기존에 `as`에 넣었던 값을 `href`에 넣어주면 된다. 그게 훨씬 더 이전의 리액트나 HTML경험에서도 자연스러워 보인다.

## `@next/codemod` cli

nextjs 에서 기능이 deprecated 되는 등의 대규모 코드 베이스 변경이 필요한 경우에 사용할 수 있는 툴이다. codemode는 소스 코드 업데이트를 위해 프로젝트에서 실행할 수 있는 자동화 코드 변경 툴이다.

https://nextjs.org/docs/advanced-features/codemods

## `getStaticPaths`에 블로킹 fallback 추가

`getStaticProps` 와 `getStaticPaths`에 `fallback` 속성이 추가되어 있었다. 이 속성은 최초에는 정적 페이지 (fallback 페이지)를 제공하고, 이후 요청 시에는 완전히 렌더링된 콘텐츠를 제공할 수 있도록 도와주는 기능이었다. 그러나 몇몇 개발자들이, 사용자가 페이지를 처음 요청할때는 사전 렌더링을 차단할 수 있는 옵션을 요구했었나 보다. (나또한 fallback 페이지를 보여주는 것이 사용자들에게 안좋은 사용자 경험을 제공한다고 생각했다. ) 그래서 `blocking`옵션이 추가되었다.

```javascript
export function getStaticPaths() {
 return {
 fallback: 'blocking',
 }
}
```

이 옵션을 추가하면, fallback 페이지를 보여주는 대신에, 그냥 최초 렌더링이 서버에서 내려올 때 까지 기다린다.

## 결론

여러가지로 nextjs는 정말로 잘 관리되고 있는 리액트 SSR 프레임워크다. 단순히 nextjs 뿐만 아니라 여러가지로 nextjs를 중심으로 다양한 생태계를 만들어 가려는 것이 보인다.

모질라나 webpack 등 순수하게 기부로 운영되고 있는 대규모 오픈소스 프로젝트들이 코로나 시국이 닥치면서 생존 문제에 직면한 것을 보고 마음이 안타까웠다. 이러한 문제를 vercel도 알고 있는 듯, 여러가지로 수익화를 하려는 노력이 보였다. `vercel`, `next commerce` 등의 비즈니스를 통해서, 단순히 기부에 의존하는 것이 아니라 다각도로 생존에 대해 고민하고 있는 것이 보인다. 개인적으로 다 잘되었으면 하는 바람이다.

회사를 옮기면서 nextjs는 업무에서는 더 이상 쓰지 못하고 있지만 (ㅠㅠ) 블로그나 개인 프로젝트에서는 나름 적극적으로 사용하고 있었다. 심지어 지금 하고있는 nextjs conf 도 꼬박 꼬박 잘챙겨보고 있다. (미리 신청해서 티켓도 받아놨었는데 어디간지 모르겠네)

전 회사 사람들은 next github에 issue 도 올려서 contribute도 했는데 아직도 나는 가져다 쓰고 구글링 하기에 바쁘다 😇

같은, 그리고 연차도 더 많은 개발자로서 부끄럽지 않을 수가 없는 일이다. 조만간 오픈소스에 기여할 날도 오기를 바라며 열심히 공부를 해야겠다.

Nextjs 10 릴리즈 및 적용 후기

ECMAScript 5 스펙 중에 아래와 같은 것이 있다.

- `Object.freeze()`
- `Object.seal()`
- `Object.preventExtensions()`

얼핏보면 이름까지 비슷해보이는 세 메소드의 차이를 알기 위해서는, 객체의 구조에 대한 기본적인 지식이 있어야 한다.

## 객체의 구조

자바스크립트에서 객체는 특정 속성 또는 동작, 메소드를 포함할 수 있는 데이터 유형이다. 이러한 속성은 변경, 삭제, 혹은 새로운 속성 값을 추가할 수도 있다. 여기에는 두가지 유형이 있다.

- Data Properties: 객체 내부에 정의 되어 있는 일반적인 속성을 의미한다.
- Accessor Properties: 접근자 속성이라고도 하며, 객체의 값을 설정하거나 가져올 수 있는, getter 와 setter라고 보면된다. 이들은 `get` `set` 으로 네이밍 되어 있다.

```javascript
let person = {
  firstName: 'yongchan',
  lastName: 'Kim',

  get fullName() {
    return `${this.firstName} ${this.lastName}`
  },

  set fullName(name) {
    ;[this.firstName, this.lastName] = name.split(' ')
  },
}

person.fullName = 'yc effort'

console.log(person.firstName) // yc
console.log(person.lastName) // effort
```

우리가 생성하는 모든 객체는, 자바스크립트 객체 생성자의 속성을 상속 받게 된다. 그 중 하나가 `Object.prototype`이다. `prototype`속성을 활용해서, 존재하는 모든 객체에 새로운 속성을 추가할 수 있다.

```javascript
let person = {
  firstName: 'yongchan',
  lastName: 'Kim',
```

위에서 예를 든 이 객체에서, 각각의 속성은 다음과 같은 메타데이터를 가지고 있다.

- `enumerable` (boolean): true 라면 loop를 돌아서 확인 가능하다.

```javascript
let obj = {
  x: 1,
  y: 2,
}

Object.defineProperty(obj, 'x', {
  enumerable: false, // false
  configurable: true,
  writable: true,
  value: 1,
})

Object.defineProperty(obj, 'y', {
  enumerable: true,
  configurable: true,
  writable: true,
  value: 2,
})

Object.keys(obj) // ['y'] 만 뜬다 띠요오오오오옹
```

- `configurable` (boolean): true 라면 재 설정이 가능하다.

```javascript
let obj = {
  x: 1,
  y: 2,
}

Object.defineProperty(obj, 'x', {
  enumerable: true,
  configurable: false, // false
  writable: true,
  value: 1,
})

delete obj.x // false 가 뜨면서 삭제가 안됨
delete obj.y // true 가 리턴되고 삭제도됨
```

- `writable` (boolean): true라면 값이 변경 될 수 있다.

```javascript
let obj = {
  x: 1,
  y: 2,
}

Object.defineProperty(obj, 'x', {
  enumerable: true,
  configurable: true,
  writable: false, // false
  value: 1,
})

obj.x = 100 // 100 이 리턴되긴 하는데 수정은 안되있음
obj.y = 100 // 100 이 리턴되며 수정도 되있음
```

반대로, 접근자 속성은 값을 가지고 있지 않다. 이들은 `get` `set` 함수를 가지고 있다.

- `get`
- `set`
- `enumerable`
- `configurable`

값이 없기 때문에, `writeable`은 존재하지 않는다.

```javascript
let obj = {
  x: 1,
  y: 2,
}
```

## Object.freeze()

- 속성을 추가할 수 없다.
- 존재하는 속성을 삭제할 수 없다.
- 변경할 수 없다.
- 속성에 대해 `configurable`을 변경할 수도 없다. `writable` `configurable`는 false로 되어 있다.
- prototype도 변경할 수 없다.
- `freeze()` 되어 있는 객체에 변경하려고 하는 시도는 모두 에러를 내뱉는다.
- `Object.isFrozen()`으로 확인이 가능하다.

## Object.seal()

- 속성을 추가할 수 없다.
- 존재하는 속성을 삭제할 수도 없다.
- 존재하는 속성에 대해 `reconfigure`할 수 없다.
- 데이터 속성을 접근자 속성으로 바꾸거나, 그 반대로도 불가능하다.
- 그러나 존재하는 값에 대해서 수정은 가능하다.
- 또한 존재하는 값에 대해서 추가가 가능하다.
- 위 아래 두 메소드와는 다르게, seal은 봉인한 객체를 리턴하므로, 해당 객체를 써야 한다.

```javascript
let obj = {
  x: 1,
  y: 2,
  z: {
    a: 1,
    b: 2,
  },
}

let sealedObj = Object.seal(obj)
sealedObj.x = 100 // 100 으로 변경된다.
sealedObj.z.c = 300 // 가능.
sealedObj.a = 100 // 이건 안됨
delete sealedObj.x // 불가능
```

## Object.preventExtensions()

전달 받은 객체를 더 이상 확장이 불가능한 상태로 만든다. 더 이상 새 속성을 추가할 수가 없다. 상위 집합 객체에서 기능을 상속한다.

```javascript
let obj = {
  x: 1,
  y: 2,
  z: {
    a: 1,
    b: 2,
  },
}

Object.preventExtensions(obj)
obj.x = 100 // 100 으로 변경된다.
obj.z.c = 3 // 가능
delete obj.z // 가능. 왜냐면 확장만 막기 때문.
```

갑자기 이 글을 쓴 이유는 https://v8.dev/blog/react-cliff 이것 때문이다. 다음에 계속 🤔

ECMAScript 5부터 있었는데 몰랐음

yceffort

eslint-config 를 위한 테스트 코드를 작성하기 (CI)

Promise 관련 API 살펴보기

JSX에서 && 대신에 3항 연산자를 더 선호하는 이유

Nextjs 10 릴리즈 및 적용 후기

Object.freeze(), Object.seal(), Object.preventExtensions()의 차이