DEVLOG DEVLOG

any 타입스크립트에서 any는 어떠한 타입이든 허용하는 타입입니다. 타입스크립트는 any 타입에 대해서 엄격하게 체크하지 않기 때문에 모든 타입의 연산을 적용할 수 있습니다. 그로인해 문제가 발생할 수 있는 코드도 컴파일 시 에러가 검출되지 않습니다. 아래 예시 코드도 컴파일 시에는 문제가 발생하진 않지만 런타임 환경에서 사이드 이펙트가 발생할 수 있습니다. const foo: any = 10; console.log(foo.length); // undefined unknown unknown은 타입스크립트의 Top-Type으로 타입스크립트에서 존재하는 모든 타입을 할당할 수 있습니다. 하지만 any와의 차이점은 모든 타입의 공통적인 연산만 수행할 수 있다는 점입니다. const foo: any = 10;..

렉시컬 환경 (Lexical Environment) 렉시컬 환경은 코드의 block, function, script를 실행하기에 앞서 생성되는 특별한 객체로 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체입니다. 작동 방식 전체 스크립트와 관련이 있는 렉시컬 환경은 글로벌 렉시컬 환경입니다. 전역 코드가 시작되면 렉시컬 환경 객체가 만들어지고 코드를 실행하기 앞서 선언되어 있는 변수와 함수를 글로벌 렉시컬 환경 레코드에 저장합니다. 이때 저장 방식이 변수 또는 함수 선언 방식에 따라 차이가 있습니다. - 변수가 var로 선언된 경우 var로 선언된 변수는 환경 레코드에 변수 이름을 key로 undefined를 value로 하여 초기화합니다. 이것은 코드를 실행시키기 전에 동작되는 과..

Nest에는 어플리케이션의 요소들을 관리하는 라이프 사이클을 가지고 있습니다. Nest에서는 라이프 사이클에 관한 2가지 기능을 제공하고 있습니다. 라이프 사이클 이벤트에 대한 가시성을 제공하는 라이프 사이클 훅 이벤트가 발생되었을 때 특정 액션을 실행할 수 있는 기능 라이프 사이클은 크게 3가지로 나뉘어 집니다. (초기화, 실행, 종료) 라이프 사이클 훅 이벤트 onModuleInit() 호스트 모듈이 초기화 되면 호출 onApplicationBootstrap() 모든 모듈이 초기화되면 실행 (커넥션은 생성되지 않은 상태) onModuleDestroy() 종료 시그널을 받았을 때 호출 (호스트 모듈을 삭제하기 직전) beforeApplicationShutdown() onModuleDestroy() 핸들..

jest에서는 tsconfig에서 지정한 절대경로를 읽지 못함 package.json에 moduleNameMapper 추가 "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "moduleNameMapper": { "^@/(.*)$": "/$1" }, "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" }

CRA에서 env 우선순위 .env.development.local > .env.development > .env.local > .env 변수명 앞에 접두어로 `REACT_APP_` 이 붙어야함 REACT_APP_URL=http://localhost:3000 REACT_APP_api=http://localhost:8000

1. npm module 설치 $ npm install cache-manager cache-manager-redis-store $ npm install -D @types/cache-manager 2. redis module import { CacheModule, Module } from '@nestjs/common'; import * as redisStore from 'cache-manager-redis-store'; import { RedisService } from './redis.service'; @Module({ imports: [ CacheModule.registerAsync({ useFactory: () => ({ store: redisStore, host: 'localhost', port: ..

1. craco install npm i @craco/craco npm i -D craco-alias 2. package json script 수정 ... "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }, ... 3. tsconfig 설정 // tsconfig.path.json { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } } { "extends": "./tsconfig.path.json", "compilerOptions": { "target": "es6", "module": "e..

컴포넌트가 렌더링 될 때마다 사이드 이펙트를 실행시킬 수 있도록 해줌 const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log('Rendering'); console.log(`count: ${count}`) }) return ( + {count} - ); } 마운트될 때만 실행하려면 2번째 파라미터에 빈배열을 넣어주면됨 useEffect(() => { console.log('Rendering'); console.log(`count: ${count}`) }, []) 업데이트 될 때만 실행하려면 2번째 파라미터에 체크할 변수를 넣어주면됨 useEffect(() => { console.log('Rere..