StudyYeong

Cloudwatch Log Insights는 로그 그룹을 쿼리하는 데 사용할 수 있는 쿼리 언어를 지원한다. 로그 유형의 필드를 검색하고 @ 기호로 시작하는 필드를 자동으로 생성한다. Cloudwatch 로그를 일일이 뒤지고 싶지 않다면 사용법을 알아두는게 좋다. 쿼리 명령어 명령어 설명 display 쿼리 결과에 표시할 필드를 지정 fields 로그 이벤트에서 지정된 필드를 검색 filter 조건을 기반으로 쿼리 결과를 필터링 stats 로그 필드 값을 사용하여 집계 통계를 계산. by와 함께 사용하여 기준을 지정해 데이터를 그룹화할 수 있음 sort 검색된 로그 이벤트를 정렬 limit 쿼리에서 반환되는 로그 이벤트 수를 지정 (기본값은 최대 1,000개) parse 로그 필드에서 데이터를 추출하고, 쿼리에서 추가로 처리할 수 있는 임시 필드 생성 사용 예timestamp 범위 내 로그 쿼리1234fields @timestamp,...

Express는 Nest와 달리 정해진 구조가 없기때문에 구글링을 해도 개발자에 따라 코드 작성 방식이 크게 차이가난다. Nest로 프로젝트를 구성하면 알아서 구조가 잡히고 여러 면에서 편리하지만, 현재 맡은 프로젝트에서는 API 개발도 아니고 간단한 페이지만 만들면 되는데 Nest를 쓰기에 필요이상으로 프로젝트 크기가 커지는 것 같아서 Expres를 사용하기로 했다. 앞으로도 경우에 따라 쓸 일이 생길 것 같아 여러 예시를 보고 내 취향에 맞게 템플릿을 만들어 놓기로 했다.참고로 Express로 구조가 잘 만들어진 보일러 플레이트는 여기서 볼 수 있다. W3tech에서 만든 express-typescript-boilerplate이다. GraphQ, Docker, Jest, TypeORM, class-validator… 등 다양한 기능이 이미 들어가있다. 나는 정말 가벼운 템플릿이 필요해서 새로 만들어 놓기로 결정했다. 참고 타입스크립트로 Express 시작하기

express에서 핸들바로 개발하는 중.. ‘partial’ 기능을 사용하려는데 에러가 잡히지가 않았다. 스택오버플로우에서 알려준대로 해도 설정이 안먹히는 것 같았다.helper를 정의했는데도 Missing helper 에러가 뜨고 partial folder 경로를 정해줬는데도 자꾸 못 찾아왔다. 드디어 알아낸 문제의 원인은 hbs과 express-handlebars 이 두개의 view engine 을 혼용하고 있어서.. 였다.여러 코드 솔루션을 보다보니 저 두 개가 다른건줄 모르고 섞어서 쓰고있었다.. 하나로 사용하는 엔진이 달라지다니.. 조심해야겠다. 원래 코드12345678910111213141516import express from "express";import { create } from "express-handlebars";const app = express();const hbs = create({ ...

hexo로 블로그를 생성해 테마를 설치해서 사용하면 다른 로컬 환경에서 블로그 프로젝트를 clone 했을 때 themes 디렉토리 내부의 테마 디렉토리들이 비어있는 상태로 받아지는 것을 볼 수 있다. 내부에 git 레파지토리가 따로 구성되어있기 때문인데 다른 컴퓨터에서도 원활하게 사용할 수 있도록 submodule을 설정해줬다. submodulesubmodule이란 Git 저장소 안에 다른 Git 저장소를 디렉토리로 분리해 넣는 것이다. 다른 독립된 Git 저장소를 Clone 해서 내 Git 저장소 안에 포함할 수 있으며 각 저장소의 커밋은 독립적으로 관리한다. 자세한 내용은 7.11 Git 도구 - 서브모듈 여기서 볼 수 있다. 나는 블로그 운용만 쉽게 할 수 있게 간단히 훑어보고 필요한 작업만 해놓았다. 잘 알아두면 나중에 실무에서도 유용하게 쓸 수 있을 것 같다. hexo theme submodule 적용가장 깔끔한 방법은 테마를 처음 설치할 때 부터 submodule로...

Webpack file-loader 경로 오류문제jpg, gif 등 이미지 파일 처리를 위해 검색을 하다보면 ‘file-loader’를 사용하는 방식이 가장 많이 뜬다. 나의 경우 강의를 듣고 따라하며 ‘file-loader’를 프로젝트로 적용시켰는데, JS 파일에서 import한 이미지는 제대로 넣어졌으나 css 파일에서 url()로 입력한 이미지는 경로가 맞지 않아 불러오지를 못했다. 파일 구조는 아래와 같았다. 123456public ┣ img ┣ ┣ img1.jpg ┣ ┣ img2.gif ┣ js ┗ css file-loader를 사용하면서 option은 아래와 같이 입력했다. 1234567891011{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { ...

IOS 15 업데이트가 나오고 시뮬레이터에서 하도 많은 오류를 보다보니 어떤 오류가 나도 다 xCode 때문일 거라고 생각했다. 그래서 이 요상한 에러로 하루를 날려버렸다 🙀 에러1error: index.js: .plugins[0][1] must be an object, false, or undefined 이런 에러가 떴는데 에러 앞쪽에 Babel이 보였던걸로 보아 babel config 문제가 발생한것 같았다.내 프로젝트에 추가된 babel plugin은 module-resolver, babel-plugin-styled-components 요 두가지였다. babel.config.js 12345678910111213141516171819202122232425262728293031module.exports = { presets: ["module:metro-react-native-babel-preset"], plugins: [ [ ...

Webpack - LoaderWebpack은 기본적으로 자바스크립트 번들러이기 떄문에 다른 형식의 파일을 번들링 하기 위해서는 loader가 필요하다. 예를들면 css, sass, jpg.. 등 정적 asset들을 처리할 수도 있다. 또한 파일을 파일을 pre-process하는 것도 가능하다. 사용 방법webpack.config.js에서 로더를 설정할 수 있다. 1234567891011module.exports = { module: { rules: [ { test: /\.css$/, // 로더를 적용시킬 파일. 정규식 사용 use: [{ loader: "style-loader" }, { loader: "css-loader" }], // 사용할 로더. 순서 맞춰서 입력 }, { test: /\.ts$/,...

Webpack이란 webpack은 Javascript용 static module bundler이다. 한 개 이상의 entry points를 통해 내부적으로 dependency graph를 만들어 모든 모듈을 번들링 시켜주어, 결과적으로 프로젝트에서는 한 개의 번들만 import 시키면 된다. 이게 webpack의 기본 concept이다. 번들러는 webpack말고도 Gulp등.. 다양하게 있지만 가장 많은 기능을 가지고 있는 툴은 webpack인 듯 하다. webpack.config.js 파일에서 번들 옵션을 설정 할 수 있다. 아래는 설정 파일에서 사용하는 주요 옵션들이다. webpack option 여기를 보면 정말 다양한 옵션들이 있음을 확인할 수 있다.. 필요할 때 들어가서 참고하면 되겠다. 설치yarn 이든 npm 이든 global로 설치 해줬다. 1yarn global add webpack webpack-cli Core Concept Entrywebpack이...

TypeORMTypeORM은 다양한 플랫폼에서 TypeScript와 JS로 실행되는 ORM이다. ORM이란 ‘Object Relational Mapping’의 줄임말이다. 최신 JS를 지원하고 DB로의 작업을 효율적으로 수행할 수 있도록 도와준다. EntityEntity는 DB에 저장되는 데이터의 형태를 보여주는 Model로, DB에 테이블을 매핑해주는 class이다. @Entity() 데코레이터로 정의한다. 12345678910111213141516import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";@Entity()export class User { @PrimaryGeneratedColumn() id: number; @Column() firstName: string; @Column() lastName: string; @Column() isActive:...

NestJSNestJS?NestJs는 Node.js용 프레임워크이다. Typescript를 전격 지원하고 OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming)으로 이루어져있다. NestJS는 Node.js에서 사용되던 Express, Fastify 위에서 동작한다. 기본은 Express를 동작하고 있으며 추가 설정을 통해 Fastify를 사용할 수도 있다.위 두 http 프레임워크는 가장 많이 통용되고 있었으나 가장 큰 단점이 정해진 구조가 없다는 것이었다. 그런 단점을 NestJS가 보완하고 있는 것이다.NestJS를 사용해 더 구조적으로 안정된 애플리케이션을 구현할 수 있을 것이다. Nest CLINestJS 프로젝트는 cli를 통해 간단히 생성할 수 있다. 명령어를 사용하면 간단한 scaffold를 생성해준다. 12npm i -g...