DEV Community: soom

Introducing the BFF (Backend for Frontend) Concept by simple application with SvelteKit, Supabase, and GraphQL Code Generator

soom — Tue, 21 Feb 2023 16:32:37 +0000

Abstract

Introducing the concept of BFF (Backend for Frontend) through a Simple Application with SvelteKit and Supabase.

BFF (Backend for Frontend). Functional Server Block을 조합하여 Frontend 친화적인 Server Layer 를 구현, 이를 통해 개발의 효율성을 늘린다 라는 개념. 그러나 사실상 MicroService Architecture 가 기반이 되는 큰 단위의 서비스에 한해서나 의미가 있는 개념이다.

그렇다고해도 이러한 구조적인 개념을 소규모 프로젝트에 적용시키는 것이 불가능한 일은 아니다.
이번 포스팅에서는 Full Stack Application인 SvelteKit 과 BaaS인 Supabase 를 통해 유사한 개념을 미리 소규모로 테스트해보는 내용을 소개하고자한다.

이때, DB와 Functional Server Block의 역할을 오픈 소스 BaaS (Backend as a Service) 인 Supabase 로, Frontend 와 BFF 역할은 Svelte-kit으로 구현하였다.

또한, 기존의 REST 방식과는 다른 GraphQL Codegen 을 이용한 서버와 클라이언트간의 소통 방법을 소개하고자 한다.

이 포스팅을 읽기 전에 하기 포스팅을 읽고 오는 것을 권장한다.

https://dev.to/soom/how-to-use-graphql-and-react-query-with-graphql-code-generator-based-on-nextjs-23jj

Getting Started

Setting up Supabase

Supabase 가입 후 Project 생성 뒤 Dashboard 진입

본 포스팅에서는 DB 스키마 및 테이블을 따로 작성하지 않고 Quick Start 예제를 들고와서 작업

SQL Editor > Countries > Run 을 통해 DB 생성 후 Table Editor 선택해서 데이터 확인

개별 데이터 조회 위해 function 생성 (Supabase feature)

SQL Editor > New Query 에서 다음 명령어 실행 후 확인

SQL Editor > New Query

/* Create Function */
create or replace function get_country()
returns setof countries
language sql
as $$
  select * from countries;
$$;

/* Check Result */
select *
from get_country()
where id = 1;

Setting up SvelteKit

원하는 프로젝트 폴더를 생성한 뒤 SvelteKit 프로젝트를 생성

pnpm create svelte@latest

✔ Where should we create your project?
  (leave blank to use current directory) … simple-bff
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Playwright for browser testing? › No / Yes

Setting up Supabase Client on SvelteKit

Supabase 클라이언트를 설치

Terminal

pnpm add -S @supabase/supabase-js

src/lib/db/index.ts 에 다음과 같이 Supabase 클라이언트 정의

src/lib/db/index.ts

import { createClient } from '@supabase/supabase-js';
import { ANON_KEY, PROJECT } from '$env/static/private'; // load from env

const supabase = createClient(`https://${PROJECT}.supabase.co`, ANON_KEY);

export default supabase;

Note

클라이언트 정보는 Supabase Dashboard 에서 Settings > API > URL, Project API Keys 확인

src/lib/country/db/index.ts, src/lib/countries/db/index.ts 에 해당하는 DB 요청 정의

요청한 DB 데이터가 잘 불러오지는지 확인

src/lib/country/db/index.ts

import supabase from '$lib/db';

// request id = 18 country data
const country = await supabase.rpc('get_country').eq('id', 18);

export default country;

src/lib/countries/db/index.ts

import supabase from '$lib/db';

// request all the countries
const countries = await supabase.from('countries').select();

export default countries;

Setting up Graphql Yoga Server on SvelteKit Server

SvelteKit Server 구성. 여기서는 Graphql Yoga 를 이용해서 Graphql Server 를 구현

src/routes/graphql/+server.ts에 서버 파일 작성

server api url 은 /graphql 로 접속 가능하다

Note

이 프로젝트는 Domain Base Structure 이기 때문에 각각 해당하는 graphql query, schema 가 산재되어 있음

graphql file loader 는 프로젝트 내 퍼져있는 graphql 파일을 한꺼 번에 모아줌

여기서 country.data[0], countries.data 는 Supabase 의 요청 리턴값

기타 나머지 부분에 대한 내용은 링크 참조:
https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-sveltekit

Terminal

pnpm add -S graphql graphql-yoga

pnpm add -D @graphql-tools/graphql-file-loader @graphql-tools/load

src/routes/graphql/+server.ts

import { createYoga, createSchema } from 'graphql-yoga';
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { loadSchema, loadDocuments } from '@graphql-tools/load';
import country from '$lib/country/db';
import countries from '$lib/countries/db';

import type { RequestEvent } from '@sveltejs/kit';

const typeDefs = await loadSchema('./src/lib/**/graphql/schema.graphql', {
    loaders: [new GraphQLFileLoader()]
});

const defaultQuery = await loadDocuments('./src/lib/countries/graphql/query.graphql', {
    loaders: [new GraphQLFileLoader()]
}).then((res) => res[0].rawSDL);

const yogaApp = createYoga<RequestEvent>({
    schema: createSchema({
        typeDefs,
        resolvers: {
            Query: {
                countries: () => countries.data,
                country: () => country.data[0]
            }
        }
    }),
    graphiql: {
        defaultQuery
    },
    fetchAPI: globalThis
});

export { yogaApp as GET, yogaApp as POST };

각각 해당하는 graphql schema와 query 파일 생성 (country, countries)

src/lib/country/graphql/schema.graphql

type Country {
    id: Int!
    name: String!
    iso2: String!
    iso3: String!
    local_name: String
    continent: String
}

type Query {
    country: Country
}

src/lib/country/graphql/query.graphql

query Country {
    country {
        id
        name
        iso2
        iso3
        local_name
        continent
    }
}

src/lib/countries/graphql/schema.graphql

type Query {
    countries: [Country]!
}

src/lib/countries/graphql/query.graphql

query Countries {
    countries {
        id
        name
        iso2
        iso3
        local_name
        continent
    }
}

이제 실행시켜서 /graphql에 접속하여 playground 가 정상적으로 나타나는지 확인

Auto Generating Svelte Query with Graphql Codegen

codegen 관련 패키지 설치

Terminal

pnpm add -S graphql-request

pnpm add -D @graphql-codegen/cli @graphql-codegen/near-operation-file-preset @graphql-codegen/typescript @graphql-codegen/typescript-graphql-request @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-query

pnpm add -D @sveltestack/svelte-query

Note

@graphql-codegen/typescript-react-query 설치 근거

graphql codegen 에서는 svelte query 는 지원 하지 않음

다만, tanstack에서 제공하는 react query, svelte query 는 naming convention 만 다를뿐 구조가 동일하기에 이 부분에 대한 수정만 해주면 사용 가능함

root 폴더에 codegen.yml 작성

package.json 에 codegen script 도 작성

Note

Graphql codegen 관련한 내용에 자세한 내용은 해당글 참조:
https://dev.to/soom/how-to-use-graphql-and-react-query-with-graphql-code-generator-based-on-nextjs-23jj

near-operation-file-preset 은 산재되어 있는 gql 파일을 확인 후 해당하는 폴더에 파일을 자동 생성

기타 옵션에 대한 부분은 https://the-guild.dev/graphql/codegen/plugins 참조

아래 작성한 내용대로 진행되면 각각 graphql 폴더안에 query.generated.ts 생성되며 해당하는 type은 src/lib/types/index.ts 파일이 생성

codegen.yml

schema: http://localhost:5173/graphql
documents: './src/lib/**/graphql/!(*.generated).{gql,graphql}'
require:
  - ts-node/register
generates:
  src/lib/types/index.ts:
    plugins:
      - typescript

  src/:
    preset: near-operation-file
    presetConfig:
      extension: .generated.ts
      baseTypesPath: 'lib/types'

    plugins:
      - typescript-operations
      - typescript-react-query
    config:
      pureMagicComment: true
      exposeQueryKeys: true
      exposeFetcher: true
      withHooks: true
      fetcher: graphql-request

config:
  interfacePrefix: 'I'
  typesPrefix: 'I'
  skipTypename: true
  declarationKind: 'interface'
  noNamespaces: true

hooks:
  afterOneFileWrite: 'prettier --plugin-search-dir . --write .'

package.json

{
  ...
"scripts": {
        ...
        "codegen": "graphql-codegen --config codegen.yml"
    },
  ...
}

svelte query 기본 환경 설정

src/lib/plugin/svelteQuery.ts

import { QueryClient } from '@sveltestack/svelte-query';

// Configure for static fetching from Server
export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false
        }
    }
});

src/routes/+layout.svelte

<script lang="ts">
    import '../app.css';
    import { queryClient } from '$lib/plugin/svelteQuery';
    import { QueryClientProvider } from '@sveltestack/svelte-query';
</script>

<QueryClientProvider client={queryClient}>
    <main class="flex justify-center items-center w-full h-[100vh]">
        <slot />
    </main>
</QueryClientProvider>

codegen 실행 후 결과 확인

Terminal

# first, run svelte-kit app with server
pnpm dev

# auto generating!
pnpm codegen

> graphql-codegen --config codegen.yml

✔ Parse Configuration
✔ Generate outputs

src/lib/country/graphql, src/lib/countries/graphql 폴더에 query.generated.ts 생성

src/lib/types/index.ts 파일 생성

여기서 타입은 정상적으로 생성되나 문제는 query.generated.ts

위에서 언급한대로 react-query 기반으로 생성했기에 svelte-query 에 맞게 수정이 필요하다.

아래 예시처럼 react-query import package를 svelte query에 맞게 정리

src/lib/country/graphql/query.generated.ts

// auto-generated react-query
// import * as Types from '../../types';

// import { GraphQLClient } from 'graphql-request';
// import { RequestInit } from 'graphql-request/dist/types.dom';
// import { useQuery, UseQueryOptions } from '@tanstack/react-query';

// Convert for svelte-query
import type * as Types from '$lib/types';

import { GraphQLClient } from 'graphql-request';
import { useQuery } from '@sveltestack/svelte-query';

import type { RequestInit } from 'graphql-request/dist/types.dom';
import type { UseQueryOptions } from '@sveltestack/svelte-query';

Setting up Frontend

이제 view 레벨 작성

SPA 는 마운트되면서 빈 index.html 에 js 패키지를 로딩하는 식으로 렌더링을 하기 때문에 SEO 에 굉장히 불리하나 SSR 은 Hydration technique을 통해 필요한 데이터를 미리 로딩하여 SEO 에 장점을 가져갈수 있다

Note

Hydration 에 대한 자세한 내용 및 Resumability에 추가적인 내용은 하기 링크 참조
https://www.builder.io/blog/hydration-is-pure-overhead#resumability-a-no-overhead-alternative-to-hydration

Technique 에 대한 자세한 설명은 하기 링크 참조
https://dev.to/soom/how-to-use-graphql-and-react-query-with-graphql-code-generator-based-on-nextjs-23jj

src/routes/country/+page.ts

import { error } from '@sveltejs/kit';
import { dehydrate } from '@sveltestack/svelte-query';
import { queryClient } from '$lib/plugin/svelteQuery';
import { useCountryQuery } from '$lib/country/graphql/query.generated';
import { GraphQLClient } from 'graphql-request';

import type { PageLoad } from './$types';

export const load = (async ({ route }) => {
    const gqlClient = new GraphQLClient('http://localhost:5173/graphql');

    await queryClient.prefetchQuery(useCountryQuery.getKey(), useCountryQuery.fetcher(gqlClient));

    if (route.id === '/country') {
        return {
            title: 'country',
            dehydratedState: dehydrate(queryClient)
        };
    }

    throw error(404, 'Not found');
}) satisfies PageLoad;

src/routes/country/+page.svelte

<script lang="ts">
    import { GraphQLClient } from 'graphql-request';
    import { useCountryQuery } from '$lib/country/graphql/query.generated';
    import type { PageData } from './$types';

    export let data: PageData;

    const gqlClient = new GraphQLClient('http://localhost:5173/graphql');

    const countriesQueryResult = useCountryQuery(gqlClient);
    const { country } = $countriesQueryResult.data!;
</script>

<svelte:head>
    <title>{data.title}</title>
</svelte:head>

<div class="text-center">
    <h1 class="text-3xl font-bold">Hello Country!</h1>
    <a href="/"> > Back Home</a>
    <div class="my-2">
        {country?.iso2}
        {country?.name}
    </div>
</div>

Result

👉 CodeSandBox Sample Link

Conclusion

본 포스팅에서는 BFF 간단한 개념 모델을 Supabase, SvelteKit으로 구현해보았다.

큰 규모의 서비스에서는 Client, Server(BFF), Server, DB 등을 다 따로 나눠서 구성하겠지만 소규모의 간단한 예제를 통해서도 개념 자체를 이해하는데는 큰 무리가 없다.

또한, GraphQL Code Generator를 이용해 Server 와 Client 간의 의사소통을 자동 생성으로 접근하는 방법을 소개하였다.

기존의 Swagger 와 같은 방식으로는 여전히 Client 와 Server 의 의사소통에는 한계가 있었다. 그러나 GQL Codegen을 통해 자동 생성되는 Schema를 이용하는 방식은 Server 쪽에 따로 문의할 필요없이 Human Error 를 최소화할 수 있기에 적극 권장하는 방법이다.

p.s
대부분의 GraphQL 의 서버나 클라이언트는 Apollo Server, Apollo Client 등을 이용하지만 여기서는 GraphQL Yoga, Svelte Query 를 이용하는 방법을 소개하였다.
GraphQL Yoga 가 v3 로 넘어오면서 Apollo Server의 불편함을 크게 해결한 솔루션을 제공하고 있는데다 이를 지원하는 프로젝트인 GraphQL Guild가 워낙 GraphQL에 진심이기 때문에 앞으로도 큰 발전이 기대 가능하다.

The Guild URL: https://the-guild.dev/

Continuously Deploying Your Docker Application to AWS EC2 & ECR Using CircleCI

soom — Thu, 26 Jan 2023 06:35:43 +0000

Abstract

최근 배포 프로세스는 프로젝트를 Docker 이미지로 말아서 AWS ECS/ECR 조합으로 가는 것이 일반적이다.

그러나 라이트유저에겐 상대적으로 사악할 수 있는 가격 정책을 보여주는 AWS ECS이기에 이번 포스팅에서는 그냥 기본 서버 환경을 제공하는 AWS EC2에 AWS ECR 이미지를 올리는 방법을 소개하고자 한다.

추가로 대세 CI 툴인 CircleCI를 통해 파이프 라인을 구성해보았다.

참고할만한 링크: https://circleci.com/developer

Getting Started

Prerequisite

AWS EC2 인스턴스 생성
- 참고할만한 링크: https://dev.to/soom/mysql-docker-aws-ec2-simple-tutorial-with-amazon-linux-406
Docker docker compose 설치
- 참고할만한 링크: https://docs.docker.com/compose/install/linux/
작업할 Project Repository

Preparing AWS ECR

AWS ECR (Elastic Container Registry) 서비스에 들어가 Repository를 생성

다른 설정은 기본으로 name 만 잘 설정해주면 앞으로 이미지를 저장할 레포지토리가 생성된다.

여기서 중요한 것은 Repository name 과 URI. 기억해두자.

Setting up CircleCI Application

먼저 프로젝트에서 /.circleci/config.yml empty 파일을 생성한 후 깃레포지토리에 푸시

Project tree

.
├── ./circleci/
│   └── config.yml
└── ...project

CircleCI에 로그인한뒤 프로젝트 탭에서 Set Up Project 를 선택

작업할 branch 이름를 입력해주면 다음처럼 메세지가 나오고 진행하면 프로젝트 대쉬보드로 진입

Project Setting에 환경 변수 입력

실제 프로젝트에서 config.yml 설정할때 사용하게 될 변수들

추가로 SSH Keys 메뉴에서 EC2 접속을 위해 Additional SSH Keys를 등록해준다
안할 경우 CircleCi 에서 EC2 접근 불가할 수 있음

해당하는 키 생성 방법 링크 참조: https://circleci.com/docs/add-ssh-key/

Required Env Value

AWS_ACCOUNT_ID

AWS_ACCESS_KEY_ID

AWS_SECRET_ACCESS_KEY

AWS_REGION

AWS_ECR_ACCOUNT_URL

AWS_ECR_REPO_NAME

Generating Dockerfile

먼저 로컬에서 Docker image 를 말아보자.

여기서는 자세한 Docker 사용법은 언급하지 않고 넘어가겠다.

참고할만한 링크: https://docs.docker.com/get-started/

Root 폴더에 Dockerfile을 생성, 다음과 같이 작성

Doockerfile

ARG node_version=18-bullseye-slim
ARG prod_port=3000

FROM node:${node_version}

WORKDIR /app

COPY . .

ENV TZ=Asis/Seoul

RUN corepack enable
RUN corepack prepare pnpm@latest --activate
RUN pnpm install
RUN pnpm build

EXPOSE ${prod_port}

CMD pnpm start:prod

node 18버전 환경에서 작업: 18-bullseye-slim

node 18에서 pnpm 패키지는 corepack으로 활성 가능하다

Configuring CircleCI in project

Root 폴더에 /.circleci 폴더를 생성

해당하는 폴더 내에 config.yml 파일을 작성해보자

맨 첫줄은 CircleCI version 부분이다.

두번째 orbs 란 CircleCI가 제공하는 편의성 패키지
여기서는 ecr 을 편리하게 지원해주는 aws-ecr 패키지를 사용

executor는 여기서 반복적으로 사용할 환경 실행에 대한 언급

machine:image:ubuntu-2004:current

보통 CircleCI 에서는 직접 Docker 환경을 불러오는 것이 보통이나
여기서는 이미지에 프로젝트를 복사해서 직접 명령어를 실행하는것이 아닌
Dockerfile로 이미지를 빌드 후 AWS ECR에 업로드할 예정이기에
다양한 명령어 접근을 위해 이미지가 아닌 machine 레벨로 구성하였다. (여기서는 ubuntu 환경을 구성)

working_directory: ~/project

/project 폴더에 작업할 예정 (checkout도 이 폴더에서 진행된다)

config.yml

version: 2.1

orbs:
  aws-ecr: circleci/aws-ecr@8.2.1

executors:
  machine-executor:
    machine:
      image: ubuntu-2004:current
      docker_layer_caching: true

    working_directory: ~/project
# ... more on next line

기본적으로 CircleCI 는 Job을 Jobs 에 정의하고
workflow 에 흐름을 등록하는 방식으로 진행된다.

여기서는 Pre-Build라는 첫번째 job 을 선언하였다.

미리 선언해 주었던 machine-executor를 이용해 환경 구성을 진행하고

checkout

checkout 을 통해 연결된 git repository 를 복사한다. (/project 폴더 안에 복사)

Getting Node Environment / the Code

여기에서는 machine의 Node Environment 확인, checkout 정상 진행여부 확인

persist_to_workspace

마지막으로 이 전체를 다음 job에 동일하게 진행할 예정이기에 workspace에 관련 부분을 선언

Note

CircleCI 어플리케이션 설정은 다음 챕터에 설명 (Github 연결 포함)

workspace 개념은 다음 링크 참조: https://circleci.com/docs/workspaces/

config.yml

# ... continue

jobs:
  Pre-Build:
    executor: machine-executor

    steps:
      - checkout

      - run:
          name: Getting Node Environment
          command: |
            node -v
            npm -v
            npm -g ls
            echo '^^^ node default env^^^'

      - run:
          name: Getting the Code
          command: |
            ls -al
            echo '^^^ Your repo files^^^'

      - persist_to_workspace:
          root: .
          paths:
            - .
# ... more on next line

두번째 job 선언 부분

attach_workspace

여기서는 방금 전 step에서 저장한 환경을 다시 load한다.

Attach Workspace Complete

그 다음에 환경이 다시 잘 구성되었는지 확인

aws-ecr/build-and-push-image

마지막으로 aws-ecr orb 설정 부분이다.
이 orb 는 따로 복잡한 설정 필요없이 간단한 설정만으로
도커로 이미지 빌드후 등록한 AWS ECR에 이미지를 푸시해주는 역할을 해준다.

$AWS_ECR_REPO_NAME 은 ECR Repo 이름이고 $CIRCLE_SHA1는 CircleCI에서 자동으로 생성하는 난수
image_name:tag name 형식으로 AWS ECR에 이미지 생성

Note

원래라면 aws-ecr orb 를 사용하려면 AWS Account 및 다양한 정보를 설정해야하지만 미리 환경변수로 선언해두면 이부분을 생략할 수 있다.

aws-ecr 상세한 내용은 다음 링크 참조: https://circleci.com/developer/orbs/orb/circleci/aws-ecr

config.yml

# ... continue

jobs:
  #  ... Pre-Build

  Build-and-Push:
    executor: machine-executor

    steps:
      - attach_workspace:
          at: ~/project

      - run:
          name: Attach Workspace Complete
          command: |
            ls- al
            echo '^^^ Attaching workspace success. ^^^'

      - aws-ecr/build-and-push-image:
          repo: $AWS_ECR_REPO_NAME
          tag: $CIRCLE_SHA1
          dockerfile: Dockerfile
# ... more on next line

마지막 job인 Deploy

Allow Access to Production EC2

먼저 첫번째 step 에서는 AWS EC2 에 ssh를 이용해 접속하기 위해 22번 포트를 개방

Waiting for AWS Security Settings to Take Effect

적용 하는데 다소 시간이 필요하기에 sleep을 실행

AWS EC2 Deploy

AWS EC2 에 접속 후 서버 환경에서 Docker login 후 ECR에 등록된 Docker Image 를 pull 해온다.

이 이미지를 미리 AWS EC2에 작성해둔 docker-compose.yaml 을 통해 서버에서 실행할 예정
docker-compose.yaml 파일은 infra 폴더안에 위치할 예정

이때 docker-compose.yaml 에서 사용할 환경변수를 미리 선언

Remove Circle CI Instance Ingress Rule

일전에 개방한 22번 포트를 다시 폐쇄

config.yml

# ... continue

jobs:
  #  ... Pre-Build, Build ..

  Deploy:
    executor: machine-executor

    steps:
      - run:
          name: Allow Access to Production EC2
          command: |
            CIRCLE_CI_BUILD_MACHINE_IP=$(curl ipinfo.io/ip)

            aws ec2 authorize-security-group-ingress --region $AWS_REGION \
                                                   --group-id $PROD_SERVER_SG_ID \
                                                   --protocol tcp \
                                                   --port 22 \
                                                   --cidr $CIRCLE_CI_BUILD_MACHINE_IP/24
      - run:
          name: Waiting for AWS Security Settings to Take Effect
          command: sleep 5

      - run:
          name: AWS EC2 Deploy
          command: |
            ssh -o StrictHostKeyChecking=no $AWS_DEPLOYER@$EC2_PUBLIC_DNS \
            "sudo docker login --username AWS -p $(aws ecr get-login-password --region $AWS_REGION) $AWS_ECR_ACCOUNT_URL && \
            sudo docker pull $AWS_ECR_ACCOUNT_URL/$AWS_ECR_REPO_NAME:$CIRCLE_SHA1 && \

            export CIRCLE_SHA1=$CIRCLE_SHA1 && \
            export AWS_ECR_ACCOUNT_URL=$AWS_ECR_ACCOUNT_URL && \
            export AWS_ECR_REPO_NAME=$AWS_ECR_REPO_NAME && \
            export PROD_PORT=3000 && \

            cd /home/ec2-user/infra && \

            docker compose up -d hello-world"

      - run:
          name: Remove Circle CI Instance Ingress Rule
          command: |
            CIRCLE_CI_BUILD_MACHINE_IP=$(curl ipinfo.io/ip)

            aws ec2 revoke-security-group-ingress --region $AWS_REGION \
                                                          --group-id $PROD_SERVER_SG_ID \
                                                          --protocol tcp \
                                                          --port 22 \
                                                          --cidr $CIRCLE_CI_BUILD_MACHINE_IP/24

# ... more on next line

config.yml 전문은 다음과 같다

기본 workflow 상태에서는 설정한 branch (여기서는 main) 소스를 푸시하면 바로 빌드가 시작

여기서는 따로 릴리즈 태그를 등록해야 배포 프로세스가 시작하도록 설정하였다.

config.yml

version: 2.1

orbs:
  aws-ecr: circleci/aws-ecr@8.2.1

executors:
  machine-executor:
    machine:
      image: ubuntu-2004:current
      docker_layer_caching: true

    working_directory: ~/project

jobs:
  Pre-Build:
    executor: machine-executor

    steps:
      - checkout

      - run:
          name: Getting Node Environment
          command: |
            node -v
            npm -v
            npm -g ls
            echo '^^^ node default env^^^'

      - run:
          name: Getting the Code
          command: |
            ls -al
            echo '^^^ Your repo files^^^'

      - persist_to_workspace:
          root: .
          paths:
            - .

  Build-and-Push:
    executor: machine-executor

    steps:
      - attach_workspace:
          at: ~/project

      - run:
          name: Attach Workspace Complete
          command: |
            ls- al
            echo '^^^ Attaching workspace success. ^^^'

      - aws-ecr/build-and-push-image:
          repo: $AWS_ECR_REPO_NAME
          tag: $CIRCLE_SHA1
          path: docker
          dockerfile: Dockerfile.prod

  Deploy:
    executor: machine-executor

    steps:
      - run:
          name: Allow Access to Production EC2
          command: |
            CIRCLE_CI_BUILD_MACHINE_IP=$(curl ipinfo.io/ip)

            aws ec2 authorize-security-group-ingress --region $AWS_REGION \
                                                   --group-id $PROD_SERVER_SG_ID \
                                                   --protocol tcp \
                                                   --port 22 \
                                                   --cidr $CIRCLE_CI_BUILD_MACHINE_IP/24
      - run:
          name: Waiting for AWS Security Settings to Take Effect
          command: sleep 5

      - run:
          name: AWS EC2 Deploy
          command: |
            ssh -o StrictHostKeyChecking=no $AWS_DEPLOYER@$EC2_PUBLIC_DNS \
            "sudo docker login --username AWS -p $(aws ecr get-login-password --region $AWS_REGION) $AWS_ECR_ACCOUNT_URL && \
            sudo docker pull $AWS_ECR_ACCOUNT_URL/$AWS_ECR_REPO_NAME:$CIRCLE_SHA1 && \

            export CIRCLE_SHA1=$CIRCLE_SHA1 && \
            export AWS_ECR_ACCOUNT_URL=$AWS_ECR_ACCOUNT_URL && \
            export AWS_ECR_REPO_NAME=$AWS_ECR_REPO_NAME && \
            export PROD_PORT=3000 && \

            cd /home/ec2-user/infra && \

            docker compose up -d allco-kids-backend"

      - run:
          name: Remove Circle CI Instance Ingress Rule
          command: |
            CIRCLE_CI_BUILD_MACHINE_IP=$(curl ipinfo.io/ip)

            aws ec2 revoke-security-group-ingress --region $AWS_REGION \
                                                          --group-id $PROD_SERVER_SG_ID \
                                                          --protocol tcp \
                                                          --port 22 \
                                                          --cidr $CIRCLE_CI_BUILD_MACHINE_IP/24

workflows:
  build_and_deploy_image:
    jobs:
      - Pre-Build:
          context: fetch-code
          filters:
            tags:
              only: /server-v\d{1}\.\d{1,2}\.\d{1,3}/ # 버전 정규식 server-v1.0.0의 형태
            branches:
              ignore: /.*/

      - Build-and-Push:
          requires:
            - Pre-Build
          filters:
            tags:
              only: /server-v\d{1}\.\d{1,2}\.\d{1,3}/ # 버전 정규식 server-v1.0.0의 형태
            branches:
              ignore: /.*/

      - Deploy:
          requires:
            - Pre-Build
            - Build-and-Push
          filters:
            tags:
              only: /server-v\d{1}\.\d{1,2}\.\d{1,3}/ # 버전 정규식 server-v1.0.0의 형태
            branches:
              ignore: /.*/

Setting up docker-compose on EC2

EC2 에 접속해서 root에 /infra 폴더를 생성

그 안에 docker-compose.yaml 을 생성한 뒤 다음과 같이 작성

docker-compose.yaml

version: '3.9'

services:
  hello-world:
    image: ${AWS_ECR_ACCOUNT_URL}/${AWS_ECR_REPO_NAME}:${CIRCLE_SHA1}
    restart: always
    ports:
      - ${PROD_PORT}:${PROD_PORT}
    volumes:
      - ../src:/app/src

이제 github 에 태그를 생성하면 자동으로 CircleCI 에서 배포 프로세스가 시작될 것이다.

ECR 에 이미지도 정상적으로 생성된 것을 확인할 수 있다.

Conclusion

CircleCI를 쓰면서 느낀점은 Jenkins 보다는 훨씬 직관적인데다 미관적으로 더 낫다 라는 점이었다.
이런 부분이 작업하는 중간중간 만족감을 주었으며, 특히, SasS 레벨에서 환경 변수를 따로 관리해주는 부분은 보안 부분에 있어서도 훨씬 간단하고 쉽게 접근할 수 있다는 장점을 느낄 수 있었다.

여기에는 언급하지 않았지만 CircleCI를 통해 ECS로 배포하는 과정은 aws-ecs orb를 통해 훨씬 간단하게 진행할 수 있으나 Abstract에서 언급했다시피 AWS ECS는 가격부분에서 다소 부담스러운게 사실이기 때문에 여기서는 언급하지 않았다.

본 포스팅에서는 EC2를 사용하여 적은 비용으로 배포를 진행할 수 있는 나름의 접근 방법을 소개하였다.
물론, ECR 을 쓰지않고 Gitlab 등을 통해 무료로 이미지를 관리할 수 있으나 그 부분은 차후 기회가되면 소개하도록 하겠다.

Introducing popular SQL Queries & SQL Naming Convention

soom — Sat, 21 Jan 2023 08:46:36 +0000

Abstract

웹 프로젝트 킥오프 때 가장 많이 고민하고 시간을 소요하는 것이 서비스에 적합하면서 확장성을 가지고 있는 DB Structure Design 이다.

한번 Production 환경에 올라가면 수정하기 거의 불가능에 가까운 것이 DB이기 때문에 프로젝트 첫 페이즈일때 실제 데이터 수정이 빈번하게 일어나게 된다.

이때 자주 사용하게 되는 기본 Query 들을 이번 포스팅에서 소개하고자 한다.
사실 부족한 내 기억력을 대비하고자 작성한 나만을 위한 포스팅이다.

Queries

Database

데이터베이스 생성 및 제거

/* create */
CREATE DATABASE database_name;

/* remove */
DROP DATABASE database_name;

Table

테이블 생성 및 제거

/* create */
CREATE TABLE table_name (
  /* primary key */
  id BIGINT NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'Primary Key',

  /* nullable or not nullable */
  key_name_1 VARCHAR(100) NOT NULL,
  key_name_2 VARCHAR(100) NOT NULL,
  key_name_3 TEXT DEFAULT NULL,

  /* for managing CRUD history */
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT 'Create Time',
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Update Time',
  deleted_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Delete Time'
) COMMENT 'Table Description';

/* remove */
DROP TABLE table_name;

/* rename */
ALTER TABLE table_name RENAME new_table_name;

테이블 전체 데이터 조회

SELECT * FROM table_name;

Data

데이터 생성 및 수정

/* create */
INSERT INTO table_name (key_name_1, key_name_1, key_name_1)
VALUES
  ('value_1', 'value_2', 'value_3'),
  ('value_1', 'value_2', 'value_3'),
  ('value_1', 'value_2', 'value_3');

/* change */
ALTER TABLE table_name
CHANGE table_name new_table_name;

관계 생성 및 제거

/* create foreign key */
ALTER TABLE table_name
ADD FOREIGN KEY (table_1_id) REFERENCES table_1(id);

/* remove foreign key */
ALTER TABLE table_name
DROP FOREIGN KEY table_ibfk_1;

Naming Convention

Table

테이블 이름은 Singular
테이블 이름은 Lowercase
Join Table (Relationship Table) 이름은 테이블 관계에 따라 _has_, _and_ 사용
- todo 테이블 하위 개념인 task 테이블일 경우 Join Table 이름은 todo_has_task
- keyboard 테이블과 동등 개념인 mouse 테이블일 경우 Join Table 이름은 keyboard_and_mouse
- ball 테이블과 ball_type 테이블일 경우 ball_has_type
테이블에는 무조건 히스토리를 관리
- created_at, updated_at, deleted_at

Data

키 이름은 snake case
foreign key 의 경우 관계되는 테이블의 이름을 참조
- book 테이블에 연결할 foreign key 는 book_id 관계 대상은 book(id)
- Join Table의 경우
- ball_has_type 테이블의 경우 ball 테이블 foreign key는 ball_id, ball_type 테이블의 foreign key 는 type_id
Boolean 값은 is_로 시작

Conclusion

서문에서 언급한대로 이번글은 부족한 기억력을 보완하고자 쓴 포스팅이기 때문에 따로 언급할만한 내용은 없다.
앞으로 계속 추가 예정...

MySQL + Docker + AWS EC2 Simple Tutorial with Amazon Linux (2023)

soom — Sat, 21 Jan 2023 06:12:07 +0000

Abstract

Ajax가 등장하고 Frontend 라는 개념이 등장한지 어언 20여년. 명확한 경계가 있었던 한 시대를 지나 이제는 새로운 기술의 등장과 함께 다시 Frontend와 Backend의 경계가 모호해지고 있다.

react, vue 처럼 Virtual DOM 개념을 구현한 프레임워크를 필두로 svelte, solid.js 등 부터 DOM을 컴파일 레벨로 구현하는 프레임워크가 등장하기 시작했다.

또한, 자체 server 를 제공하는 fullstack 프레임워크인 Nest.js, Nuxt.js, svelte-kit 등이 등장하면서 Frontend 라는 개념이 점차적으로 서버사이드까지 확장하였다.

그리고 현재는 다양한 Server(Backend) SaaS, DB SaaS 들이 등장하였다. 오래된 Firebase 부터 시작해서 Supabase, GrafBase, PlanetScale 등 서버사이드와 DB 및 인프라에 익숙치 않은 유저들을 위한 서비스들이 우후죽순 등장한다는 것은 이제 Frontend Backend 라는 경계가 무너지고 있는 것을 반증하고 있다.

하지만 이러한 다양한 SaaS, PaaS 등을 이용하다보면 다양한 접근성을 가능하게 하기위해 기존의 Server 와 DB의 개념에 대해 접근하고 이해하는 것이 필요해진다.

이번 포스팅에서는 대표적인 Relation DB인 MySQL을 AWS에 Docker로 말아올리는 간단한 예제를 소개할 예정이다. (적은 비용으로)

참고할만한 링크: https://github.com/ManzDev/frontend-evolution

Setting up AWS EC2 Service

원하는 지역으로 region 을 변경

Launch Instance 클릭

원하는 OS 선택. (여기서는 Amazon Linux로 진행)

Free tier eligible 한 t2.micro로 진행

Key Pair 생성, 혹은 있으면 그대로 선택해서 사용

나머지는 그대로 진행

instance 대쉬보드에 들어가서 방금 생성한 EC2 클릭

connect 선택

Terminal 에서 Pair Key [filename].pem 이 저장된 폴더에 접근

3번 안내문 대로 권한 획득 후 4번 Example 명령어 복사 및 실행

아래 메세지와 같은 리턴을 받았다면 Security Group 수정이 필요

ssh: connect to host [xxxx].ap-northeast-2.compute.amazonaws.com port 22: Operation timed out

Security Groups > 변경할 정책 이름 > Inbound rules > Edit inbound rules 클릭

Inbound 그룹에 ssh 관련 포트 설정 (TCP 22 Port)

MySQL 관련 포트 설정 (TCP 3306 Port)

다시 돌아가서 ssh 접속 실행

Package Update 진행

$ sudo yum update

$ sudo yum -y upgrade

Setting up Docker on EC2

Docker 설치, 확인 및 시작

# install docker
$ sudo yum -y install docker

# docker version confirm
$ docker -v
Docker version 20.10.17, build 100c701

# start docker service
$ sudo service docker start

Docker 볼륨 생성

# create docker-volume
$ sudo docker volume create mysql_v
mysql_v

# result
$ sudo docker volume ls
DRIVER    VOLUME NAME
local     mysql_v

Docker Hub에서 MySQL 이미지 불러오기

$ sudo docker pull mysql:latest

Docker Container 마운팅

# mounting & run docker container
$ sudo docker run --name <container_name> -e MYSQL_ROOT_PASSWORD=<password> -d -v mysql_v:/var/lib/mysql -p 3306:3306 mysql:latest

# monitor running docker images
$ sudo docker ps
CONTAINER ID   IMAGE          COMMAND                  CREATED         STATUS         PORTS                                                  NAMES
bec12e4eb164   mysql:latest   "docker-entrypoint.s…"   9 seconds ago   Up 8 seconds   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   <container_name>

Connecting Database with DB Tool

MySQL 도구 중 가장 널리 쓰이는 도구는 MySQL Workbench 일 것이다.

여기서는 오픈 소스인 DBeaver를 이용하는 가이드를 소개하겠다.

DBeaver를 다운로드 및 실행

해당 링크: https://dbeaver.io/

New Database Connection 클릭 > MySQL 클릭

Server Host, Root Password 입력

Test Connection 실행

이런 메시지를 얻으면 연결에 성공

만약 Public Key 관련 오류가 뜬다면 Driver properties 탭에 들어가 다음과 같이 설정

연결에 성공했으면 간단한 DB 생성과 테이블 생성을 진행해보자

성공한 연결은 왼쪽 Database Navigator에 리스트로 표시 된다.
선택한 뒤 작업표시줄에 있는 SQL 버튼을 클릭하면 Query를 작성할 수 있는 환경을 제공한다.

다음과 같이 데이터 베이스 생성해보자

CREATE DATABASE HELLO_WORLD;

테이블 생성

CREATE TABLE dummy_data (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  hello VARCHAR(100) DEFAULT NULL
);

데이터 삽입

INSERT INTO dummy_data(hello)
VALUES
  ('안녕하세요'),
  ('Hola'),
  ('こんにちは'),
  ('hallo'),
  ('ciao');

그럼 다음과 같이 DBeaver 에서 데이터 베이스, 테이블, 데이터가 생성된 결과를 확인할 수 있다.

➕ DB Backup

DB 전체 백업은 다음과 같이 DBeaver 메뉴에서 진행 가능

Conclusion

Docker compose 를 구성하거나 그 외에 다양한 방법으로도 접근 가능하지만 가장 간단한 방식으로 AWS EC2에 Docker를 이용해서 MySQL DB 서버를 구성해보았다.

서문에 언급했듯이 더이상 Frontend Backend 구분은 의미가 없어지는 시대가 이미 성큼 다가왔다.

앞으로는 서비스 성격이나 규모에 따른 포지션 구분이 좀더 대중화가 될 것이다.

기존의 대규모 처리 시스템과 같은 서비스들은 변화가 느리기에 View, Server의 구분 방법을 따를 것이나 대다수를 차지하는 중소규모나 빠른 프로토 타이핑을 위해서는 CI/CD SaaS, Server SaaS, DB SaaS 와 같은 서비스들을 사용해서 빠르게 서비스를 개발하는 것이 경쟁력이 될것이다.

더 나아가 중소규모에서 대규모로 넘어갈 수 있는 기반 지식은 Engineer로서든 Manager로서든 서비스 개발하고 운영하는 관점에서 꼭 필요한 기본 소양이 될것이다.

GMAIL to Discord Channel Webhook Tutorial

soom — Fri, 19 Aug 2022 15:46:48 +0000

Abstract

프로젝트를 진행하면서 Slack, Microsoft Teams, Discord 등 커뮤니케이션 툴은 원활한 프로젝트 진행을 위해 필수적인 요소 중에 하나다.

특히, 게임 보조 도구로 알려진 Discord의 경우 퍼포먼스에 민감한 게이머들을 만족시키는 강력한 커뮤니케이션 기능을 가지고 있다보니 이를 프로젝트 메인 커뮤니케이션 툴로 사용하는 경우도 점점 증가하고 있다.

이번 포스팅에서는 팀 메일이나 공식 메일이 올때마다 메일을 확인하는 것이 아닌 Discord의 하나의 채널에서 알림이 올수 있도록 웹훅 설정을 하는 과정을 소개하고자 한다.

Discord DOCs 링크: https://discord.com/developers/applications

Getting Started

Prerequisite

여기서는 Discord 계정이 있고 서버를 생성한 상태를 가정한다
서버에 해당하는 웹훅 권한이 필요하다

웹훅 권한 설정

Setting Discord Webhook

Integrations 메뉴에서 Webhooks 생성을 클릭

Integrations 메뉴

New Webhook을 선택해서 새로운 Webhook을 생성한 뒤 필요한 정보(Bot Name, Channel)를 입력해서 Noti-Bot을 생성

Discord 세팅은 여기까지 완료

Webhook 생성

Setting up Google App Script

구글 앱 스크립트 페이지 접속:
https://www.google.com/script/start/

새 프로젝트 생성

구글 앱 스크립트 메인 화면

메인 대쉬보드

새로운 프로젝트에 다음과 같이 코드를 작성

Note

webhooks 변수에는 Discord의 Webhook URL을 입력

Webhook 생성 화면

channel 변수에는 채널 이름을 등록

Discord 채널명

searchQuery 에는 구글 메일에서 쓰는 검색 쿼리를 사용한다. (하기 이미지 참조)

Gmail 쿼리 검색

Gmail에서는 Discord에 2000 자 이상되는 내용을 게시할수 없기 때문에 2000 자 넘는경우 제한하는 로직이 필요하다.

code.gs

function postDiscord(postMessage) {
    const webhooks = 'https://discord.com/api/webhooks/webhooks/{webhook.id}/{webhook.token}';
    const channel = '{channel name}';
    const parse = 'full';
    const method = 'post';

    const payload = {
        channel: channel,
        content: postMessage,
        parse: parse,
    };

    const params = {
        method: method,
        payload: payload,
        muteHttpExceptions: true,
    };

    response = UrlFetchApp.fetch(webhooks, params);
}

function sendMailsToDiscord() {
    const searchQuery = '{gmail query}';
    const date = new Date();
    const checkSpan = 30;
    date.setMinutes(date.getMinutes() - checkSpan);

    const threads = GmailApp.search(searchQuery);
    const msgs = GmailApp.getMessagesForThreads(threads);

    for (let i = 0; i < msgs.length; i++) {
        const lastMsgDate = threads[i].getLastMessageDate();

        if (lastMsgDate.getTime() < date.getTime()) break;

        for (let j = 0; j < msgs[i].length; j++) {
            const msgDate = msgs[i][j].getDate();
            const msgBody = msgs[i][j].getPlainBody();
            const subject = msgs[i][j].getSubject();

            const postMessage =
                'From mailing list' +
                '\n' +
                Utilities.formatDate(msgDate, 'America/New_York', 'MM/DD/yyyy hh:mm:ss') +
                '\n' +
                'Title:' +
                subject +
                '\n' +
                '[hr]' +
                msgBody;

            // 2000 Characters limits
            if (postMessage.length > 2000) {
                const stopPos = 1900; //
                const msg = '"Exceeded 2000 character limit."';
                postMessage = postMessage.substring(0, stopPos) + '\n' + msg;
            }

            postDiscord(postMessage);
        }
    }
}

trigger 를 설정

이후 새로운 메일이 올 경우 지정한 채널에 새로운 메세지가 푸시될 것이다.

Note

실행할 함수를 선택: sendMailsToDiscord

실행할 배포: Head

이벤트 소스 선택: 시간 기반

트리거 기반 시간 유형 선택: 분 단위 타이머

분 간격 선택: 30분마다

트리거 실패 알림 설정: 즉시 알림

trigger 화면

Conclusion

본 포스팅에서는 GMAIL에서 Discord 채널에 새로운 메일이 올때마다 푸시하는 webhook을 Google App Script를 통해 Set up해 보았다.

Discord는 퍼포먼스에 민감한 게이머를 만족시킬수 있을정도의 수준의 서비스를 제공하고 있고 앞으로 여러 프로젝트에서도 많이 쓰일 것이다. 여기에 전 세계 메일의 표준이라고도 할수 있는 GMAIL을 연동하는 것은 가장 많이 사용하는 Webhook 중 하나가 될것이며 본 포스팅이 그런 부분에 많은 도움이 되었으면 하는 바램이다.

본 포스팅에 쓰인 Method가 궁금하다면 하기의 Google App Script 링크에서 자세한 내용을 참고

Link: https://developers.google.com/apps-script/reference/document

How to use GraphQL and React Query with GraphQL Code Generator (based on Next.Js)

soom — Wed, 10 Aug 2022 12:18:00 +0000

Abstract

Introducing how to apply GraphQL with GraphQL Code Generator & React Query on Next.js framework base.

GraphQL. 기존의 REST API 호출 방식을 넘어 schema를 이용해 마치 DB를 다루는 sql과 같이 데이터 호출을 다룰수 있는 새로운 개념.

GQL은 이미 개발자라면 익숙한 용어가 되버렸지만 아직도 현재 진행형이며 이번 포스팅에는 Query 솔루션인 React Query와 기존의 GQL의 pain point 중 하나인 Type과 Schema 관리, 불필요한 반복적인 코드 작성을 자동으로 해결해주는 GraphQL Code Generator를 이용해 GQL을 직관적으로 관리하는 방법을 소개하고자한다.

GQL에 대한 내용은 하기 참조
GQL 이란?: https://tech.kakao.com/2019/08/01/graphql-basic/

Getting Started

원하는 프로젝트 폴더에 Next.Js TypeScript 프로젝트를 생성

Terminal

pnpm create next-app . --typescript

React Query로 GQL를 사용하고자 필요한 패키지를 설치

Note

최근 React Query는 패키지 명이 TanStack Query 큰 카테고리로 묶였는데 추후 Sevelte Query 등 다양한 플랫폼을 지원할 >예정이라 한다.

Terminal

pnpm add -S @tanstack/react-query graphql graphql-request

pnpm add -D @tanstack/react-query-devtools

환경 변수도 사용할 예정이기에 dotenv 패키지도 설치

Terminal

pnpm add -S dotenv

.env.local 을 생성한뒤 API URL 을 등록

GraphQL API 주소는 Fake GraphQL을 제공하는 GraphQLZero를 이용하였다.

GraphQLZero Link: https://graphqlzero.almansi.me/

.env.local

NEXT_PUBLIC_GRAPHQL_URL=https://graphqlzero.almansi.me/api

env 항목이 Type Error 에 잡히지 않도록 next-constants.d.ts 파일을 생성하고 default type으로 변수 선언

next-constants.d.ts

declare namespace NodeJS {
    export interface ProcessEnv {
        NEXT_PUBLIC_GRAPHQL_URL: string;
    }
}

Common Approach by `React Query` + `GraphQL`

react query 설정을 위해 _app.tsx 을 다음과 같이 수정

Note

SSR이기에 SEO와 UX를 최적화 하기위해 Hydration State를 설정

Hydration 개념은 하기 링크 참조

Link: https://blog.saeloun.com/2021/12/16/hydration.html

pageProps.dehydratedState 는 Serverside Props 에서 이용할 예정

refetch를 최소화해서 UX 최적화

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false,
        },
    },
});

pages/_app.tsx

import '../styles/globals.css';

import type { AppProps } from 'next/app';

import { Hydrate, QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false,
        },
    },
});

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <Component {...pageProps} />;
                <ReactQueryDevtools initialIsOpen />
            </Hydrate>
        </QueryClientProvider>
    );
}

export default MyApp;

GraphQlZero의 album Resolver Query를 react query로 요청

legacy.tsx 파일을 생성하고 실제로 데이터가 들어오는 것을 확인한다.

Note

type 이나 schema는 GraphQlZero의 Docs를 참고해서 원하는 데이터만 임의로 작성

interface AlbumQuery {
    album: {
        id: string;
        title: string;
        user: {
            id: string;
            name: string;
            username: string;
            email: string;
            company: {
                name: string;
                bs: string;
            };
        };
        photos: {
            data: {
                id: string;
                title: string;
                url: string;
            };
        };
    };
}

const albumQueryDocument = gql`
    query album($id: ID!) {
        album(id: $id) {
            id
            title
            user {
                id
                name
                username
                email
                company {
                    name
                    bs
                }
            }
            photos {
                data {
                    id
                    title
                    url
                }
            }
        }
    }
`;

getStaticProps를 이용해 Server에서 미리 캐시된 dehydratedState를 내려준다.

export const getStaticProps = async () => {
    await queryClient.prefetchQuery(['album'], useAlbumFetcher);

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    };
};

pages/legacy.tsx

import type { NextPage } from 'next';

import { useQuery, dehydrate } from '@tanstack/react-query';
import { request, gql } from 'graphql-request';
import { queryClient } from './_app';

interface AlbumQuery {
    album: {
        id: string;
        title: string;
        user: {
            id: string;
            name: string;
            username: string;
            email: string;
            company: {
                name: string;
                bs: string;
            };
        };
        photos: {
            data: {
                id: string;
                title: string;
                url: string;
            };
        };
    };
}

const albumQueryDocument = gql`
    query album($id: ID!) {
        album(id: $id) {
            id
            title
            user {
                id
                name
                username
                email
                company {
                    name
                    bs
                }
            }
            photos {
                data {
                    id
                    title
                    url
                }
            }
        }
    }
`;

const useAlbumFetcher = async () =>
    await request<AlbumQuery, { id: string }>(
        process.env.NEXT_PUBLIC_GRAPHQL_URL,
        albumQueryDocument,
        {
            id: '2',
        }
    );

export const getStaticProps = async () => {
    await queryClient.prefetchQuery(['album'], useAlbumFetcher);

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    };
};

const Legacy: NextPage = () => {
    const { data } = useQuery<AlbumQuery>(['album'], useAlbumFetcher);
    const { album } = data!;

    return (
        <>
            <header style={{ textAlign: 'center' }}>
                <h1>Hello GraphQL + React Query !</h1>
            </header>
            <hr />
            <main>
                <p style={{ textAlign: 'center', color: 'grey' }}>{JSON.stringify(album)}</p>
            </main>
        </>
    );
};

export default Legacy;

Result - `React Query` + `GraphQL`

Note - Pain Point

여기까지가 기존의 gql + react query 방식을 통해 데이터를 받아오는 과정이다.
하지만 이런 방식에는 Pain Point가 존재한다.

schema 에 대응하는 Type을 직접 작성

schema 변경이 있다면 Type 역시 Docs 를 확인한 후 직접 변경 필요

요청할때마다 반복적인 코드 반복 작성

New Approach by `React Query` + `GraphQL` + `GraphQL Code Generator`

이런 Pain Point를 자동으로 해결해주는 것이 GraphQL Code Generator 다.

GQL Code Generator 관련 패키지를 설치

Terminal

# code generator core 패키지
pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

# code generator react query 관련 패키지
pnpm add -D @graphql-codegen/typescript-react-query @graphql-codegen/typescript-graphql-request

# code generator yaml loader 패키지
pnpm add -D yaml-loader

codegen.yml 파일을 생성한 뒤 설정값 입력

Note

schema 는 graphql 폴더 안에 [filename].graphql로 관리하기로 한다. (ts나 다른 확장자도 가능)

documents에는 gql schema 파일 형식과 위치를 설정해준다.
documents: 'graphql/**/!(*.generated).{graphql,ts}'
schema 는 GQL URL 위치. 여기서는 환경 변수로 관리 하기때문에 다음과 같이 작성
schema: ${NEXT_PUBLIC_GRAPHQL_URL}
중요 옵션들은 다음과 같다. 나머지 내용들은 하기 링크에서 확인: https://www.graphql-code-generator.com/plugins/typescript/typescript-react-query

exposeFetcher: GetStaticProps, GetServerSideProps 에 prefetch로 사용할 query fetcher 함수를 export

exposeQueryKey: react quey의 query key 도 export

fetcher : fetcher로 사용할 모듈. 여기서는 기존에 사용했던 graphql-request 사용한다.

codegen.yml

documents: 'graphql/**/!(*.generated).{graphql,ts}'
schema: ${NEXT_PUBLIC_GRAPHQL_URL}
require:
  - ts-node/register
generates:
  graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      interfacePrefix: 'I'
      typesPrefix: 'I'
      skipTypename: true
      declarationKind: 'interface'
      noNamespaces: true
      pureMagicComment: true
      exposeQueryKeys: true
      exposeFetcher: true
      withHooks: true
      fetcher: graphql-request

pakage.json 에 graphql-codegen script추가

package.json

{
    ...
    "scripts": {
        ...
        "generate:gql": "graphql-codegen --require dotenv/config --config codegen.yml dotenv_config_path=.env.local"
    },
    ...
}

graphql 폴더를 생성한뒤 요청할 schema 파일을 작성
여기서는 album 관련 schema를 album.graphql에 작성

graphql/album.graphql

query album($id: ID!) {
    album(id: $id) {
        id
        title
        user {
            id
            name
            username
            email
            company {
                name
                bs
            }
        }
        photos {
            data {
                id
                title
                url
            }
        }
    }
}

여기까지 진행했다면 모든 준비를 완료한 상태
현재 파일 구조는 다음과 같다.

structure

.
├── graphql/
│   └── album.graphql
├── pages/
│   ├── _app.tsx
│   ├── index.tsx
│   └── legacy.tsx
├── ...
├── codegen.yml
├── next-constants.d.ts
├── package.json
└── ...

이제 GraphQL Generator를 사용해 Type, Method 를 자동 생성이 가능

script를 실행하면 graphql 폴더 안에 generated.ts가 생성

이 파일안에는 schema에 대응하는 Query Function, Type 들이 자동으로 생성되어 있는 것을 확인할 수 있다. (파일 내용은 생략)

Terminal

pnpm generate:gql

✔ Parse Configuration
✔ Generate outputs

자동생성된 Query Method와 Type을 통해 보다 쉽게 album의 데이터들을 호출해보자

pages폴더안에 new.tsx 파일을 다음과 같이 작성

legacy.tsx와 정확히 동일한 기능을 하는 페이지이다.

Note

useQuery 관련 코드가 자동 생성된 useAlbumQuery 한줄로 대체

const { data } = useAlbumQuery(gqlClient, { id: '3' });

prefetchQuery 에서 key, fetcher 코드를 직접 작성할 필요없이 useAlbumQuery.getKey(), useAlbumQuery.fetcher() 로 대체

await queryClient.prefetchQuery(
    useAlbumQuery.getKey({ id: '3' }),
    useAlbumQuery.fetcher(gqlClient, { id: '3' })
);

Type은 자동 선언되어 연결되어있기 때문에 따로 작성 필요 불가
이후 server spec 변경으로 인한 schema 변경시 code generate 명령 한줄로 반복적인 type 매칭, 재작성 과정을 생략할 수 있다.

pages/new.tsx

import type { NextPage } from 'next';

import { dehydrate } from '@tanstack/react-query';
import { GraphQLClient } from 'graphql-request';
import { useAlbumQuery } from '../graphql/generated';
import { queryClient } from './_app';

const gqlClient = new GraphQLClient(process.env.NEXT_PUBLIC_GRAPHQL_URL);

export const getStaticProps = async () => {
    await queryClient.prefetchQuery(
        useAlbumQuery.getKey({ id: '2' }),
        useAlbumQuery.fetcher(gqlClient, { id: '2' })
    );

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    };
};

const New: NextPage = () => {
    const { data } = useAlbumQuery(gqlClient, { id: '2' });

    const { album } = data!;

    return (
        <>
            <header style={{ textAlign: 'center' }}>
                <h1>Hello GraphQL + React Query !</h1>
            </header>
            <hr />
            <main>
                <p style={{ textAlign: 'center', color: 'grey' }}>{JSON.stringify(album)}</p>
            </main>
        </>
    );
};

export default New;

Result

👉 CodeSandBox Sample Link

Conclusion

본 포스팅에서는 GraphQL Code Generator 를 통해 Server Spec 변경할때마다 schema 변경뿐만 아니라 type 까지 재작성을 해야하는 GQL의 Pain Point 를 해결하는 방법을 소개하였다. 추가적으로 SSR을 통해 데이터 관련하여 hydration하는 technique도 같이 소개하였다.

현재까지도 주류는 REST API 이다. 하지만 큰 변화가 없는 REST API와 달리 GQL에서는 여러가지 기능이 꾸준히 소개되고 발전하고 있다. 특히 Backend 와 Frontend 사이의 Communication Gap 을 줄여주는 방향으로 GQL은 꾸준히 발전하고 있으며 이는 실무의 인적 비용과도 직접적으로 연결되는 방향이다.

이는 개발자라면 GQL에 관해 앞으로도 꾸준히 관심을 가질만한 충분한 이유가 될것이다.

GQL Code Generator 에 대해 자세한 내용 하기 링크에서 확인할 수 있다.
Link: https://www.graphql-code-generator.com/

How to set up Storybook for Tailwind CSS + Next.Js 12 (existing project)

soom — Mon, 08 Aug 2022 15:21:00 +0000

Abstract

Introducing how to apply Storybook for Tailwindcss component on Next.js framework.

UI Component Documentation 하면 떠오르는 가장 대표적인 도구는 바로 Storybook 이다.
이번에 포스팅할 내용은 Utility-first CSS framework인 Tailwind CSS를 적용한 Next.Js 기반 Storybook 을 작성하는 방법이다.

기존 Storybook에 올라온 Next.Js 12 적용 방법은 하기의 명령어를 이용해storybook cli 기능을 이용해서 프로젝트를 setup 하는 방식이다.
하지만 이 방법은 시간이 오래 걸리는데다 실패율도 높다는 단점이 있다.

npx sb init --builder webpack5

따라서 본 포스팅에서는 기존 프로젝트에 직접 Storybook을 적용하는 방법을 소개하고자 한다.

기존 방법은 하기 관련 링크를 참조:
https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

Getting Started

Setting up Next.js Application

원하는 프로젝트를 폴더에 Next.Js TypeScript + Tailwind CSS 프로젝트 생성

Terminal

# Next.Js 프로젝트 생성
pnpm create next-app . --typescript

# Tailwind CSS 설치
pnpm add -D tailwindcss postcss autoprefixer

pnpm dlx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS을 이용한 버튼 컴포넌트 Button.tsx을 생성

components/Button.tsx

import type { FC } from 'react';

interface ButtonProps {
    name: string;
    className: string;
}

const Button: FC<ButtonProps> = ({ name, className }) => {
    return (
        <button className={`p-2 rounded-lg shadow-lg hover:shadow font-bold ${className}`}>
            {name}
        </button>
    );
};

export default Button;

index.tsx 다음과 같이 작성

pages/index.tsx

import type { NextPage } from 'next';
import Button from '../components/Button';

const Home: NextPage = () => {
    return (
        <main className='w-[100vw] h-[100vh] flex justify-center items-center'>
            <div className='text-center'>
                <header className='mb-5'>
                    <h1 className='text-4xl font-bold text-pink-500'>Storybook</h1>
                    <h3 className='text-sm text-gray-400'>Next.JS, Tailwind CSS</h3>
                </header>
                <Button name={'Hello Tailwind CSS'} className={'bg-teal-400 text-white'} />
            </div>
        </main>
    );
};

export default Home;

Storybook 관련 패키지 설치

Terminal

# Storybook Core
pnpm add -D @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/builder-webpack5 @storybook/manager-webpack5 @storybook/react

# Storybook Addons
pnpm add -D @storybook/preset-scss css-loader sass sass-loader style-loader postcss-loader

# For Next.JS Public Serve
pnpm add -D serve

Setting up Storybook for Next.js

.storybook 폴더 생성 후 main.js, preview.js 생성

Note

따로 dedicated한 폴더를 만들어 관리하지 않고 직접 컴포넌트 폴더에서 [filename].stories.ts 방식으로 관리할 예정이기에 다음과 같이 적용 범위 설정
stories: [
      '../components/**/*.stories.@(js|jsx|ts|tsx)',
      '../pages/**/*.stories.@(js|jsx|ts|tsx)',
  ],
필수 요소를 제외한 addon 들은 Sass 관련, Next.Js 12 관련 addon

.storybook/main.js

module.exports = {
    stories: [
        '../components/**/*.stories.@(js|jsx|ts|tsx)',
        '../pages/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-actions',
        '@storybook/addon-essentials',
        {
            name: '@storybook/preset-scss',
            options: {
                cssLoaderOptions: {
                    modules: { localIdentName: '[name]__[local]--[hash:base64:5]' },
                },
            },
        },
        'storybook-addon-next',
    ],
    framework: '@storybook/react',
    core: {
        builder: 'webpack5',
    },
};

.storybook/preview.js

import '../styles/globals.css';

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/,
        },
    },
};

tsconfig.json 에 baseUrl 추가

tsconfig.json

{
    "compilerOptions": {
        ...
        "baseUrl": "."
        ...
    },
    ...
}

package.json 에 script 추가

package.json

{
    ...
    "scripts": {
        ...
        "storybook:dev": "start-storybook -p 6006 -s public",
        "storybook:prod": "serve storybook-static",
        "storybook:build": "build-storybook -s public"
    },
    ...
}

components 폴더에 Button.tsx 대응하는 Button.stories.tsx 생성

components/Button.stories.tsx

import Button from './Button';
import { ComponentMeta, ComponentStory } from '@storybook/react';

export default {
    title: 'Button',
    component: Button,
    argTypes: {
        name: {
            control: 'text',
        },
        className: {
            control: 'text',
        },
    },
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Default = Template.bind({});

Default.args = {
    name: 'Hello Tailwind CSS',
    className: 'bg-teal-400 text-white',
};

storybook 구동 후 Storybook Dashboard 확인

Terminal

pnpm storybook:dev

Result

👉 CodeSandBox Sample Link

Conclusion

본 포스팅에서는 Next.Js 12 를 기준으로 Tailwind CSS 와 함께 StoryBook을 적용하는 방법을 알아보았다.
현재 기준 (2022/08) StoryBook이 Next.Js 12에 다소 안정화되지 않은 모습이 아쉽지만 Component 별로 UI Documentation 기능을 제공하는 StoryBook 자체의 장점만으로도 충분히 매력적인 선택지라고 생각한다.

StoryBook에는 위에 언급된 addon 외 에도 Tailwind CSS 다크 모드를 지원하는 Tailwind dark mode를 포함한 다양한 addon을 지원하고 있다.

하기 링크에서 더 많은 addon을 확인할 수 있다.
SB Addons Link: https://storybook.js.org/addons/

Next.Js 12 + MUI 5 (Material UI) New Tutorial

soom — Mon, 08 Aug 2022 08:29:00 +0000

Abstract

Introducing how to Material UI 5 apply to Next.js 12 framework.

SSR Framework 에는 Next.js, Nuxt, Sveltekit 등 여러가지가 있지만 가장 대표적인 framework는 react기반의 Next.js일 것이다.

본 포스팅에서는 Next.js에 best react component library 중 하나인 MUI를 적용하는 가장 최신 방법을 소개하고자 한다.

기존의 @mui/styles 패키지를 통해 적용하는 방법은 react 18의 호환성 문제로 deprecated 되었으며 관련 내용은 하기 링크를 참조

The legacy styling solution of MUI: https://mui.com/system/styles/basics/

Getting Started

원하는 프로젝트 폴더에 Next.js TypeScript 프로젝트를 생성

Terminal

pnpm create next-app . --typescript

MUI 관련 패키지 설치

Terminal

pnpm add -S @emotion/cache @emotion/react @emotion/server @emotion/styled @mui/icons-material @mui/material

createEmotionCache 함수 모듈인 emotionCache.ts 를 lib 폴더에 생성

Note

클라이언트에서 <head/> 의 가장 최상단에 <meta> 태그를 생성하고 이를 insertionPoint로 지정한다.

이는 페이지 로딩시 MUI style 을 가장 먼저 로딩하는것을 보장

이렇게 먼저 로딩될 경우 다른 Style solution들 보다 높은 우선순위를 가지게 되어 MUI로 개발하는데 이점을 가지게 된다.

lib/emotionCache.ts

import createCache from '@emotion/cache';

const isBrowser = typeof document !== 'undefined';

const createEmotionCache = () => {
    let insertionPoint;

    if (isBrowser) {
        const emotionInsertionPoint = document.querySelector(
            'meta[name="emotion-insertion-point"]'
        ) as HTMLElement;
        insertionPoint = emotionInsertionPoint ?? undefined;
    }

    return createCache({ key: 'mui-style', insertionPoint });
};

export default createEmotionCache;

lib 폴더에 theme.ts 도 생성

Note

나중에 global style을 적용하기 위해 theme.ts 생성

lib/theme.ts

import { createTheme } from '@mui/material/styles';
import { indigo } from '@mui/material/colors';

const theme = createTheme({
    palette: {
        primary: {
            main: indigo.A400,
        },
    },
});

export default theme;

_app.tsx 파일을 다음과 같이 수정

pages/_app.tsx

import * as React from 'react';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import CssBaseline from '@mui/material/CssBaseline';

import theme from '../lib/theme';
import createEmotionCache from '../lib/emotionCache';

import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
import type { EmotionCache } from '@emotion/react';

type AppPropsWithCache = AppProps & {
    Component: NextPage;
    emotionCache?: EmotionCache;
};

const clientSideEmotionCache = createEmotionCache();

const MyApp = ({
    Component,
    emotionCache = clientSideEmotionCache,
    pageProps,
}: AppPropsWithCache) => {
    return (
        <CacheProvider value={emotionCache}>
            <Head>
                <meta name='viewport' content='initial-scale=1, width=device-width' />
            </Head>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Component {...pageProps} />
            </ThemeProvider>
        </CacheProvider>
    );
};

export default MyApp;

_document.tsx 파일을 생성한 뒤 다음과 같이 작성

Note

_Document.getInitialProps는 _app이 아닌 _document에 상속되며 static 으로 생성됨

_Document.getInitialProps = async (ctx: DocumentContext): Promise<DocumentInitialProps> => {...}

cache를 새로 생성하기보단 동일한 Emotion cache를 SSR Request에 사용한다면 퍼포먼스를 개선하는 효과를 얻을 수 있다. (하지만 global side effect가 발생할 수 있는 단점이 있다는 것도 인지해야한다.)
여기서는 SSR Request 마다 cache를 생성하기로 한다.

const cache = createEmotionCache();

styles fragment는 app 과 page의 렌더링이 끝난뒤에 렌더링된다.

styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],

잘못된 HTML 생성 방지를 위해 다음 구문은 중요.

참고링크: https://github.com/mui/material-ui/issues/26561#issuecomment-855286153

const emotionStyles = extractCriticalToChunks(initialProps.html);

Generating Order

서버

app.getInitialProps

page.getInitialProps

document.getInitialProps

app.render

page.render

document.render

서버에러

document.getInitialProps

app.render

page.render

document.render

클라이언트

app.getInitialProps

page.getInitialProps

app.render

page.render

pages/_document.tsx

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../lib/theme';
import createEmotionCache from '../lib/emotionCache';

import type { DocumentContext, DocumentInitialProps } from 'next/document';

export default class _Document extends Document {
    render() {
        return (
            <Html lang='ko'>
                <Head>
                    <meta name='theme-color' content={theme.palette.primary.main} />
                    <link rel='shortcut icon' href='/static/favicon.ico' />
                    <link
                        rel='stylesheet'
                        href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
                    />
                    <meta name='emotion-insertion-point' content='' />
                    {this.props.styles}
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

_Document.getInitialProps = async (ctx: DocumentContext): Promise<DocumentInitialProps> => {
    const originalRenderPage = ctx.renderPage;

    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    ctx.renderPage = () =>
        originalRenderPage({
            enhanceApp: (App) =>
                function EnhanceApp(props) {
                    return <App emotionCache={cache} {...props} />;
                },
        });

    const initialProps = await Document.getInitialProps(ctx);

    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
        <style
            data-emotion={`${style.key} ${style.ids.join(' ')}`}
            key={style.key}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: style.css }}
        />
    ));

    return {
        ...initialProps,
        styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
    };
};

index.tsx 를 다음과 같이 작성

pages/index.tsx

import { Button } from '@mui/material';

import type { NextPage } from 'next';

const Home: NextPage = () => {
    return (
        <main
            style={{
                width: '100vw',
                height: '100vh',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <div>
                <header>
                    <h1>MUI5 + Next.js 12</h1>
                </header>
                <section>
                    <Button variant={'contained'}>Hello MUI</Button>
                </section>
            </div>
        </main>
    );
};

export default Home;

Result

👉 CodeSandBox Sample Link

Conclusion

본 포스팅에서는 MUI 5를 Next.Js 12에 적용하는 최신 방법을 소개하였다. (2022년 8월 기준)

react 18 이 등장하면서 기존 방법보다 고려해야할 부분이 늘어난건 사실이나 여전히 reference가 많은 조합을 선호하는 트렌트 안에서는 Best 라고 할수있는 SSR Framework + UI Library 조합인 Next.Js+ MUI는 꾸준히 이용될 것이다.

이외에도 추천하는 React UI Framework 중 하나인 Mantine을 소개하면서 글을 마무리 짓고자 한다.
Mantine: https://mantine.dev/

Building a Monorepo with pnpm Workspace

soom — Mon, 08 Aug 2022 04:37:00 +0000

Abstract

Introducing the Monorepo Approach through pnpm Workspace.

Multi Repo, Mono Repo, Micro Frontend Architecture 등 최근에는 효율성을 높이기 위한 다양한 접근 방법이 소개되고 있다.

본 포스팅에서는 pnpm workspace 릁 통해 간단한 Monorepo 구조를 구현해 보겠다.

p.s 지난번 dev.to 쪽 이슈로 글이 날아가버려서 다시 쓰는 내용이기 때문에 기억이 잘 나지 않아 아쉽다.
역시 백업은 중요한 것

Getting Started

Prerequisite

pnpm global 설치가 필요

Terminal

# Node Version <16.14
npm install -g pnpm

# Node Version >16.17
corepack enable

corepack prepare pnpm@latest --activate

Set Project Structure

프로젝트 구조를 구성해보자

├── packages/
│   ├── app/
│   └── common/
├── package.json
└── pnpm-workspace.yaml

파일 생성 뒤 다음과 같이 작성

/package.json

{
    "name": "@soom/root",
    "private": true,
    "scripts": {
        "preinstall": "pnpm dlx only-allow pnpm"
    },
    "workspaces": ["packages/*"],
    "engines": {
        "node": ">=16.14.2",
        "pnpm": ">=7.9.0"
    },
    "packageManager": "pnpm@7.9.0",
    "devDependencies": {
        "pnpm": "^7.9.0"
    }
}

/pnpm-workspace.yaml

packages:
  - 'packages/*'

packages/app/ packages/common/ 폴더 안에 리액트 프로젝트를 생성

여기서는 vite 를 통해 생성

pnpm create vite .

Setting Common Component

먼저 packages/common/ 폴더 쪽에 다음과 같이 Button Component를 생성

packages/common/src/components/Button.tsx

import type { FC, PropsWithChildren } from 'react';

interface Props extends PropsWithChildren {
    textColor: string;
}

const Button: FC<Props> = (props) => {
    return <button style={{ color: props.textColor }}>{props.children}</button>;
};

export default Button;

main.tsx 에서 방금전 생성한 Button Component 를 export

packages/common/src/main.tsx

import Button from './components/Button';

export { Button };

package.json을 다음과 같이 수정

packages/common/package.json

{
    "name": "@soom/common",
    "type": "module",
    "main": "./src/main.tsx",
    ...
}

Run App with Imported Shared Component

이제 app 폴더로 가서 package.json 을 다음과 같이 수정 후 패키지 설치 재실행

packages/app/package.json

{
    "name": "@soom/app",
    "private": true,
    "type": "module",
    ...
    "dependencies": {
        "@soom/common": "^0.0.0",

    },
    ...
}

패키지 설치

pnpm install

App.tsx 에서 좀전에 설치한 @soom/common 패키지를 이용해 버튼을 import

packages/app/src/App.tsx

import './App.css';
import { Button } from '@soom/common';

function App() {
    return (
        <div className='App'>
            <h1>Monorepo Button?</h1>

            <Button textColor='red'>Hello Common Package Button</Button>
        </div>
    );
}

export default App;

app 폴더에서 프로젝트 실행

이제 common 프로젝트의 버튼이 무사히 app 프로젝트에 적용이 된것을 확인할 수 있다.

pnpm dev

Result

👉 CodeSandBox Sample Link

➕ P.S

마지막으로 monorepo 루트 폴더에서 직접 app폴더에 접근하지 않고 구동시키기 위해서 root 폴더의 package.json에 다음과 같이 스크립트를 사용할 수 있다.

package.json

{
    "name": "@soom/root",
...

    "scripts": {
        "preinstall": "pnpm dlx only-allow pnpm",
        "dev:app": "pnpm --filter @soom/app dev"
    },

...
}

Terminal

pnpm dev:app

Conclusion

pnpm workspace 를 이용해서 monorepo 를 구성해보았다.
이 프로젝트에 turborepo, lerna 등을 이용해 다양한 관리를 할 수 있다.
monorepo를 구성하는 방법은 여러가지가 있지만 개인적으로 pnpm workspace를 이용하는 방법이 가장 가볍고 직관적이었다.

pnpm 의 자세한 내용은 하기 링크를 참고.
https://pnpm.io/ko/

Monorepo Tool에 대한 자세한 내용은 하기 링크를 참조.
참고 링크: https://monorepo.tools/

cloneNode?

soom — Wed, 05 May 2021 06:41:16 +0000

1. AppendChild

const comment_text = document.querySelector("textarea");
const post = document.querySelector("button");
const comment_list = document.querySelector(".comment-list>ul");
const profile = document.querySelector(".profile-name>div:first-child");

comment_list.appendChild("butmt")

comment_list is <ul> so I thought "Append Child" worked here, but actually there was error coming out like this.

VM8385:1 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at <anonymous>:1:14

What the heck is node? so I just tried different way,

comment_list.appendChild(profile)

then came out result in a good way!

<div>john_doe_writer</div>

so node means something like an object! not that "OBJECT" but anyway I got this.
But I don't wanna generate every node ( e.g. createElement('li'), then innerHtml("<p>dfdfd</p>"))
I want easier way!
for the case, <ul> doesn't have method .innerHtml!

2. Append

const comment_text = document.querySelector("textarea");
const post = document.querySelector("button");
const comment_list = document.querySelector(".comment-list>ul");
const profile = document.querySelector(".profile-name>div:first-child");

post.addEventListener("click", (e) => {
  comment_list.append(
    `<li>
    <div class="comment-text">
      <span>${profile.textContent}</span>
      <span
        >${comment_text.value}
      </span>
    </div>
    <span class="comment-like"
      ><i class="far fa-heart"></i
    ></span>
    </li>`
  );
});

so my second option would be append!
but WTF! result is like this.

Therefore, I got that, .append method it just add as a text like .innerText method.

So I should figure out another better way to solve this problem.

3. InsertAdjacentHTML

const comment_text = document.querySelector("textarea");
const post = document.querySelector("button");
const comment_list = document.querySelector(".comment-list>ul");
const profile = document.querySelector(".profile-name>div:first-child");

post.addEventListener("click", (e) => {
  comment_list.insertAdjacentHTML(
    "beforeend",
    `<li>
    <div class="comment-text">
      <span>${profile.textContent}</span>
      <span
        >${comment_text.value}
      </span>
    </div>
    <span class="comment-like"
      ><i class="far fa-heart"></i
    ></span>
    </li>`
  );
});

Finaaaaally! this work! I got the result like this.

However, not like other .append .appendChild method,
.insertAdjacentHtml method need one more parameter!

It's about position, I guess, if not...I fucked tho.

Anyway, this is what I googled!

"beforebegin" – insert html immediately before elem,
"afterbegin" – insert html into elem, at the beginning,
"beforeend" – insert html into elem, at the end,
"afterend" – insert html immediately after elem.

4. special! cloneNode

html

    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>
    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>
    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>
    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>

js

const p = document.createElement("p");
const h1 = document.querySelectorAll(".h1-title");

h1.forEach((el) => {
  el.appendChild(p);
});

I thought the variable p is added for every h1 node...but result is like this...

WTF!! this is not I wanted! But there is no problem for the code...at least in my thought.

I loop properly for the p element!
But there is another issue I should I should care!

even it is for loop one element can not add whole html because of some reason....
so for the fix this issue you need copy

const p = document.createElement("p");
const h1 = document.querySelectorAll(".h1-title");

h1.forEach((el) => {
  const p_clone = p.cloneNode(true);
  el.appendChild(p_clone);
});

so .cloneNode method make things can copy and add well by loop!
Thanksfully it's a great method when you use for loop!

The link I googled: https://javascript.info/modifying-document