[1人1P] 5. 프론트엔드 개발 & 배포

들어가며

백엔드 개발을 완료했으니 이제 프론트엔드 개발에 대한 이야기를 해보겠다. 필자의 경우에는 1인 프로젝트였기 때문에 혼자서 백엔드와 프론트엔드 개발을 오가며 상호 수정 과정을 통해 백엔드를 완성했다. 이제 백엔드 개발이 완료되었으니 이렇게 프론트엔드에 대한 글을 작성해본다.

프론트엔드

프론트엔드는 NextJS를 이용해서 작성할 것이다. 다양한 프레임워크를 두고 NextJS를 선택한 이유는 TS를 쓰는 것이 개인적으로 개발하기도 편리하고 백엔드와 같은 언어를 공유한다는 점에서 오는 속도면에서의 이점을 얻기 위해서이다.

NextJS 프로젝트를 생성하는 것은 간단하다. 콘솔에 npx create-next-app@latest를 입력해서 시작할 수 있다.

프론트엔드는 딱히 쓸 말이 없다. React를 해본 사람이라면 이해할 것이다. 그냥 HTML 코드와 약간의 변수관리 정도가 다이다.

코드를 좁게 보면 이런 느낌이다. 코드가 너무 길어서 설명하기도 어려울 뿐더러 설명할게 크게 없다.

비슷한 방법으로 나의 부족한 미적 감각을 이용해서 사이트를 구성지게 꾸며주면 프론트엔드는 끝난다.

shadcn ui kit

sahdcn은 나의 부족한 미적 감각을 보완해줄 좋은 도구이다. NextJS 기반의 프로젝트에서 다양한 컴포넌트를 쉽게 불러와 쓸 수 있도록 UI KIT이 구현되어 있다

다양한 UI KIT이 미리 정의되어있기 때문에 필요에 따라 가져다 쓸 수 있어서 시간을 매우 많이 절약할 수 있었다.

정의되어있는 모습은 이렇게 되어 있다. npm을 이용해서 설치하여 사용할 수도 있고, 따로 코드를 복사해서 구현할 수도 있다.

shadcn은 다른 ui kit들과 다르게 필요한 컴포넌트만 골라서 설치할 수 있기 때문에 다른 kit에 비해 가볍다는 장점도 있다.

최종적으로 UI는 이런 느낌으로 완성하였다. UI KIT을 활용하였더니 퀄리티가 꽤나 좋게 나왔다.

배포

서비스는 개발하는 것도 중요하지만, 어떻게 서비스를 배포하는지도 서비스의 지속가능성에 큰 영향을 끼친다. 필자가 진행한 프로젝트 서비스는 백엔드와 DB를 포함하기 때문에 일반적인 무료 호스팅 사이트 배포가 불가능하다. 물론 NextJS에 프론트엔드와 백엔드를 통합하고 MongoDB나 SupabaseDB 같은 웹 기반 DB를 쓴다면 가능은 하겠지만, 운용중인 개인 서버가 있기 때문에 해당 서버로 서비스를 배포하였다.

서비스 배포 과정에서 많이 나오는 개념이 CI/CD이다. CI(Continuous Integration)은 지속적 통합으로 코드 변경 사항을 Github에 올리는 등 통합하는 과정을 의미한다. CD(Continuous Deployment)는 지속적 배포로, 코드 변경사항을 자동으로 배포하여 서비스를 제공하는 과정을 의미한다.

필자는 이미 해당 프로젝트의 변경사항을 기능 단위별로 Github에 업로드하고 있다. 이제는 배포 과정을 추가하여 CI/CD를 완성하면 되는 것이다.

배포는 Github Actions라는 기능을 이용할 것이다. Github Actions는 Github 자체의 VM에서 개발자가 지정한 프로세스를 실행해주는 기능이다. 필자는 여기에 서비스를 빌드하고, 이미지를 저장소에 업로드한 뒤에 개인 서버로 배포 트리거를 보내는 워크플로우를 구성하였다. Github Actions Workflow는 프로젝트 파일 루트에서 .github/workflows/[FILE] 의 형태로 정의한다.

다음은 필자가 배포를 위해 추가한 워크플로우 파일이다.

name: Build and Deploy Backend

on:
  push:
    branches: [main, master]
  workflow_dispatch:

jobs:
  docker:
    runs-on: ubuntu-latest
    timeout-minutes: 25
    permissions:
      contents: read
      packages: write

    steps:
      - uses: actions/checkout@v4

      - uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - uses: docker/build-push-action@v6
        with:
          context: .
          push: true
          tags: |
            ghcr.io/vvcnyy/project-1-back:latest
            ghcr.io/vvcnyy/project-1-back:${{ github.sha }}

파일을 해석해보자면 다음과 같은 내용을 담고있다.

• 실행OS : Ubuntu
• 단계
  • Git Checkout : 저장소 로드
  • GHCR Login : 이미지 업로드 저장소 로그인
  • Build And Push : 도커 이미지 빌드 & 이미지 저장소 업로드

이러한 워크플로우가 성공적으로 실행되면 Github에서 필자의 서버로 Webhook을 날려서 자동으로 이미지 배포를 진행한다. 이로써 지속적 배포의 목적을 달성할 수 있게 된다.

이렇게 배포가 잘 된 모습을 확인할 수 있다.

프로젝트를 마치며

프로젝트 마감 기한이 얼마 남지 않았기 때문에 원래 의도했던 것 만큼 블로그를 자세히 작성하지 못한 것이 아쉽다. 이번 프로젝트를 진행하면서 서비스 구조의 대한 필자 본인의 지식을 한 번 더 점검해볼 수 있는 시간이 된 것 같아서 뜻깊다. 이상으로 모든 공업일반 프로젝트를 마친다.