DEVOCEAN

안녕하세요. 오랜만에 인사드립니다.

올 상반기에 에이닷 앱의 웹 뷰 서비스를 새로 구축하는 업무를 맡게 되었습니다.

Nuxt.js 프레임웍(이하 Nuxt) 기반으로 빠르게 서비스를 출시 할 수 있었는데 그 이야기를 해보려고 합니다.

2024년 2월 상황

에이닷 앱 웹 뷰는 2018년도 기술로 구축 된 레거시 프로젝트가 존재합니다.

6년이라는 시간이 흐르는 동안 Front-End 진형의 기술은 크게 발전했습니다.

기술 부채가 많은 레거시 프로젝트 위에서 서비스를 확장하려면 여러 불편함이 존재했는데, 이는 최신 기술을 사용하면 대부분 해결될 문제였습니다.

바꾸고 싶다는 생각은 여러 번 했지만 시간과 자원이 많이 들어가는 일이라 결정이 필요했습니다.

담당님의 지원으로 프로젝트 세팅, 빌드/배포, 서버 구축까지 새로 할 수 있게 됐습니다.

(출처 : https://christierney.com/2015/12/04/technical-debt-in-an-image/)

왜 Nuxt.js 인가?

현재 가장 인기가 많은 라이브러리는 React.js(이하 React)입니다. 그런데 왜 Vue.js(이하 Vue)의 Nuxt를 선택했을까요?

가장 큰 이유는 "러닝 커브(Learning curve)가 낮다"를 이유입니다.

저는 React로 4년, Vue로 4년 개발했습니다. React를 먼저 배우고 나중에 Vue를 배웠습니다. React의 개념이 있는 상태에서 Vue를 배우는 건 어렵지 않았습니다.

양방향 바인딩의 개념을 이해하고 잘 사용할수 있으면 오히려 편하다는 느낌을 받았습니다.

신규 프로젝트 세팅과 신규 서비스 출시 기간이 짧지 않은 상태에서 러닝 커브가 높은 React보다 낮은 Vue를 선택하는 게 맞다고 판단했습니다.

또 React는 단방향 바인딩만 가능하기 때문에 부모 컴포넌트의 상태를 바꾸려면 handler를 구현해서 자식 컴포넌트에 props로 내려 줘야 하는데 이것은 props drilling의 고통을 가중합니다.

Vue의 경우 양방향 바인딩을 지원하기 때문에 이를 깔끔하게 처리 할수 있다는 장점도 크게 다가왔습니다.

React 생태계만큼 Vue도 디버깅 도구, 빠른 업데이트, Nuxt를 지원하고 있어 서비스를 운영하는데 문제가 없다고 판단했습니다.

Nuxt.js를 도입해서 좋았던 점

첫번째, 데이터 기반의 rendering

기존 레거시는 jQuery 라이브러리가 코어 모듈이었습니다.

jQuery의 경험이 있는 분은 알겠지만, HTML 요소의 변경을 주려면 요소를 선택하고 제공하는 속성에 접근해서 값을 하나하나 변경해야 합니다. 정말 귀찮은 일입니다.

let text = ''
text = 'test'
$('#id').val("test")

데이터 기반의 라이브러리를 사용하면 데이터 변경 시 라이브러리에서 알아서 변경해 주기 때문에 불필요한 DOM 요소 조작이 필요 없습니다.

아래 예는 Vue 방식입니다.

<template>
<div>{{ text }}<div>
</template>

<script setup>
const text = ref("")
text.value = 'test'
<script>

아주 단순한 코드라 별 차이가 없다고 느낄 수 있으나 DOM 요소를 찾는 일을 100번 반복한다고 상상하면 크게 다가오실 겁니다.

이 장점은 Nuxt의 장점이라기보다 Vue의 장점이지만 레거시 프로젝트와 비교해서 가장 큰 장점이라 먼저 이야기합니다.

두 번째, 잘 정의 된 설계

프레임웍의 장점은 수많은 논의 끝에 정규화된 규칙이 존재하고 사용자는 그 규칙에 맞게 세팅하면 자동으로 해결되는 게 많다는 점입니다.

프레임웍을 사용하지 않고 프로젝트를 구성하려면 프로젝트의 구조, 사용할 코어 라이브러리, 폴더 이름 하나까지도 논의가 이뤄져야 합니다.

프레임웍을 도입함으로써 결정의 시간을 줄일 수 있었습니다.

세 번째, 간편한 빌드

빌드 설정은 자주 하는 게 아니다 보니 늘 복잡하고 헷갈립니다.

Nuxt는 대부분의 설정을 알아서 해줍니다. 몇 가지 필요한 부분만 문서를 통해 이해하고 추가하면 되기 때문에 간편합니다.

복잡한 Webpack 문서를 읽을 필요가 없습니다.

네 번째, 갖춰진 라이브러리

Nuxt에서 제공하는 유틸리티 함수들이 있습니다.

서버의 API 호출을 하려면 대게는 라이브러리를 사용합니다. Axios가 대표적입니다.

Nuxt는 Ajax 호출을 할 수 있는 내장 유틸리티 함수를 제공합니다. fetch 함수인데 사용 방법이 간단합니다.

<script setup lang="ts">
const dataTwice = await $fetch('/api/item')

const { data } = await useFetch('/api/item')
</script>

다섯 번째, 자동 import

개발하다 보면 필요한 모듈들을 import 해서 상단이 지저분해지는 경험을 했을겁니다.

순서도 개발자마다 스타일이 달라서 논쟁이 되죠.

nuxt는 특정 폴더의 파일들을 알아서 import 해주기 때문에 신경 쓰지 않고 개발할 수 있습니다.

우리의 색깔 입히기

Nuxt로 프로젝트를 기본 틀을 설정한 후, 실무에서 필요한 몇 가지를 추가했습니다.

추가 디렉터리

Nuxt에서 제공하는 디렉터리 외에 필요한 디렉리가 있어서 추가했습니다.

• constants : 상숫값을 등록하는 디렉터리입니다.

• dto : DTO(Data Transfer Object)가 모여 있는 디렉터리입니다.

• type : 타입스크립트의 타입이 모여 있는 디렉터리입니다.

• stores : 서버 API를 호출하고 pinia를 사용한 상태 관리를 위한 디렉터리입니다.

코딩 컨벤션

기존 레거시 프로젝트의 문제점 중의 하나였던 부분이 코딩 컨벤션이 제각각 달랐다는 점입니다.

IDE 설정을 하지 않고, 코드 리뷰도 하지 않으면 코딩 컨벤션을 지키게 할 방법이 없기 때문에 이를 강제할 수 있는 수단이 필요했습니다.

prettier husky 설정

husky를 사용하여 git commit을 할 때 자동으로 prettier 검사가 되고 자동으로 수정 됩니다. prettier 맞게 수정해야 commit을 할수 있도록 강제했습니다.

eslint gitlab runner 설정

gitlab runner를 활용해서 MR(Merge Request)을 올리면 자동으로 eslint, test가 동작하도록 구성했습니다. 모두 pass 해야 MR을 Merge 할 수 있도록 강제했습니다.

구성 추가

nuxt.config.ts 는 Nuxt의 설정을 세팅을 변경할 수 있는 파일입니다. 서비스에 적용하면서 몇 가지 추가한 내용을 남깁니다.

title, lang, meta 정보

아래와 같이 app 하위에 head에 들어갈 정보를 수정할 수 있습니다.

app: {
    head: {
      title: '에이닷'
      htmlAttrs: {
        lang: 'ko'
      },
      meta: [
        { charset: 'utf-8' },
        { 'http-equiv': 'expires', content: '-1' },
        { 'http-equiv': 'expires', content: 'Tue, 01 Jan 1980 1:00:00 GMT' },
        { 'http-equiv': 'pragma', content: 'no-cache' },
        { 'http-equiv': 'cache-control', content: 'no-cache' },
        { 'http-equiv': 'cache-control', content: 'max-age=0' },
        { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
        {
          name: 'viewport',
          content: 'width=device-width,initial-scale=1,user-scalable=yes,viewport-fit=cover'
        },
        { name: 'description', content: 'A. WebView' },
        { name: 'format-detection', content: 'telephone=no' },
        { name: 'author', content: 'SKTelecom' }
      ],
   }
}

ssr 옵션 false

server side rendering이 기본으로 true가 되어 있기 때문에 ssr 옵션을 false로 변경해 줘야 정적 파일로 빌드됩니다.

서버 환경 구축에 따라 옵션을 설정하면 됩니다.

  ssr: false

맺음말

신규 프로젝트를 구성하는데 어떤 라이브러리와 프래임웍을 사용할지 결정하는 것은 쉽지 않습니다.

많은 서비스가 운영되고 있다는 사실을 알고 있지만, 실제 내 서비스에 도입할 때는 상황에 따라 고려해야 하는 부분이 다를 것입니다.

이 글이 새로운 프로젝트를 구성하는 데 의사결정을 하는데 도움이 되었으면 좋겠습니다.