# 시작
Nextjs에 익숙해지기 위해서 유튜브에서 Nextjs Tutorial 영상을 따라 공부하면서 알게 되는 것들을 적을 것이다.
따라한 유튜브 영상은 아래 링크이다.
www.youtube.com/watch?v=7J4iL1HDshQ&list=PLYSZyzpwBEWSQsrukurP09ksi49H9Yj40&ab_channel=BrunoAntunes
# 정리
# 3
타입 스크립트 마이그레이션
의존성 트리? 순환 참조에서 순서가 중요하다.
npm install --save-dev typescript @types/react 로 타입스크립트 패키지를 적용시킨다.
다시 npm run dev를 하게 되면 tsconfig.json 파일이 생성된다.
"strict": true, /* 모든 엄격한 타입-체킹 옵션 활성화 여부 */출처: https://geonlee.tistory.com/214 [빠리의 택시 운전사]
false인 것을 true로 바꾸어준다.
- tsx 파일들의 에러를 해결하기 위해서 객체의 타입을 interface로 정의하기
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdpdJBm%2Fbtq2cokPTl8%2F2GTuiATNycylyvk9SVDIZK%2Fimg.png?table=block&id=f3762d44-c053-420b-95e5-a79789c59099&cache=v2)
서버로부터 데이터를 받아오면 ownersList라는 변수에 받아질 것이다. 이 json 객체는 위에 정의해준 인터페이스처럼 details, ownerName, vehicle이라는 속성들을 string 타입으로 가지고 있어야 한다. 또는 서버에서 데이터를 전달해주지 못하는 경우 undefined가 반환될 것이다.
같은 이유로 이 데이터를 props로 전달 받는 List에도 ListProps라는 인터페이스를 정의해준다. 내부에는 이미 정의한 VehiclePerson 인터페이스를 이용하였다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1v0ZT%2Fbtq2eL7wHHu%2FJTtrigARmOa26tJfOPEAg1%2Fimg.png?table=block&id=0a75552f-5855-4ce9-b175-5e4b4e3bc2a6&cache=v2)
이후 아래와 같이 오류가 나타나게 되는데 타입에서 undefined가 될 수도 있기 때문이다. 따라서 ownersList 뒤에 "?"를 붙여서 해결한다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzUxmB%2Fbtq2cluXtUO%2F00B6erzBN8O9pckRRKQOtK%2Fimg.png?table=block&id=5ed5f7d3-b937-465e-af74-a1c0c03a9c66&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEph3Y%2Fbtq2dCpsmiC%2F4fDMeIZWdfYPJPywDpstPk%2Fimg.png?table=block&id=bbfe5191-8617-4bac-975a-c20aab88e8a7&cache=v2)
- json server를 사용해서 간단하게 REST API 만들어서 개발해보기
아래 링크에서 설명을 보고 이해했다. 프로젝트의 루트 디렉토리에 db.json 파일을 만든다음 이 MockData를 전달해주도록 했다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGmapc%2Fbtq18DQW8Gq%2FhLCGmixWWVEnAkfsVAgf60%2Fimg.png?table=block&id=35c6b00c-e592-43ca-9e66-9f851bd8d505&cache=v2)
json server를 실행하면서 이전 화면이 그대로 출력되는 것을 볼 수 있다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhKA7J%2Fbtq2ck3TWXB%2FiLiuO2oMxctWvpgUzdlGzK%2Fimg.png?table=block&id=d9ee175f-e6d1-426d-ab9f-6c35948c5581&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSXRdJ%2Fbtq17X9Wgjn%2FB4AXq1AWaKPODwL7Ifot30%2Fimg.png?table=block&id=be7eb424-2bbc-421f-bd37-b650322d9b20&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlRfV0%2Fbtq17btQFHg%2FgyLvgePCJJLGxylPbRfHW0%2Fimg.png?table=block&id=e235b034-234d-4cf6-b00c-f9ecbade20e8&cache=v2)
위에서는 VehiclePerson[] | undefined 라고 해서 데이터가 전달되지 않은 상태를 명시하였는데 아래처럼 물음표를 이용해서 정의할 수도 있다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdS3Pg6%2Fbtq2dIQHgB8%2FweCrYE5sl46Rco8fJGV350%2Fimg.png?table=block&id=e14bbda9-018a-43b0-8ec6-c93268ad1061&cache=v2)
getInitialProps의 props로 사용하는 ctx(컨텍스트)는 next에서 제공하는 넥스트페이지컨텍스트에서 가져온 것이므로 타입을 임포트해서 사용한다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMwewW%2Fbtq2c2WbrM4%2FAKd0ka3UCyQOZpELVerKf0%2Fimg.png?table=block&id=8c01b09b-a0d4-48e9-b6e6-ab8bf1336983&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcYmOZ%2Fbtq17HFZXYA%2FvK6huDVDnGJpBoHDkwj4t0%2Fimg.png?table=block&id=5d346da6-d2ba-46a3-bdba-d1e7d92ee7c9&cache=v2)
ctx의 타입을 선언하고 나면 내부의 query, req 등을 직접적으로 가져와서 사용할 수 있어서 더 심플해진다. 코드는 아래와 같다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRzucG%2Fbtq17ZNsEnI%2F7PKS30zxxktmAyHHQqXU2K%2Fimg.png?table=block&id=62f58e20-defd-44ea-b0be-9db4ac95ba3a&cache=v2)
그러나 여기서 타입스크립트의 이점을 잘 활용하기 위해서는 NextPageContext의 범위를 더 좁게 설정한다. 아래처럼 query.asdfasedfa와 같은 이상한 속성값을 요구하는 경우에 에러를 발생시키고, query에 포함 가능한 속성값들이 무엇이 있는지 미리 정의해놓는 것은 협업에 도움이 될 것이다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGA7FE%2Fbtq2dDaQbZg%2FDWtOKlO5iLpn8uSrLfskv0%2Fimg.png?table=block&id=944a58e1-7b02-42b4-bcfd-32db717aa25e&cache=v2)
이렇게 타입을 정의해주니 잘못된 값은 쉽게 확인할 수 있다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSJjil%2Fbtq2aOq8ULB%2Fnl96ob2GfQQ55B8tG2qYvK%2Fimg.png?table=block&id=071257b8-b314-4d4c-be9c-d2cd66f2bca9&cache=v2)
타입스크립트 마이그레이션을 통해서 자바스크립트 프로젝트를 협업과 생산성을 높일 수 있게 되었다.