전체 글

[TIL] 23.03.15 TS 핸드북 - Typeof Type Operator

https://www.typescriptlang.org/ko/docs/handbook/2/typeof-types.html Documentation - Typeof Type Operator 타입 컨텍스트에서 typeof 연산자 사용하기. www.typescriptlang.org typeof 타입 연산자 자바스크립트에 이미 typeof 연산자가 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof typeof - JavaScript | MDN typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. developer.mozilla.org 타입스크립트는 타입 컨텍스트에서 변수나 프로퍼티의 타..

[TIL] 23.03.13 타입스크립트에서 효율적으로 상수 관리하기

효율적으로 상수 관리하기 타입스크립트에서는 포괄적인 타입(string, number, ...) 외에도 정확한 값을 타입으로 설정하는 것이 가능하다. let title: 'typescript'; title = 'javascript'; // Type 'javascript' is not assignable to type 'typescript' 타입스크립트에서는 컴파일러가 자동으로 타입을 추론하는 기능을 제공한다. let은 변수의 값을 언제든 바꿀 수 있기 때문에 더 포괄적인 타입으로 값을 추론하고, const의 경우는 변경이 불가능하기 때문에 리터럴 타입으로도 추론된다. let title = 'typescript'; // let title: string const content = 'typescript; //..

[TIL] 23.03.08 TS 핸드북 - More on Functions

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%99%80-%EC%9D%B8%EC%88%98 Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 나머지 매개변수와 인수 나머지 매개변수(Rest Parameter) 정해지지 않은 수의 인수를 받아들이는 함수를 Rest Parameter를 이용해 정의할 수 있다. function multiply(n: number, ...m: number[]) { return m...

[passport] req#logout requires a callback function 오류 해결

Passport Version 0.6.0 패키지를 최신 버전으로 업그레이드하면서 기존에 잘 작동했던 passport 코드에서 오류가 발생했다. ^0.5.3 -> ^0.6.0 기존에는 아래와 같이 사용했었다. userRouter.get('/logout', (req, res) => { req.logout(); res.clearCookie('token'); res.redirect(req.get('Referrer')); }); passport 0.6.0버전 업데이트 내용을 보면 기존의 req.logout()은 동기적으로 작동했지만, 0.6.0 이후로는 비동기 함수가 되었다. 따라서 콜백함수를 logout에 넘겨주는 방식으로 써주면 된다. userRouter.get('/logout', (req, res) => {..

[Next.js] Component selectors can only be used in conjunction with @emotion/babel-plugin 해결

Next.js에서 emotion을 사용하고 있었는데, 컴포넌트 선택자를 사용하려는 중에 이런 오류를 만났다. Server Error Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. 컴포넌트 선택자는 상위 컴포넌트에서 하위의 컴포넌트를 선택해서 스타일링 하는 것을 의미한다. import styled from '@emotion/styled' const Child = styled.div` font-size: 14px; ` const Parent - styled.div` ${Child..

[Github Actions] the process '/usr/bin/git' failed with exit code 128 해결

Github Actions로 CI/CD를 구축하면서 paths filter를 사용하려던 중 the process '/usr/bin/git' failed with exit code 128라는 오류를 만났다. fatal: not a git repository (or any of the parent directories): .git Error: The process '/usr/bin/git' failed with exit code 128 오류 메시지를 읽어보니 not a git repository라는 부분이 있어서 작성했던 yml 파일을 다시 보니 checkout보다 paths filter를 먼저 써줘서 생기는 오류였다. checkout을 통해 repository로부터 CI 서버로 먼저 코드를 내려받은 후에 ..

Github Actions를 이용해 CI/CD를 구축해보자(ssh 연결)

배포 자동화를 해놓지 않았을 때 인스턴스 접속 git pull 백엔드 폴더에서 yarn install -> 배포 프론트 폴더에서 yarn install -> yarn build -> 배포 배포 자동화를 해놓지 않았을 때는 위 과정의 반복이었다. 조그마한 변경이 있어도 매번 이렇게 해야해 너무 번거로웠다. 그래서 Github Actions를 이용해 CI/CD를 구축해보기로 했다. CI/CD를 처음 시도해봤기 때문에 어디서부터 어떻게 해야할지 참 막막했다. 현재 오라클 클라우드를 사용 중인데 오라클에서 제공하는 OCI DevOps는 유료 서비스여서 시도해보지 못했고, OCI 블로그에 나와있는 방법이나 OCI CLI를 이용하는 방법을 모두 시도해보았으나 실패했다. 그래서 평소대로 ssh로 연결한 후 배포가 진..

[React, express] 배포/개발 환경 나누기

프로젝트에서 로컬/배포 환경에서 각각 따로 설정해주어야 하는 부분이 있었는데, 매번 배포할 때마다 코드 일부분을 수정했다. 너무 번거롭기도 하고, 맞는 방법이 아닌 것같아서 개발 모드와 배포 모드 각각의 환경에서 다르게 동작할 수 있도록 코드를 수정해주었다. node환경에서 개발 모드를 감지하려면 process.env.NODE_ENV를 확인해주면 된다. 1. React if (process.env.NODE_ENV === 'development') { // development 환경일 때 실행할 코드 } else { // development 환경이 아닐 때 실행할 코드 } 이런 식으로 process.env.NODE_ENV가 'development'인지 또는 'production'인지 확인해주는 if문을 ..