원문: https://fintlabs.medium.com/optimized-multi-stage-docker-builds-with-turborepo-and-pnpm-for-nodejs-microservices-in-a-monorepo-c686fdcf051f 아래 번역글은 원문 글쓴이의 허가를 받고 진행한 번역본입니다. 원문 번역 이후에 실제로 프로젝트에 반영하면서 수정, 추가 한 내용들 남기겠습니다. microservices와 monorepo의 세계에서 Docker 빌드를 최적화 하는 것은 효율성과 성능에 중요합니다. 소개 (Introduction)Multi-stage Docker builds는 가벼우면서 효율적인 컨테이너를 생성하는 기술입니다. 그러나 Turborepo와 PNPM를 함께 사용할 때 mi..

도커 (Docker) 도커는 컨테이너 기반의 오픈소스 가상화 플랫폼입니다. 도커는 2013년 3월 산타클라라에서 열린 Pycon Conference에서 Solomon Hykes가 발표한 The future of Linux Containers라는 세션에서 처음 세상에 알려지게 되었고, 고(go)언어로 개발되고 있습니다. 컨테이너 기반이라고 했는데 무엇일까요? 컨테이너 (Container) 오늘날 컨테이너라고 하면 주로 선박 운송용 컨테이너를 지칭합니다. 선박 운송시 모든 선적물은 거대한 상자모양의 컨테이너를 통해 패키징 된 후 화물선에 선적됩니다. 컨테이너는 국제적으로 표준화, 규격화 된 크기를 가지고 있습니다. 그래서 컨테이너와 관련된 보관, 운송과 관련된 장비, 제도, 프로세스 등은 모두 국제 표준에 ..

Zod는 TypeScript를 주로 사용하는 스키마 선언 및 유효성 검사 라이브러리 중 하나입니다. 비슷한 걸로는 Yup, Joi 등의 라이브러리가 있습니다. Zod에서 "Schema(스키마)" 라고 하는 용어는 단순한 문자열부터 복잡하게 중청된 객체까지 모든 데이터 유형을 포괄적으로 나타내기 위해 사용됩니다. 라이브러리 설치 $ yarn add zod Zod 패키지에서 z 를 불러와 사용 할 수 있으며, z 하나로 Zod의 모든 기능을 활용할 수 있습니다. import { z } from "zod" 스키마 정의 Zod를 사용하기 위해서는 먼저 스키마를 정의해야 합니다. 예를 들어 이름, 나이, 나이공개여부로 이루어진 사용자 객체를 나타내는 스키마를 만들어보겠습니다. const User = z.objec..

프론트엔드에서 아키텍처를 어떻게 바라보고 또한 어떻게 발전해 왔는가를 알아보겠습니다. 여러글들을 참고하여 작성하였고 계속해서 발전시켜 나가겠습니다. 일단 프론트엔드에서 바라보는 아키텍처를 논하기 전에 우선적으로 아키텍처 자체에 대해 한번 살펴보겠습니다. 영어 단어로 아키텍처는 "건축학" 이라는 뜻입니다. Wiki에서는 시스템 아키텍처를 "시스템 목적을 달성하기 위해 시스템의 상호작용들의 시스템디자인에 대한 제약 및 설계이다." 라고 정의하고 있습니다. 프론트엔드 아키텍처 프론트엔드에서도 아키텍처를 신경써야 하는 이유는 프론트엔드 프로젝트는 충분히 복잡하기 때문입니다. 복잡하다는 것은 개발자가 프론트엔드 프로그램을 봤을 때 인지적인 한계에 부딪히게 된다는 사실을 의미하고, 이 사실은 개발을 진행할때 뿐만 ..

ref React 에서 ref prop은 HTML Element에 직접 접근하기 위해 사용됩니다. 예를 들어, 아래 컴포넌트에서는 useRef 훅으로 생성한 inputRef 를 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체에 접근해서 current속성에 엘리먼트에 레퍼런스가 할당되고 이를 통해 handleFocus 이벤트 핸들러에서 엘리먼트의 focus 함수를 호출할 수 있습니다. const Form = () => { const inputRef = useRef(null) const handleFocus = () => { inputRef.current.focus() } return ( 인풋 포커스 ) } 자식 컴포넌트에 접근하기 그렇다면 부모컴포넌트에서 자식컴포넌트 내..

피그마(Figma)는? 클라우드 기반으로 웹 브라우저로 동작하는 UI 디자인 툴 피그마는 웹 브라우저 기반이기때문에 작업 환경에 대한 걱정 없이 사용할수 있습니다. 다시 말하자면 설치할 필요가 없고 운영체제와 상관 없이 사용할 수 있다는 장점이 있습니다. 또한 피그마는 디자인이 클라우드에 있고 고유한 URL 이 존재하기 때문에 개발자가 항상 최신 버전의 디자인을 빠르게 확인 할 수 있고(사실 개발자 뿐만 아니라 사용하는 사용자 모두) 내장된 여러가지 기능을 통해 디자이너와 개발자 사이에 커뮤니케이션을 원할하게 해줍니다. The design lives in the cloud and has a unique URL, so it serves as the source of truth for the entire t..