나를 찾는 아이

lint는 프로젝트의 코드스타일에 일관성을 주니 적극 사용하려고 하는데 tslint의 lint 2개를 알려드려볼까합니다 interface-over-type-literal 코딩을 하다보면 type과 interface 둘중에 어떤것을 쓸지 고민할때가 있는데요 tslint에서 가이드를 하고 있습니다 리터럴에서는 type을 object에서는 interface입니다 interface-name interface를 선언할때는 맨앞에 대문자 아이(I)를 붙여야 합니다 이 두개가 적용된 예는 다음과 같습니다 export type TUserTier = "Basic" | "Premium" | "Admin"; export interface IUser { id: string; name: string; tier: TSomeMem..

react 18 types에 PropsWithChildren 이라는 타입이 추가되었습니다 말그대로 children을 포함한 props를 가리키는 타입입니다 코드를 보면 이런식으로 선언이 되어있습니다 type PropsWithChildren = P & { children?: ReactNode | undefined }; 그래서 react 컴포넌트에서 사용할때 이런식으로 사용할수 있습니다 import React, { PropsWithChildren } from "react"; type ComponentProps = { someProperty: string; }; function Component({ someProperty, children }: PropsWithChildren) { // ... } 좀더 코드보..

https://nextjs.org/docs/advanced-features/compiler Advanced Features: Next.js Compiler | Next.js Learn about the Next.js Compiler, written in Rust, which transforms and minifies your Next.js application. nextjs.org nextjs 12버전의 변화중의 하나는 컴파일러가 변경되었습니다 babel에서 rust를 사용하는 SWC로 변경이 되었습니다 새로바뀐 SWC는 기존의 babel 보다 17배나 빠르다고 하네요 실제로도 체감할수 있는 만큼 빨라진것 같습니다 babel에서 swc로 갈아타는 방법은 매우 쉽습니다 nextjs는 프로젝트가 .babel..

애플 스마트 앱배너 알고 계신가요? 그래도 나온지 꽤 오래된 기능인데 아직 그렇게 많이 쓰지는 않는것 같아요 디자인적으로 커스터마이징을 할수 없다는 이유도 있고, 트래킹 관련한 애로사항도 이유가 있을것 같습니다 https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners Apple Developer Documentation developer.apple.com 스마트 앱배너에 대한 공식문서는 이겁니다 앱배너는 이렇게 생겼습니다 웹사이트에 모바일 사파리로 접근했을때 스마트앱배너가 설정되어있는경우 앱스토어에서 바로 앱을 다운로드 받을수 있도록 배너를 자동생성해줍니다 그리고 굉장히 똑똑하게도(?) 앱이 이미 설치되어있..

nodejs는 싱글스레드이며, 논블로킹이다 라는것은 nodejs를 공부하는 사람이라면 항상듣는 개념입니다 그런데 막상 코드를 짤때 이부분을 간과하는 경우가 많습니다 그래서 한번 어떻게 논블로킹하게 생각하고 코딩해야되는지 알아보는 시간을 갖도록 합시다. 논블로킹한 코드를 짜지 않으면 어떻게 되는지 체감해보도록 해요 블로킹한 작업을 하는 다음과 같은 코드를 만듭니다 const busyWork = (ms) => { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < ms); }; 파라메터로 주어진 ms(밀리세컨드)만큼 뭔가 바쁜 작업을 수행하는 함수입니다 여기서는 d..

https://docs.nestjs.com/techniques/versioning#versioning Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac docs.nestjs.com rest api를 설..

nestjs의 dto는 우리가 별다른 노력을 들이지 않아도 입력값을 자동으로 dto 클래스에 매핑을 하여 손쉽게 사용할수 있도록 도와줍니다 export class CreateUserDto { username: string; password: string; email: string; role: string; } 이러한 dto 클래스를 선언했다고 생각해봅니다 유저 생성시에 post body를 통해 위에 선언된 같은 이름의 변수들을 받아서 매핑을 합니다 그런데 만약 post body로 class에 선언되지 않은 파라메터들이 추가로 오는 경우 어떻게 될까요? { "username": "hello", "phone": "01011112222" } 이렇게 post body에 phone이라는 정의되지 않은 필드를 전달..

nestjs는 class-validator와 함께 강력한 validationpipe 기능을 제공하고 있습니다 dto를 통해서 입력된 값의 validation을 체크할수 있습니다 export class CreateUserDto { @IsNotEmpty() @IsString() username: string; } 이런식으로 dto 클래스의 원하는 필드에 어노테이션을 추가하면 username은 반드시 1. 값은 string 타입이어야 합니다 2. 값을 가지고 있어야 합니다 만약 값이 입력되지 않는 경우 두개의 validation 규칙을 모두 어기게 되는것이지요 { "statusCode": 400, "message": [ "username must be a string", "username should not ..

CRA로 생성한 react 프로젝트에서 https 서버를 실행하는 방법은 간단합니다 react-scripts start 명령어에 약간의 옵션을 추가해주시면 됩니다 package.json의 명령어에 https 서버를 실행하는 새로운 명령어를 만들겠습니다 "scripts": { "start:https": "HTTPS=true SSL_CRT_FILE=인증서파일경로 SSL_KEY_FILE=키파일경로 react-scripts start", }, HTTPS는 true로 지정하고 SSL_CRT_FILE : 인증서파일경로 SSL_KEY_FILE : 키파일경로 이렇게 지정하여 실행하면 아주 쉽게 https 서버를 실행시킬수 있습니다 로컬에서 사용할 인증서를 만드는 방법이 알고 싶다면 아래 링크를 클릭하세요 https:/..

nextjs 기반의 프로젝트는 아래의 명령어를 통해 로컬 개발서버를 실행하게 됩니다 npm run dev yarn dev 그런데 다른 목적으로 http 서버를 직접 커스텀하여 실행해야하는 경우가 있는데요 대표적인예가 SSL인증서를 등록하여 https 서버를 실행하는 경우가 있겠네요 nextjs 공식문서에는 이를 위한 고급안내 문서가 있습니다 https://nextjs.org/docs/advanced-features/custom-server Advanced Features: Custom Server | Next.js Start a Next.js app programmatically using a custom server. nextjs.org 기본적인 구조는 다음과 같습니다 // server.js const..