프로그래밍 공부 노트

  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 할 때 환

  express.js, passport.js, typescript 를 사용해서 로그인 기능을 구현했다. passport local 로그인 동작 순서는 아래와 같다. passport-local -> passport.authenticate -> local strategy -> req.login -> passport.serializeUser -> response 각 순서에서 작업을 수행하고 각 단계에서 callback 함수와 함께 다음 함수에서 필요한 값을 넘겨주게 된다.  error TS2339: Property 'id' does not exist on type 'User'. 해당 에러는 아래 코드에서 발생되었다. passport . serializeUser (( user , done ) => { done ( null , user . id ); }); 아래 코드처럼 req.login으로 user 정보를 넘겨passport.serializeUser에서 해당 유저 정보를 받는데 return req . login ( user , async ( err ) => { if ( err ) { console . error ( err ); return next ( err ); } if ( typeof user === 'object' && user !== null ) { if ( user ) { return res . status ( 200 ). json ({ success : true , message : 'login success' , user : { email : user . email , nickname : u

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. Type '{ children: string; css: { color: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322) 찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다. /** @jsx jsx */ 위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다. /** @jsxImportSource @emotion/react */ 그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다. 번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다. 그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다. hotpink 색을 적용했지만 검정색으로 표시되었다. 해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다. eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다. 아래

프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 import 경로를 작성하는것이 어려워진다.  상대경로를 사용하여 특정 파일을 import 하게되면 아래와 같이 작성해야 한다. ex)  ../../../components/header/index.tsx 이러한 문제점을 절대경로를 사용하여 해결할 수 있다. 하지만 절대경로에도 문제가있는데 운영체제별로 절대경로가 (root 경로가)달라서 협업시 문제가 있을 수 있다. 윈도우면 C:\\Windows\System32\... 이런식이고 맥이면 /User/lsw/... 이런식이다. 하지만 위와 같은 방식으로 root부터 절대경로를 사용하지 않고 @ 키워드 즉 alias(별칭)를 사용해서 운영체제의 root 부터가 아닌 특정 폴더에 바로 접근할 수 있는 방법을 알아볼 것이다. CRA(create-react-app) + Typescript에서 절대경로 설정 일단 절대경로를 사용하려면 tsconfig.json과 webpack 설정을 변경해야 한다. 하지만 CRA로 생성한 프로젝트는 기본적으로 webpack이 설정되어있어서  eject를 해서 webpack 설정을 직접 변경해줘야 하는데 권장되는 방법은 아니다. (버전 업데이트 등의 문제 발생) 그래서 CRA를 eject 하지않으면서도 webpack 설정을 바꾸어 줄 수 있는 라이브러리가 있다. 바로 Craco 1. Craco 설치 craco를 사용하면 CRA를 eject 하지 않아도 CRA에 설정되어있는 eslint, webpack, babel 등을 쉽게 커스터마이징할 수 있다. 두가지 라이브러리를 설치해야 한다. npm i @craco/craco npm i -D craco-alias 두 라이브러리를 설치하고 root 디렉토리에 craco.config.js 를 생성한다. craco.config.js const CracoAlias = require ( ' craco-alias ' ) ; module.exports = { plugins :

ts(2322) 에러 Type 'undefined' is not assignable to type 'HTMLInputElement | null'. ts(2322) // 1번 const inputRef = useRef () ; // 2번 const inputRef = useRef ( null ) ; useRef 선언시 null 값을 작성하지 않아서 발생하는 에러이다. 1번을 2번처럼 변경하여 오류를 해결할 수 있다. ts(2339) 에러 Property 'focus' does not exist on type 'never'. ts(2339) const inputRef = useRef < HTMLInputElement > ( null ) ; useRef<해당하는 엘리먼트 객체> 를 작성해주면 해당 오류를 해결할 수 있다.

 Partial<Type> - Type의 모든 속성이 선택 사항으로 설정된 형식이다. interface A { a : string ; c : boolean ; d : number ; } const a : A = { a : ' aaa ' , c : false , d : 123 , }; const b : Partial < A > = { c : true , d : 123 , }; Readonly<Type> - 모든 속성이 읽기 전용으로 설정된 형식을 생성한다. 즉, 생성된 형식의 속성을 다시 할당할 수 없다. interface A { a : string ; c : boolean ; d : number ; } const a : A = { a : ' aaa ' , c : false , d : 123 , }; const b : Readonly < A > = { a : ' bbb ' , c : true , d : 123 , }; ReturnType<Type> - 어떤 함수의 return 값의 return 타입을 가져올 수 있다. declare function f1 (): { a : number ; b : string }; type T0 = ReturnType <() => string >; //type T0 = string type T1 = ReturnType <( s : string ) => void >; //type T1 = void type T2 = ReturnType << T >() => T >; //type T2 = unknown type T3 = ReturnType << T extends U , U exte

타입스크립트 설치 $ 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은 특정 메서드를 사용하려는데 안뜨는경우