본문 바로가기

분류 전체보기

(989)
[TS]유효성 검증(validation) 대신 구문 분석(Parsing)하세요 io-ts, Runtypes 및 Zod와 같은 라이브러리를 사용하여 모든 타입의 수신 및 발신 데이터를 안전하게 구문 분석하는 방법을 알아봅시다. TLDR : 검증과 객체 생성을 동시해 해주며 타입스크립트 타입도 만들어 주는 라이브러리를 사용하자 원문입니다 : https://itnext.io/parse-dont-validate-incoming-data-in-typescript-d6d5bfb092c8 사용자 입력을 검증하는 것이 모든 웹 프로그래밍의 초석이라는 것은 누구나 알고 있습니다. 사실, 소프트웨어로 들어오는 모든 입출력 데이터는 검증되어야 합니다. 그런데 검증 대신 파싱하라는게 무슨말인가요?(parse, don’t validate) 검증 예시 yup과 같이 인기 있는 자바스크립트 유효성 검사 라이..
완벽하게 타입 안전한 웹 애플리케이션 개발[Fully Typed Web Apps] ...의 번역입니다 : https://www.epicweb.dev/fully-typed-web-apps Fully Typed Web Apps The main thing that makes end-to-end type safety difficult is simple: boundaries. The secret to fully typed web apps is typing the boundaries. www.epicweb.dev 타입스크립트는 환상적입니다. function add(a: number, b: number) { return a + b } add(1, 2) // type checks just fine add('one', 3) // does not type check 위 코드도 멋지지만, 저는 더 큰 관..
Iframe 완벽 가이드 꽤 자주 보지만 아직도 익숙하지 않은 Iframe에 대해 알아봅니다. 원문 링크입니다 : https://blog.logrocket.com/the-ultimate-guide-to-iframes/ The ultimate guide to iframes - LogRocket Blog Not a fan of iframes? This post provides an overview of the tag's best features, shows you how to use them, and how to secure them against vulnerabilities. blog.logrocket.com iframe 요소(인라인 프레임의 줄임말)는 아마도 가장 오래된 HTML 태그 중 하나이며 1997년 Microsoft I..
[1일 1 알고리즘] 프론트엔드 JS 알고리즘 문제풀이 : 배열 평탄화(flatten) 임의의 레벨로 중첩되어 있는 배열을 평탄화하여 단일 중첩하는 알고리즘을 구해봅시다. 문제 예상 출력 // Single-level arrays are unaffected flatten([1, 2, 3]); // [1, 2, 3] // Inner arrays are flattened into a single level flatten([1, [2, 3]]); // [1, 2, 3] flatten([ [1, 2], [3, 4], ]); // [1, 2, 3, 4] // Flattens recursively flatten([1, [2, [3, [4, [5]]]]]); // [1, 2, 3, 4, 5] 문제 풀이 전에 명확화 할 것 배열에는 어떤 타입의 데이터가 포함되어 있나요? 일부 접근 방식은 특정 데이터 타입..
헥사고날 아키텍처와 관심사의 분리를 이용한 클린 코드 1. 어니언, 헥사고날 아키텍처 헥사고날, 어니언 아키텍처는 port, adaptor 패턴의 별칭일 뿐입니다. https://blog.ploeh.dk/2016/03/18/functional-architecture-is-ports-and-adapters/ Functional architecture is Ports and Adapters Functional architecture tends to fall into a pit of success that looks a lot like Ports and Adapters. In object-oriented architecture, we often struggle towards the ideal of the Ports and Adapters architecture,..
Nest JS와 CQRS [CQRS Explained With Nest JS] Nest JS와 함께 CQRS를 알아봅니다. 원문입니다 : https://medium.com/swlh/cqrs-explained-with-nest-js-1bcf83c5c839 CQRS Explained With Nest JS We will be developing a simple CQRS app in NEST JS medium.com 반응형 프로그래밍은 모바일, 웹 또는 백엔드 애플리케이션 개발 여부에 관계없이 점점 더 인기를 얻고 있습니다. IT 업계가 고품질 제품을 제공하기 위해 채택한 변화에 따라 점점 더 많은 디자인 패턴이 진화하고 있습니다. CQRS는 데이터베이스에 삽입 작업을 위한 별도의 서비스, 모델, 데이터베이스가 있는 마이크로서비스 아키텍처에서 사용되는 또 다른 디자인 패턴입니다. CQR..
이벤트 루프에 대한 이해도를 파악할 수 있는 면접질문 Q1 : 아래 코드는 100번을 실행해도 실행결과가 똑같습니다. setImmediate(() => console.log('setImmediate')); Promise.resolve().then(() => console.log('promise')); process.nextTick(() => console.log('nextTick')); 1. 로그는 어떤 순서로 찍힐까요? 2. 왜 이 순서로 찍히는지 설명해보세요 Q2 : 아래 코드는 실행 결과가 상황에 따라 다를 수 있습니다. // timeout_vs_immediate.js setTimeout(() => { console.log('timeout'); }, 0); setImmediate(() => { console.log('immediate'); }); $ ..
리액트의 의존성 주입 [NestJs의 모듈로 살펴보는] NestJS의 모듈 모듈은 고수준 모듈(코드)가 런타임에 제공받을 실제 구현을 지정할 수 있는 빌딩 블록입니다 React의 Context API 정의는 Props Drilling을 피하기 위한 도구이지만, IOC 컨테이너와 같이 해당 컨텍스트에 의존성(실제 구현)을 지정해주는 역할을 합니다. NestJS와 리액트 컴포넌트의 대응관계 NestJS의 IOC 컨테이너 : 리액트 런타임 NestJs의 Module : 리액트의 Context API NestJS의 Provider : 리액트의 Context Provider NestJS의 Interface : 컨텍스트 타입 시그니처 T 참고 https://itchallenger.tistory.com/766 Dependency Inversion Principle wit..