[HTML] 모바일 디바이스에서 double-tap 줌인 disable
모바일 디바이스에서 더블탭 동작 시 화면인 줌인 되는 이벤트가 있다.추가 구현중인 기능에 해당 동작이 방해가 되어 disable 하는 법을 찾아 기록해놓는다. meta 태그 추가12345678<head> <title>Site</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> etc...</head> 참고 Disable double-tap “zoom” option in browser on touch devices
암호화 해시 함수 / 메시지 인증 코드
암호화 해시 함수해시 함수의 일종으로, 해시 값으로부터 원래의 입력값과의 관계를 찾기 어려운 성질을 가지는 경우를 의미한다. 성질 역상 저항성: 주어진 해시 값에 대해, 그 해시 값을 생성하는 입력값을 찾는 것이 계산상 어렵다. (일방향함수와 연관되어 있다.) 제 2 역상 저항성: 입력 값에 대해, 그 입력의 해시 값을 바꾸지 않으면서 입력을 변경하는 것이 계산상 어렵다. 충돌 저항성: 해시 충돌에 대해 안전해야 한다. 같은 해시 값을 생성하는 두 개의 입력값을 찾는 것이 계산상 어려워야 한다. 종류 MD5 SHA1/2/3 BLAKE2 메시지 인증 코드 (MAC, Message authentication code) 메시지 인증에 쓰이는 작은 크기의 정보이다. 비밀 키를 입력받고, 메시지를 인증한다. MAC은 메시지의 데이터 인증과 더불어 무결성을 보호한다. 원문에 해당하는 MAC 값은 하나밖에 없으며 원문이 변조되면 MAC 값 또한 바뀌게 된다. MAC 값 또한 변조될 수...
helmet.js 버전업 이슈
helmet.js는 Express 앱에 보안을 위한 HTTP 헤더를 추가해 앱을 보호해주는 라이브러리다. 모듈 업데이트가 한참 적용되지 않은 프로젝트를 넘겨받아 업데이트를 진행했는데 버전 3 에서 버전 5로 버전이 확 뛰었다. helmet 버전 4에 추가된 미들웨어들이 앱 동작에 에러를 일으켰다. public asset 접근에 이슈가 있는건 개발하면서 확인해 설정을 변경해두었는데 레퍼러 관련 기능은 테스트를 스킵했고 결과적으로 이것때문에 배포 후 오류가 발생했다. 😰 Helmet 4 upgrade guide 가이드 문서 버전 4 업그레이드 가이드 문서를 보면 추가된 미들웨어를 확인할 수 있다. 따로 설정하지 않으면 default 값으로 엄격한 보안 정책이 설정되기 때문에 앱에서 필요한 정책을 확인하여 수동 설정 작업이 필요하다. 이번에 문제가 생긴 부분은 referrerPolicy 정책이다. Referrer-Policy 헤더를 설정하는 미들웨어가 추가되면서 default...
Jest 경로 에러
테스트 코드를 실행하려고하는데 아래와 같은 에러가 발생했다. Cannot find module ‘src/config/configFile’ from ‘modules/foo/foo.service.ts’ 서치를 좀 하다가 Jest 설정을 수정했는데 아래와 같은 에러도 발생했다.결론적으로는 같은 원인으로 발생한 문제였다. TypeError: Right-hand side of ‘instanceof’ is not an object30 |31 | constructor(32 | @InjectRepository(ChannelPlayer) 해결법package.json 파일의 Jest 설정을 바꿔주면 된다. 12345678910111213"jest": { "roots": [ "<rootDir>", "/home/some/path/" ], "modulePaths": [...
TypeORM Query builder로 Join
TypeORM에서 서로 다른 테이블을 조인하여 값을 가져오는 작업은 Query Builder를 사용해야 한다. SQL query1select tb1.a, tb2.b, tb3.c from tb1, tb2, tb3 where tb1.a = tb2.a and tb2.b = tb3.b and tb1.c = "test" TypeORM12345678910const query = await this.tb1Repository .createQueryBuilder("tb1") .addSelect("tb2.b", "tb2_b") .addSelect("tb3.c", "tb3_c") .innerJoin("table2", "tb2", "tb1.a = tb2.a") .innerJoin("table3",...
create-react-app 에러
문제npx create-react-app my-app을 실행하려고 하는데 아래와 같은 에러로 실행이 되지 않았다. 옛날에 create-react-app을 설치한 적이 있어서 생기는 오류인 것 같다. 현재 컴퓨터에 설치된 패키지가 없음에도 설치된 패키지를 삭제하라는 메세지가 출력됐다. 해결법1npx clear-npx-cache 이후에 다시 create-react-app을 실행하면 정상적으로 동작한다.
SSR & CSR 그리고 NextJS
SPA (Single Page Application)현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션이다. 연속되는 페이지 간 UX를 향상시킨다. 전통적인 Page LifeCycle은 Client에서 Server로 최초의 요청을 보낸다. Server는 응답을 보내고 Client에서 화면이 보인다. Client에서 상호작용을 위한 요청을 Server에 보낸다. Server가 응답한다. 페이지가 Reload 된다. 이 경우 Client로 부터 새로운 요청이 올 때마다 Reload가 발생하여 비용적으로 손해를 보게 된다. SPA의 경우 정적 리소스를 최초에 한 번 다운로드 한 뒤로 변경이 있을 때 페이지 전체 Reload가 아닌 변경된 부분에 한해서 갱신된다. CSR (Client Side Rendering) CSR의 동작 순서는 다음과 같다. 서버에서 브라우저로 응답을 보낸다. 브라우저에서 JS를 다운로드 받는다. 브라우저가 React를...
SQS Lambda Trigger
업무에서 Standard 큐를 사용할 것이라 Standard 큐 기준으로 내용을 정리했다. FIFO 큐는 차이가 있는 부분이 있기 때문에 문서를 참고해야 한다. SQS Lambda Trigger란Lambda trigger로 SQS를 등록할 수 있다. Standard 큐와 FIFO 큐 모두 지원한다.Lambda는 큐를 poll하여 가져온 큐 메시지로 동기적으로 Lambda 함수를 실행한다. Lambda는 batch안의 메시지들을 읽고 각 batch당 한 번씩 Lambda 함수를 실행시킨다. 작업이 성공적으로 끝나면 Lambda는 자동으로 큐에서 메시지를 삭제한다. default로 Lambda는 한 번에 10개의 메시지를 poll하여 해당 batch를 함수로 보낸다. 적은 record로 함수가 실행되는 것을 피하기 위해서 batch window를 설정하여 최대 5분까지 메시지를 더 polling하여 record를 더 채울 수 있도록 대기시킬 수 있다. 함수를 실행하기 전에...
serverless 사용해보기
Serverless는 개발 프로세스를 단순화하기 위해 만들어졌다. AWS에서 Lambda를 작성한다면 각 Lambda마다 함수를 작성해야 하고 매번 환경 설정을 해야 한다. 그렇게 작성한 Lambda는 AWS 콘솔에서 다른 서비스와 연결시켜줘야 사용할 수 있다. 이런 과정을 간소화해주는 것이 Serverless Framework다. 간단한 Lambda 개발환경 구축 이외에도 serverless는 CI/CD 설정 및 배포 모니터링 기능을 제공한다. Serverless는 Node.js로 만들어진 오픈 소스 웹 프레임워크다. 2015년에 AWS Lambda를 개발하기 위해 만들어진 첫번째 프레임워크이며 현재는 Microsoft Azure의 Azure Functions, Google Cloud의 Google Cloud Functions등 다른 플랫폼도 지원한다. 플랫폼 선택에 따라 각 플랫폼에서 지원하는 다양한 언어(Node.js, Typescript, Python, Go,...
Skipping start: DynamoDB Local is not available for stage Issue
Serverless로 serverless-dynamodb-local 플러그인을 설치 후 dynamodb start 실행시 오류가 발생했다. 1Skipping start: DynamoDB Local is not available for stage: dev serverless.yml1234custom: dynamodb: stages: - dev 코드를 추가 후 다시 실행하면 해결된다.