Category: blog

  • 1인 개발자의 가성비 기술 스택 – Shadcn UI

    나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다.

    이 조합은 현재 날짜 기준 가장 큰 생태계를 이루고 있기에, 웬만한 컴포넌트들은 찾아서 가져다 사용할 수 있을 정도이다.

    Shadcn UI는 기존 Bootstrap, Google MUI 등과 다른 접근 방식으로 높은 자유도를 제공한다.

    기존 UI 라이브러리들은 NPM 모듈을 설치해, 해당 모듈에서 제공하는 컴포넌트 (e.g., Button 컴포넌트) 등을 사용하는 방식이다.

    UI 라이브러리가 제공(노출)하는 옵션을 통해 약간의 디자인 변경이 가능하지만, 이는 제한적이다.

    반면, Shadcn은 기존 UI 라이브러리처럼 NPM 모듈로 컴포넌트를 제공하지 않는다.

    초기 설정을 마친 후, 사용할 컴포넌트 코드를 공식 문서에서 복사하고 본인 프로젝트에 붙여넣으면 끝이다.

    코드를 복사·붙여넣기하는 방식으로 UI 개발이 진행되기에, 우리가 원하는 대로 커스터마이징이 가능하다.

    덕분에 현재 UI 라이브러리 중 엄청난 속도로 성장하고 있으며, 공식 문서와 여러 커뮤니티에서 프로젝트에 바로 가져다 사용할 수 있을 정도의 컴포넌트들을 제공한다.

    유용한 링크 모음

    Series

    1인 개발자의 가성비 기술 스택 – Shadcn UI

    나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다. 이 조합은 현재 날짜 기준 …
    / blog, Frontend, Tech stack, Web

    1인 개발자의 가성비 기술 스택 – Nestia

    백엔드 개발이 필요하다면 주로 TypeScript를 활용해 Node.js 기반의 백엔드를 개발한다. Java 진영에 백엔드를 위한 Spring 프레임워크가 있듯이, Node 진영에도 이와 …
    / Backend, blog, Tech stack

    1인 개발자의 가성비 기술 스택 – JavaScript 생태계

    제목은 JavaScript(JS) 생태계라고 작성했지만, 사실 모든 프로젝트에서 TypeScript(TS)를 사용한다. 내가 프로젝트를 진행하며 고려하는 기술 스택 순위는 다음과 같다. 고객이 원하는 …
    / blog, JavaScript, Tech stack, TypeScript

    1인 개발자의 가성비 기술 스택 – Coolify

    1인 개발자의 가성비 기술 스택 시리즈의 첫 글이다. 사실 Coolify(쿨리파이)를 소개하기 위해 이 시리즈를 작성한 게 아닐까 싶을 정도로 내가 …
    / blog, Infra, Tech stack

    1인 개발자의 가성비 기술 스택 – 시리즈 시작

    퇴사 후 디지털 노마드 생활을 하며 프리랜서 개발자로서 살아남기 위해, 가성비 있는 개발을 주로 하게 되었다. 예를 들어, 웹 서비스 …
    / blog, Tech stack
  • 1인 개발자의 가성비 기술 스택 – Nestia

    백엔드 개발이 필요하다면 주로 TypeScript를 활용해 Node.js 기반의 백엔드를 개발한다.

    Java 진영에 백엔드를 위한 Spring 프레임워크가 있듯이, Node 진영에도 이와 비슷한 NestJS라는 프레임워크가 있다.

    이번에 소개할 라이브러리는 NestJS 위에서 동작하는 Nestia라는 라이브러리다.

    Nestia는 간단히 말하자면, NestJS 개발 시 유용한 도구 모음이다.

    주로 다음과 같은 기능을 제공한다.

    • API와 DTO들을 SDK로 만들어 NPM에 배포
      • JS 생태계의 프론트에서 NPM 모듈을 다운받아, 라이브러리를 사용하듯이 프론트 <-> 백엔드 통신을 할 수 있다.
    • API 문서 자동 생성
      • 기존 NestJS 코드는 Swagger 문서를 작성하기 위해, 코드에 기능과 상관없는 데코레이터 작성을 필요로 한다.
      • Nestia를 사용하면 코드에 작성한 주석 그 자체가 Swagger 문서로 변환된다.
    • 순수 TypeScript 인터페이스(타입) 사용 가능
      • 기존 NestJS 개발시, TS -> JS로 컴파일되는 한계 때문에, class-validator와 런타임 타입 검증 라이브러리를 사용해야 한다.
      • class-validator를 사용할 경우 아래와 같은 불필요한 코드를 작성해야 한다.
        • 이미 타입이 정의되어 있음에도 불구하고 @IsString 데코레이터를 작성해야 한다.
    // class-validator version.
    import { IsString } from 'class-validator';
    
    class CreateUserDto {
      @IsString()
      name: string;
    }
    
    
    // nestia version.
    interface CreateUserDto {
      name: string;
    }

    이 밖에 여러 기능이 있으니 궁금하다면 공식 문서에서 찾아보면 된다.

    Series

    1인 개발자의 가성비 기술 스택 – Shadcn UI

    나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다. 이 조합은 현재 날짜 기준 …
    / blog, Frontend, Tech stack, Web

    1인 개발자의 가성비 기술 스택 – Nestia

    백엔드 개발이 필요하다면 주로 TypeScript를 활용해 Node.js 기반의 백엔드를 개발한다. Java 진영에 백엔드를 위한 Spring 프레임워크가 있듯이, Node 진영에도 이와 …
    / Backend, blog, Tech stack

    1인 개발자의 가성비 기술 스택 – JavaScript 생태계

    제목은 JavaScript(JS) 생태계라고 작성했지만, 사실 모든 프로젝트에서 TypeScript(TS)를 사용한다. 내가 프로젝트를 진행하며 고려하는 기술 스택 순위는 다음과 같다. 고객이 원하는 …
    / blog, JavaScript, Tech stack, TypeScript

    1인 개발자의 가성비 기술 스택 – Coolify

    1인 개발자의 가성비 기술 스택 시리즈의 첫 글이다. 사실 Coolify(쿨리파이)를 소개하기 위해 이 시리즈를 작성한 게 아닐까 싶을 정도로 내가 …
    / blog, Infra, Tech stack

    1인 개발자의 가성비 기술 스택 – 시리즈 시작

    퇴사 후 디지털 노마드 생활을 하며 프리랜서 개발자로서 살아남기 위해, 가성비 있는 개발을 주로 하게 되었다. 예를 들어, 웹 서비스 …
    / blog, Tech stack
  • 1인 개발자의 가성비 기술 스택 – JavaScript 생태계

    제목은 JavaScript(JS) 생태계라고 작성했지만, 사실 모든 프로젝트에서 TypeScript(TS)를 사용한다.

    내가 프로젝트를 진행하며 고려하는 기술 스택 순위는 다음과 같다.

    1. 고객이 원하는 기술
    2. 가성비 있게 개발을 진행할 수 있는 기술
    3. 공부해 보고 싶은 기술

    1번은 고객 요구사항이니 패스하고, 대부분 2번을 선택한다.

    이때 주로 TS를 사용하게 되는데, 그 이유는 다음과 같다.

    • 없는 게 없는 NPM 생태계
    • 크로스 플랫폼 간 공통 코드 재사용

    내가 TS를 사용하는 가장 큰 이유는 NPM 생태계 때문이다.

    NPM에는 내가 필요한 기능이 어지간해서 다 존재한다. 대부분의 개발은 NPM에서 설치한 라이브러리들을 조합해 진행하게 된다.

    또 하나의 이유는 1인 개발의 특성상 모든 플랫폼에서의 개발을 진행하는 일이 잦은데, 이를 가성비 있게 진행할 수 있기 때문이다.

    내가 주로 사용하는 플랫폼별 기술 스택은 다음과 같다.

    웹 프론트엔드

    • React, Next.js

    백엔드

    • Node.js, NestJS

    모바일

    • React Native

    데스크톱

    • Tauri

    이처럼 모든 플랫폼을 TS로 작성할 수 있다. 이렇게 진행하면 좋은 점이 몇 가지 있다.

    백엔드 입장

    • API 요청에 필요한 DTO 등을 NPM 모듈로 만들어 배포하거나, API 요청 기능 자체를 라이브러리로 만들어 배포하면 된다.

    프론트엔드 입장

    • API 명세서를 보며 한땀 한땀 API 요청 코드를 작성하지 않아도 된다. NPM에 배포한 라이브러리를 가져다 쓰면 된다.

    다음 글은 백엔드와 프론트엔드(웹, 모바일, 데스크탑)간의 API 작성을 편하게 도와주는 Nestia에 대해서 작성 예정이다.

    Series

    1인 개발자의 가성비 기술 스택 – Shadcn UI

    나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다. 이 조합은 현재 날짜 기준 …
    / blog, Frontend, Tech stack, Web

    1인 개발자의 가성비 기술 스택 – Nestia

    백엔드 개발이 필요하다면 주로 TypeScript를 활용해 Node.js 기반의 백엔드를 개발한다. Java 진영에 백엔드를 위한 Spring 프레임워크가 있듯이, Node 진영에도 이와 …
    / Backend, blog, Tech stack

    1인 개발자의 가성비 기술 스택 – JavaScript 생태계

    제목은 JavaScript(JS) 생태계라고 작성했지만, 사실 모든 프로젝트에서 TypeScript(TS)를 사용한다. 내가 프로젝트를 진행하며 고려하는 기술 스택 순위는 다음과 같다. 고객이 원하는 …
    / blog, JavaScript, Tech stack, TypeScript

    1인 개발자의 가성비 기술 스택 – Coolify

    1인 개발자의 가성비 기술 스택 시리즈의 첫 글이다. 사실 Coolify(쿨리파이)를 소개하기 위해 이 시리즈를 작성한 게 아닐까 싶을 정도로 내가 …
    / blog, Infra, Tech stack

    1인 개발자의 가성비 기술 스택 – 시리즈 시작

    퇴사 후 디지털 노마드 생활을 하며 프리랜서 개발자로서 살아남기 위해, 가성비 있는 개발을 주로 하게 되었다. 예를 들어, 웹 서비스 …
    / blog, Tech stack
  • 1인 개발자의 가성비 기술 스택 – Coolify

    1인 개발자의 가성비 기술 스택 시리즈의 첫 글이다.

    사실 Coolify(쿨리파이)를 소개하기 위해 이 시리즈를 작성한 게 아닐까 싶을 정도로 내가 자주 사용하는 도구다.

    Coolify는 애플리케이션 또는 DB 등을 셀프 호스팅할 때 관리를 편하게 도와주는 도구다.

    내 컴퓨터를 Vercel이나 Heroku처럼 웹 UI를 활용해 인프라 관리 또는 서비스 배포를 할 수 있다.

    예를 들어, PostgreSQL 데이터베이스가 필요하다면 웹 UI에서 마우스 클릭 몇 번으로 DB 컨테이너를 띄울 수도 있고,

    Vercel처럼 내 애플리케이션의 main 브랜치에 코드를 push하면 배포가 되는 CI/CD 파이프라인도 구성할 수 있다.

    Coolify의 서비스들은 컨테이너 형태로 관리되며, 서비스가 사용할 CPU, 메모리 등을 설정할 수 있고, 물론 오토스케일링도 지원한다.

    VPS(그냥 컴퓨터 한 대라고 이해하면 된다)를 하나 대여하고 거기에 Coolify를 설치해도 좋고, 집에 남는 컴퓨터가 있다면 직접 리눅스를 설치하고 그 위에 Coolify를 설치해 홈 서버를 운영해도 좋다.

    불안하다고 느낄 수도 있지만, 집 컴퓨터도 생각보다 문제없이 잘 돌아간다. 이 글을 작성하는 와중에도 6코어 16GB 메모리의 내 홈 서버는 문제없이 10개가 넘는 서비스를 잘 운영하고 있다.

    Series

    1인 개발자의 가성비 기술 스택 – Shadcn UI

    나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다. 이 조합은 현재 날짜 기준 …
    / blog, Frontend, Tech stack, Web

    1인 개발자의 가성비 기술 스택 – Nestia

    백엔드 개발이 필요하다면 주로 TypeScript를 활용해 Node.js 기반의 백엔드를 개발한다. Java 진영에 백엔드를 위한 Spring 프레임워크가 있듯이, Node 진영에도 이와 …
    / Backend, blog, Tech stack

    1인 개발자의 가성비 기술 스택 – JavaScript 생태계

    제목은 JavaScript(JS) 생태계라고 작성했지만, 사실 모든 프로젝트에서 TypeScript(TS)를 사용한다. 내가 프로젝트를 진행하며 고려하는 기술 스택 순위는 다음과 같다. 고객이 원하는 …
    / blog, JavaScript, Tech stack, TypeScript

    1인 개발자의 가성비 기술 스택 – Coolify

    1인 개발자의 가성비 기술 스택 시리즈의 첫 글이다. 사실 Coolify(쿨리파이)를 소개하기 위해 이 시리즈를 작성한 게 아닐까 싶을 정도로 내가 …
    / blog, Infra, Tech stack

    1인 개발자의 가성비 기술 스택 – 시리즈 시작

    퇴사 후 디지털 노마드 생활을 하며 프리랜서 개발자로서 살아남기 위해, 가성비 있는 개발을 주로 하게 되었다. 예를 들어, 웹 서비스 …
    / blog, Tech stack
  • 1인 개발자의 가성비 기술 스택 – 시리즈 시작

    퇴사 후 디지털 노마드 생활을 하며 프리랜서 개발자로서 살아남기 위해, 가성비 있는 개발을 주로 하게 되었다.

    예를 들어, 웹 서비스 개발 시 프론트와 백엔드 모두 같은 언어를 사용하고, API 호출이 필요한 기능은 SDK로 만들어 사용한다거나,

    외주 고객 서비스들의 인프라를 찍어내기 위해 Terraform 등의 IaC 도구를 도입한다거나,

    자잘한 기능은 SaaS를 활용해 시간을 단축하는 등의 여러 가지 방식으로 개발을 진행해왔다.

    앞으로 작성할 이 시리즈는 규모가 큰 회사보다 1인 (또는 소규모) 팀에게 더 적합한 기술 (라이브러리, 프레임워크, 잡다한 도구 등등) 소개글이 될 것이다.

    Series

    1인 개발자의 가성비 기술 스택 – Shadcn UI

    나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다. 이 조합은 현재 날짜 기준 …
    / blog, Frontend, Tech stack, Web

    1인 개발자의 가성비 기술 스택 – Nestia

    백엔드 개발이 필요하다면 주로 TypeScript를 활용해 Node.js 기반의 백엔드를 개발한다. Java 진영에 백엔드를 위한 Spring 프레임워크가 있듯이, Node 진영에도 이와 …
    / Backend, blog, Tech stack

    1인 개발자의 가성비 기술 스택 – JavaScript 생태계

    제목은 JavaScript(JS) 생태계라고 작성했지만, 사실 모든 프로젝트에서 TypeScript(TS)를 사용한다. 내가 프로젝트를 진행하며 고려하는 기술 스택 순위는 다음과 같다. 고객이 원하는 …
    / blog, JavaScript, Tech stack, TypeScript

    1인 개발자의 가성비 기술 스택 – Coolify

    1인 개발자의 가성비 기술 스택 시리즈의 첫 글이다. 사실 Coolify(쿨리파이)를 소개하기 위해 이 시리즈를 작성한 게 아닐까 싶을 정도로 내가 …
    / blog, Infra, Tech stack

    1인 개발자의 가성비 기술 스택 – 시리즈 시작

    퇴사 후 디지털 노마드 생활을 하며 프리랜서 개발자로서 살아남기 위해, 가성비 있는 개발을 주로 하게 되었다. 예를 들어, 웹 서비스 …
    / blog, Tech stack