그런데 공식문서가 그닥 친절하지 않다. GitHub 저장소에 옵션별 결과 파일들이 있긴 하지만 어떤 명령어에 대한 결과 파일인지 직접 확인해봐야 한다. 솔직히 말하면 공식문서라고 하기도 애매함

그래서 직접 옵션들을 바꿔가면서 테스트를 해봤고, 각 옵션에 대해 설명하고자 한다.

명령어로 실행하기

패키지를 설치해서 실행해도 되고, npx로 바로 실행시킬 수 있다.

npx token-transformer input.json output.json sets excludes

실행 명령어는 간단하며, 파라미터에 대해 알아보자.

파라미터

기본적으로 변환 작업에 대한 정의를 하는데 사용되는 파라미터들이다.

• input.json : 변환할 대상 파일
• output.json : 추출할 대상 파일 (존재하지 않으면 생성함)
• sets : 변환시 참조할 대상 key값
• excludes : 추출 제외 대상 key값

sets와 excludes에 대해서는 조금 더 자세한 설명이 필요하다.

{
  "global": {...},
  "light": {
    "bg": {
      "default": {
        "value": "{colors.white}",
        "type": "color"
      }
    }
  },
  "dark": {
    "bg": {
      "default": {
        "value": "{colors.gray.900}",
        "type": "color"
      }
    }
  }
}

여기에 input에 사용될 tokens.json이 있다. light, dark는 global의 colors의 값을 참조해서 값을 설정하고 있다.

만약 특정 테마만 변환해서 추출할 때, global을 참조하도록 설정하는 것이 필요하다.

light 테마만 추출하기 npx token-transformer input.json light.json global,light global

global과 light을 참조해서 추출하되, global은 추출하지 말라는 명령어다.

dark 테마만 추출하기 npx token-transformer input.json dark.json global,dark global

dark 테마도 light와 동일하게, global을 참조하되 global은 추출하지 않는다.

옵션

변환시 사용할 수 있는 옵션들이다. -- prefix로 시작하며 =로 값을 대입해준다.

옵션들에 대해 더 자세히 알아보자.

expand로 시작하는 옵션들

expand로 시작하는 옵션들은 자동 확장 여부를 결정한다. (expandTypography, expandShadow, expandBorder)

자동 확장 여부란, 추출된 토큰이 참조한 대상 토큰의 type도 함께 포함하는 것을 의미한다.

대표로 expandTypography 옵션을 예로 들어 확인해보자.

{
  "H1": {
    "Bold": {
      "type": "typography",
      "value": {
        "fontFamily": "Inter",
        "fontWeight": "Bold",
        "lineHeight": "110%",
        "fontSize": 48.829,
        "paragraphSpacing": 32,
        "letterSpacing": "-5%"
      }
    }
  }
}

expandTypography=false, 즉 기본값으로 추출했을 경우다.

{
  "typography": {
    "H1": {
      "Bold": {
        "fontFamily": { "value": "Inter", "type": "fontFamilies" },
        "fontWeight": { "value": "Bold", "type": "fontWeights" },
        "lineHeight": { "value": "110%", "type": "lineHeight" },
        "fontSize": { "value": 48.829, "type": "fontSizes" },
        "paragraphSpacing": { "value": 32, "type": "paragraphSpacing" },
        "letterSpacing": { "value": "-5%", "type": "letterSpacing" }
      }
    }
  }
}

반면에, true로 설정하면 fontFamily, fontSize 등의 토큰들이 어떤 토큰을 참조했는지 함께 추출된다.

preserveRawValue 옵션

preserveRawValue 옵션도 expand로 시작하는 옵션들과 비슷한데, 이 경우에는 기존에 참조하던 형태를 그대로 가져온다.

light 테마 preserveRawValue 옵션 사용해서 추출하기 npx token-transformer input.json light.json global,light global --preserveRawValue=true

{
  "bg": {
    "default": {
      "value": "#ffffff",
      "type": "color",
      "rawValue": "{colors.white}"
    }
  }
}

false인 경우에 rawValue 필드가 없다.

config 파일로 실행하기

사실상 config를 읽어서 실행하는게 아니라, 직접 실행 방식을 정의해야 한다.

tt.config.js

const fs = require('fs');
const path = require('path');
const { transformTokens } = require('token-transformer');

// 추출 대상 파일 경로
const filePath = 'src/tokens';
const dir = path.join(__dirname, filePath);
// 만약 없다면 생성
if (!fs.existsSync(dir)) {
  fs.mkdirSync(dir, { recursive: true });
}

// 변환 옵션
const transformerOptions = {};

// 파일 읽기
fs.readFile('tokens.json', 'utf8', (err, data) => {
  if (err) throw err;
  const tokens = JSON.parse(data);

  // $metadata에 token key가 있음
  const tokenKeys = [...tokens.$metadata.tokenSetOrder];

  tokenKeys.forEach((key) => {
    // 변환 작업
    const resolved = transformTokens(
      tokens, // 변환할 파일
      key === 'light' || key === 'dark' ? ['global', key] : tokenKeys, // 참조 대상
      [...tokenKeys].filter((k) => k !== key), // 추출 제외 대상
      transformerOptions // 변환 옵션
    );

    // 파일 생성
    fs.writeFileSync(
      `${filePath}/${key}.json`,
      JSON.stringify(resolved),
      (err) => {
        if (err) throw err;
      }
    );
  });
});

이후 node로 config 파일을 실행하면 된다.

node tt.config.js

내가 참여하고 있는 사이드 프로젝트에서 디자인 시스템을 구축하고 있다. 디자인의 일관성 유지와 프론트엔드 개발자의 개입없이 Figma에서 변경된 디자인이 프론트엔드에 바로 적용되는 것을 목표로 한다.

변경된 디자인이 프론트엔드에 바로 반영되는 것은 커뮤니케이션 비용의 절약으로 이어지며, 디자이너와 개발자는 각자의 역할에 집중할 수 있게 된다.

디자인 시스템이란?

디자인 시스템이란 일관성 있는 디자인을 유지하기 위해 재사용할 수 있는 디자인 요소들을 구성하는 것이다.

프론트엔드에서 재사용되는 코드 블럭을 컴포넌트로 만들어서 사용하는 것처럼, Figma에서도 컴포넌트를 만들어 블럭을 쌓아가는 형태로 페이지를 만들 수 있다.

여기에 파란색 확인 버튼이 있다.

이 버튼이 약 100개의 페이지에서 사용되었다고 가정하고, 만약 누군가 확인 버튼을 초록색으로 변경해달라고 한다면 어떻게 될까?

1. 컴포넌트 사용 X : 등록 버튼이 포함된 100개의 페이지를 찾아서 버튼 색상 변경
2. 컴포넌트 사용 O : 원본 컴포넌트의 색상을 초록색으로 변경하면 확인 버튼을 사용한 모든 페이지에 적용

조금 극단적인 예시였으나, 디자인 요소들을 컴포넌트로 생성해서 사용하는 것이 훨씬 생산적이고 효율적이라는 것을 어필하고 싶었다.

그래서 프론트엔드는 뭘 해야하는데?

Figma에서는 컴포넌트를 제작하는데 기본이 되는 설정 값들 spacing(간격), color(색상), typography(문자) 등을 Tokens Studio 플러그인을 이용해 값을 설정한다.

디자인 요소 값들은 json 파일로 추출할 수 있으며, 이 파일을 프론트엔드에서 사용한다. json 파일은 직접 추출할 수도 있으나 GitHub 저장소와 연동이 가능하다!

따라서 프론트엔드 개발자가 해야할 일은 아래와 같다.

1. Figma와 GitHub 연동
2. json 파일 변환 작업
3. GitHub Actions 구성해서 자동 PR 생성하기

3번 GitHub Actions 구성하는 작업은 필수는 아니지만, 프론트엔드 개발자의 편의를 위해 구성하는 것이 좋다. 신규 커밋을 감지해서 변환 파일을 생성하고 main 브랜치에 merge 하는 과정을 자동화하면 개발자의 일이 줄어든다!

json 파일을 왜 변환해야 돼?

디자인 관련 요소들이 정리되어 있는 json 파일을 왜 변환해야 하는가에 대한 의문이 생길 수 있다.

Figma
├── global/
│   └── colors/
│       ├── black
│       ├── white
│       └── gray/
│            ├── 100
│            ├── 200
│            └── ...
├── light/
│   └── bg/
│       ├── primary 
│       ├── secondary
│       └── ...
└── dark/
    └── bg/
        ├── primary 
        ├── secondary
        └── ...

Figma에서 추출된 json 파일 예시이다. (각 프로젝트마다 구조가 다를 수 있다.)

보통의 경우 디자인을 할 때, global (혹은 core) 같은 베이스가 되는 녀석을 두고 light와 dark는 global을 참조해서 디자인 작업을 한다.

{
  "light": {
    "bg": {
      "primary": {
        "value": "{colors.white}",
        "type": "color"
      },
      "secondary": {
        "value": "{colors.gray.100}",
        "type": "color"
      }
    }
}

추출되는 json 파일이 이런 형태인데, 이대로는 참조하는 global 의 값을 읽어올 수 없어서 변환 작업을 거쳐야한다.

이제 Figma와 GitHub 연동부터 시작해보자!

Figma와 GitHub 연동

GitHub와 연동하기에 앞서, GitHub 계정이 하나 필요하다. 디자이너 혹은 디자인 팀에서 사용할 계정을 별도로 생성하는 것을 추천한다. 디자인 관련된 commit, push가 발생하는데, 개인적으로는 이를 관리하려면 별도의 계정이 있는게 좋다고 생각한다.

Figma와 GitHub 연동하는 순서는 아래와 같다.

1. 저장소 생성
2. GitHub Token 생성
3. Figma에 정보 입력

저장소 생성

나는 design 저장소를 하나 생성했다.

GitHub Token 생성

아래의 순서대로하면 토큰을 생성하는 화면이 나온다.

settings / Developer settings / Personal access tokens / Tokens (classic)

Generate new token (classic)을 선택하면 된다.

나는 토큰 이름을 design 으로 했고, 저장소에 대한 읽기 쓰기 정도의 권한을 설정하고 토큰을 생성했다.

생성된 토큰을 Figma에 입력해야하기 때문에 복사해둔다.

Figma에 정보 입력

Tokens Studio를 키고, Settings 에서 Add new 버튼을 누르고, GitHub을 선택한다.

• Name : GitHub 계정이름
• Personal Access Token : GitHub 토큰
• Repository : GitHub 저장소 주인 / 저장소 이름
• Branch : json 파일을 push할 브랜치
• File Path : json 파일명 (확장자 꼭 붙이기)

연동이 완료되었고, 임시 값을 추가한 후 GitHub에 push를 해보자!

Tokens에서 Tools를 누르면 파일을 불러오거나 추출할 수 있는데, Load from file/folder or preset 을 누른다.

Preset을 로드해주면 된다.

그러면 이런 형태의 임시 값들이 불러와지고, 하단에 파란색으로 표시되어있는 업로드 버튼을 누르면 GitHub에 push 할 수 있다.

json 파일 변환 작업

Tokens Studio 공식문서에 따르면 아래의 순서대로 변환 작업을 진행하면 된다.

1. Token Transformer
2. Style Dictionary

CSS-in-JS를 사용한다면 Token Transformer만 사용해서 변환하면 되고, CSS를 사용한다면 Style Dictionary를 사용해야 한다.

Style Dictionary는 CSS, SCSS, JavaScript, TypeScript 등 다양한 언어를 지원하기 때문에 옵션 값들이 다양하다.

하지만 나는 CSS-in-JS를 사용하기 때문에 간단하게 Token Transformer만 사용해서 변환 작업을 했다.

Style Dictionary는 공식문서가 잘 되어있으니 사용하실 경우에 참고하세요!

Token Transformer로 변환하기

npx token-transformer tokens.json ./src/global.json global

기본이 되는 global을 변환한다고 했을 때, 실행하는 명령어이다.

Token Transformer 사용 방법에 대한 자세한 내용은 Token Transformer 사용하기에서 확인할 수 있습니다.

{
  "button": {
    "primary": {
      "background": {
        "value": "#5a67d8",
        "type": "color"
      },
      "text": {
        "value": "#ffffff",
        "type": "color"
      }
    },
    "borderRadius": {
      "value": 8,
      "type": "borderRadius"
    },
    "borderWidth": {
      "value": 8,
      "type": "borderWidth"
    }
  },
}

명령어를 실행하면, 이런 형태로 참조가 아닌 값 자체를 넣어준다.

GitHub Actions 구성해서 자동 PR 생성하기

GitHub Actions의 실행 순서는 아래와 같다.

1. design 브랜치의 tokens.json push 감지
2. token transformer로 변환 작업 후 새로운 commit을 생성, push
3. main에 PR을 생성

name: Create PR from design to main

# design 브랜치의 tokens.json 파일에 대한 push 감지
on:
  push:
    branches:
      - design
    paths:
      - 'tokens.json'

jobs:
  createPullRequest:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      # 디자인 파일 변환 후 생성된 파일도 push해서 main 브랜치로 병합하는 PR을 생성
      - name: Run Token Transformer
        run: |
            npx token-transformer tokens.json ./src/global.json global
            git config --global user.name "GitHub 디자인 계정 이름" 
            git config --global user.email "GitHub 디자인 계정 이메일"
            git add .
            git commit -m '피그마 디자인 파일 변환'
            git push
        env: 
            GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
      - name: Create Pull Request
        run: gh pr create -B main -H design --title '💄 디자인 토큰 업데이트' --body '디자인 토큰이 업데이트 후 변환작업을 수행했습니다.'
        env:
            GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

저장소 설정 작업하기

위 파일을 보면 GITHUB_TOKEN을 secrets 환경 변수에서 읽어오는데, 이 부분도 저장소에 설정을 해줘야한다.

Settings / Secrets and variables / Actions

저장소의 설정으로 들어가서, Actions의 새로운 변수를 추가해준다.

Name에 ACCESS_TOKEN을 입력하고, Secret에는 초기에 만들었던 GitHub 토큰 값을 넣어주면 된다.

그리고 actions runner가 저장소에 신규 commit을 생성하고 push하는 권한도 설정해줘야한다.

Settings / Actions / General

Read and write permissions에 체크하고 저장하면 된다.

마지막으로는 기존의 design 브랜치에는 yml 파일이 없기 때문에, rebase를 하거나 브랜치를 삭제했다가 Figma에서 다시 push를 해야 actions가 실행된다.

Figma에서 Push를 하면?

Github Actions가 잘 수행되어 PR이 생성된다! 🥳

마무리

Figma 토큰을 프론트엔드에서 사용할 수 있게 GitHub과 연동하고 변환하는 작업에 대한 자료가 많이 없어서 글을 쓰게 됐다.

사실 GitHub Actions를 사용하지 않는다면, tokens.json을 프론트엔드에서 쓸 수 있도록 변환 작업을 하는 것 자체는 매우 간단하다. 하지만 자동화를 해두면 생산성이 올라가니까!

GitHub Actions를 처음 사용하다보니 많은 실패를 겪었다.

• runner는 정상적으로 수행했으나 PR을 생성하지 않고 main에 바로 merge 해버리기도 했으며,
• runner가 commit을 수행하기 위해서 권한 설정하는 것도 몰랐고,
• 특히 PR을 생성할 때 body가 없으면 오류 발생하는 것도 몰랐다.

이번 경험 덕분에 GitHub Actions와 친해질 수 있어서 좋았다.

혹시라도 Figma와 GitHub을 연동하는 과정에서 자동화를 하고자 하는 분이 계시다면, 나와 같은 실수로 시간을 허비하지 않길 바라며,,🙏

각 상태에 따라 사용자에게 보여줄 화면이 다르기 때문입니다.

const getUserInfo = () =>
  new Promise((resolve) =>
    setTimeout(
      () => resolve({ name: '서나무', job: '프론트엔드 개발자' }),
      1000,
    ),
  );

여기에 1초 후에 사용자 정보를 반환하는 getUserInfo 함수가 있습니다.

더 정확히 표현하면 위 함수는 Promise를 반환하는데, 반환된 Promise가 1초 후에 resolve 처리를 합니다.

getUserInfo 함수를 통해 받은 데이터를 화면에 보여주는 코드를 작성해볼까요?

import React, { useState, useEffect } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserInfo = async () => {
      setLoading(true); // 로딩 시작
      try {
        setUser(await getUserInfo()); // 상태 업데이트
      } catch (error) {
        setError(error); // 에러 처리
      } finally {
        setLoading(false); // 로딩 종료
      }
    };
    fetchUserInfo();
  }, []);

  if (loading) return <div>로딩중...</div>;
  if (error) return <div>오류가 발생했습니다.</div>;
  return (
    <div>
      <p>이름: {user?.name}</p>
      <p>직업: {user?.job}</p>
    </div>
  );
};

1초 동안은 로딩중...이라는 문구가 보여지고, 1초 후에 사용자 정보를 화면에 출력합니다.

만약 비동기 함수 호출에 따른 상태 관리를 한 번만 한다면 위의 코드를 사용해도 괜찮다고 생각합니다.

하지만 서버로부터 데이터를 받아와야 하는 경우가 많아진다면, 비동기 처리 상태를 관리하는 로직을 추상화하는 것이 필요해집니다.

1. Hook으로 분리하기

비동기 처리를 하는 함수를 파라미터로 받아옵니다.

그리고 기존에 getUserInfo를 대체하기만 하면 끝입니다!

const useFetch = (fetchCallback) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    try {
      setData(await fetchCallback());
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return {
    loading,
    error,
    data,
    refetch: fetchData,
  };
};

사용하는 방법은 매우 간단하며,

const UserProfile = () => {
  const { data, error, loading } = useFetch(getUserInfo);
  if (loading) return <div>로딩중...</div>;
  if (error) return <div>오류가 발생했습니다.</div>;
  return (
    <div>
      <p>이름: {data?.name}</p>
      <p>직업: {data?.job}</p>
    </div>
  );
};

사용자 정보가 아닌, 게시글 정보, 댓글 정보 등 다양한 비동기 처리 시 상태를 관리하기 쉬워졌습니다.

2. useReducer로 상태 업데이트 로직 분리하기

현재 useFetch hook에서 개선해야 할 점들이 보입니다.

• 여러 개의 useState를 사용
• 상태를 업데이트하는 로직이 종속되어 있음

useReducer는 여러 개의 상태를 관리할 수 있으며, action이라는 객체로 상태를 업데이트 하는 로직을 분리합니다.

const useFetchReducer = (state, action) => {
  switch (action.type) {
    case 'LOADING': // loading 중
      return {
        loading: true,
        error: null,
        data: null,
      };
    case 'ERROR': // 비동기 처리 reject(실패)
      return {
        loading: false,
        error: action.error,
        data: null,
      };
    case 'SUCCESS': // 비동기 처리 resolve(성공)
      return {
        loading: false,
        error: null,
        data: action.data,
      };
    default:
      throw Error(`[useFetch] ${action.type} is not valid`);
  }
};

상태 변화를 조작하는 reducer 함수입니다.

action의 type을 받아서, type에 따라 상태를 반환합니다.

const useFetch = (fetchCallback) => {
  const [state, dispatch] = useReducer(
    useFetchReducer, // 상태 조작 함수
    { // 상태 초기화
      loading: false,
      error: null,
      data: null,
    }
  );

  const fetchData = async () => {
    dispatch({ type: 'LOADING' });
    try {
      dispatch({ type: 'SUCCESS', data: await fetchCallback() });
    } catch (error) {
      dispatch({ type: 'ERROR', error });
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return {
    ...state,
    refetch: fetchData,
  };
};

setState를 사용하지 않고, dispatch를 사용해 상태를 조작합니다.

이 외에는 기존의 useFetch와 크게 다른점이 없으며, 사용법도 동일합니다.

만약 hook으로 분리하지 않았다면 비동기 처리를 하는 모든 로직을 찾아 수정했을텐데, 하나의 hook으로 관리하니 유지보수도 용이해졌습니다.

3. TypeScript로 마이그레이션

JavaScript는 타입이 없는 언어입니다.

타입이 없다는 것은 유연하다고 볼 수도 있고, 안정성이 보장되지 않는다고 볼 수 있다고 생각합니다.

TypeScript를 사용해 타입을 설정하면, 런타임 오류를 최소화하고 코드의 안정성을 향상시킬 수 있습니다.

import React, { useReducer, useEffect } from 'react';

// State와 Action에서 공통으로 사용
interface BaseState<D, E> {
  error?: E | null;
  data?: D | null;
}

// State 타입
interface UseFetchState<D, E> extends BaseState<D, E> {
  loading: boolean;
}

// Action 타입
interface UseFetchAction<D, E> extends BaseState<D, E> {
  type: 'LOADING' | 'ERROR' | 'SUCCESS';
}

const useFetchReducer = <D, E>(
  state: UseFetchState<D, E>,
  action: UseFetchAction<D, E>,
): UseFetchState<D, E> => {
  switch (action.type) {
    case 'LOADING':
      return {
        loading: true,
        error: null,
        data: null,
      };
    case 'ERROR':
      return {
        loading: false,
        error: action.error,
        data: null,
      };
    case 'SUCCESS':
      return {
        loading: false,
        error: null,
        data: action.data,
      };
    default:
      throw Error(`[useFetch] ${action.type} is not valid`);
  }
};

// 제네릭으로 반환 데이터와 오류의 타입 지정
const useFetch = <D, E>(fetchCallback: () => Promise<D>) => {
  const [state, dispatch] = useReducer(useFetchReducer<D, E>, {
    loading: false,
    error: null,
    data: null,
  } as UseFetchState<D, E>);

  const fetchData = async () => {
    dispatch({ type: 'LOADING' });
    try {
      dispatch({ type: 'SUCCESS', data: await fetchCallback() });
    } catch (error) {
      dispatch({ type: 'ERROR', error });
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return {
    ...state,
    refetch: fetchData,
  };
};

reducer 함수의 state, action의 타입을 지정해주는 것과 제네릭으로 데이터와 오류 타입을 추상화했습니다.

interface UserInfo {
  name: string;
  job: string;
}

const getUserInfo = () =>
  //❗Promise 반환 타입 정의
  new Promise<UserInfo>((resolve, reject) =>
    setTimeout(
      () => resolve({ name: '서나무', job: '프론트엔드 개발자' }),
      1000,
    ),
  );

Promise가 반환하는 데이터 타입을 UserInfo로 설정해줍니다. 타입을 지정해주지 않으면 unknown으로 추론되기 때문입니다.

기존에는 함수의 반환 타입을 지정해줬는데, 댓글로 new Promise<T>으로 타입 지정해주는 방법을 알려주셔서 수정했습니다. 감사합니다.

import { useState, useEffect } from 'react';

export default function App() {
  // 사용자가 입력한 값을 담을 state
  const [email, setEmail] = useState('');

  // input이 변경되면 값을 email에 저장
  const onChangeEmail = (e) => {
    setEmail(() => e.target.value);
  };

  // email 유효성 결과를 담을 state
  const [emailValid, setEmailValid] = useState('');

  // email 유효성 검사 함수
  const emailRule = (v = '') => {
    if (v === '') return;
    if (!v.includes('@')) {
      return '형식이 올바르지 않습니다.';
    }
  };

  // email이 변경되면 유효성 검사
  useEffect(() => {
    if (!email) return;
    setEmailValid(() => emailRule(email));
  }, [email]);

  return (
    <div>
      <div>
        <label htmlFor='email'>이메일</label>
        <input
          id='email'
          type='text'
          value={email}
          onChange={onChangeEmail}
          placeholder='email@example.com'
        />
        <p style={{ color: 'red' }}>{emailValid}</p>
      </div>
      <button>Sing up</button>
    </div>
  )
}

만약 여기서 비밀번호도 입력받으면 어떻게 될까? 말해 뭐해? 코드가 2배가 된다.

Input Component

일단 iuput 태그를 컴포넌트로 만들자!

import React from "react";

const Input = ({
  id = Math.floor(Math.random() * 10000 + 1), // random 아이디 부여
  type = 'text',
  value = '',
  onChange,
  label = '',
  placeholder = '',
  disabled = false,
  valid = '', // 유효성 검사 결과
}) => {
  return (
    <div>
      <div>
        <label htmlFor={id}>{label}</label>
      </div>
      <input
        id={id}
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        disabled={disabled}
      />
      <p style={{color: 'red'}}>{valid}</p>
    </div>
  );
};

export default React.memo(Input);

React.memo를 사용했는데, props가 변경되지 않으면 컴포넌트를 재렌더링 하지 않도록 최적화를 한 것이다.

useInput hook

이제 state와 유효성 검사 관련 로직을 hook으로 분리해보자.

import { useState, useEffect, useCallback } from 'react';

// 초기 값, 유효성 검사 함수를 받음
const useInput = (initValue = '', rule) => {
  const [value, setValue] = useState(initValue);
  const [valid, setValid] = useState('');
  const onChange = useCallback((e) => {
    setValue(() => e.target.value);
  }, []);
  // value가 변경되면 유효성 검사하기
  useEffect(() => {
    if (rule) {
      setValid(() => rule(value));
    }
  }, [value]);
  return {
    value,
    setValue,
    onChange,
    valid,
  };
};

export default useInput;

Input + useInput

이제 Input 컴포넌트와 useInput hook을 사용해서 코드를 간결하게 작성해보자.

// Component
import Input from '../components/form/Input';

// hook
import useInput from '../hooks/useInput';

export default function App() {
  const {
    value: email,
    valid: validEmail,
    onChange: onChangeEmail,
  } = useInput('', emailRule);
  return (
    <div>
      <Input
        label='이메일'
        value={email}
        onChange={onChangeEmail}
        valid={validEmail}
        placeholder='email@example.com'
      />
      <button>Sing up</button>
    </div>
  );
}

const emailRule = (v = '') => {
  if (v === '') return;
  if (!v.includes('@')) {
    return '형식이 올바르지 않습니다.';
  }
};

input이 여러 개가 생겨도 코드가 2배로 늘어날 일은 없어졌다.

Intl 개체는 ECMAScript 국제화 API의 네임스페이스로, 언어 구분 문자열 비교, 숫자 형식, 날짜 및 시간 형식을 제공합니다. 출처: [MDN] Intl

Intl API를 사용하면 각 나라의 언어와 표현에 맞게 날짜 혹은 시간 등을 표시해줄 수 있다.

RelativeTimeFormat

RelativeTimeFormat를 이용하면 각 나라의 언어에 맞게 N일 전 N days age 이렇게 시간을 나타낼 수 있다.

// 인스턴스 생성할 때 언어 설정
const formatter = new Intl.RelativeTimeFormat('ko');

// 오늘과 1년 전 날짜의 차이를 구한다.
// month는 index로 설정해야해서 12월 달의 index인 11을 넣어줘야한다.
const passed = new Date() - new Date(2021, 11, 16); 

// passed를 하루 단위로 나눔
const passedForDay = Math.floor(passed / (1000 * 60 * 60 * 24));

const diff = formatter.format(
  -passedForDay, // 음수는 지난 날짜, 양수는 남은 날짜로 표현한다.
  'day', // 포맷을 'day'로 설정한다.
);

console.log(diff); // 365일 전

지금과 1년 전의 날짜 차이를 콘솔에 한국어로 출력하도록 했다.

// 언어를 영어로 설정
const formatter = new Intl.RelativeTimeFormat('en-US'); // 365 days ago

// 날짜를 양수로 설정
const diff = formatter.format(passedForDay, 'day'); // 365일 후

이렇게 간단하게 옵션을 변경해보면서 출력되는 결과를 확인해볼 수 있다.

generateTimeString

라이브러리를 사용하지 않고 RelativeTimeFormat를 사용해서 지나간 날짜를 똑똑하게 나타내는 함수를 만들어보자!

참고로 날짜 관련된 라이브러리는 Moment.js Day.js 등이 있으며 Moment.js는 더 이상 업데이트가 이루어지지 않을 것이라고 한다.

const generateTimeString = (time, lang = 'ko') => {
  const formatter = new Intl.RelativeTimeFormat(lang, {
    numeric: 'always',
  });
  const passed = new Date() - new Date(time);
}

generateTimeString 함수는 시간과 언어를 파라미터로 받는다. 언어는 한국어를 기본 값으로 설정했다.

nemeric 옵션은 날짜 형식을 어떻게 표현할지 설정할 수 있다.

nemeric 옵션 설정에 따른 결과

• auto : 어제, 그저께
• always : 1일 전, 2일 전

시간 표현 형식

시간을 어떻게 표현할지 형식을 정해서 해당 구간에 맞는 결과를 줘야한다.

한 달의 기준이 29일, 30일, 31일 이렇게 다양하니, 한 달이 지나가면 연월일로 표시하도록 했다.

시간 단위 체크하기

시간 표현 형식에 맞게 날짜를 표현하려면 각 시간의 단위를 체크해야 한다.

JavaScript는 시간의 단위가 millisecond인 점을 유의해야 한다.

우선 1달은 30이라고 가정했으며, 구간의 조건을 파악해보자.

시간 단위를 체크하기 위해 객체를 만들고, 객체 안에 함수를 선언했다.

const checkTime = {
  isSecond: (time) => time < 60000,
  isMinute: (time) => 60000 <= time && time < 3600000,
  isHour: (time) => 3600000 <= time && time < 86400000,
  isDay: (time) => 86400000 <= time && time < 2592000000,
  isOverOneMonth: (time) => 2592000000 <= time,
};

그리고 각 조건을 체크해서 각 시간대에 맞는 문자열을 return 해도록 했다.

const generateTimeString = (time, lang = 'ko') => {
  const formatter = new Intl.RelativeTimeFormat(lang, {
    numeric: 'always',
  });
  const passed = new Date() - new Date(time);
  // 조건 추가
  if (checkTime.isSecond(passed)) {
    return '1분 미만';
  }
  if (checkTime.isMinute(passed)) {
    return '1시간 미만';
  }
  if (checkTime.isHour(passed)) {
    return '1일 미만';
  }
  if (checkTime.isDay(passed)) {
    return '1달 미만';
  }
  if (checkTime.isOverOneMonth(passed)) {
    return '1달 이상';
  }
};

테스트 해보기

const second = new Date();
second.setSeconds(second.getSeconds() - 1);
console.log(generateTimeString(second)); // 1분 미만

const minute = new Date();
minute.setMinutes(minute.getMinutes() - 1);
console.log(generateTimeString(minute)); // 1시간 미만

const hour = new Date();
hour.setHours(hour.getHours() - 1);
console.log(generateTimeString(hour)); // 1일 미만

const yesterday = new Date();
yesterday.setHours(yesterday.getHours() - 24);
console.log(generateTimeString(yesterday)); // 1달 미만

const dayBeforYesterday = new Date();
dayBeforYesterday.setHours(dayBeforYesterday.getHours() - 48);
console.log(generateTimeString(dayBeforYesterday)); // 1달 미만

const month = new Date();
month.setMonth(month.getMonth() - 1);
console.log(generateTimeString(month)); // 1달 이상

계산하기

이제는 시간대에 맞게 계산을 해줘야한다.

시간 차이가 1초대인데, 1시간 단위로 시간을 계산해서 출력하면 안되기 때문이다.

이번에도 객체를 선언하고, 객체 안에 시간단위에 맞게 계산해주는 함수들을 선언했다.

const calcTime = {
  second: (time) => Math.floor(time / 1000),
  minute: (time) => Math.floor(time / 60000),
  hour: (time) => Math.floor(time / 3600000),
  day: (time) => Math.floor(time / 86400000),
};

이제 각 단위에 맞게 시간을 계산한 결과를 return 해주면 끝이다!

const generateTimeString = (time, lang = 'ko') => {
  const formatter = new Intl.RelativeTimeFormat(lang, {
    numeric: 'always',
  });
  const passed = new Date() - new Date(time);
  if (checkTime.isSecond(passed)) {
    // 초 단위
    return formatter.format(-calcTime.second(passed), 'second');
  }
  if (checkTime.isMinute(passed)) {
    // 분 단위
    return formatter.format(-calcTime.minute(passed), 'minute');
  }
  if (checkTime.isHour(passed)) {
    // 시간 단위
    return formatter.format(-calcTime.hour(passed), 'hour');
  }
  if (checkTime.isDay(passed)) {
    // 일 단위
    return formatter.format(-calcTime.day(passed), 'day');
  }
  if (checkTime.isOverOneMonth(passed)) {
    // yyyy년 mm월 dd일
    return new Intl.DateTimeFormat(lang, {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    }).format(new Date(time));
  }
};

테스트 해보기에 있는 코드를 실행시켜보자!

1초 전
1분 전
1시간 전
1일 전
2일 전
2022년 11월 16일

콘솔 출력 결과다. 의도한 대로 시간대에 맞게 잘 출력해주고 있다.

const formatter = new Intl.RelativeTimeFormat(lang, {
  numeric: 'auto',
});

numeric을 auto로 바꿔보고 다시 실행해보자.

1초 전
1분 전
1시간 전
어제
그저께
2022년 11월 16일

1일 전을 어제, 2일 전을 그저께로 표현해주고 있다.

기존 코드 예시

import { useState } from "react";
import Modal from "../components/modal/modal";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const open = () => {
    setIsOpen(() => true);
  };
  const close = () => {
    setIsOpen(() => false);
  };
  return (
    <div>
      <button onClick={open}>open modal</button>
      <Modal open={isOpen}>
        <p>삭제하시겠습니까?</p>
        <div>
          <button onClick={close}>OK</button>
          <button onClick={close}>Cancle</button>
        </div>
      </Modal>
    </div>
  )
}

Modal 컴포넌트는 props로 받은 isOpen이 true일 경우에만 모달을 보여주고, false인 경우 null을 반환해서 아무것도 렌더링 되지 않도록 했다.

이렇게하면 모달을 사용하는 모든 화면 혹은 컴포넌트에서 모달의 상태 값을 가지고 있어야 하는데, 이 부분이 너무 효율적이지 않았다.

이럴 때는 hook을 만들어서 사용하자!

Modal Component

먼저 모달 컴포넌트를 수정했다.

기존에는 props로 isOpen을 받아서 렌더링 여부를 모달 컴포넌트 내부에서 결정했지만, 이 일을 hook에게 위임할 예정이다.

// css
const modalWrapStyle = {
  width: '100%', 
  height: '100vh', 
  overflow: 'hidden', 
  position: 'fixed', 
  top: 0, left: 0, 
  backgroundColor: 'rgba(0,0,0,0.3)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  textAlign: 'center'
}

const modalStyle = {
  width: 380, 
  padding: 20, 
  backgroundColor: '#fff'
}

// 어떠한 작업도 하지 않고 모달을 보여주는 역할만 함
export default function Modal({ onClose, children }) {
  return (
    <div 
      className="modal"
      style={{...modalWrapStyle}}
      onClick={onClose}
    >
      <div 
        className="modal_container"
        style={{...modalStyle}}
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>
  )
}

class명이 modal인 div는 모달의 외부 배경이다.

배경을 클릭하면 모달이 닫히도록 할 것이기 때문에 onClick 이벤트 발생시 hook에서 받아온 onClose 함수를 호출해서 모달을 닫는다.

class명이 modal_container인 div가 모달이다.

modal_container를 클릭하면 부모에게 이벤트가 전달되기 때문에 onClick={(e) => e.stopPropagation()}로 이벤트가 전달되는 것을 막았다.

useModal hook

모달의 상태 값을 가지며 제어할 수 있는 useModal hook이다.

import React, { useCallback, useState } from 'react';
import Modal from '../components/modal/modal';

// `useBlur` props로 모달 외부를 클릭하면 모달을 닫을지 선택하도록 했다.
const useModal = ({ useBlur = true } = {}) => {
  // 모달의 렌더링 여부를 설정할 상태 값
  const [isOpen, setIsOpen] = useState(false);

  // 모달 열기
  const open = useCallback(() => {
    setIsOpen(() => true);
  }, []);

  // 모달 닫기
  const close = useCallback(() => {
    setIsOpen(() => false);
  }, []);

  // isOpen이 true라면 Modal 컴포넌트를 반환, false라면 null을 반환
  return {
    Modal: isOpen
      ? ({ children }) => (
          <Modal onClose={useBlur ? close : null}>{children}</Modal>
        )
      : () => null,
    open,
    close,
    isOpen,
  };
};

export default useModal;

return 할 때 자체적으로 isOpen을 체크해서 true일 경우에만 Modal 컴포넌트를 반환해주고, false인 경우에는 null을 반환하도록 한다.

useModal 사용하기

useModal hook을 사용하면 이렇게 간단하게 모달 컴포넌트를 사용할 수 있게 된다.

import useModal from '../hooks/useModal';

export default function App() {
  const { Modal, open, close } = useModal();

  return (
    <div>
      <button onClick={open}>open modal</button>
      <Modal>
        <p>삭제하시겠습니까?</p>
        <div>
          <button onClick={close}>OK</button>
          <button onClick={close}>Cancle</button>
        </div>
      </Modal>
    </div>
  )
}

isOpen으로 모달이 보여지는지 체크할 필요가 없어졌으며, Modal 컴포넌트는 isOpen이 true일 때만 보여지는 것을 보장받는다.

React를 사용해서 개발을 하면서 항상 드는 의문이 있었다.

"비동기 에러를 처리하는 더 좋은 방법이 없을까? 정말 이게 최선일까?"

내가 비동기 에러를 처리하던 방법

내가 비동기 에러를 처리하던 방법을 설명하기 위해 간단한 코드를 작성했다.

api > users.js

// 사용자 목록
const users = [
  {
    id: 'A',
    name: 'UserA',
    email: 'A@example.com'
  },
  {
    id: 'B',
    name: 'UserB',
    email: 'B@example.com'
  },
  {
    id: 'C',
    name: 'UserC',
    email: 'C@example.com'
  }
];

// 사용자 목록을 가져옴
export const getAllUsers = (rejected = false) => new Promise((resolve, reject) => {
  setTimeout(() => {
    // reject 여부 옵션이 true면
    if (rejected) {
      // Promise reject 처리 (실패)
      reject(new Error('Error!'));
      return;
    }
    // reject 여부 옵션이 false면
    // Promise resolve 처리 (성공)
    resolve(users);
  }, 2000);
});

실제로 서버와 통신하는 코드를 작성할 수 없어서, rejected 여부를 옵션으로 받아서 이에 따라 성공, 실패 처리를 하는 함수를 만들었다.

성공시 사용자 목록을 반환하고, 실패시 Error 클래스의 인스턴스를 생성해서 에러를 발생시킨다.

views > example.jsx

import { useState } from "react";
import { getAllUsers } from "../api/users";

export default function Example() {
  const [users, setUsers] = useState([]);
  // fetch 버튼 클릭 이벤트
  const onClickFetch = async () => {
    try {
      // 사용자 정보를 가져옴
      const response = await getAllUsers(true);
      setUsers(response); // 실행 X
    } catch (error) {
      // rejected 옵션이 true이므로 catch로 에러를 잡음
      window.alert(error); // 실행 O
    }
  };
  return (
    <div>
      <button onClick={onClickFetch}>Fetch</button>
      <ul>
        {
          users.map((user) => (
            <li key={user.id}>
              <p>Name: {user.name}</p>
              <p>Email: {user.email}</p>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

getAllUsers 함수를 사용하는 Example 컴포넌트다.

서버와 통신하는 로직 자체는 파일을 따로 분리했지만, 통신 후 에러가 발생하면 catch로 에러를 잡아서 처리해주는 코드는 화면 컴포넌트 내부에 작성할 수 밖에 없다.

항상 catch로 에러를 잡아서 처리하는 코드를 작성하면, 나중에 에러를 처리하던 방식이 alert에서 confirm으로 바뀌게 되었을 때 모든 코드를 찾아가서 수정해야 하는 불상사가 날 수 있다. 실제로 경험도 해봤다.

그래서 getAllUsers 함수를 호출한 후에 작성하는 코드들은 전부 서버 통신이 성공적으로 처리 되었을 때만 실행되는 코드임을 보장하고, 에러 발생시 다른 모듈에게 에러 처리를 위임하면 좋겠다는 생각이 들었다.

const onClickFetch = async () => {
  const response = await getAllUsers(false);
  // 비동기 처리 이후에 작성한 코드는
  // 반드시 비동기 처리가 성공했을 경우 실행되는 것을 보장받음
  setUsers(response);
};

이렇게 하면 Example 컴포넌트에서는 에러가 발생했을 때를 고려하지 않고, 명확히 해당 컴포넌트가 처리해야 할 부분에 집중할 수 있다.

이런 생각을 하게된 것은 Nestjs를 경험해봤었기 때문이다. Nestjs는 에러를 던지면, 에러 유형에 맞게 response를 보내준다.

그래서 프론트엔드에서도 에러가 발생하면 에러 담당 컴포넌트가 에러 유형에 맞게 처리를 해주도록 코드를 작성해보고 싶었다.

React 공식문서에 나와있는 Error Boundary

먼저 공식문서에서 제공해주는 방법을 찾아봤다.

에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다. 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아냅니다. 출처: [React] 에러 경계(Error Boundaries)

공식문서에 나와있는 Error Boundary 컴포넌트는 렌더링 도중에 발생하는 에러를 잡아낸다. 그리고 비동기적 코드에서 발생한 오류를 잡아내지 못한다고 나와있다.

비동기적 코드에서 발생한 오류를 잡지 못한다면 아무런 소용이 없었다.

다른 방법이 있을거라는 생각으로 검색을 해본 결과 stackoverflow에서 unhandledrejection 이벤트를 사용하면 된다는 글을 보게되었다.

unhandledrejection 이벤트

unhandledrejection 이벤트는 웹 브라우저 환경에서 사용할 수 있는 이벤트다.

처리되지 못한 Promise 거부, 즉 reject가 발생하면 이 이벤트가 발생한다.

views > example.jsx

export default function Example() {
  // 생략

  // Promise 거부가 발생하면 실행
  const captureReject = (e) => {
    // 이벤트 버블링 방지
    e.preventDefault();
    console.log(e.reason);
    console.log(e.reason instanceof Error);
  };

  useEffect(() => {
    // 이벤트 등록
    window.addEventListener('unhandledrejection', captureReject);
    return () => {
      // 컴포넌트가 사라질 때 이벤트 삭제
      window.removeEventListener('unhandledrejection', captureReject);
    }
  }, []);
  return (
    <div>
      {/* 생략 */}
    </div>
  )
}

catch로 에러를 처리하지 사용하지 않고, unhandledrejection 이벤트를 사용했다.

reason에 에러 인스턴스가 담기는데, instanceof로 Error 클래스의 인스턴스인지 확인해보면 true로 나온다.

확인 결과 unhandledrejection 이벤트를 등록하면 하위 컴포넌트에서 발생한 비동기 오류를 상위 컴포넌트에서 잡아낼 수 있다는 것을 알게되었다.

커스텀 Error Boundary

boundary > errorBoundary.jsx

import { useEffect } from "react";

export default function ErrorBoundary({ children }) {
  const captureReject = (e) => {
    e.preventDefault();

    // e.reason이 Error의 인스턴스일 경우
    if (e.reason instanceof Error) {
      window.alert(e.reason.message);
      return;
    }

    console.log('처리하지 못한 비동기 오류입니다.');
  };

  useEffect(() => {
    window.addEventListener('unhandledrejection', captureReject);
    return () => {
      window.removeEventListener('unhandledrejection', captureReject);
    }
  }, []);

  return children;
}

위에서 Example 컴포넌트에서 사용한 방법과 같으며, Example 컴포넌트에서 작성했던 unhandledrejection 이벤트 관련 코드는 지우면 된다.

이제 ErrorBoundary 컴포넌트로 Example 컴포넌트를 감싸주면 된다.

App.js

function App() {
  return (
    <ErrorBoundary>
      <Example />
    </ErrorBoundary>
  )
}

export default App;

이제 Example 컴포넌트에서 발생한 비동기 에러를 ErrorBoundary 컴포넌트에서 잡아내 처리를 해줄 수 있게 되었다! 👏👏👏

마지막으로

사실 아직까지도 "이 방법이 최선일까?"하는 의문이 남아있다.

unhandledrejection 이벤트로 잡아낸 에러에 대해 회복할 수 없는 에러라고 표현한 글이 있었기 때문이다.

대개 이런 에러는 회복할 수 없기 때문에 개발자로서 할 수 있는 최선의 방법은 사용자에게 문제 상황을 알리고 가능하다면 서버에 에러 정보를 보내는 것입니다. 출처: [모던 JavaScript 튜토리얼] 프라미스와 에러 핸들링

그래도 내가 원하는 방식으로 비동기 에러를 처리하는 방법을 생각해보고 적용해보는 과정이 재미있었다.

더 좋은 방법이 있다면 댓글로 알려주세요! 🤗

주석 또는 코멘트(comment)는 프로그래밍에 있어 내용을 메모하는 목적으로 쓰인다. 소스 코드를 더 쉽게 이해할 수 있게 만드는 것이 주 목적이며, 협업할 때 유용히 쓰인다. 컴파일러와 인터프리터에 의해 일반적으로 무시되어 프로그램에 영향을 주지 않는다. 출처: [위키백과] 주석 (프로그래밍)

쉽게 말하면 주석은 작성한 코드에 대한 설명을 적고싶을 때 사용한다.

주석의 중요성

어렴풋이,, 주석없이 함수의 이름만 봐도 어떤 일을 수행하는 함수인지 알 수 있도록 코드를 작성하는게 진정한 개발자라는 말을 들은 기억이 있다.

이 말이 틀린건 아니겠지만, 나는 개인적으로 협업을 해야하는 프로젝트에서 주석은 필수라고 생각한다.

소프트웨어는 한번 개발을 하고 뒤돌아서 끝내는게 아니다. 계속해서 수정하고 다듬어가면서 사용자의 요구사항에 맞춰가야 한다.

처음 코드는 내가 작성했어도 수정할 때는 다른 개발자가 코드를 작성할 수 있기 때문에 코드를 이해하는 시간을 줄이기 위해서는 주석을 꼼꼼하게 작성하는 습관이 필요하다. 나는 내가 짠 코드도 일주일만 지나면 까먹는다..

솔직히 나는 그동안 주석을 꼼꼼히 작성하지 않았었는데, 최근 주석의 중요성을 느끼게 되면서 자바스크립트에서 사용 가능한 다양한 주석에 대해서 소개해보려고 한다.

내가 주석의 중요성을 느끼게 된 것에 대해 먼저 작성했는데, 궁금하지 않다면 다양한 주석 알아보기부터 보면 된다.

내가 다 아는 코드야

회사에서 혼자 Vue를 사용해 프론트엔드 개발을 맡아서 진행하던 프로젝트 B가 있다.

정규 프로젝트는 아니었지만 총 22개의 페이지를 만들었으며, 각 페이지에서 필요한 기능들도 많이 개발을 해왔다.

페이지가 22개라고 하니까 정말 많아 보이지만,, 약 15개는 간단한 데이터 CRUD를 하는 단순한 페이지들이다.

처음에는 작게 시작한 프로젝트였는데 규모가 점점 커지면서 코드량이 많아졌지만 "어차피 정규 프로젝트도 아니니까", "내가 다 아는 코드야" 등의 핑계를 대면서 주석을 작성하지 않았다.

그러던 중 프로젝트 B가 중단되고,, 회사에서 기존에 C#으로 진행하던 프로젝트 A에 투입되면서 작은 버그들을 고치거나 기능을 수정하는 일을 맡게 되었다.

천 줄은 기본이지! 변수명은 item1

프로젝트 A는 3년 동안 진행되면서 수 많은 개발자들이 거쳐간 규모가 큰 프로젝트다.

화면 하나당 코드량이 기본 천 줄이었고, 많은건 삼천 줄도 넘어갔다.

그런데 item1, item2 이런 이름을 가진 변수들도 많았고, 주석이 없는 경우도 꽤 있었다. 대충 지은 변수명과 주석 없는 코드들을 보고 막막한 마음부터 들었다.

난이도 높은 버그는 아니였지만 기존 코드들을 분석하면서 원인을 파악하고 수정하다보니 꽤 오랜시간이 걸렸다.

이렇게 몇 개의 버그와 기능들을 수정하면서 주석이 정말 중요하구나.라는 것을 느끼게 되었다.

다양한 주석 알아보기

1. 기본 주석

먼저 기본 주석이다. 보통 자바스크립트 주석이라고 검색하면 나오는 주석이다.

// 한 줄 주석

/**
 * 두 줄 이상
 * 주석
 */

2. JSDoc

JSDoc은 자바스크립트 API 문서 생성기다. 자바스크립트 소스코드에 JSDoc 형식의 주석을 추가하면 API를 설명하는 HTML 문서를 생성할 수 있다. 출처: 15.9 JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기

JSDoc를 사용하면 함수의 기능, 파라미터, return 값에 대한 설명을 작성할 수 있고 해당 함수를 사용할 때 작성한 정보를 표시해줄 수 있다.

자바스크립트로 코드를 작성하면 모든 타입이 any로 추론된다. 그래서 정확히 어떤 타입의 데이터를 파라미터로 넘겨야 하는지 알려면 함수 선언부에 가서 작성된 주석을 보거나 코드를 직접 해석해야 한다.

그런데 JSDoc로 주석을 작성해두면 함수를 선언한 곳에 찾아가서 코드를 해석하지 않아도, 함수의 기능과 파라미터 타입에 대해 알 수 있어 매우 유용하다.

함수

/**
 * a와 b를 더한 결과를 반환
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 * @returns {number} a와 b를 더한 결과
 */
function plus(a, b) {
  return a + b;
}

plus함수에 대한 주석이다. 맨 첫번째 줄은 함수에 대한 설명이고, @param은 파라미터, @returns은 리턴 데이터에 대한 설명을 적을 수 있는 태그다.

파라미터에 대한 주석은 태그유형 {타입} 변수명 설명 순으로 작성하면 된다.

변수

/** @type {number} 이름 */
let name = '';

변수에 대한 주석은 태그유형 {타입} 설명 순으로 작성하면 된다.

JSDoc 참조에서 다양한 종류의 태그들을 더 볼 수 있다.

3. region

region 주석은 코드를 묶어주는 기능을 한다.

//#region 숫자 계산 함수
/**
 * a와 b를 더한 결과를 반환
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 * @returns {number} a와 b를 더한 결과
 */
 function plus(a, b) {
  return a + b;
}

/**
 * a에서 b를 뺀 결과를 반환
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 * @returns {number} a에서 b를 뺀 결과
 */
 function minus(a, b) {
  return a - b;
}
//#endregion

코드를 묶을 시작점에서 //#region 설명을 작성해주고, 끝나는 지점에는 //#endregion을 작성하면 된다.

주석을 어떻게 작성하면 잘 작성했다고 소문이 날까?

주석을 작성하는 방법을 설명하기 위해 회원가입을 처리하는 코드를 간단하게 작성해봤다.

// 닉네임
let nickname = '';
// 이메일
let email = '';
// 비밀번호
let password = '';

// 회원가입 클릭 이벤트. 회원가입 결과 콘솔에 출력
async function onClickRegister(nickname, email, password) {
  if (!isValidNickname(nickname)) {
    console.log('Invalid nickname');
    return;
  }
  if (!isValidEmail(email)) {
    console.log('Invalid email');
    return;
  }
  if (!isValidPassword(password)) {
    console.log('Invalid password');
    return;
  }
  const response = await register(nickname, email, password);
  console.log(response);
}

// 회원가입 처리
async function register(nickname, email, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Register Successful!');
    }, 2000);
  });
}

// 닉네임 유효성 검사
function isValidNickname(nickname) {
  return /^[가-힣]+$/.test(nickname);
}

// 이메일 유효성 검사
function isValidEmail(email) {
  return /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/.test(email);
}

// 비밀번호 유효성 검사
function isValidPassword(password) {
  return /^[a-z0-9_-]{6,18}$/.test(password);
}

// 코드 실행 결과를 보기 위한 임시 코드
nickname = '서나무';
email = 'seo.namu@example.com';
password = '1234qwer';

onClickRegister(nickname, email, password);

코드를 보면 회원가입 관련된 함수가 두 개나 있다.

• register : 서버와 통신해서 회원가입을 처리하는 함수
• onClickRegister : 사용자가 회원가입 버튼을 클릭했을 때 실행시킬 함수
  • 닉네임, 이메일, 비밀번호 유효성 검사
  • register 함수를 호출한 결과를 콘솔에 출력

이렇게 코드를 작성하고 나면 여러 문제들이 발생할 수 있다.

1. 변수에 다른 자료형의 데이터를 넣는 휴먼에러가 발생할 수 있다.
2. 회원가입 처리시 onClickRegister와 register 중 어떤 함수를 사용해야 하는지 알기 어렵다.
3. 각 함수가 어떤 일을 하는지 알기 위해서는 함수 선언부로 가서 주석을 확인해야 한다.
4. 나중에 혹은 다른 개발자가 파일을 열었을 때 어떤 코드들이 작성되어 있는지 한눈에 파악하기 어렵다.

그러면 주석을 사용해서 위 문제들을 해결해보자!

변수 주석 작성하기

1. let으로 선언한 변수에 다른 자료형의 데이터를 넣는 휴먼에러가 발생할 수 있다.

사실 문자열로 초기화를 해주면 타입 추론이 string으로 되지만, 변수에 대한 설명을 통해 어떤 데이터를 넣어야할지 알 수 있게 된다.

/** @type {string} 닉네임 */
let nickname = '';
/** @type {string} 이메일 */
let email = '';
/** @type {string} 비밀번호 */
let password = '';

함수 주석 작성하기

2. 회원가입 처리시 onClickRegister와 register 중 어떤 함수를 사용해야 하는지 알기 어렵다.
3. 각 함수가 어떤 일을 하는지 알기 위해서는 함수 선언부로 가서 주석을 확인해야 한다.

함수를 사용할 때 함수의 기능에 대해 이해하기 쉽고, 파라미터도 어떤 자료형을 넣어줘야 할지 바로 알 수 있다.

/**
 * 회원가입 클릭 이벤트. 회원가입 결과 콘솔에 출력
 * @param {string} nickname 닉네임
 * @param {string} email 이메일
 * @param {string} password 비밀번호
 */
async function onClickRegister(nickname, email, password) {
  if (!isValidNickname(nickname)) {
    console.log('Invalid nickname');
    return;
  }
  if (!isValidEmail(email)) {
    console.log('Invalid email');
    return;
  }
  if (!isValidPassword(password)) {
    console.log('Invalid password');
    return;
  }
  const response = await register(nickname, email, password);
  console.log(response);
}

/**
 * 회원가입 처리
 * @param {string} nickname 닉네임
 * @param {string} email 이메일
 * @param {string} password 비밀번호
 * @returns {Promise<string>} 회원가입 결과 메시지
 */
async function register(nickname, email, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Register Successful!');
    }, 2000);
  });
}

/**
 * 닉네임 유효성 검사
 * @param {string} nickname 닉네임
 * @returns {boolean} 유효성 검사 결과
 */
function isValidNickname(nickname) {
  return /^[가-힣]+$/.test(nickname);
}

/**
 * 이메일 유효성 검사
 * @param {string} email 이메일
 * @returns {boolean} 유효성 검사 결과
 */
function isValidEmail(email) {
  return /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/.test(email);
}

/**
 * 비밀번호 유효성 검사
 * @param {string} password 비밀번호
 * @returns {boolean} 유효성 검사 결과
 */
function isValidPassword(password) {
  return /^[a-z0-9_-]{6,18}$/.test(password);
}

region 주석으로 그룹화하기

4. 나중에 혹은 다른 개발자가 파일을 열었을 때 어떤 코드들이 작성되어 있는지 한눈에 파악하기 어렵다.

깔끔하게 정리되어 있어서 어떤 코드들이 있을지 파악이 가능하다.

//#region 변수
/** @type {string} 닉네임 */
let nickname = '';
/** @type {string} 이메일 */
let email = '';
/** @type {string} 비밀번호 */
let password = '';
//#endregion

//#region 이벤트
/**
 * 회원가입 클릭 이벤트. 회원가입 결과 콘솔에 출력
 * @param {string} nickname 닉네임
 * @param {string} email 이메일
 * @param {string} password 비밀번호
 */
async function onClickRegister(nickname, email, password) {
  if (!isValidNickname(nickname)) {
    console.log('Invalid nickname');
    return;
  }
  if (!isValidEmail(email)) {
    console.log('Invalid email');
    return;
  }
  if (!isValidPassword(password)) {
    console.log('Invalid password');
    return;
  }
  const response = await register(nickname, email, password);
  console.log(response);
}
//#endregion

//#region 함수
/**
 * 회원가입 처리
 * @param {string} nickname 닉네임
 * @param {string} email 이메일
 * @param {string} password 비밀번호
 * @returns {Promise<string>} 회원가입 결과 메시지
 */
async function register(nickname, email, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Register Successful!');
    }, 2000);
  });
}

/**
 * 닉네임 유효성 검사
 * @param {string} nickname 닉네임
 * @returns {boolean} 유효성 검사 결과
 */
function isValidNickname(nickname) {
  return /^[가-힣]+$/.test(nickname);
}

/**
 * 이메일 유효성 검사
 * @param {string} email 이메일
 * @returns {boolean} 유효성 검사 결과
 */
function isValidEmail(email) {
  return /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/.test(email);
}

/**
 * 비밀번호 유효성 검사
 * @param {string} password 비밀번호
 * @returns {boolean} 유효성 검사 결과
 */
function isValidPassword(password) {
  return /^[a-z0-9_-]{6,18}$/.test(password);
}
//#endregion

얕은 복사

얕은 복사는 참조타입의 변수를 직접 대입해서, 같은 메모리 주소를 참조하게 되는 것을 의미한다.

객체의 얕은 복사

// 초기 값을 가지는 init 객체
const init = {
  name: '',
  job: '',
};

// clone에 init 대입
const clone = init;
clone.name = '서나무';
clone.job = 'Frontend developer';

console.log(init);
console.log(clone);

코드를 실행시켜보면 clone 객체뿐 아니라 init 객체의 name job 도 함께 변경되었다.

배열의 얕은 복사

// 초기 값을 가지는 init 배열
const init = ['name', 'job'];

// clone에 init 대입
const clone = init;
clone[1] = 'game';

console.log(init);
console.log(clone);

코드를 실행시켜보면 clone 배열뿐 아니라 init 배열의 index1에 해당하는 요소도 함께 변경되었다.

깊은 복사

깊은 복사란 복사 대상 객체에게 새로운 메모리에 할당해서 복사 소스 객체와 다른 메모리 주소를 참조하도록 하는 것을 의미한다.

Spread 연산자 (전개 연산자)

JavaScript에서 객체와 배열을 복사할 때, spread 연산자를 사용할 수 있다.

객체

const init = {
  name: '',
  job: '',
};

const clone = { ...init };
clone.name = '서나무';
clone.job = 'Frontend developer';

console.log(init);
console.log(clone);

코드를 실행시켜보면 clone 객체의 name job만 변경된 것을 볼 수 있다.

배열

const init = ['name', 'job'];

const clone = [...init];
clone[1] = 'game';

console.log(init);
console.log(clone);

코드를 실행시켜보면 clone 배열의 index1에 해당하는 요소만 변경된 것을 볼 수 있다.

객체 Object.assign() 함수

assign 함수는 첫번째 인자로 복사 대상 객체를 넣어주고, 두번째 인자로 복사할 소스 객체를 넣어주면 된다.

const init = {
  name: '',
  job: '',
};

const clone = Object.assign({}, init);
clone.name = '서나무';
clone.job = 'Frontend developer';

console.log(init);
console.log(clone);

코드를 실행시켜보면 clone 객체의 name job만 변경된 것을 볼 수 있다.

배열 concat() 함수

concat 함수는 빈 배열을 선언하고 복사 소스 배열을 넣어주면 된다.

const init = ['name', 'job'];

const clone = [].concat(init);
clone[1] = 'game';

console.log(init);
console.log(clone);

코드를 실행시켜보면 clone 배열의 index1에 해당하는 요소만 변경된 것을 볼 수 있다.

JavaScript 깊은 복사 함수의 한계

JavaScript에서 제공하는 전개 연산자, assign함수, concat함수는 치명적인 한계가 있다.

깊이가 1인 경우에만 깊은 복사가 되고, 깊이가 깊어지는 다차원 객체, 배열의 경우에는 얕은 복사가 된다는 것이다.

const init = {
  name: '',
  job: '',
  use: {
    lang: '',
  },
};

const clone = { ...init };
clone.name = '서나무';
clone.job = 'Frontend developer';
clone.use.lang = 'JavaScript';

console.log(init);
console.log(clone);

코드 실행 결과

{ name: '', job: '', use: { lang: 'JavaScript' } } // ! 얕은 복사
{ name: '서나무', job: 'Frontend developer', use: { lang: 'JavaScript' } }

name job은 깊은 복사가 됐지만, use 객체의 lang은 얕은 복사가 됐다.

다차원 객체, 배열 깊은 복사

외부 라이브러리를 사용하지 않고 다차원 객체, 배열을 깊은 복사를 해보자.

재귀 함수 구현하기

검색을 해보니 객체와 배열이 혼합된 형태의 깊은 복사를 할 수 있는 재귀 함수 예제가 없었다.

그래서 직접 재귀 함수를 구현해봤다.

const deepCopy = (target) => {
  /**
   * 객체를 받아서 깊은 복사 후 반환하는 재귀함수
   * @param {Object} object 복사할 객체
   * @returns {Object} 복사된 객체
   */
  const deepCopyObject = (object) => {
    if (object === null || typeof object !== 'object') return object;
    const clone = {};
    for (const key in object) {
      if (Array.isArray(object[key])) {
        clone[key] = deepCopyArray(object[key]);
      } else {
        clone[key] = deepCopyObject(object[key]);
      }
    }
    return clone;
  };

  /**
   * 배열을 받아서 깊은 복사 후 반환하는 재귀함수
   * @param {Array} array 복사할 배열
   * @returns {Array} 복사된 배열
   */
  const deepCopyArray = (array) => {
    if (array === null || !Array.isArray(array)) return array;
    const clone = [];
    for (let key = 0; key < array.length; key++) {
      if (Array.isArray(array[key])) {
        clone[key] = deepCopyArray(array[key]);
      } else {
        clone[key] = deepCopyObject(array[key]);
      }
    }
    return clone;
  };

  if (typeof target === 'object' || Array.isArray(target)) {
    return Array.isArray(target)
      ? deepCopyArray(target)
      : deepCopyObject(target);
  }
  return target;
};

재귀 함수를 이용해서 다차원 객체를 깊은 복사 해보자.

const init = {
  name: '',
  job: '',
  use: {
    lang: '',
  },
  hobby: [
    {
      game: '',
    },
  ],
};

const clone = deepCopy(init);
clone.use.lang = 'JavaScript';
clone.hobby[0].game = 'Crazy Arcade';

console.log(init);
console.log(clone);

코드 실행 결과

{ name: '', job: '', use: { lang: '' }, hobby: [ { game: '' } ] }
{
  name: '',
  job: '',
  use: { lang: 'JavaScript' },
  hobby: [ { game: 'Crazy Arcade' } ]
}

깊은 복사가 잘 되었고, 이는 객체 뿐 아니라 다차원 배열도 깊은 복사가 가능하다.

JSON 객체 사용하기

JSON 객체는 두 가지 메서드를 가지고 있다.

• stringify : javascript 값을 JSON으로 변환 후 반환
• parse : JSON을 javascript 값으로 변환 후 반환

복사할 소스 객체를 stringify메서드로 JSON으로 만든 후 다시 parse메서드로 javascript 값으로 변환하면 된다.

const init = {
  name: '',
  job: '',
  use: {
    lang: '',
  },
};

const clone = JSON.parse(JSON.stringify(init));
clone.name = '서나무';
clone.job = 'Frontend developer';
clone.use.lang = 'JavaScript';

console.log(init);
console.log(clone);

JSON 메서드는 정말 느릴까?

JSON 객체의 메서드를 사용하는 것은 매우 느리다는 의견이 있어서 정말 그런지 궁금했다.

그래서 콘솔로 JSON 메서드와 내가 구현한 재귀 함수의 실행 시간을 출력해봤다.

const init = {
  'depth1-1': {
    dethp2: [
      'depth3',
      {
        depth4: '',
      },
      [
        {
          'depth5-1': '',
          'depth5-2': '',
          'depth5-3': {
            depth6: '',
          },
        },
      ],
    ],
  },
  'depth1-2': {
    dethp2: [
      'depth3',
      {
        depth4: '',
      },
      [
        {
          'depth5-1': '',
          'depth5-2': '',
          'depth5-3': {
            depth6: '',
          },
        },
      ],
    ],
  },
};

console.time('Custom recursion function');
const clone1 = deepCopy(init);
console.timeEnd('Custom recursion function');

console.time('JSON object');
const clone2 = JSON.parse(JSON.stringify(init));
console.timeEnd('JSON object');

내가 만든 재귀 함수가 훨씬 더 느리다. 🤣🤣

React로 데이터 테이블을 구현하는 과정을 기록했으며, 잘못된 정보가 있거나 설명이 부족한 부분이 있다면 댓글로 남겨주시면 감사하겠습니다! 🤗

동작하는 코드는 stackblitz에서 바로 확인해볼 수 있습니다.

컴포넌트 설계

가장 먼저 할 일은 컴포넌트를 설계하는 것입니다.

컴포넌트 설계 단계에서는 머리속으로 생각하고 있는 추상적인 기능들을 구체화합니다. 컴포넌트 설계가 미흡하면 추후 컴포넌트를 수정하는 일이 발생하고, 코드가 복잡해질 가능성이 생기기 때문에 매우 중요한 단계입니다.

저는 컴포넌트를 설계할 때 커스텀 가능성을 중점적으로 고려하는 편이며, 커스텀 가능성에 따라 장단점이 나뉘지기 때문에 컴포넌트의 목적에 따라 설정해야 합니다.

러닝커브가 높고 낮다는 의미는 내가 만든 컴포넌트를 사용하는 다른 개발자의 입장에서 적은 것 입니다. 커스텀 가능성이 높을수록 컴포넌트에 대한 깊은 이해가 있어야 의도에 맞게 컴포넌트를 사용할 수 있기 때문이죠.

기능 목록

1. 헤더 순서에 맞게 데이터 객체에서 값 넣어주기
2. 행 선택 기능 사용여부 행 선택 기능을 사용하면 checkbox가 표시되며, 사용하지 않으면 표시되지 않습니다.
3. 행 비활성화 가능 데이터 객체에 disabled: true 요소를 추가하면 행을 비활성화 시킬 수 있습니다.

이해를 돕기 위해 사진을 첨부했습니다!

Props

데이터 타입이 배열인 header와 items는 객체를 담는 배열로 아래에 자세한 설명을 작성했습니다.

headers

[
  {
    text: '컬럼명',
    value: '데이터명'
  }
]

각 컬럼을 객체로 정의하며, 컬럼의 수 만큼 배열에 넣어줘야 합니다.

위 사진을 보면 테이블 헤더에 컬럼이 3개가 있습니다.

const headers = [
  {
    text: 'Name',
    value: 'name'
  },
  {
    text: 'Version',
    value: 'version'
  },
  {
    text: 'Launch Date',
    value: 'launch'
  }
];

테이블 헤더는 이렇게 정의해줄 수 있습니다.

items

headers에서 지정한 컬럼의 수 만큼 데이터를 입력합니다. 객체 하나가 열 하나에 해당합니다.

const items = [
  {
    name: 'React',
    version: '18.2.0',
    launch: '2013-05-29'
  },
  {
    name: 'Vue',
    version: '3.2.45',
    launch: '2014-02'
  },
  {
    name: 'jQuery',
    version: '3.3',
    disabled: true,
    launch: '2006-08-26'
  },
  {
    name: 'Svelte',
    version: '3.53.1',
    launch: '2016-11-26'
  }
 ];

headers에서 name, version, launch 세 개의 컬럼을 지정했기 때문에, 데이터 객체에서 지정한 데이터명에 데이터를 넣어줍니다.

1. 컴포넌트 초기 세팅

export default function DataTable({}) {
  return (
    <table>
      <thead>
        {/* TODO 테이블 헤드 바인딩 */}
      </thead>
      <tbody>
        {/* TODO 테이블 데이터 바인딩 */}
      </tbody>
    </table>
  )
}

컴포넌트 테이블의 기본 구성 요소들을 배치합니다.

2. headers 바인딩

Props를 보면 headers는 필수 props입니다. 따라서 headers가 없다면 에러를 발생시키고, headers가 있을 경우에만 map 함수로 순환하며 테이블에 추가해줍니다.

export default function DataTable({ headers }) {
  // headers가 있는지 체크하고, 없다면 에러를 던짐
  if (!headers || !headers.length) {
    throw new Error('<DataTable /> headers is required.')
  }
  return (
    <table>
      <thead>
        <tr>
          {
            headers.map((header) => 
              <th key={header.text}>
                {header.text} {/* 컬럼명 바인딩 */}
              </th> 
            )
          }
        </tr>
      </thead>
      <tbody>
        {/* TODO 테이블 데이터 바인딩 */}
      </tbody>
    </table>
  )
}

이제 App.js에서 컴포넌트를 사용해볼까요? props로 넘겨주는 headers 배열은 headers에 있습니다.

import DataTable from "./components/dataTable";
function App() {
  return (
    <div className="App">
      <DataTable 
        headers={headers} {/* headers props 보내기 */} 
      />
    </div>
  );
}

테이블의 헤더 부분이 잘 나오네요! 😄

3. items 바인딩

데이터를 표시할 때 신경써야 하는 부분은 데이터가 헤더에 설정한 순서대로 정의되어서 오지 않을 수 있다는 점입니다.

따라서 데이터 객체에 들어있는 순서에 상관 없이 헤더에 맞는 데이터를 보여줘야 합니다.

저는 header의 value들이 담겨있는 headerKey 배열을 추가로 만들었고, 행을 표시할 때 headerKey 배열을 순회하면서 행의 요소들에 접근해서 데이터를 바인딩해줬습니다.

export default function DataTable(
  { 
    headers, 
    items = [], // items props 받기, default parameter 빈 배열로 설정
  }) {
  if (!headers || !headers.length) {
    throw new Error('<DataTable /> headers is required.')
  }
  // value 순서에 맞게 테이블 데이터를 출력하기 위한 배열
  const headerKey = headers.map((header) => header.value);
  return (
    <table>
      <thead>
        {/* ... */}
      </thead>
      <tbody>
        {
          items.map((item, index) => (
            <tr key={index}>
              {/* headerKey를 순회하면서 key를 가져옴 */}
              { 
                headerKey.map((key) => 
                  <td key={key + index}>
                    {item[key]} {/* key로 객체의 값을 출력 */}
                  </td>
                )
              }
            </tr>
          ))
        }
      </tbody>
    </table>
  )
}

데이터가 잘 출력되는지 App.js에서 데이터를 넘겨볼까요? props로 넘겨주는 items 배열은 items에 있습니다.

function App() {
  return (
    <div className="App">
      <DataTable 
        headers={headers} 
        items={items} {/* items props 보내기 */} 
      />
    </div>
  );
}

아직 비활성 행에 대한 코드를 작성하지 않아서 모두 활성화된 행으로 보여주고 있지만, 잘 출력되고 있네요! 👍

4. selectable 체크박스 바인딩

이제 행 선택 기능 사용여부에 따라서 체크박스를 보여줘야 합니다.

selectable props를 받아서 true일 경우에만 체크박스를 보여주면 되겠죠?

export default function DataTable(
  { 
    headers, 
    items = [],
    selectable = false, // selectable props 받기
  }) {
  if (!headers || !headers.length) {
    throw new Error('<DataTable /> headers is required.')
  }
  const headerKey = headers.map((header) => header.value);

  return (
    <table>
      <thead>
        <tr>
          {/* 선택 기능을 사용할 때만 바인딩 */}
          {
            selectable && <th><input type="checkbox" /></th>
          }
          {
            headers.map(
              (header) => <th key={header.text}>{ header.text }</th>
            )
          }
        </tr>
      </thead>
      <tbody>
        {
          items.map((item, index) => (
            <tr key={index}>
              {/* 선택 기능을 사용할 때만 바인딩 */}
              {
                selectable && <td><input type="checkbox" /></td>
              }
              {
                headerKey.map((key) => 
                  <td key={key + index}>{item[key]}</td>
                )
              }
            </tr>
          ))
        }
      </tbody>
    </table>
  )
}

App.js에서 props로 selectable={true}를 보내서 체크박스가 잘 출력되는지 확인해볼까요?

function App() {
  return (
    <div className="App">
      <DataTable 
        headers={headers} 
        items={items} 
        selectable={true} {/* selectable props 보내기 */} 
      />
    </div>
  );
}

체크박스가 잘 보이네요! 이제 데이터 테이블 컴포넌트를 사용하는 개발자가 원하는 경우에 따라 행 선택 여부를 제어할 수 있게 되었습니다.

5. selectable 기능 구현

드디어 Set을 사용해서 행 선택 기능을 구현할 차례입니다.

코드가 길어지는 것을 방지하기 위해 DataTable의 기존 코드들은 생략했습니다.

export default function DataTable(
  { 
    headers, 
    items = [], 
    selectable = false,
    itemKey // itemKey props 받기
  }
) {
  // itemKey가 없다면 headers의 첫번째 요소를 선택 
  if (!itemKey) {
    itemKey = headerKey[0];
  }
  // 선택한 row의 itemKey를 담은 배열
  const [selection, setSelection] = useState(new Set());
}

먼저 선택한 행의 데이터를 담을 배열을 선언해줍니다.

행 전체의 데이터를 담지 않고, itemKey에 해당하는 데이터만 배열에 담으려고 합니다.

itemKey는 props가 없을 경우 headerKey의 첫번째 요소를 선택하는데, 위의 데이터 테이블의 itemKey는 name이므로 행을 선택하면 ['React', 'Vue', 'jQuery', 'Svelte'] 와 같은 데이터가 담기게 됩니다.

단일 행 선택

단일 행을 선택했을 경우 데이터 객체에서 itemKey로 값을 받아와 넣어주게 됩니다.

export default function DataTable({ /* ... */ }) {
  const [selection, setSelection] = useState(new Set());
  const onChangeSelect = (value) => {
    // 기존의 selection으로 새로운 Set 생성
    const newSelection = new Set(selection);
    if (newSelection.has(value)) {
      // value가 있으면 삭제 (checked가 false이기 때문)
      newSelection.delete(value);
    } else {
      // value가 없으면 추가 (checked가 true이기 때문)
      newSelection.add(value);
    }
    // 새로운 Set으로 state 변경
    setSelection(newSelection);
  };
}

특정 행 체크박스 클릭시 selection에 value가 없다면 value를 추가해줍니다. 이 상태에서 또 같은 행 체크박스를 클릭하면 selection에 이미 value가 있기 때문에 기존에 있던 value를 제거하게 되는거죠.

HTML 코드

return (
    <table>
      <thead>{/* ... */}</thead>
      <tbody>
        {
          items.map((item, index) => (
            <tr 
              key={index} 
              className={
              `
                ${selection.has(item[itemKey]) ? 'select_row': ''} 
                ${item.disabled ? 'disabled_row' : ''}
              `
            }>
              {/* 속성 넣어주기 */}
              {
                selectable && 
                  <td>
                    <input 
                      type="checkbox"
                      disabled={item.disabled}
                      checked={selection.has(item[itemKey])}
                      onChange={() => onChangeSelect(item[itemKey])}   
                    />
                  </td>
              }
              { 
                headerKey.map((key) => 
                  <td key={key + index}>
                    {item[key]} {/* key로 객체의 값을 출력 */}
                  </td>
                )
              }
            </tr>
          ))
        }
      </tbody>
    </table>
  )

onChange이벤트와 checked, disabled 등의 속성 값도 넣어줍니다. 참고로 tr의 className은 css를 위해 클래스를 바인딩하는 것입니다.

단일 행 선택 기능이 완성되었습니다!

전체 선택

전체 선택의 경우 이벤트 객체로 target의 checked 상태로 전체 선택 상태를 파악합니다.

export default function DataTable({ /* ... */}) {
  // disabled가 true인 item만 반환하는 함수
  const getAbledItems = (items) => {
    return items.filter(({ disabled }) => !disabled );
  };
  const onChangeSelectAll = (e) => {
    if (e.target.checked) {
      // checked가 true인 경우 전체 선택
      const allCheckedSelection = new Set(
        // 활성화된 행의 배열을 순회하며 itemKey로 요소에 접근해 데이터를 저장
        getAbledItems(items).map((item) => item[itemKey])
      );
      setSelection(allCheckedSelection);
    } else {
      // checked가 false인 경우 전체 선택 해제
      setSelection(new Set());
    }
  };
  // 전체 선택 상태 여부
  const isSelectedAll = () => {
    return selection.size === getAbledItems(items).length;
  };
}

selection의 size와 활성화 행들의 length가 같다면 전체 선택이 되어있다는 것을 알 수 있습니다. 전체 선택 체크박스의 checked 속성을 사용하기 위해 함수로 만들었습니다.

HTML 코드

  return (
    <table>
      <thead>
        <tr>
          {/* 속성 넣어주기 */}
          {
            selectable && 
            <th>
              <input 
                type="checkbox"
                checked={isSelectedAll()}
                onChange={onChangeSelectAll}
              />
            </th>
          }
          {
            headers.map((header) => 
              <th key={header.text}>
                {header.text} {/* 컬럼명 바인딩 */}
              </th> 
            )
          }
        </tr>
      </thead>
      <tbody>{/* ... */}</tbody>
    </table>
  )

onChange이벤트와 checked 등의 속성 값도 넣어줍니다.

이제 모든 기능을 완성했습니다. 🎉🎉

6. updateSelection

하지만 아직까지는 외부에서 선택된 행의 value 값을 담은 selection을 받을 수 없습니다.

updateSelection 함수를 props로 받아서 selection을 함수에 인자로 넘겨줘서 외부에서 확인할 수 있도록 해볼까요?

const onChangeSelect = (value) => {
  const newSelection = new Set(selection);
  if (newSelection.has(value)) {
    newSelection.delete(value);
  } else {
    newSelection.add(value);
  }
  setSelection(newSelection);
  // updateSelection 함수 호출
  updateSelection([...newSelection]);
};

const onChangeSelectAll = (e) => {
  if (e.target.checked) {
    const allCheckedSelection = new Set(
      getAbledItems(items).map((item) => item[itemKey])
    );
    setSelection(allCheckedSelection);
    // updateSelection 함수 호출
    updateSelection([...allCheckedSelection]);
  } else {
    setSelection(new Set());
    // updateSelection 함수 호출
    updateSelection([]);
  }
};

onChangeSelect함수와 onChangeSelectAll함수에서 호출해서 상태를 업데이트 해줍니다.

마지막으로 App.js에서 selection을 담을 상태를 선언하고, useEffect로 selection이 변경하는 것을 감지해서 콘솔에 출력하도록 해보겠습니다.

function App() {
  const [selection, setSelection] = useState([]);
  useEffect(() => {
    console.log(selection);
  }, [selection]);

  return (
    <div className="App">
      <DataTable 
        headers={headers} 
        items={items} 
        selectable={true} 
        updateSelection={setSelection}
      />
    </div>
  );
}

단일 행 선택과 전체 선택을 해보면 콘솔에 name 값이 담긴 배열이 출력되는 것을 볼 수 있습니다.

이제 정말 완성입니다! 👏👏👏

🔗 Github 링크

React Data Table에 소스코드가 공개되어 있습니다.

클래스는 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀(template)이다. 객체를 정의하기 위한 메소드와 변수로 구성된다.

클래스를 일종의 틀이라고 하는데, 클래스를 어떻게 이해해야할까?

예를 들어, 차라는 단어를 보면 각자 사람마다 떠오르는 차의 형태가 있을 것이다.

사람들이 떠올린 네 가지의 차는 다 다른 차이다.

하지만 네 종류의 차는 모두 공통점을 가지고 있다.

• 바퀴가 있고 네 개다.
• 사람이 탈 수 있다.
• 이동 수단이다.
• 기름을 넣어야 움직인다.

이 외에도 정말 많은 공통점이 있는데, 이러한 공통점을 가진 대상이 차이다.

따라서 차라는 추상적인 개념은 다양한 종류의 차의 근본이 되는 틀이라고 할 수 있으며, 이렇게 틀이 되는 것을 클래스라고 한다.

🌱 인스턴스란?

인스턴스란 클래스를 통해 생성된 객체를 의미한다.

쉽게 말하면 차라는 틀을 기반으로 만들어진 🚗 🚙 🚚 🚌 이 차들을 인스턴스라고 할 수 있다.

인스턴스는 독립적인 존재이며, 클래스에 있는 기능들을 사용할 수 있다.

예를 들어, 차라는 클래스가 있다고 가정해보자.

차 클래스 // 차가 공통적으로 가지는 구성요소와 기능을 정의한다.
{ 
  // 차 구성요소 = 속성
  // 변경 가능함
  기종 = 미정
  색상 = 미정
  // 변경 불가능함
  바퀴 = [앞 오른쪽, 앞 왼쪽, 뒤 오른쪽, 뒤 왼쪽]
  사이드미러 = [오른쪽, 왼쪽]

  // 차 기능 = 메소드
  시동키기() {}
  전진() {}
  후진() {}
  주차() {}
  오른쪽깜빡이키기() {}
  왼쪽깜빡이키기() {}

  // 차를 인스턴스로 생성할 때 실행되는 특수한 함수
  차_출고시_선택사항(기종, 색상) {
    기종 = 기종
    색상 = 색상
  }
}

클래스 내부에 선언된 변수를 프로퍼티, 함수는 메소드라고 한다.

차 클래스로 여러 종류의 차들을 만들어보자.

// 아래 차들은 차 클래스의 인스턴스들이다. 
모닝 = 차(모닝, 노란색)
아반떼 = 차(아반떼, 파란색)
쏘렌토 = 차(쏘렌토, 흰색)

모닝, 아반떼, 쏘렌토 모두 차의 기능들을 사용할 수 있다.

모닝.시동키기()
아반떼.시동키기()
아반떼.전진()
아반떼.주차()
쏘렌토.시동키기()
쏘렌토.오른쪽깜빡이키기()

클래스의 장점은 하나의 클래스에서 프로퍼티, 메소드를 선언하면 해당 클래스의 인스턴스에서 해당 프로퍼티, 메소드를 사용할 수 있다는 점이다.

다시보면 차 클래스에 시동을 끄는 기능이 없다.

차 클래스 
{
  // ...생략
  시동끄기() {}
}

// ...생략
모닝.시동끄기()
아반떼.시동끄기()
쏘렌토.시동끄기()

클래스에서 시동끄기 메소드를 선언하면 모닝, 아반떼, 쏘렌토에서 모두 다 시동을 끌 수 있게 된다.

클래스와 인스턴스는 직접 생각해볼 수 있는 것들을 떠올리면서 이해해나가면 된다.

공 클래스에서 ⚽️ 🏀 🥎 🏐 🎱 여러 종류의 공 인스턴스를 생성할 수 있다.

음식 클래스에서 🍛 🍣 🍔 🍳 🍝 여러 종류의 음식 인스턴스를 생성할 수 있다.

좋은 예시가 있다면 댓글로 달아주세요! 🤗

참고자료

[위키피디아] 클래스 (컴퓨터 프로그래밍)

그런데 매번 console.log 함수로 로그를 출력하는건 꽤 번거롭다.

개발을 할때는 vscode에서 제공하는 디버깅 기능을 사용하면 간편하게 내가 원하는 부분의 데이터를 확인할 수 있다.

왼쪽에 4번째 디버깅 아이콘을 눌러보면 디버깅 관련 설정을 안한 경우 아래와 같이 나온다.

create a launch.json file을 눌러서 디버깅 관련 설정을 위한 launch.json 파일을 생성했다.

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}"
    }
  ]
}

type은 디버깅을 실행시킬 환경을 의미한다. 나는 express로 개발한 서버를 디버깅 할거니까 node로 선택했다.

name은 디버깅의 이름인데, 디버깅 모드에 진입하면 내가 설정한 이름이 뜬다.

program에는 디버깅을 실행시킬 파일의 경로를 설정해주면 된다.

내가 만든 서버의 진입점은 server 폴더안에 src 폴더의 app.js이기 때문에 아래와 같이 설정했다.

"program": "${workspaceFolder}\\server\\src\\app.js"

디버깅 모드는 서버를 끄고 'F5' 혹은 RUN AND DEBUG 옆에 초록색 화살표를 누르면 실행된다.

작성한 코드가 몇 번째 줄인지 알려주는 숫자 옆에 마우스를 올려보면 빨간색 점이 보인다.

그 부분을 클릭하면 해당 코드가 실행될 때, 어떤 데이터가 있는지 확인해볼 수 있도록 중단점이 찍힌다.

나는 / 경로로 들어오는 부분에 중단점을 찍었고, http://localhost:3001로 접속해보면 중단점을 찍은 부분이 노란색으로 표시되어 있다.

위에 화살표 버튼으로 코드를 실행시키기 전까지는, 'Hello Express!'가 출력되지 않는다. 그리고 옆에 디버깅 창에서 request 객체에 어떤 값들이 있는지 확인해볼 수 있다.

그런데 나는 쿼리 결과 값을 true인지 null인지 판단해서 사용자에게 응답을 해주는 것이 조금은 비효율적이라고 생각이 들었다.

따라서 서버가 정상적인 처리를 하지 못했을 경우에는 오류를 던지고, 오류 처리 미들웨어가 그 오류를 받아서 사용자에게 응답해주도록 코드를 수정해보려고 한다.

🚨 Class MyError Extends Error

나는 오류를 처리하기 위해 세 개의 오류 클래스를 만들었다.

1. BadRequest : 사용자가 잘못된 데이터를 보냈을 경우
2. ExpiredToken : 토큰이 유효하지 않을 경우
3. MethodNotAllowed : 사용할 수 없는 메소드에 접근했을 경우

오류 클래스는 Error 클래스를 상속받아서 만들었다.

error 폴더에 각자 파일을 생성했다.

error/badRequest.js

class BadRequest extends Error {
  status = 400;
  constructor(message = '잘못된 요청입니다.') {
    super(message);
    this.name = 'Bad Request';
  }
}
module.exports = BadRequest;

error/expiredToken.js

class ExpiredToken extends Error {
  status = 419;
  constructor(message = '유효하지 않은 토큰입니다.') {
    super(message);
    this.name = 'Expired Token';
  }
}
module.exports = ExpiredToken;

error/methodNotAllowed.js

class MethodNotAllowed extends Error {
  status = 405;
  constructor(message = '사용할 수 없는 메소드입니다.') {
    super(message);
    this.name = 'Method Not Allowed';
  }
}
module.exports = MethodNotAllowed;

먼저, 존재하지 않는 경로로 요청이 들어왔을 때 사용할 MethodNotAllowed 부터 적용했다.

app.js

const MethodNotAllowed = require('./error/methodNotAllowed');
app.all('*', (res, req) => {
  throw new MethodNotAllowed();
});

토큰 유효성을 체크하는 미들웨어에도 적용했다.

middleware/tokenVerify.js

const tokenService = require('../jwt');
const BadRequest = require('../error/badrequest');
const ExpiredToken = require('../error/expiredToken');

const tokenVerify = (req, res, next) => {
  // 토큰이 없을 때
  if (!req.headers.authorization) {
    throw new BadRequest('토큰이 존재하지 않습니다.');
  }

  try {
    const payload = tokenService.getPayload(req.headers.authorization);
    req.user_id = payload.user_id;
  } catch (error) {
    // 토큰 만료됐을 때
    throw new ExpiredToken();
  }

  next();
};

그리고 로그인, 회원가입 기능에서도 id가 없을 경우마다 체크해주지 않고 오류를 발생시키도록 했다.

user/index.js

const BadRequest = require('../error/badrequest');

// 사용자 등록
async function create({ id, password, name}) {
  try {
    await database.query(`
        insert into users (id, password, name) 
        values ('${id}', '${password}', '${name}')
    `);
  } catch (error) {
    throw new Error('사용자 등록중 오류가 발생했습니다.');
  }
}

// 회원가입
app.post('/user/register', async (req, res) => {
  const { id, password, name } = req.body;
  // id, password, name이 있는지 체크한다.
  if (!id || !password || !name) {
    throw new BadRequest('id, password, name은 필수입력 사항입니다.');       
  }

  // id는 중복되지 않도록한다.
  const user = await getById(id);
  if (user) {
    throw new BadRequest('이미 존재하는 아이디입니다.');
  }

  // 사용자를 추가한다.
  const result = await create(req.body);
  res.send({ message: '사용자를 등록했습니다.' });
});


// 로그인
app.post('/user/login', (req, res) => {
  const { id, password } = req.body;
  // id, password가 있는지 체크한다.
  if (!id || !password) {
    throw new BadRequest('id, password는 필수입력 사항입니다.'); 
  }

  // 입력받은 id의 사용자를 찾는다.
  const user = await getById(id);
  if (!user) {
    throw new BadRequest('존재하지 않는 사용자입니다.'); 
  }

  // 입력받은 password와 찾은 사용자의 password가 일치하는지 체크한다.
  if (user.password !== password) {
    throw new BadRequest('비밀번호가 일치하지 않습니다.' );
  }

  // 토큰을 발급한다.
  res.status(200).send({ token: 'token' });
});

post 라우터에도 적용해줬다.

post/index.js

const BadRequest = require('../error/badrequest');

// id로 글 조회 함수
async function getById(_id) {
  try {
    const { rows } = await database.query(`
        select _posts.id, name, title, content, created_on 
        from _posts
          inner join _users 
          on _posts.user_id = _users.id
        where _posts.id = '${_id}'
    `);
    if (!rows[0]) {
      throw new BadRequest('존재하지 않는 글입니다.');
    }
    return rows[0];
  } catch (error) {
    throw new Error('글 조회중 오류가 발생했습니다.');
  }
}

// 글 생성 함수
async function create({ user_id, title, content }) {
  try {
    await database.query(`
        insert into _posts (id, user_id, title, content, created_on) 
        values ('${uuid.v1()}', '${user_id}', '${title}', '${content}', 
                '${new Date().toISOString()}')`);
  } catch (error) {
    throw new Error('글 생성 중 오류가 발생했습니다.');
  }
}

// 글 수정 함수
async function update({ user_id, id, title, content }) {
  const post = await getById(id);
  try {
    await database.query(`
        update _posts 
        set title='${title}', content='${content}' 
        where id='${id}'`);
  } catch (error) {
    throw new Error('글 수정 중 오류가 발생했습니다.');
  }
}

// 글 삭제 함수
async function remove({ user_id, _id }) {
  const post = await getById(_id);
  try {
    await database.query(`delete from _posts where id='${_id}'`);
  } catch (error) {
    throw new Error('글 삭제 중 오류가 발생했습니다.');
  }
}

// 글 전체 조회
router.get('/', async (req, res) => {
  try { 
    const { rows } = await database.query(`
      select _posts.id, name, title, created_on 
      from _posts inner join _users on _posts.user_id = _users.id
    `); 
    res.send(rows);
  } catch (error) {
    res.status(400).send({ message: '글 조회중 오류가 발생했습니다.' });
  }
});

// 글 단일 조회
router.get('/:id', async (req, res) => {
  const post = await getById(req.params.id);
  res.send(post);
});

// 글 등록
router.post('/', async (req, res) => {
  const { title, content } = req.body;

  if (!title || !content) {
    throw new BadRequest('title, content는 필수 입력 사항입니다.');
  }

  const result = await create({ title, content });
  res.send({ message: '글을 등록했습니다.' });
});

// 글 수정
router.put('/:id', async (req, res) => {
  const { title, content } = req.body;

  if (!req.params.id || !title || !content) {
    throw new BadRequest('id, title, content는 필수 입력 사항입니다.');
  }
  const result = await update({ id: req.params.id, user_id: req.user_id, title, content });
  res.send({ message: '글을 수정했습니다.' });
});

// 글 삭제
router.delete('/:id', async (req, res) => {

  if (!req.params.id) {
    throw new BadRequest('id는 필수 입력 사항입니다.');
  }
  const result = await remove({ id: req.params.id, user_id, req.user_id });
  res.send({ message: '글을 삭제했습니다.' });
});

if 조건문으로 판단하는 로직이 사라져서 훨씬 깔끔해졌다.

마지막으로 오류 처리 미들웨어에서 오류를 받아서 사용자에게 상태 코드와 메시지를 반환해주도록 수정했다.

app.js

app.use((error, req, res, next) => {
  res
    .status(error.status || 500)
    .send({ 
      name: error.name || 'Internal Server Error',
      message: error.message || '서버 내부에서 오류가 발생했습니다.'
    });
});

만약 error의 status, 메시지 등이 없다면 서버 내부의 오류로 생각하고 대응하도록 했다.

API 호출을 하는 테스트를 했는데, 예상치 못한 오류가 발생했다. 검색을 해보니, express에서 비동기 오류를 지원하지 않아서 발생하는 오류였고 express-async-errors 라이브러리를 사용해서 해결했다.

$ npm i express-async-errors

서버가 실행되는 app.js 상단에서 라이브러리를 불러왔다.

app.js

require('express-async-errors');

이제는 비동기 에러 처리가 잘 된다!

Express에서 postgresql 데이터베이스와 연결하기 위해서는 pg 라이브러리를 사용해야 한다.

$ npm i pg

db 폴더에 index.js 파일을 생성해서 Database class를 선언하고 Database 인스턴스를 생성해서 외부에서는 생성된 인스턴스를 사용했다.

new 키워드로 인스턴스가 생성되면, 생성자에서 connect 함수를 호출해서 데이터베이스와 연결하도록 했다.

db/index.js

const { Pool } = require('pg');

class Database {
  #database;

  constructor() {
    this.#connect();
  }

  async #connect() {
    this.#database = new Pool({
      user: 'tester', // Database 소유자
      host: 'localhost', // Host
      database: 'test_db', // Database 이름
      password: 'qwer', // Database 비밀번호
      port: 5432, // Database 포트
    });
    try {
      await this.#database.connect();
    } catch (error) {
      console.log('Database connect failed');
    }
  }

  async query(_query) {
    return await this.#database.query(_query);
  }
}

const database = new Database();
module.exports = database;

database 객체를 private으로 선언했기 때문에, query 함수를 선언해서 사용했다.

💾 Database에 데이터 저장하기

이제 로컬로 개발되어 있던 부분을 database에 저장하도록 수정해야 한다.

📌 로그인, 회원가입

로그인, 회원가입을 할 때 id로 사용자를 찾는 로직이 반복되어서 하나의 함수로 만들어서 가독성을 높였다.

user/index.js

const databaes = require('../db');
async function getById(_id) {
  try {
    const { rows } = await database.query(`select * from users where id='${_id}'`);
    return rows[0];
  } catch (error) {
    return null;
  }
}

query 함수는 rows에 쿼리 결과를 담아서 준다. query 함수의 반환 값이 객체이기 때문에, 구조분해할당으로 rows를 받아와서 0번째 요소를 반환해주도록 코드를 작성했다.

그리고 사용자를 생성하는 함수도 따로 선언했다.

async function create({ id, password, name}) {
  try {
    await database.query(`
        insert into users (id, password, name) 
        values ('${id}', '${password}', '${name}')
    `);
    return true;
  } catch (error) {
    return null;
  }
}

이제 getById, create 함수를 사용해서 회원가입, 로그인 기능을 수행하는 코드를 수정해보자.

// 회원가입
app.post('/user/register', async (req, res) => {
  const { id, password, name } = req.body;
  // id, password, name이 있는지 체크한다.
  if (!id || !password || !name) {
    res.status(400).send({ message: 'id, password, name은 필수입력 사항입니다.' });
    return;
  }

  // id는 중복되지 않도록한다.
  const user = await getById(id);
  if (user) {
    res.status(400).send({ message: '이미 존재하는 아이디입니다.' });
    return;
  }

  // 사용자를 추가한다.
  const result = await create(req.body);
  if (result) {
    res.send({ message: '사용자를 등록했습니다.' });
  } else {
    res.send({ message: '사용자 등록에 실패했습니다. '});
  }
});


// 로그인
app.post('/user/login', (req, res) => {
  const { id, password } = req.body;
  // id, password가 있는지 체크한다.
  if (!id || !password) {
    res.status(400).send({ message: 'id, password는 필수입력 사항입니다.' });
    return;
  }

  // 입력받은 id의 사용자를 찾는다.
  const user = await getById(id);
  if (!user) {
    res.status(400).send({ message: '존재하지 않는 사용자입니다.' });
    return;
  }

  // 입력받은 password와 찾은 사용자의 password가 일치하는지 체크한다.
  if (user.password !== password) {
    res.status(400).send({ message: '비밀번호가 일치하지 않습니다.' });
    return;
  }

  // 토큰을 발급한다.
  res.status(200).send({ token: 'token' });
});

📌 글 CRUD

먼저 글 id로 조회하기, 생성, 수정, 삭제 기능을 수행하는 함수를 만들었다.

회원가입 기능과 마찬가지로, 쿼리를 잘 수행했으면 true를 반환하고 오류가 발생하면 null을 반환하도록 했다.

그리고 글 마다 고유한 id를 부여하기 위해 uuid 라이브러리를 사용했다.

$ npm i uuid

post/index.js

// id로 글 조회
async function getById(_id) {
  try {
    const { rows } = await database.query(`
        select _posts.id, name, title, content, created_on 
        from _posts
          inner join _users 
          on _posts.user_id = _users.id
        where _posts.id = '${_id}'
    `);
    return rows[0];
  } catch (error) {
    return null;
  }
}

// 글 생성
async function create({ user_id, title, content }) {
  try {
    await database.query(`
        insert into _posts (id, user_id, title, content, created_on) 
        values ('${uuid.v1()}', '${user_id}', '${title}', '${content}', 
                '${new Date().toISOString()}')`);
    return true;
  } catch (error) {
    return null;
  }
}

// 글 수정
async function update({ user_id, id, title, content }) {
  const post = await getById(id);
  if (!post) {
    return null;
  }
  try {
    await database.query(`
        update _posts 
        set title='${title}', content='${content}' 
        where id='${id}'`);
    return true;
  } catch (error) {
    return null;
  }
}

// 글 삭제
async function remove({ user_id, _id }) {
  const post = await getById(_id);
  if (!post) {
    return null;
  }
  try {
    await database.query(`delete from _posts where id='${_id}'`);
    return true;
  } catch (error) {
    return null;
  }
}

쿼리를 작성하면서 콤마나 따옴표 등 오타를 많이 내서 많은 오류가 났었다..

글 생성, 수정, 삭제 기능의 경우 user_id가 필요하다. 그래서 하지만 매번 token이 유효한지 검사하는건 비효율적이기 때문에, 미들웨어를 사용해서 user_id를 request 객체에 저장하려고 한다.

middleware/tokenVerify.js

const tokenService = require('../jwt');

const tokenVerify = (req, res, next) => {
  // Request headers에 토큰이 없으면 오류를 반환한다. 
  if (!req.headers.authorization) {
    res.status(400).send({ message: '토큰이 존재하지 않습니다.' });
    return;
  }

  try {
    const payload = tokenService.getPayload(req.headers.authorization);
    // request 객체에 사용자 아이디를 저장한다.
    req.user_id = payload.user_id;
  } catch (error) {
    // 토큰 payload를 얻는데 실패하면 유효한 토큰이므로 client에 알려준다.
    res.status(400).send({ message: '유효하지 않은 토큰입니다.' });
    return;
  }

  next();
};

module.exports = tokenVerify;

미들웨어는 라우터에서 미들웨어를 실행하고 싶은 위치에 넣어주면 된다.

나는 글 생성, 수정, 삭제 기능을 수행하기 전에 토큰이 유효한지 체크하는 미들웨어를 실행시키도록 했다.

post/index.js

router.post('/', tokenVerify, async (req, res) => { //... }
router.put('/', tokenVerify, async (req, res) => { //... }
router.delete('/', tokenVerify, async (req, res) => { //... }

이제 글 CRUD 기능을 마무리 해보자.

// 글 전체 조회
router.get('/', async (req, res) => {
  try { 
    const { rows } = await database.query(`
      select _posts.id, name, title, created_on 
      from _posts inner join _users on _posts.user_id = _users.id
    `); 
    res.send(rows);
  } catch (error) {
    res.status(400).send({ message: '글 조회중 오류가 발생했습니다.' });
  }
});

// 글 단일 조회
router.get('/:id', async (req, res) => {
  const post = await getById(req.params.id);
  // 글이 존재하는지 체크
  if (!post) {
    res.status(400).send({ message: '존재하지 않는 글입니다.' });
    return;
  }
  res.send(post);
});

// 글 등록
router.post('/', async (req, res) => {
  const { title, content } = req.body;
  // title, content가 있는지 체크
  if (!title || !content) {
    res.status(400).send({ message: 'Title, content는 필수 입력 사항입니다.' });
    return;
  }
  // 글 추가
  const result = await create({ title, content });
  if (!result) {
    res.status(400).send({ message: '글 등록에 실패했습니다.' });
    return;
  }

  res.send({ message: '글을 등록했습니다.' });
});

// 글 수정
router.put('/:id', async (req, res) => {
  const { title, content } = req.body;
  // id, title, content가 있는지 체크
  if (!req.params.id || !title || !content) {
    res.status(400).send({ message: 'id, title, content는 필수 입력 사항입니다.' });
    return;
  }
  // 글 수정
  const result = await update({ id: req.params.id, user_id: req.user_id, title, content });
  if (!result) {
    res.status(400).send({ message: '글 수정에 실패했습니다.' });
    return;
  }
  res.send({ message: '글을 수정했습니다.' });
});

// 글 삭제
router.delete('/:id', async (req, res) => {
  // id 있는지 체크
  if (!req.params.id) {
    res.status(400).send({ message: 'id는 필수 입력 사항입니다.' });
    return;
  }
  // 글 삭제
  const result = await remove({ id: req.params.id, user_id, req.user_id });
  if (!result) {
    res.status(400).send({ message: '글 삭제에 실패했습니다.' });
    return;
  }

  res.send({ message: '글을 삭제했습니다.' });
});

이제 기능 개발은 끝이다!

나는 미들웨어를 내가 원하는 기능을 수행하기 전에, 서버에서 필요로 하는 정보가 클라이언트에서 잘 넘어왔는지 확인하는 함수라고 이해했다.

예를 들어, 로그인을 하고 글을 등록, 수정, 삭제 할 때에 사용자에게 발급한 토큰으로 사용자의 접근 권한이 유효한지 체크해야한다. 그런데 토큰이 유효한지 체크하는 기능을 모든 라우터의 함수에서 작성하는 것은 매우 비효율적이다.

만약 토큰이 유효한지 체크한 후, 어떤 작업을 추가로 진행해야 된다면 현재는 등록, 수정, 삭제 총 세 군데 이지만 나중에는 수백여곳의 코드를 찾아서 고쳐야할 수도 있다.

따라서 토큰이 유효한지 체크하는 기능을 가진 미들웨어 함수를 생성하고, 토큰 유효성 검사가 필요한 라우터에 적용해주는 것이다.

📌 Express의 미들웨어 종류

• 애플리케이션 레벨 미들웨어
• 라우터 레벨 미들웨어
• 오류 처리 미들웨어
• 기본 제공 미들웨어
• 써드파티 미들웨어

📌 Express의 미들웨어가 수행하는 기능

• 모든 코드를 실행
• 요청 및 응답 개체를 변경
• 요청, 응답 주기를 종료
• 스택에서 다음 미들웨어 함수를 호출

자세한 내용은 Express 미들웨어 사용에서 확인해볼 수 있다.

🚧 미들웨어 사용하기

미들웨어는 requset와 response 객체 그리고 next 함수를 인자로 받는다.

next 함수는 다음 함수를 실행시키는 함수인데, 만약 next를 호출해주지 않으면 내가 라우터마다 작성한 코드들이 실행되지 않는다.

app.js

// 라우터 요청을 처리하기 전에 실행시킬 미들웨어
app.use((req, res, next) => {
  console.log(`[${req.method}] ${req.path} | ${new Date().toLocaleString()}`);
  next();
});

// ...

// 오류 처리 미들웨어
app.use((error, req, res, next) => {
  console.log(error.message);
  res.status(500).send({ message: '서버 내부에서 오류가 발생했습니다.' });
});

간단하게 라우터 요청을 처리하기 전에 요청 내용 로그를 찍는 미들웨어와 오류를 처리해주는 미들웨어를 작성했다.

오류 처리 미들웨어는 라우터 중 맨 아래에 작성해야되며, 오류 처리 미들웨어보다 위에 있는 라우터는 오류 처리 미들웨어가 실행되지 않는다.

서버에서 로직을 실행하다가 throw로 오류가 발생되면 모두 오류 처리 미들웨어로 가게 된다.

나중에는 라우터에서 매번 res.send()로 각 상황에 따라서 결과값을 반환해주지 않고, 오류를 던져서 예외 처리 미들웨어에서 오류 결과를 반환하도록 하려고 한다.

🧺 사용하지 않는 라우터 처리

API 테스트를 하다보면 잘못된 주소로 요청을 보내는 경우가 있다.

게시판 프로젝트를 진행하면서 여러번 잘못된 주소를 보냈었는데, 사용하지 않는 라우터라는 것을 명시해주기 위해서 코드를 추가했다.

app.js

app.all('*', (res, req) => {
  req.status(405).send({ message: '사용할 수 없는 라우터입니다.' });
});

위에 있는 모든 라우터에 해당하지 않을 경우 마지막으로 이 라우터를 통과하게 되기 때문에, 존재하지 않는 경로로 http 요청을 보냈을 경우 응답을 보내줄 수 있다.

이제 게시글 등록, 조회, 수정, 삭제 기능을 구현할 차례다.

로그인, 회원가입과 마찬가지로 먼저 로컬로 개발한 후 나중에 데이터베이스 연동을 할 예정이다. 데이터 베이스를 연동하고

로그인, 회원가입 기능은 app.js에서 작성한 후 따로 파일을 분리했지만, 글 CRUD 기능은 처음부터 파일을 분리해서 개발했다.

post/index.js

const express = require('express');
const router = express.Router();

// 글 정보를 담을 배열과 id
const posts = {
  data: [],
  id: 1,
}

// 글 전체 조회
router.get('/', (req, res) => {
  // TODO 글 전체 반환해주기
});

// 글 단일 조회
router.get('/:id', (req, res) => {
  // TODO 글이 존재하는지 체크
  // TODO 글이 존재하면 응답 객체에 넣어서 보내기
});

// 글 등록
router.post('/', (req, res) => {
  // TODO title, content가 있는지 체크
  // TODO 글 추가
});

// 글 수정
router.put('/:id', (req, res) => {
  // TODO id, title, content가 있는지 체크
  // TODO 글이 존재하는지 체크
  // TODO 글 수정
});

// 글 삭제
router.delete('/:id', (req, res) => {
  // id가 있는지 체크
  // TODO 글이 존재하는지 체크
  // TODO 글 삭제
});

module.exports = router;

이렇게 주석으로 개발할 내용을 정리해보고 하나하나 개발했다.

post/index.js

// 글 전체 조회
router.get('/', (req, res) => {
  res.send(posts.data);
});

// 글 단일 조회
router.get('/:id', (req, res) => {
  const post = posts.data.find((post) => post.id === parseInt(req.params.id));
  // TODO 글이 존재하는지 체크
  if (!post) {
    res.status(400).send({ message: '존재하지 않는 글입니다.' });
    return;
  }
  res.send(post);
});

// 글 등록
router.post('/', (req, res) => {
  const { title, content } = req.body;
  // TODO title, content가 있는지 체크
  if (!title || !content) {
    res.status(400).send({ message: 'Title, content는 필수 입력 사항입니다.' });
    return;
  }
  // TODO 글 추가
  posts.data.push({
    ...req.body,
    id: posts.id,
  });
  posts.id++;
  res.send({ message: '글을 등록했습니다.' });
});

// 글 수정
router.put('/:id', (req, res) => {
  const { title, content } = req.body;
  // TODO id, title, content가 있는지 체크
  if (!req.params.id || !title || !content) {
    res.status(400).send({ message: 'id, title, content는 필수 입력 사항입니다.' });
    return;
  }
  const post = posts.data.find((post) => post.id === parseInt(req.params.id));
  // TODO 글이 존재하는지 체크
  if (!post) {
    res.status(400).send({ message: '존재하지 않는 글입니다.' });
    return;
  }

  // TODO 글 수정
  post.title = title;
  post.content = content;
  res.send({ message: '글을 수정했습니다.' });
});

// 글 삭제
router.delete('/:id', (req, res) => {
  if (!req.params.id) {
    res.status(400).send({ message: 'id는 필수 입력 사항입니다.' });
    return;
  }
  const post = posts.data.find((post) => post.id === parseInt(req.params.id));
  // TODO 글이 존재하는지 체크
  if (!post) {
    res.status(400).send({ message: '존재하지 않는 글입니다.' });
    return;
  }

  posts.data = posts.data.filter((_post) => _post.id !== post.id);
  res.send({ message: '글을 삭제했습니다.' });
});

module.exports = router;

기능 구현을 다 했다면, app.js에 라우터를 등록해줘야 한다.

app.js

const postRouter = require('./post');
app.use('/post', postRouter);

📑 API 테스트

REST Client를 사용해서 api 테스트를 해보자.

.http

POST http://localhost:3001/post
Content-Type: application/json

{
  "title": "title",
  "content": "content"
}

API 요청을 보내면 글이 잘 등록된다. 3번 정도 똑같은 내용으로 글을 등록하고 전체 글 조회를 한 결과도 잘 받았다.

📝 회원가입 기능

회원가입을 하는데 2가지 조건이 있다.

1. id, password, name는 필수로 입력해야 한다.
2. id는 중복되지 않도록한다.

만약 두가지 조건에 부합하지 않는다면 회원가입에 실패한다.

app.js

// 사용자 정보를 담을 배열
const users = [];

// 회원가입
app.post('/user/register', (req, res) => {
  const { id, password, name } = req.body;
  // TODO id, password, name이 있는지 체크한다.
  if (!id || !password || !name) {
    res.status(400).send({ message: 'id, password, name은 필수입력 사항입니다.' });
    return;
  }

  // TODO id는 중복되지 않도록한다.
  const user = users.find((user) => user.id === id);
  if (user) {
    res.status(400).send({ message: '이미 존재하는 아이디입니다.' });
    return;
  }

  // TODO 사용자를 추가한다.
  users.push(req.body);
  res.send({ message: '사용자를 등록했습니다.' });
});

📑 REST Client를 사용해서 API 테스트하기

회원가입 기능을 구현했으니, 잘 되는지 확인해보기 위해 API 테스트를 해보자.

Postman, Talend API 등 좋은 툴들이 많지만 나는 vscode에서 바로 사용할 수 있는 확장앱인 REST Client를 자주 사용하고 있다.

확장앱을 설치하고 나서, .http 확장자를 사용해서 파일을 생성하고 아래처럼 http request를 작성해보자.

# Method, Path
POST http://localhost:3001/user/register 
# Headers
Content-Type: application/json
# Body
{
  "id": "test1",
  "name": "테스트1",
  "password": "qwer"
}

메소드 위에 'Send Request' 버튼을 클릭해서 http 요청을 보낼 수 있다.

처음 요청을 보내면, test1이라는 id를 사용하는 사용자가 없기때문에 무사히 회원가입에 성공한다.

요청을 한번 더 보내면 이미 존재하는 아이디이기 때문에 회원가입에 실패한다.

📝 로그인 기능

로그인을 할 때는 id와 password를 받아서 두 가지를 체크한다.

1. 존재하는 아이디인지 확인한다.
2. 존재하는 아이디일 경우, 비밀번호가 일치하는지 확인한다.

만약 아이디가 존재하지 않거나, 비밀번호가 일치하지 않으면 로그인에 실패한다. 로그인 성공 시, 토큰을 반환해서 프론트엔드에서 로그인을 오래동안 유지할 수 있도록 할 예정이다.

app.js

app.post('/user/login', (req, res) => {
  const { id, password } = req.body;
  // TODO id, password가 있는지 체크한다.
  if (!id || !password) {
    res.status(400).send({ message: 'id, password는 필수입력 사항입니다.' });
    return;
  }

  // TODO 입력받은 id의 사용자를 찾는다.
  const user = users.find((user) => user.id === id);
  if (!user) {
    res.status(400).send({ message: '존재하지 않는 사용자입니다.' });
    return;
  }

  // TODO 입력받은 password와 찾은 사용자의 password가 일치하는지 체크한다.
  if (user.password !== password) {
    res.status(400).send({ message: '비밀번호가 일치하지 않습니다.' });
    return;
  }

  // TODO 토큰을 발급한다.
  res.status(200).send({ token: 'token' });
});

🚀 JWT

나는 토큰 발급을 위해 jsonwebtoken 라이브러리를 사용했다.

$ npm i jsonwebtoken

서버는 토큰이 유효할 경우에만 로그인 상태라고 생각하고, 토큰이 유효하지 않으면 글 등록, 수정, 삭제 등의 기능을 제한할거다.

토큰 기능은 따로 jwt 폴더에 파일을 생성해서 관리했다.

jwt/index.js

const jwt = require('jsonwebtoken');

const tokenService = {
  // TODO 토큰 발급
  getToken(user_id) {
  // 토큰에 담을 정보, 사용할 키 (아무 값이나 가능), 토큰 옵션
    return jwt.sign({ user_id }, 'SECRET_KEY', {
      expiresIn: '1d' // 만료시간
    });
  },
  // TODO 토큰이 유효하다면 토큰에 담긴 정보를 반환
  getPayload(token) {
    return jwt.verify(token, 'SECRET_KEY');
  }
}

module.exports = tokenService;

이제 로그인 기능에서 토큰 발급을 해서 반환하도록 하면 된다.

app.js

const tokenService = require('./jwt');
app.post('/user/login', (req, res) => {
  const { id, password } = req.body;
  // ...
  // TODO 토큰을 발급한다.
  res.status(200).send({ token: tokenService.getToken(id) });
});

로그인 API를 테스트 하려고 하는데, 서버를 계속해서 재시작해서 기존 데이터가 사라져서 불편하다. 기본 사용자 정보를 배열에 저장한 후에 테스트를 진행했다.

const users = [
  {
    id: 'test',
    name: 'tester',
    password: 'test'
  }
];

.http

POST http://localhost:3001/user/login 
Content-Type: application/json

{
  "id": "test",
  "password": "test"
}

응답으로 토큰을 잘 발급해주고 있다.

그런데 서버를 실행시키는 app.js 파일이 꽤 복잡해졌다. app.js는 서버를 실행시키는 코드만 남기고, 라우터를 관리하는 파일을 따로 생성해서 관심사를 분리해보자!

🔌 라우터 분리하기

user 폴더를 생성하고 index.js 파일을 만들었다.

라우터를 분리하기 위해서는 express의 Router 함수로 라우터를 생성해서 사용하면 된다.

user/index.js

const express = require('express');
const router = express.Router();

// app이 아닌 router!
router.post('/login', (req, res) => {
  // ...
});
router.post('/register', (req, res) => {
  // ...
});

module.exports = router;

그리고 기존에 app.js에서는 userRouter를 불러와서 넣어주기만 하면 된다.

app.js

const userRouter = require('./user');
app.use('/user', userRouter);

app.js가 매우 깔끔해졌다. ^0^

📁 npm 프로젝트 생성

Nodejs를 설치했다면 npm이 자동으로 설치되는데, npm을 사용해서 package들을 관리하기 위해 원하는 폴더에서 터미널을 열어서 아래 명령어로 npm 프로젝트를 생성한다.

$ npm init -y

-y옵션으로 프로젝트를 만들면 초기 세팅 없이 빈 프로젝트를 생성해준다.

📂 Express 설치

이제 Express를 설치해보자.

$ npm i express

🔍 Express 설치하는 동안 읽어보기

여러 자료나 강의를 보면 npm 모듈을 다운받을 때, --save(-S) 옵션을 주는 경우가 많은데 이 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미다.

나는 -S를 안해도 잘만 dependency 항목에 들어가길래 무슨 차이인가 싶었는데, 예전에는 package.json dependency 항목에 추가되지 않는게 기본 옵션이었다고 한다. 다른 환경에서 작업할 경우 -S 옵션을 사용해 다운받지 않은 라이브러리는 npm i 를 했을 경우 node_modules에 추가되지 않았었다고,,

하지만 npm5 부터는 --save가 기본 옵션이라서 이제는 --save를 사용하지 않아도 dependency에 자동으로 항목이 추가된다.

⌨️ Express 서버 코드 작성

src 폴더 안에 app.js 파일을 생성한다.

Epxress 앱을 가져와서 localhost 3001번 포트에서 실행시키고, / 경로로 요청이 오면 'Hello Express!'를 보내주도록 했다.

app.js

const express = require('express');
const app = express();
app.use(express.json());
app.listen(3001, () => {
  console.log('http://localhost:3001');
});
app.get('/', (req, res) => {
  res.send('Hello Express!');
});

나는 commonjs 방식으로 모듈들을 require해서 사용했는데, moudle 방식으로 import 해서 사용하고 싶다면 package.json에 아래 설정을 추가해주면 된다.

"type": "module"

💡 Express 서버 실행

src 경로에서 터미널을 열고 아래 명령어로 서버를 실행시킨다.

node app.js

그런데 서버를 실행시킬 때마다 매번 node app.js를 치는건 번거로운 일이다. 그래서 package.json에 scripts 객체에 start 명령어로 스크립트를 작성해보자.

package.json

"scripts": {
  "start": "node ./src/app.js"
}

명령어가 실행되는건 package.json 파일이 있는 경로이기 때문에, 상대경로로 경로를 설정해줬다.

이제는 package.json이 있는 경로의 터미널에서 npm start라는 명령어로 간편하게 서버를 실행시킬 수 있다.

서버를 실행시키고, http://localhost:3001에 접속해보면 브라우저에 'Hello Express!'가 출력된 것을 볼 수 있다.

'Hello Express!'가 아니라 'Hello World.'를 출력해보자.

app.js

app.get('/', (req, res) => {
  res.send('Hello World.');
});

코드를 수정하고 저장을 한 뒤에 브라우저를 새로고침 해서 확인해봤는데, 여전히 'Hello Express!'가 출력된다.

이유는 node는 app.js가 최종적으로 저장된 결과물을 실행시켜줄 뿐, 서버가 실행되는 동안 소스가 변경된다 해도 반영되지 않는다. 그래서 내용이 변경되면 서버를 끄고, 다시 실행시켜야한다.

이런 불편함을 덜기위해 nodemon이라는 모듈을 사용해서, 자동으로 서버를 재시작해줄 수 있다.

🔭 nodemon 사용해서 변경사항 감지하기

아래 명령어로 nodemon을 설치한다.

$ npm i nodemon

그리고 package.json에서 서버를 실행시키는 명령어를 node가 아닌 nodemon으로 변경하면 된다.

package.json

"scripts": {
  "start": "nodemon --watch ./src ./src/app.js"
}

--watch 명령어로 src 폴더 경로에 있는 소스 코드의 변경을 감지하고 서버를 재시작해준다.

Express는 웹 어플리케이션 프레임워크다. Nodejs 기반으로 만들어진 프레임워크로 자바스크립트로 서버 개발이 가능해서 프론트엔드 개발자인 나도 어렵지 않게 서버 개발 경험을 해볼 수 있었다.

Express를 익히기 위해 혼자서 게시판 프로젝트를 진행했는데, 서버 개발을 하면서 DB연동도 하고 sql로 간단한 쿼리도 작성하면서 정말 즐거웠다!

📚 게시판 프로젝트 목표

• CRUD 기능 개발
• Middleware 사용
• REST Client로 API 테스트
• Database 연동
• JWT로 토큰 발급
• crypto로 비밀번호 암호화
• CORS 라이브러리를 사용해 SOP(same origin policy) 처리
• vscode로 디버깅

간단해보이는 게시판 프로젝트여도 알아야 할 것들이 정말 많았다. 나는 기본적으로 서버를 구현할 때 알아야 한다고 생각되는 것들을 목표로 하고 구현해 나가면서 공부했다.

웹 프론트엔드 개발을 하면서는 디버깅을 많이 안했었는데, 사실 디버깅을 하지 않고 매번 console.log로 들어오는 파라미터 값들을 확인하는건 꽤 번거롭다. 그래서 express로 서버 개발을 하면서는 vscode의 디버깅 기능을 꼭 사용해보겠다고 마음 먹었는데, 생각보다 디버깅 방법이 간단했다.

📃 어플리케이션 요구 사항

요구 사항을 직접 설정하고 개발을 시작했다. 복잡한 어플리케이션이 아니여서, 간단하게 설정했다.

• 로그인, 회원가입 기능
• 로그인 여부에 상관없이 글 조회 가능
• 로그인 한 사용자만 글 생성 가능
• 본인 글만 수정, 삭제 가능

📁 Database Table

테이블은 사용자 정보를 저장할 users와 글 정보를 저장할 posts 두 개가 있다.

users Table

posts Table

👋 게시판 앱 소개

📌 게시판 페이지

디자인은 간단하게 했다. 글 조회는 로그인 없이 가능하지만, 글 작성 및 수정 삭제 기능은 로그인을 해야 가능하다.

Token에 사용자 정보를 담아서, 글 작성자와 글 수정 삭제를 요청하는 사용자가 같을 경우에만 요청을 처리해준다.

📌 글 상세 페이지

제목, 작성자, 작성일시, 내용을 조회해서 보여주는데 글 조회를 요청한 사용자와 글을 작성한 사용자가 같을 경우에만 수정, 삭제 버튼이 보이도록 했다.

이미 개발을 마친 상태이지만, 개발 과정을 기록해두고 싶어서 velog에 시리즈로 포스팅 할 예정이다.