# 시작
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로 정의하기
서버로부터 데이터를 받아오면 ownersList라는 변수에 받아질 것이다. 이 json 객체는 위에 정의해준 인터페이스처럼 details, ownerName, vehicle이라는 속성들을 string 타입으로 가지고 있어야 한다. 또는 서버에서 데이터를 전달해주지 못하는 경우 undefined가 반환될 것이다.
같은 이유로 이 데이터를 props로 전달 받는 List에도 ListProps라는 인터페이스를 정의해준다. 내부에는 이미 정의한 VehiclePerson 인터페이스를 이용하였다.
이후 아래와 같이 오류가 나타나게 되는데 타입에서 undefined가 될 수도 있기 때문이다. 따라서 ownersList 뒤에 "?"를 붙여서 해결한다.
- json server를 사용해서 간단하게 REST API 만들어서 개발해보기
아래 링크에서 설명을 보고 이해했다. 프로젝트의 루트 디렉토리에 db.json 파일을 만든다음 이 MockData를 전달해주도록 했다.
json server를 실행하면서 이전 화면이 그대로 출력되는 것을 볼 수 있다.
위에서는 VehiclePerson[] | undefined 라고 해서 데이터가 전달되지 않은 상태를 명시하였는데 아래처럼 물음표를 이용해서 정의할 수도 있다.
getInitialProps의 props로 사용하는 ctx(컨텍스트)는 next에서 제공하는 넥스트페이지컨텍스트에서 가져온 것이므로 타입을 임포트해서 사용한다.
ctx의 타입을 선언하고 나면 내부의 query, req 등을 직접적으로 가져와서 사용할 수 있어서 더 심플해진다. 코드는 아래와 같다.
그러나 여기서 타입스크립트의 이점을 잘 활용하기 위해서는 NextPageContext의 범위를 더 좁게 설정한다. 아래처럼 query.asdfasedfa와 같은 이상한 속성값을 요구하는 경우에 에러를 발생시키고, query에 포함 가능한 속성값들이 무엇이 있는지 미리 정의해놓는 것은 협업에 도움이 될 것이다.
이렇게 타입을 정의해주니 잘못된 값은 쉽게 확인할 수 있다.
타입스크립트 마이그레이션을 통해서 자바스크립트 프로젝트를 협업과 생산성을 높일 수 있게 되었다.