
네이버 클라우드에서 Rocky Linux 8.8 버전을 사용하고 있는데<br>
`yum update` 같이 패키지 업데이트를 하려고 하면 에러가 떴다...<br>
에러 메시지를 보면 미러 사이트에서 특정 repository에 대한 메타데이터를 받아오질 못하고 있고<br>
모든 미러 사이트에서 404 에러가 뜨며 다운로드를 실패했다는 것이다.

```bash
Rocky Linux 8.8 - Extras    
Errors during downloading metadata for repository 'extras':
  - Status code: 404 for https://rocky-linux-asia-southeast1.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.160.39.155)
  - Status code: 404 for https://rocky-linux-me-west1.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.149.26.62)
  - Status code: 404 for https://rocky-linux-asia-northeast1.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.160.117.186)
  - Status code: 404 for https://rocky-linux-asia-east2.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 35.241.40.125)
  - Status code: 404 for https://rocky-linux-asia-northeast3.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 35.186.196.188)
  - Status code: 404 for https://rocky-linux-asia-northeast2.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.107.160.108)
  - Status code: 404 for https://rocky-linux-asia-south1.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.120.3.13)
  - Status code: 404 for https://rocky-linux-asia-east1.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 35.186.202.231)
  - Status code: 404 for https://rocky-linux-asia-southeast2.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.111.41.84)
  - Status code: 404 for https://rocky-linux-asia-south2.production.gcp.mirrors.ctrliq.cloud/pub/rocky//8.8/extras/x86_64/os/repodata/repomd.xml (IP: 34.149.203.6)
Error: Failed to download metadata for repo 'extras': Cannot download repomd.xml: Cannot download repodata/repomd.xml: All mirrors were tried
Adding repo from: https://download.docker.com/linux/centos/docker-ce.repo

Rocky Linux 8.8 - PowerTools
Errors during downloading metadata for repository 'powertools':
  - Status code: 404 for http://dl.rockylinux.org/pub/rocky/8.8/PowerTools/x86_64/os/repodata/repomd.xml (IP: 151.101.198.132)
Error: Failed to download metadata for repo 'powertools': Cannot download repomd.xml: Cannot download repodata/repomd.xml: All mirrors were tried
```

<br>

실제로 에러 메시지에 뜨는 주소로 접근해도 에러가 뜬다.<br>
<img src="/posts/ncp-rocky-mirror-404-error/repo-nginx-error.png" width="500px"/>

<br>
Extras와 PowerTools 이 repository에서만 발생하는 에러여서<br>
다른 repository의 .repo 파일들을 확인했는데 차이점이 있었다.<br>

`/etc/yum.repos.d` 디렉토리에 패키지 관련 .repo 파일들이 있는데<br>
Rocky와 관련된 파일들 중 `Rocky-BaseOS.repo`와 문제가 되고 있는 `Rocky-Extras.repo` 둘을 비교해보면 baseurl이 다름을 알 수 있다.<br>

```bash
# Rocky-BaseOS.repo
#
# The mirrorlist system uses the connecting IP address of the client and the
# update status of each mirror to pick current mirrors that are geographically
# close to the client.  You should use this for Rocky updates unless you are
# manually picking other mirrors.
#
# If the mirrorlist does not work for you, you can try the commented out
# baseurl line instead.

[baseos]
name=Rocky Linux $releasever - BaseOS
baseurl=http://repo.ncloud.com/rocky/$releasever/BaseOS/$basearch/os/
# mirrorlist=https://mirrors.rockylinux.org/mirrorlist?arch=$basearch&repo=BaseOS-$releasever
gpgcheck=1
enabled=1
countme=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-rockyofficial
```

<br>

`Rocky-BaseOS.repo`의 baseurl은 `repo.ncloud.com`으로 네이버 클라우드의 자체 repository로 되어있다.<br>
하지만 `Rocky-Extras.repo` 파일의 baseurl은 주석 처리가 되어 있고<br>
`mirrors.rockylinux.org`로 mirrorlist가 추가되어 있다.<br>

```bash
# Rocky-Extras.repo
#
# The mirrorlist system uses the connecting IP address of the client and the
# update status of each mirror to pick current mirrors that are geographically
# close to the client.  You should use this for Rocky updates unless you are
# manually picking other mirrors.
#
# If the mirrorlist does not work for you, you can try the commented out
# baseurl line instead.

[extras]
name=Rocky Linux $releasever - Extras
mirrorlist=https://mirrors.rockylinux.org/mirrorlist?arch=$basearch&repo=extras-$releasever
#baseurl=http://dl.rockylinux.org/$contentdir/$releasever/extras/$basearch/os/
gpgcheck=1
enabled=1
countme=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-rockyofficia
```


<br>

mirrorlist를 제거하거나 주석 처리한 후 `Rocky-BaseOS.repo`와 동일하게<br>
baseurl을 네이버 클라우드 repository로 변경해주면 된다.<br>
`baseurl=http://repo.ncloud.com/rocky/$releasever/BaseOS/$basearch/os/` 여기에서<br>
`BaseOS`만 각 파일에 맞게 수정해주면 되는데 `Extras`가 아닌 `extras`를 입력해주어야 한다.<br>

`baseurl=http://repo.ncloud.com/rocky/$releasever/extras/$basearch/os/`



Extras와 함께 에러가 발생한 PowerTools는 이름 그대로 입력해주면 된다.<br>
```bash {13, 14}
# Rocky-PowerTools.repo
#
# The mirrorlist system uses the connecting IP address of the client and the
# update status of each mirror to pick current mirrors that are geographically
# close to the client.  You should use this for Rocky updates unless you are
# manually picking other mirrors.
#
# If the mirrorlist does not work for you, you can try the commented out
# baseurl line instead.

[powertools]
name=Rocky Linux $releasever - PowerTools
#mirrorlist=https://mirrors.rockylinux.org/mirrorlist?arch=$basearch&repo=PowerTools-$releasever
baseurl=http://repo.ncloud.com/rocky/$releasever/PowerTools/$basearch/os/
gpgcheck=1
enabled=0
countme=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-rockyofficial
```


<br>
baseurl 수정 후 업데이트 성공적!


네이버 클라우드에서 yum, dnf update 할 때... All mirrors were tried

네이버 클라우드 Rocky Linux 패키지 업데이트 미러 사이트 에러 해결


각 페이지에 특정 속성 값을 부여하고 속성 값에 따라 다른 동작을 하도록 하고 싶다.<br>
예를 들어 `useLayout` 이라는 속성이 있을 때 `useLayout = true`일 때는 레이아웃이 컴포넌트를 감싸는 형태로 보여주고<br>
`useLayout = false`일 때는 컴포넌트만 보여주도록 하고싶다.<br> 하지만 단순히 `Page.useLayout = true;` 이렇게 추가해주면 타입 에러가 난다..<br>

우선 app 구조는 다음과 같다.<br>

### \_app.tsx

```js {3}
function App({ Component, pageProps }: AppProps) {
	return (
		{Component.useLayout ? (
			<Layout>
				<Component {...pageProps} />
			</Layout>
		) : (
			<Component {...pageProps} />
		)}
	);
}

```

에러가 나는 부분은 `Component.useLayout`인데 AppProps의 Component에 `useLayout` 속성이 존재하지 않아서 그렇다.<br>

```
Property 'useLayout' does not exist on type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'
```

해결하기 위해선 interface를 확장시켜 사용해주면 된다.

```js
interface CustomAppProps extends Omit<AppProps, 'Component'> {
	Component: AppProps['Component'] & { useLayout: boolean };
}

function App({ Component, pageProps }: CustomAppProps) {
	...
}

```

app에서 에러를 해결했으니 이제 페이지별로 useLayout 속성을 추가해줘야 하는데 역시나 여기서도 쉽게 되지 않는다..ㅎㅎ<br>
레이아웃과 함께 보여주고 싶은 NextPage 타입의 Page 상수가 있다고 해보자<br>

### page.tsx

```js {7}
const Page: NextPage = () => {
	...
}

export default Page;

Page.useLayout = true;
```

이 때 마지막 라인에서 이런 에러가 난다.<br>

```
Property 'useLayout' does not exist on type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'
```

당연하게도 NextPage에 `useLayout` 속성이 존재하지 않기 때문이다..<br>
그렇다면 AppProps와 마찬가지로 NextPage 타입도 확장시켜주면 되는데<br>
NextPage의 경우 props를 넘겨받기도 하고, props에 타입을 지정해줘야 하는 경우가 있기 때문에 살짝 헤맸다.<br>

```js
type NextPageWithLayout<P = {}> = NextPage<P> & {
	useLayout: boolean;
};

const Page: NextPageWithLayout = () => {
	...
}

export default Page;

Page.useLayout = true;
```

`NextPage` 타입에 커스텀 속성 `useLayout`이 추가된 `NextPageWithLayout`을 Page의 타입으로 지정해주면 된다.<br>
이 때 props가 필요하지 않은 페이지도 있으니 `NextPageWithLayout<P = {}>`와 같이 빈 값을 기본값으로 넣어주고<br>
props의 타입이 있는 경우엔 그대로 넘겨받을 수 있도록 `NextPage<P>`를 사용한다.<br>

<br>
<br>
커스텀 끝...!


Next.js Component와 NextPage에 커스텀 속성 추가하기 with TypeScript


Socket.io를 사용하는 예제 중 대표적인게 채팅이지만 client 간 채팅 보다는 좀 더 간단한 목적으로 사용하고자 했고<br>
client에서 데이터를 보내면 그 데이터로 server에서 특정 처리 후 성공, 에러 등의 메시지를 다시 client로 보내주는 기능이 필요했다.<br>


### 설치

```
npm install -D express
npm install -D socket.io
npm install -D socket.io-client
npm install -D @types/express
npm install -D @types/socket.io
```

TypeScript를 사용중이라 타입들도 같이 설치를 해줬다.<br>

### Server

프로젝트 루트에 server.ts를 추가해준다.

```js
const express = require('express');
const app = express();
const http = require('http').createServer(app);

const io = require('socket.io')(http, {
    // option (CORS 에러 발생할 경우 추가)
    cors: {
        origin: 'client 주소',
        methods: ['GET', 'POST']
    }
})

io.on('connection', (socket) => {
    // client가 연결되면 연결된 socket id 콘솔에 출력
    console.log(`User Connected: ${socket.id}`);

    // client로부터 'to server' 이벤트를 받으면 socket id와 함께 client가 보낸 메시지 콘솔에 출력
    socket.on('to server', (message) => {
        console.log(`${socket.id}: ${message}`);

        // client에게 통신 성공 메시지를 보내줌
        socket.emit('to client', 'Communication Success.');
    });
});

// 8000번 포트 사용
http.listen(8000);
```

필수적인 이벤트만 추가해주고 `node server.ts` 로 서버를 실행시켜 준다.

### Client

client에서 `socket.io-client`를 통해 socket을 사용할 수 있다.

```js
const { io } from 'socket.io-client';
const { useState, useEffect } from 'react';

const Page = () => {
    const [message, setMessage] = useState('');

    // server.ts 설정해준 포트를 사용한다.
    const socket = io('server:8000');

    useEffect(() => {
        // server로부터 'to client' 이벤트의 메시지가 전송되면 콘솔에 메시지 출력
        socket.on('to client', (message: string) => {
            console.log(message);
        });
    }, [message]);

    const handleChange = (e) => {
        setMessage(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();

        // 사용자가 입력한 메시지를 'to server' 이벤트로 server에 전송
        socket.emit('to server', message);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="message" value={message} onChange={handleChange}/>
            <button type="submit">Submit</button>
        </form>
    )
}

export default Page;
```

<br><br>
### 결과

<img src="/posts/nextjs-socketio-server-client/client.png" width="500px" />

```bash
User Connected: fawYXNTKIyV-72QnAAAX
fawYXNTKIyV-72QnAAAX: Hello~
```

client에서 `Hello~`를 입력 후 Submit 버튼을 누르면<br>
server 단 콘솔엔 연결된 socket id와 client가 보낸 'Hello~'가 출력되고,<br>
server가 보낸 `Communication Success.` 메시지가 client의 콘솔에 출력된다.

Socket.io로 client와 server 간 데이터 주고 받기 with Next.js, TypeScript


꼭 state를 사용해야하는 곳이 아니면 `react-hook-form`으로 폼을 사용하고 있었는데<br>
useRef로 폼에 스타일을 적용하거나 포커싱 해줘야 하는 일이 생겼다.<br>

overwritten 에러, getValues()에 값이 없는 에러.. 를 겪은 후 사용하는 방법을 정리해본다.<br>

### register와 ref의 순서

만약 아래와 같이 ref를 먼저 지정해주고 register를 사용할 경우<br>
`'ref' is specified more than once, so this usage will be overwritten.` 에러를 볼 수 있다.<br>
register 자체적으로 ref를 가지고 있기 때문에 먼저 ref를 지정해주면 덮어써지는 것이다.<br>

```js
const inputRef = useRef(null);

<input
    ref={inputRef}
    {...register('id')}
/>
```

순서만 바꿔주면 에러는 사라지지만 제대로 사용할 수 없다.

### register의 ref를 useRef와 연결

```js
const inputRef = useRef(null);

<input
    {...register('id')}
    ref={inputRef}
/>
```

위 에러를 해결하기 위해 register와 ref의 순서는 바꿔줬지만 문제가 하나 생겼다.<br>
getValues()로 폼 데이터를 가져와도 id의 값은 `undefined`였다.<br>
문제는 ref가 변경되었는데 register는 그걸 모르고 있다는 것이다. 그래서 값을 아무리 변경해도 업데이트가 되지 않았다.<br>

```js
const inputRef = useRef(null);

<input
    {...register('id')}
    ref={(e) => {
        register('id').ref(e);
        inputRef.current = e;
    }}
/>
```

이렇게 register('id')의 ref를 변경해주면 되고,<br>
`register('id').ref = e;`가 아님을 명심해야 한다.<br>

값도 잘 바뀌고 useRef로 DOM 접근도 잘 되는 것을 확인했다 :3

react-hook-form과 useRef 같이 쓰기


캘린더에서 날짜를 선택할 수 있도록 해주는 DatePicker를 사용해야 하는데<br>
기존에 사용하던 jQuery DatePicker 대신 `react-datepicker` 라이브러리를 사용하고자 한다.<br>

[react-datepicker 공식 사이트](https://reactdatepicker.com/)

### 설치

```
npm install -D react-datepicker
npm install -D @types/react-datepicker // typescript가 아니라면 생략
npm install -D date-fns // locale 설정에서 사용
```

`react-datepicker`의 기본 디자인에서 추가 해야할 커스텀 항목은 3가지 정도이다.<br>

1. 년도와 월을 각각 선택할 수 있는 Select element
2. 오늘 날짜로 변경해주는 '오늘' 버튼
3. 캘린더를 닫아주는 '닫기' 버튼

`react-datepicker`를 제대로 사용하기 위해선 css 파일도 import 해주어야 한다.
커스텀 디자인 같은 경우 추가로 css 파일을 만들어서 변경을 원하는 클래스만 수정하고 import 해주었다.

```js
# _app.tsx
import 'react-datepicker/dist/react-datepicker.css';
import 'styles/custom-datepicker.css'; // 커스텀 디자인 css 파일
```

컴포넌트로 빼서 사용하도록 했는데 대략적 구조와 사용한 DatePicker 옵션은 다음과 같다.

```js
import { forwardRef, useRef, useState } from 'react';
import DatePicker from 'react-datepicker';
import { ko } from 'date-fns/locale'; // 언어 설정을 위한 locale import

export const CustomDatePicker() => {
	const [startDate, setStartDate] = useState(today); // 날짜 선택을 위한 state
	const ref = useRef<DatePicker>(null); // 캘린더 close를 위한 ref
	const CustomInput = forwardRef(({ value, onClick }, ref) => ( Custom Input ));

	<DatePicker
		ref={ref}
		locale={ko} // 언어 설정
		selected={startDate} // 선택된 날짜
		dateFormat="yyyy-MM-dd" // 날짜를 '2023-04-12'와 같이 표시
		todayButton="오늘" // 날짜를 오늘로 변경하는 버튼의 이름 설정
		onChange={(date) => setStartDate(date)} // 날짜 선택 시 상태 변경
		customInput={<CustomInput />} // Custom Input
		renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (...)} // Custom Header
	/>
	{ 닫기 버튼이 들어갈 곳 }
	</DatePicker>
}
```

### Custom Input

선택된 날짜가 보여질 곳을 커스텀 할 수 있다.<br>
설정하지 않으면 기본적으로 input 태그가 사용되는데 button으로 변경할 수도 있고, input에 원하는 옵션을 추가할 수도 있다.<br>
기본 input은 키보드 입력으로 수정이 가능하기 때문에 readOnly 옵션을 추가해줄 것이다.<br>
readOnly 옵션을 추가해주면 캘린더로만 날짜를 변경할 수 있다.

```js
const CustomInput = forwardRef(({ value, onClick }, ref) => (
	<input onClick={onClick} ref={ref} defaultValue={value} readOnly />
))
```

### Custom Header

년도와 월을 변경해서 한 번에 해당 년, 월의 캘린더로 이동할 수 있도록 커스텀 하려고 한다.

```js

const today = new Date();
const years = Array.from(Array(11), (_, i) => getYear(today) - 10 + i); // 오늘부터 10년 전까지의 년도 [2013, 2014, ...]
const months = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];

<DatePicker
    // 생략
	renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
		<div>
			<button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>{' < '}</button> // 이전 월로 이동
			<select
				value={date.getFullYear()}
				onChange={({ target: { value } }) => changeYear(value)}
			>
			{years.map((option) => (
				<option key={option} value={option}>
					{option}
				</option>
			))}
			</select>
			<select
				value={months[date.getMonth()]}
				// months 배열에서 인덱스로 값을 가져오는데 date.getMonth()는 0부터(1월) 시작하므로 months에는 '1월'부터 값을 넣어야 한다.
				onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
			>
			{months.map((option) => (
				<option key={option} value={option}>
					{option}
				</option>
			))}
			</select>
			<button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>{' > '}</button> // 다음 월로 이동
		</div>
	>
	</DatePicker>
)}
```

### 닫기 버튼 추가

오늘로 변경하는 버튼은 DatePicker에 `todayButton` 옵션을 넘겨주면 간단하게 추가 가능하지만<br>
캘린더를 수동으로 닫을 수 있는 버튼은 따로 없는 듯하다.<br>
캘린더를 닫기 위해 useRef()로 제어해줄 것이다.<br>
캘린더 하단에 위치하는 버튼으로 만들어주려면 `<DatePicker></DatePicker>` 태그 사이에 추가 해주어야 한다.<br>

```js
<DatePicker
	ref={ref}
	// 생략
>
	<div>
		<button onClick={() => ref.current.setOpen(false)}>닫기</button>
	</div>
</DatePicker>
```

ref를 추가한 후에 아무리 버튼을 눌러도 캘린더가 사라지지 않아서 뭔가 잘못되었다 싶었는데<br>
검색 해보니 `<DatePicker>` 컴포넌트를 `<label>` 태그로 감싸면 동작하지 않는다고 한다.<br>
컴포넌트를 호출하는 부분에서 `<label>` 태그를 사용하고 있었고, 제거해주니 정상 동작했다..!<br>
[참고 링크](https://github.com/Hacker0x01/react-datepicker/issues/1012)

### 결과

커스텀 디자인까지 적용한 모습이다. <br>
윈도우 녹화는 select option이 안보여서 중간에 년도와 월을 선택하는 과정이 생략되었다.

<img src="/posts/custom-react-datepicker/custom-datepicker.gif" width="500px"/>


년도와 월을 선택할 수 있는 Select, 오늘 날짜로 변경 및 닫기 버튼 추가

react-datepicker 커스텀 해서 사용하기 with TypeScript


setInterval을 이용해서 새로고침 기능을 추가하던 중 useState의 타입을 지정해줘야 했는데<br>
그냥 `Timer`를 사용할 경우 `Cannot find name 'Timer'.` 에러가 떴다.<br>

알아보니 NodeJS 환경에서 타이머 함수 사용 시 setInterval은 `NodeJS.Timer` 타입을,<br>
브라우저 환경에서는 `number` 타입을 반환하기 때문에 두 가지 방법으로 지정해줄 수 있다.

1. NodeJS.Timer

```js
const [refreshInterval, setRefreshInterval] = useState<NodeJS.Timer>();
...
# setInterval 그대로 사용한다.
setRefreshInterval(setInterval(() => console.log('refresh'), 5000));
```

2. number

```js
const [refreshInterval, setRefreshInterval] = useState<number>();
...
# window.setInterval을 사용한다.
setRefreshInterval(window.setInterval(() => console.log('refresh'), 5000));
```


setInterval의 타입은..? with TypeScript


진행중인 프로젝트는 Next.js 12.2.5 버전으로 개발중이었는데 Next.js 13이 나왔다는 소식을 들었다..!<br>
`getStaticProps`나 `getServerSideProps`를 사용하지 않고 `use` 하나로 Data Fetching이 가능하다는 점이 매력적이라 버전을 올리기로 했다.<br>
버전은 계속 올라갈테니 조금이라도 빨리 마이그레이션을 해서 적응하는게 좋을 것 같기도 했다.<br>
app/ 디렉토리에서 Layout, Loading, Error 페이지 등을 관리할 수 있다는 점도 좋았으나,<br>
아직 베타 버전이고 Production에 적용하는 것을 권장하지 않아서 우선 기존에 사용하던 pages/는 유지하기로 했다.<br>

<br>
12.x 버전에서 13 버전으로 마이그레이션 하면서 겪은 에러나 변경점을 기록하고자 한다.

### 1. useRouter

12 버전에서는 `next/router`를 사용해서 라우팅을 했으나<br>
13 버전에서는 `next/navigation`를 사용해야 한다고 한다.<br>
[참고 링크](https://stackoverflow.com/questions/71961539/router-push-is-not-working-as-expected-nextjs)

```js
[12.x]
import { useRouter } from "next/router";

[13.x]
import { useRouter } from 'next/navigation';
```

그리고 `next/navigation`을 사용하게 되면 pathname을 바로 가져올 수 없다.<br>
12 버전에서 `.pathname`으로 사용하던 부분을 `next/navigation`의 `usePathname` 함수를 불러와 사용해야 한다.

```js
[12.x]
import { useRouter } from "next/router";
...
const router = useRouter();
const pathname = router.pathname;

[13.x]
import { useRouter, usePathname } from 'next/navigation';
...
const router = useRouter();
const pathname = usePathname();
```

<br>

### 2. Link

`<Link>` 내부의 `<a>` 태그를 제거해야 한다.<br>
`<a>` 태그가 존재하면 이런 에러가 뜬다.

```js
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
```

`<a>` 태그에서 onClick 등을 사용했다면 그대로 `<Link>`에 옮겨주면 된다.<br>
codemods로 자동으로 변경해주는게 있다는대 수작업으로 변경한 뒤에 알게되었다...^^<br>
[codemods#new-link](https://beta.nextjs.org/docs/upgrade-guide/codemods#new-link)

```js
[12.x]
<Link href='/test'>
    <a onClick={(e) => click(e)}>
        Click
    </a>
</Link>

[13.x]
<Link href='/test' onClick={(e) => click(e)}>
    Click
</Link>
```


### 작업중...


Next.js 13 마이그레이션 기록


## Array로 구현하기

1. 이벤트 핸들러
```js
// 1: 체크박스의 id만 숫자로 담을 거여서 number[] 타입으로 배열을 만들어주었다.
const [checkedList, setCheckedList] = useState<number[]>([]);

// 2: 전체 체크/해제 handler
const handleAllCheck = (e) => {
	// 전체 체크/해제용 체크박스가 체크되었을 때
	if (e.target.checked) {
		let items:number[] = [];

		// 한 페이지에서 보여지고 있는 데이터를 전부 items 배열에 넣어주고 setCheckedList
		// data = [{ id: 1, name: 'test'}, { id: 2, name: 'checkbox'}, { id: 3, name: 'mitny' }]
		Object.entries(data).map((item, i) => {
			items[i] = item[1].id;
		});

		setCheckedList(items);
	} else {
		// 전체 체크/해제용 체크박스가 해제되었을 때 배열 초기화
		setCheckedList([]);
	}
}

// 3: 개별 선택/해제 handler
const handleSingleCheck = (e) => {
	// 각 행의 체크박스가 체크되었을 때 checkedList 배열에 현재 행의 체크박스 id를 추가한다.
	if (e.target.checked) {
		setCheckedList([...checkedList, Number(e.target.id)]);
	} else {
		// 각 행의 체크박스가 해제되었을 때 checkedList 배열에서 현재 행의 체크박스 id를 제거한다.
		setCheckedList(checkedList.filter(id => id != Number(e.target.id)));
	}
}
```

핸들러 부분에서는 체크박스를 체크/해제하는 이벤트가 발생했을 때 배열에 추가/삭제(또는 초기화)하는 방식으로 구현했다.<br>
체크박스가 있는 테이블에서는 아래와 같이 핸들러를 호출했다.

2. 이벤트 핸들러 호출
```js {8-10, 22-23}
<table>
	<colgroup>
		<col width="38px"/><col width="*"/>
	</colgroup>
	<thead>
		<tr>
			<th>
				// 전체 체크/해제 체크박스, 변경될 때 handleAllCheck가 호출된다.
				// checked 여부를 확인하기 위해 이벤트 객체를 넘겨준다.
				<input type="checkbox" onChange={(e) => handleAllCheck(e)}/>
			</th>
			<th>이름</th>
		</tr>
	</thead>
	<tbody>
		{ data && Object.entries(data).map((item, id) => (
		<tr key={id}>
			<td>
				<input
					type="checkbox"
					id={item[1].id}
					onChange={(e) => handleSingleCheck(e)} // 각 행의 체크박스, 변경될 때 handleSingleCheck가 호출된다.
					checked={checkedList.includes(item[1].id)} // checkedList에 현재 행의 id가 존재하면 checked=true
				/>
				</td>
			<td>{item[1].name}</td>
		</tr>
		))}
	</tbody>
</table>
```


지금은 각 행의 고유한 값인 id로 처리하고 있어서 중복 처리가 필요하지 않았지만<br>
따로 중복 처리를 하는 과정을 생략하고 싶어서 Set으로 구현하는 것도 시도해보았다.<br>

Set으로 구현하면서 어려웠던 점은 클릭했을 때 정상적으로 checkedList의 상태는 변하지만 화면에서는 체크 표시가 되지 않는 것이었다.<br>
검색해보니 단순히 `checkedList.add(1)`를 할 경우 변화가 생겨도 다시 렌더링이 되지 않는다고 한다.<br>
실제로도 페이지를 새로 고침하지 않고 다른 부분의 코드를 수정하여 새로 렌더링이 됐을 때는 체크 표시가 되었다.<br>

새로 Set을 만들어서 상태를 변경해주는 방식으로 해결했다.

## Set으로 구현하기

1. 이벤트 핸들러
```js
// 1: number 타입의 Set 생성, 이후 새로 Set을 생성할 때도 number 타입으로 생성해야 한다.
const [checkedList, setCheckedList] = useState(new Set<number>());

// 2: 전체 체크/해제 handler
const handleAllCheck = (e) => {
	if (e.target.checked) {
		Object.entries(data).map((item, i) => {
			// checkedList를 전체 id를 추가한 새로운 Set으로 만들어주고 setCheckedList
			setCheckedList(checkedList => new Set<number>(checkedList.add(Number(item[1].id))));
		});
	} else {
		// 전체 체크/해제용 체크박스가 해제되었을 때 새로운 Set 생성해서 초기화
		setCheckedList(new Set<number>());
	}
}

// 3: 개별 선택/해제 handler
const handleSingleCheck = (e) => {
	// 체크되면 checkedList에 id 추가, 해제되면 filter로 id 제거
	if (e.target.checked) {
		setCheckedList(checkedList => new Set<number>(checkedList.add(Number(e.target.id))));
	} else {
		setCheckedList(checkedList => new Set<number>([...checkedList].filter(id => id !== Number(e.target.id))));
	}
}
```

Array 구현 방식과 다른 점은 객체를 새로 만들어준다는 것이고 전체적인 로직은 비슷하다.

2. 이벤트 핸들러 호출
```js {23}
<table>
	<colgroup>
		<col width="38px"/><col width="*"/>
	</colgroup>
	<thead>
		<tr>
			<th>
				// 전체 체크/해제 체크박스, 변경될 때 handleAllCheck가 호출된다.
				// checked 여부를 확인하기 위해 이벤트 객체를 넘겨준다.
				<input type="checkbox" onChange={(e) => handleAllCheck(e)}/>
			</th>
			<th>이름</th>
		</tr>
	</thead>
	<tbody>
		{ data && Object.entries(data).map((item, id) => (
		<tr key={id}>
			<td>
				<input
					type="checkbox"
					id={item[1].id}
					onChange={(e) => handleSingleCheck(e)} // 각 행의 체크박스, 변경될 때 handleSingleCheck가 호출된다.
					checked={checkedList.has(item[1].id)} // checkedList에 현재 행의 id가 존재하면 checked=true
				/>
				</td>
			<td>{item[1].name}</td>
		</tr>
		))}
	</tbody>
</table>
```

이벤트 핸들러 호출에서 바뀐 점은 checked 처리뿐이다.<br>
`checkedList.includes() -> checkedList.has()`


## 결과
<img src="/posts/react-ts-array-set-checkbox/checkbox-exam.gif" width="500px"/>


Array와 Set 두 가지 버전으로 구현해보기

체크박스 상태 관리 및 전체 선택/해제 구현하기 with React, TypeScript


처음 Next.js에서 다국어 처리를 해줄 때는 `next-i18next`를 사용했었는데<br>
SSR로 구현하다보니 __NEXT_DATA__에 리소스가 노출되는 문제가 있어서 클라이언트단에서 번역 처리가 되도록 `react-i18next`를 사용하기로 했다.<br>
next-i18next를 CSR에서도 사용할 수 있다거나 리소스를 노출시키지 않고 사용할 수 있는 방법을 찾게 되면 그 때 다시 next-i18next를 사용해보겠다..


### 설치
```bash
npm install i18next @types/i18next react-i18next @types/react-i18next
```

### 리소스 디렉토리 생성
현재 프로젝트 디렉토리 구조는 이런 식으로 되어있다.<br>
컴포넌트, 페이지 같은 것들은 src의 하위 디렉토리로 관리하고 있는데<br>
리소스 디렉토리는 public에 만들지 않고 src/locales로 만들어주겠다.

```bash
.
├── next.config.js
├── next-env.d.ts
├── next-i18next.config.js
├── node_modules
├── package.json
├── public
├── src
│   ├── components
│   ├── pages
│   └── styles
└── tsconfig.json
```

### src/locales
src/locales에서는 각 언어별로 따로 디렉토리를 만들어주고, i18next 설정 파일인 i18n.ts를 만들어 줄 것이다.<br>

```bash
.
├── locales
│   ├── i18n.ts
│   ├── en
│   │   └── common.json
│   ├── ja
│   │   └── common.json
│   └── ko
│       └── common.json
```

### i18n.ts
```js
import i18n, { Resource } from "i18next";
import { initReactI18next } from "react-i18next";

import ko from "./ko/common.json";
import en from "./en/common.json";
import ja from "./ja/common.json";

const resources:Resource = {
  ko: { common: ko },
  en: { common: en },
  ja: { common: ja }
}

i18n.use(initReactI18next).init({
	resources, // 리소스
	ns: "common", // namespace 설정
	lng: "ko", // 초기 설정 언어
	fallbackLng: "ko",
	interpolation: {
		escapeValue: false
	},
	react: {
		useSuspense: false
	}
});

export default i18n;
```

언어별 리소스 파일을 import 해서 resources 객체에 넣어준 후 i18next를 초기화한다.<br>
리소스 파일은 아래와 같이 각 메뉴별로 key를 나눠놨는데 비구조화 할당 시 각 key를 namespace로 인식하는 것 같았다.

```json
// ko/common.json
{
	"menu": {
		"logout": "로그아웃",
		...
	},
	"config": {
		...
	}
	...
}
```
`t('key1.key2')`가 아닌 `t('key1:key2')`로 접근해야 리소스가 제대로 불러와졌다.<br>
그래서 resources 객체 생성은 비구조화 할당이 아닌 지금의 코드로 변경하게 되었다.

```js
// ko에 비구조화 할당했을 때
const resources:Resource = {
  ko: { ...ko },
  en: { ...en },
  ja: { ...ja }
}

// console.log(resources);
{
	ko: { menu: { logout: '로그아웃', ... }, ... },
	en: ...
}
```

```js
// ko.common에 바로 넣어줬을 때
const resources:Resource = {
  ko: { common: ko },
  en: { common: en },
  ja: { common: ja }
}

// console.log(resources);
{
	ko: { common: { menu: [Object] } },
	en: ...
}
```


i18next의 기본 namespace 값은 translation인데 리소스 파일명과 맞추기 위해 `ns: "common"` 설정도 해줬다.<br>
fallbackLng는 만약 en으로 언어 설정을 바꾸려고 했는데 어떤 리소스 키가 en에 없을 경우 대신 값을 가져올 언어를 설정하는 것이다.<br>
자세한 설정은 [이 곳](https://www.i18next.com/overview/configuration-options)에..

설정이 끝났다면 이제 i18n을 import 해서 사용하면 된다.<br>
우선 프로젝트 전체에서 사용할 리소스여서 `_app.tsx`에 i18n을 import 해주었다.

```js
import "../locales/i18n";
...

function App({ ... }) {
	return (
		...
	)
}

export default MyApp
```

이후에는 직접 리소스를 사용할 곳에서 `useTranslation`을 import 하고 사용하면 된다.

```js
// src/pages/ex.tsx

...
import { useTranslation } from "react-i18next";

export default function Example() {
	const { t } = useTranslation();

	return (
		<div>{t('menu.logout')}</div>
	)
}

```



react-i18next로 다국어 리소스를 적용해보자

react-i18next로 다국어 처리하기 with Next.js, TypeScript


<img src="/posts/nextjs-amcharts4/amcharts-light-opaque.png" width="500px" />

[amcharts4](https://www.amcharts.com/docs/v4/)
<br>지도, 그래프 등 다양한 시각화 기능을 제공한다.<br>
현재는 라이선스를 구매해서 사용하고 있는데, 라이선스가 없는 경우 워터마크가 화면에 표시된다.


기존에는 이렇게 js 파일을 추가해서 사용했는데

```js
<script src="/js/amcharts4/core.js"></script>
<script src="/js/amcharts4/maps.js"></script>
<script src="/js/amcharts4/charts.js"></script>
...
```

Next.js에서 사용하려면 npm 또는 yarn으로 설치해주면 된다.
```bash
npm install @amcharts/amcharts4

yarn add @amcharts/amcharts4
```

설치 후 사용하려는 곳에서 import를 해주면 된다.
```js
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
```

<br><br>

## run... 그리고 error

import 후 차트가 보이길 기대하면서 npm run을 했는데... 에러가 떴다

```bash
error - ~~/node_modules/@amcharts/amcharts4/core.js:8
export { System, system } from "./.internal/core/System";
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@amcharts/amcharts4/core (~~~/.next/server/pages/index.js:62:18)
    at __webpack_require__ (~~~/.next/server/webpack-runtime.js:33:42) {
  page: '/'
}
```

amCharts 모듈을 포함해서 transpile 하기 위해 `next-transpile-modules`를 설치해줘야 한다.

```bash
npm install next-transpile-modules
```

설치 후 next.config.js도 수정해야 한다.
```js
const withTM = require("next-transpile-modules")(["@amcharts/amcharts4"]);

module.exports = withTM({
// any other general next.js settings
// EX
  reactStrictMode: false,
  webpack: (config, { isServer, node }) => {
    node = {
      ...
    };
    return config;
  }
})
```

기존에 사용하던 config 내용들은 withTM 안에 작성해주면 된다.


## Pie Chart 예제 추가 해보기

```js
// components/Charts.ts
import { useEffect } from "react";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

export default function PieChart() {
	useEffect(() => {
		let chart = am4core.create("chartdiv", am4charts.PieChart);
		
		// Add data
		chart.data = [
			{
				"country": "Lithuania",
				"litres": 501.9
			}, {
				"country": "Czech Republic",
				"litres": 301.9
			}, {
				"country": "Ireland",
				"litres": 201.1
			}, {
				"country": "Germany",
				"litres": 165.8
			}, {
				"country": "Australia",
				"litres": 139.9
			}, {
				"country": "Austria",
				"litres": 128.3
			}, {
				"country": "UK",
				"litres": 99
			}, {
				"country": "Belgium",
				"litres": 60
			}, {
				"country": "The Netherlands",
				"litres": 50
			}
		];

		// Add and configure Series
		let pieSeries = chart.series.push(new am4charts.PieSeries());
		pieSeries.dataFields.value = "litres";
		pieSeries.dataFields.category = "country";
		/**
 	    * Destroying map on leave page.
 	    */
	    return () => {
			chart.dispose();
		};
	}, []);

	return (
		<div
			id="chartdiv"
			style={{
				width: "60%",
				height: "300px"
			}}
		/>
	);
}
```

```js
// pages/chart.tsx

...
import PieChart from "../components/Charts";

export default const Chart = () => {
	return (
		<>
			<PieChart />
		</>
	)
}
```

## Pie Chart 예제 결과

<img src="/posts/nextjs-amcharts4/amcharts4-pie-sample.png" width="500px"/>


기존에 PHP와 Javascript ES5로 사용하고 있던 amCharts4를 Next.js에서 사용 해보기

amCharts4 적용하기 with Next.js


이번 블로그까지 포함하면 총 3번의 블로그 변경이 있었다.<br>
첫번째는 [Tistory](http://mitny.tistory.com/),<br>
두번째는 현재와 같은 Github pages였지만 Jekyll로 만들어진 블로그 중 맘에 드는 테마를 포크해서 써왔다.<br>
그러다보니 커스텀도 어려웠고.. 최근에 다시 블로그 포스팅을 하고싶어져서 공부중인 Next.js로 새로 만들기로 했다.<br>
흰 화면에서부터 하나씩 붙여나가니 훨씬 재미도 있고 내 마음대로 구조를 바꿀 수 있어서 좋다.<br>


### 예전 블로그 포스팅에 대해서..

블로그 리뉴얼을 하면서 포스팅 성격이 기존과는 조금 달라질 것 같아서 기존 글들은 새 블로그에 남겨두지 않으려고 했었다.<br>
그러다가 Google Search Console에서 예전 블로그 기록들을 보니<br>
몇몇 분들께서 참고용으로 예전 포스팅을 링크 해두신게 있어서 그 분들을 위해서도 그렇고<br>
어떤 경로에서든 예전 포스팅을 찾으시는 분들을 위해서 현재 블로그에서도 접근할 수 있도록 하기로 했다.<br>
업무나 공부에 어려움이 있어 검색해서 찾은 글을 눌렀더니 404 Not Found가 뜨는 경험은 누구에게도 좋지 않을 것이다...<br>
부족한 글들이었지만 찾는 분들이 계심에 감사하다. 조금이라도 도움이 되셨다면 다행이고 새로 출발하는 블로그도 잘 봐주셨으면 좋겠다.<br>
기존에는 보안, 웹 개발 등등 여러 종류의 글을 올렸었는데 새 블로그에서는 프론트엔드 개발 위주로 올려보려고 한다.<br>

- 신규 포스팅 경로: **https://mitny.github.io/post/{title}** EX) http://mitny.github.io/post/notice-blog-renewal
- 예전 포스팅 경로: **https://mitny.github.io/articles/{yyyy-mm}/{title}** EX) https://mitny.github.io/articles/2016-08/gdb-command

추후에 예전 포스팅들도 메뉴로 빼서 리스팅 할 예정이지만 어떤 글들이 있었는지 궁금하시다면 구글의 site 명령어로도 보실 수 있습니다.<br>
(일부 포스팅은 복구하지 않았습니다.)<br>
[site:https://mitny.github.io/](https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fmitny.github.io)


Jekyll 대신 Next.js로 블로그 만들기