프로그래밍 공부 노트

  Github Actions로 배포 자동화를 설정하기 위해서 yml 파일을 작성하고 push 했는데 위에 사진과 같이 파일 경로를 찾지 못하는 문제가 발생했다. 로컬 개발환경에서 build시에는 문제가 없는데 Github Actions에서 build시에만  Type error: Cannot find module '@/assets/icons' or its corresponding type declarations. 오류가 발생했다. 오류 해결 과정에서 세웠던 가설들과 해결 과정 3가지를 적어보려한다. 첫번째, 가설:  Next.js 13에서는 터보팩으로 전환했지만 여전히 Webpack을 번들러로 사용하고. Webpack은 TS 컴파일 단계와 다른 단계에서 실행되므로 tsconfig.json을 고려하지 않는다. 그러므로  tsconfig.json의 paths가 제대로 적용되지 않는것이 문제이다. 해결방법: next.config.js에 webpack config.resolve.alias 옵션을 사용해서 @를 경로에 맞게 수정되도록 설정한다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false , webpack ( config ) { config . resolve . alias = { ... config . resolve . alias , '@' : path . join ( __dirname , '/' ), }; return { ... config ,    ...        ... 기타 설정 생략         ... ... 결론: 하지만 나의 경우  동일하게 Cannot find moudle 에러가 발생했다. 두번째,  가설: typescript는 devDependencies에 작성되어 설치되는데 build 할 때 환

타입스크립트 설치 $ npm i typescript 컴파일 Typescript로 작성된 코드는 브라우저가 해석하지 못하기 때문에 브라우저가 해석 가능한 자바스크립트 코드로 컴파일 해주어야 한다. 아래 명령어와 같아 npx tsc 파일명 을 입력한다. 그러면 자바스크립트로 컴파일된 js 파일이 생성된다. $ npx tsc index.ts 컴파일러 옵션 설정하기 (tsconfig.json) 타입스크립트 설정파일인 tsconfig.json 파일은 타입스크립트를 자바스크립트로 변환할 때 특정한 기준으로 변환하도록 설정을 정의해놓은 파일이다.  아래 명령어를 입력하면 tsconfig.json 파일이 생긴다. $ tsc --init tsconfig.json에  컴파일러 옵션을 설정해주면 해당 옵션에 맞추어서 컴파일해준다. 컴파일러 옵션에대해서 아래에 표가있지만 몇가지 대표적인 옵션만 확인해보면  target 타입스크립트 파일을 자바스크립트 코드로 컴파일 했을때 생성될 자바스크립트 버전을 설정하는 옵션이다. module 모듈 코드 생성 지정에는 여러 종류가 있지만 대체적으로 "CommonJs" 를 사용한다. allowJs 타입스크립트 컴파일 작업시 자바스크립트 파일도 포함할지 설정하는 옵션이다. 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 옵션이다. outDir 타입스크립트에서 자바스크립트로 컴파일된 파일을 특정 경로, 폴더에 저장할 수 있도록 해주는 옵션이다.  strict 모든 엄격한 타입 검사 옵션을 활성화 한다.  strict 옵션을 사용하지 않으면 typescript를 사용하는 이유가 사라진다. noImplicityAny any 타입으로 암시한 표현식과 선언에 오류를 발생시킨다. strict와 같이 엄격한 타입 검사를 위한 옵션이다. lib lib은 library의 약자이다. 타입스크립트 파일을 자바스크립트 파일로 컴파일 할 때 포함될 라이브러리 목록이다. lib은 특정 메서드를 사용하려는데 안뜨는경우