DEVLOG DEVLOG

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: ..

Onion Architecture 아키텍쳐 패턴중의 하나로 유지보수와 점직적인 시스템을 만들 수 있도록 해줌 바깥쪽 계층은 안쪽 계층에 의존성을 가지고, 안쪽 계층은 바깥쪽 계층에 의존성을 갖지 않아 좋은 결합도를 가짐 이해관계가 분리되어 각 계층은 비슷한 변경을 갖는 개념을 제한함 코어 어플리케이션과 인프라 코드를 분리해주어 별도로 실행이 가능하게 해줌 어플리케이션은 독립적인 객체 모델로 구성됨 안쪽 계층에서 인터페이스를 정의하고 바깥쪽 계층에서 이를 구현함 Layer Domain Model Domain Model 계층의 의존성은 자기 자신한테만 종속됨 비지니스 entity를 나타냄 Domain Service Domain service 계층은 Model Layer에서 정의된 entity들의 logic을..

웹 페이지 제작시 모든 브라우저에서 이상없이 호환 되게 만드는 것 브라우저 마다 렌더링 엔진이 달라 Cross Browsing이 필요 하위 IE 버전에서 html5를 사용하려고 라이브러리를 사용하는 것은 성능을 저하시킬 수 있음 Cross Browing Testing 웹이 어느 버전의 브라우저든 원하는 결과물이 나오도록 확인하고 수정하는 단계 Chrome, Safari, IE, Web View 등 에서 테스트 [Can I Use] 사용하고자 하는 css가 어느 브라우저의 어느 버전까지 지원되는지 확인 할 수 있는 사이트

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..

RPC 한 프로그램이 네크워크의 세부정보를 이해하지 않고도 네트워크 안의 다른 컴퓨터에 있는 프로그램에서 서비스를 요청하는 프로토콜 client-server 모델을 사용 클라이언트에서 서비스를 요청하면, 서버에서 서비스를 제공 gRPC gRPC는 Google에서 개발한 RPC(Remote Procedure Call) 시스템 전송을 위해 TCP/IP 프로토콜과 HTTP 2.0 프로토콜을 사용 IDL(Interface Definition Language)로 Protocol buffer 사용 Java, C++, Python, Ruby, Javascript, Objective-C, C# 등에서 사용 가능 SSL/TLS를 사용하여 서버를 인증하고 클라이언트와 서버간에 교환되는 모든 데이터를 암호화함 HTTP 2...