회사에 프론트엔드 개발자로 일하며 어느덧 2년차가 되어가는 와중에 npm 내가 쓰기위한 라이브러리를 배포해보는 개인 프로젝트들은 진행해 봤지만 취업준비를 했던 때 처럼 웹사이트를 만들어보는 프로젝트를 다시 한번 진행해보고 싶었다.

새로운 주제를 잡고 만들어 볼까 싶었지만 예전에 진행한 지금 와서 생각하면 아쉬웠던 프로젝트를 리팩토링 해야겠다는 마음에 시작하게되었다.

1. 기존 프로젝트 분석

💡 주제 및 개기

• 주제: 의류 쇼핑몰 (e-commerce)
• 하나의 사이트를 만들어보는 프로젝트를 진행해보고 싶었음
• typescript, nextjs를 부딪치며 숙달하고자 진행

🛠 사용기술

• typescript
• nextjs
• redux toolkit
• mongoDB
• next-auth

⚙ 기능

• 유저 및 배송지 관리
• 상품 (카테고리, 사이즈, 색상)
• 결제 및 환불 (부트페이 사용)
• 좋아요, 장바구니 기능
• 상품 리뷰

🔧 개선사항

기술에 대해 미숙한 상태로 진행한점과 기획과 명확한 기능 명세를 정리하지 않고 개발을 하다보니 그때 그때 생각난 기능을 개발하는데 급급했었던 프로젝트였다. 그러다보니 기능은 동작하지만 최적화를 하지못하여 느리고 버벅거리는 현상이 많았었다.

• 기획을 제대로 하지 못하여 중간중간 데이터베이스를 수정하는 일이 잦았고 그에 따라 전체적인 코드들의 수정사항이 너무나도 많았었다.
• typescript 에 익숙하지 않아 interface나 type들을 중복해서 만드는 일이 많았다.
• react, nextjs, 상태관리에 대해 미숙했기에 전체적으로 렌더링 최적화를 진행하지 못했었다. (이미지 최적화라도 했으면 좋았을텐데..)
• 데이터 캐싱을 신경쓰지 못하였다.

다른 개선사항들도 있었겠지만 위 사항들이 가장 아쉬웠던 부분들이 아니었나 생각이 들었다.

2. 재기획

🛠 기술

개발전에 사용할 기술을 다시 정리해보자

• typescript
• nextjs
• postgresql
• prisma
• 상태관리 (고민중... zustand?)
• next-auth
• tailwind, postcss
• eslint, prettier, stylelint, commitlint

⚙ 기능

기존 기능들에 실제 의류쇼핑몰들에 사용되는 기능들까지 추가하고자 한다.

• 유저 (배송지 및 등록카드 관리)
• 상품 (색상, 카테고리, 사이즈, 재고관리)
• 할인, 포인트 및 쿠폰 기능
• 상품 리뷰 및 Q&A
• 쇼핑몰 커뮤니티 (공지 및 Q&A)
• 결제 (PG연동x) 및 환불
• 관리자 (상품, 게시글 관리 기능)

필요한 기능 구현사항들 정리

🔩 DB 설계

필요한 테이블 종류들만 간단히 나열

• 유저
• 상품
• 상품상세(색상, 사이즈, 재고)
• 카테고리, 색상, 사이즈
• 상품 리뷰
• 상품문의, 상품문의 답변
• 위시리스트 (상품에대한 정보만)
• 장바구니 (상품상제정보까지)
• 쿠폰, 포인트
• 할인
• 주문 (여러 상품을 한번에 구매할때)
• 주문상세 (주문내의 각각 상품 정보 담김)
• 배송지
• 커뮤니티, 몰 문의
• 룩북

...

프로젝트를 시작하기 앞서 기획을 간단하게나마 정리를 해보니 이전에는 얼마나 막무가네로 시작했는지를 보고 어질어질한 느낌이다...

이제 간단하게 정리한 내용들을 기반으로 화면을 생각해보고 DB를 명확히 설계한 후에 프로젝트 진행을 할 것이다.

[Virtual Scroll 만들기] 해당글의 virtual scroll을 구현하고나서 스크롤바도 직접 구현하면 재미있겠다!(?) 라는 생각으로 시작했다.

💡 Concept

스크롤 영역에 마우스 호버 시 영역위에 스크롤이 보여지는 형태로 구현하자!

🔧 구현

구현은 서론에서 언급한 글의 virtual scroll을 확장하여 구현하였다.

이전 코드 - Virtual Scroll

!codepen[niyzvcda-the-bashful/embed/LYqeYJZ?default-tab=js%2Cresult]

템플릿 확장

HTML

<div class="wrapper">
    <div class="container">
    <div class="scroll-content">
        <div class="content">
        <table role="presentation">
            <thead role="presentation"></thead>
            <tbody role="presentation"></tbody>
            <tfoot role="presentation"></tfoot>
        </table>
        </div>
    </div>
    <!-- New Template -->
    <div class="sb">
        <div class="sb-thumb">
        <div class="sb-thumb-content"></div>
        </div>
    </div>
    </div>
</div>

CSS

/* ... */

.sb {
  position: absolute;
  pointer-events: auto;
  top: 0;
  right: 0;
  height: 100%;
  transition: background-color 0.5s linear 1s;
}

.sb:hover,
.sb:has(.sb-thumb-active) {
  background-color: rgba(207, 218, 233, 0.33);
  transition: background-color 0.15s linear 0.15s;
}

.sb .sb-thumb {
  width: 8px;
  height: 0;
  padding: 0 2px;
  transition:
    width 0.2s linear 0.15s,
    transform 0.1s ease-in-out;
}

.sb:hover .sb-thumb,
.sb .sb-thumb-active {
  width: 15px;
}

.sb-thumb-content {
  position: relative;
  width: 100%;
  height: 100%;
  transition: background-color 0.5s linear 1s;
}

.sb-thumb-content::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: transparent;
  transition: background-color 0.15s linear 0.15s;
}

.wrapper:hover .sb-thumb-content {
  transition: background-color 0.15s linear 0.15s;
  background-color: #b4b4b4;
}

.sb-thumb:is(:active, .sb-thumb-active) .sb-thumb-content::after {
  background-color: rgba(56, 149, 225, 0.8);
}

스크롤 막대의 높이 계산

너비와 높이, 데이터의 양이 고정된 템플릿에서 스크롤 막대의 높이를 계산한다.

const minScrollThumbHeight = 20 // 막대의 최소크기

const scrollThumbRatio = viewportHeight / scrollHeight; // 전체 컨텐츠와 보여지는 영역의 비율
const thumbHeight = viewportHeight * scrollThumbRatio
const scrollThumbHeight = Math.max(thumbHeight, minScrollThumbHeight)

스크롤 막대 이동거리 계산

위에서 계산한 높이를 토대로 이동거리를 계산한다.

/**
 * @param {number} scrollTop
 */
function calculateTranslate(scrollTop) {
  const maxTranslateY = viewportHeight - scrollThumbHeight // 막대의 최대 이동거리
  const translateRatio = scrollTop / scrollHeight
  const translateY = Math.min(translateRatio * viewportHeight, maxTranslateY)
  return translateY
}

❗ 문제점

하지만 위와 같이 계산할 경우 thumbHeight < scrollThumbHeight 경우에 offset의 끝에서 scrollThumbHeight - thumbHeight의 차이의 translate 영역에 해당하는 데이터는 maxTranslateY의 크기제한으로 인해 볼 수 없게되는 문제가 발생한다.

🔨 개선

실제 개산한 막대크기와 최소 막대크기의 차이만큼을 viewportHeight에서 빼준 값을 스크롤바 영역의 길이로 계산하여 translate값을 구하면 위의 문제점을 해결할 수 있다.

const thumbDiff = scrollThumbHeight - thumbHeight의
const scrollbarHeight = viewportHeight - thumbDiff

/**
 * @param {number} scrollTop
 */
function calculateTranslate(scrollTop) {
  ...
  const translateY = Math.min(translateRatio * scrollbarHeight, maxTranslateY)
  ...
}

✔ 결과 - offsets 계산 함수와 병합

// 스크롤 막대 높이 계산
const scrollThumbRatio = viewportHeight / scrollHeight;
const thumbHeight = viewportHeight * scrollThumbRatio;
const scrollThumbHeight = Math.max(thumbHeight, minScrollThumbHeight);
const scrollThumbDiff = scrollThumbHeight - thumbHeight;
const scrollbarHeight = viewportHeight - scrollThumbDiff;

/**
 * @param {number} scrollTop
 */
function calculateVariables(scrollTop) {
  const passNodeCount = Math.floor(scrollTop / rowHeight); // 지나온 노드의 개수
  const maxStartIndex = dataSize - visibleNodeCount; // startIndex의 최대값

  // 인덱스 계산
  let startIndex = Math.min(Math.max(passNodeCount - nodePadding, 0), maxStartIndex);
  const endIndex = startIndex + visibleNodeCount;
  const offsets = [startIndex, endIndex];

  // 스크롤 막대 이동거리 계산
  const maxTranslateY = viewportHeight - scrollThumbHeight;
  const translateRatio = scrollTop / scrollHeight;
  const translateY = Math.min(translateRatio * scrollbarHeight, maxTranslateY);

  return { offsets, translateY };
}

함수가 병합되었으므로 해당 함수를 사용하던 onScrollChange 함수를 업데이트 해준다.

function onScrollChange(newScrollTop) {
  const { offsets, translateY } = calculateVariables(newScrollTop);
  render(offsets);
  $container.scrollTop = newScrollTop;
  $thumb.style.transform = `translateY(${translateY}px)`; // 막대 이동
}

스크롤 이벤트 등록

scrollTop에 따른 가변값을 계산 함수를 구현하였으니, 이제는 이벤트를 등록하여 실제로 움직일 수 있도록 할 차례이다.

하지만 여기서 우리는 의문을 가질 수 있다.

스크롤이 비활성화 되어있는 상태에서 어떻게 스크롤 이벤트를 발생시키지?

이제 대한 방안으로 나는 Wheel event를 사용하였다.

Wheel Scroll

MDN Web Docs를 보면 wheel event에는 delta라는 속성이 존재하는것을 볼 수 있다. delta 값은 우리가 스크롤을 한번 이동하면 Chrome을 기준으로 100의 값이 발생한다. (아래로 스크롤 시 100, 위로 스크롤 시 -100)

이 delta 값을 scrollTop에 더해주는 것으로 스크롤 이동을 구현하였다.

let scrollTop = 0

$container.addEventListener('wheel', (event) => {
  if (event.shiftKey === false) {
    const step = event.deltaY
    const moveScrollTop = scrollTop + step
    const newScrollTop = Math.max(Math.min(moveScrollTop, maxScrollTop), 0)
    // 스크롤이 가능할 경우 기본 스크롤 이벤트를 막아준다.
    // 외부 스크롤영역이 존재할 경우 같이 스크롤되는 문제를 방지하기 위함
    if (moveScrollTop >= 0 && moveScrollTop <= maxScrollTop) event.preventDefault()
    scrollTop = newScrollTop
    onScrollChange(newScrollTop)
  }
}, { passive: false })

Drag Scroll

컨텐츠를 넘기기 위한 다른 방법으로는 스크롤 막대를 직접 움직여서 이동하는 방법이 존재한다.

이에 대한 구현사항은 다음과 같다.

/** @type {HTMLElement} */
const $html = document.querySelector('html');

/** @type {null | number} */
let dragStartY = null; // 드래그 시작 y 좌표
let prevUserSelect = ''; // document body's previous userSelect css property value


$scrollbar.addEventListener('mousedown', (event) => {
  if ($thumb.contains(event.target)) {
    // 스크롤바에서 스크롤막대에 마우스를 누른경우
    // 마우스를 누르기 시작한 시점의 Y좌표를 기억한다
    dragStartY = event.pageY;
    $thumb.style.transition = 'none';
    prevUserSelect = document.body.style.userSelect;
  }
});

document.body.addEventListener('mousemove', (event) => {
  // 문서에서 마우스를 움직일경우
  if (typeof dragStartY === 'number') {
    // 시작Y좌표가 설정되어 있다면 스크롤 이동을 시작한다.
    event.preventDefault();
    document.body.style.userSelect = 'none'; // 스크롤 이동시 텍스트가 선택되는것을 방지
    const currentY = event.pageY;
    const translateDelta = currentY - dragStartY; // 막대가 이동할 거리
    onTranslate(translateDelta); // 막대 이동
    dragStartY = currentY; // 드래그 시작위치를 이동한 위치로 변경
  }
});

/**
 * @param {number} translateDelta
 */
function onTranslate(translateDelta) {
  const { translateY } = calculateVariables(scrollTop);
  // 현재 막대위치에서 이동할 거리를 더하여 새롭게 이동할 scrollTop을 역산한다.
  const newScrollTop = Math.max(((translateY + translateDelta) * scrollHeight) / scrollbarHeight, 0);
  onScrollChange(newScrollTop);
  scrollTop = newScrollTop;
}

$html.addEventListener('mouseup', () => {
  // 문서 전체에 대해서
  if (typeof dragStartY === 'number') {
    // 시작Y좌표가 설정 되어있다면 막대이동을 종료시킨다.
    document.body.style.userSelect = prevUserSelect; // 기본 userSelect 값으로 초기화
    dragStartY = null;
    $thumb.style.transition = '';
  }
});

Click Scroll

마지막 스크롤 이동방법으로 막대가 아닌 scrollbar 영역을 클릭하여 막대를 클릭한 위치까지 이동시키는 방법이 있다.

let isTracking = false; // scrolling flag
let trackId = -1; // interval id

// 마우스가 스크롤바영역 밖으로 나가거나 마우스 클릭을 종료하면
// 해당위치까지의 추적을 종료시킨다
$scrollbar.addEventListener('mouseleave', () => (isTracking = false));
$scrollbar.addEventListener('mouseup', () => (isTracking = false));
$scrollbar.addEventListener('mousedown', (event) => {
  // 스크롤에 마우스를 누른경우
  event.stopPropagation();
  clearInterval(trackId); // interval 초기화
  // 마우스를 누른 위치가 막대영역과 겹쳐있다면 이동을 종료
  if ($thumb.contains(event.target)) return (isTracking = false);
  isTracking = true;

  const offset = event.offsetY;
  const { translateY } = calculateVariables(scrollTop);

  const minOffset = Math.max(offset - scrollThumbHeight, 0); // 막대가 아래로 이동할때 멈출 최소 offset
  // 현재막대를 기준으로 위쪽을 클릭하였다면 -1 아래를 클릭하였다면 1
  const multiplier = offset < (translateY + translateY + scrollThumbHeight) / 2 ? -1 : 1;
  const delta = 100 * multiplier; // 델타값 생성
  trackId = setInterval(() => {
    if (!isTracking) clearInterval(trackId);
    // 새로운 스크롤 위치를 계산하여 이동
    scrollTop = Math.max(Math.min(scrollTop + delta, maxScrollTop), 0);
    onScrollChange(scrollTop);
    const changeY = calculateVariables(scrollTop).translateY;
    // 막대가 마우스를 누른영역과 겹칠경우 이동을 종료시킨다.
    if ((multiplier > 0 && changeY > minOffset) || (multiplier < 0 && changeY < offset)) isTracking = false;
  }, 33);
});

✨ 결과

!codepen[niyzvcda-the-bashful/embed/ExreMXy?default-tab=js%2Cresult]

회사에서 진행하는 프로젝트에서 10,000개 이상의 데이터를 표출하는 일이 생겼었다. 기존에 개발된 코드에는 데이터의 개수만큼 tr 요소를 innerHTML로 삽입해 주고 있었고,

// Example
const $tableBody = document.querySelector('table tbody')
$tableBody.innerHTML = datas.map((data, index) => {
  `<tr>
     <td>${index}</td>
     <td>${data}</td>
   </tr>`
}).join('')

이로 인해 DOM을 그리는 과정에서 시간이 5초 이상 걸리거나 심할 경우 브라우저 탭이 먹통이 되어 고생했던 적이 있었다.

위의 문제를 해결하기 위한 방법으로는 Paging, Virutal Scroll이 있었고 다행히도 회사에서 구매한 라이브러리 중에 가상스크롤을 지원하는 DataGrid가 있어서 빨리 해결할 수 있었고 나중에는 직접 구현해 봐야겠다는 마음을 먹고 구현하게 되었다.

🤔 Virtual Scroll?

Virutal scroll은 많은 데이터에서 사용자가 볼 수 있는 영역내에서 볼 수 있을만큼의 데이터만 표출하여 DOM을 그리는데 사용되는 리소스를 줄이는 기법이다.

[이미지출처: Virtual scrolling: Core principles and basic implementation in React]

📝 용어 정의

구현에 앞서 사용할 변수들의 명칭을 다음과 같이 정의하였다.

🔧 구현

이제 Virtual scroll을 구현하기 위해서 우리는 scrollTop값의 변화에 따라 offset(startIndex, endIndex)를 구하여 데이터를 표출할 것이다.

필자는 스크롤 또한 div 태그를 통하여 별도로 구현했기에 scrollTop값 변화에 따른 translateY, scrollThumbHeight, startIndex, endIndex 등의 값을 직접 계산하였음

템플릿

구현에 앞서 우선 템플릿 만든다.

HTML

<!-- Virtual scroll wrapper -->
<div class="wrapper">
  <!-- Scrollable container -->
  <div class="container">
    <div class="scroll-content">
      <div class="content">
        <table>
          <!-- Virtual top area -->
          <thead></thead>
          <!-- Data area -->
          <tbody></tbody>
          <!-- Virtual bottom area -->
          <tfoot></tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}

td,
th {
  padding: 0;
}

td {
  padding: 3px 6px;
}

[aria-hidden='true'] {
  display: none !important;
}

/* Table border */

table tr,
table td {
  border: 1px solid #d3d3d3;
  color: #333;
  font-size: 14px;
}

/* Body */

.wrapper {
  position: relative;
  width: 300px;
  height: 320px;
}

.container {
  height: calc(100% + 1px);
  margin-top: -1px;
  overflow: auto;
  width: 100%;
  border: 1px solid #d3d3d3;
  border-left-width: 0;
  border-right-width: 0;
}

.scroll-content {
  position: relative;
  overflow-anchor: none;
  min-width: 100%;
  min-height: 100%;
  display: block;
  float: left;
}

.scroll-content::before,
.scroll-content::after {
  display: table;
  content: '';
  line-height: 0;
}

.scroll-content::after {
  clear: both;
}

.content {
  min-height: 100%;
  overflow-anchor: none;
  position: relative;
}

불변값 설정

너비와 높이가 고정된 템플릿을 기준으로 구할 수 있는 불변값을 먼저 설정한다. (데이터의 개수는 원하는데로 설정)

const viewportHeight = 320 // rowHeight * 10
const rowHeight = 32    // 로우 높이
const nodePadding = 5    // 위아래에 추가로 같이 렌더링할 로우 개수

const datas = Array.from({ length: 100 }, (_, i) => i)
const dataSize = datas.length // 100
const totalRowHeight = rowHeight * dataSize // 3200
const scrollHeight = totalRowHeight

// 최대 scrollTop
const maxScrollTop = Math.max(scrollHeight - viewportHeight, 0)

// 화면에 보이는 개수
const nodeCount = Math.ceil(viewportHeight / rowHeight) // 10
// 실제 보여지는 개수
const visibleNodeCount = nodeCount + nodePadding * 2 // 20

scrollTop에 따른 offsets 구하기

scrollTop은 내가 지나온 영역의 높이와 같다. 따라서 지나온 데이터의 개수를 구하는 공식은 다음과 같다.

지나간 데이터의 개수 = 지나온 영역의 높이 / 한개의 행 높이

이를 통해 다음과 같이 offsets을 구하는 함수를 구현하였다.

/**
 * @param {number} scrollTop
 */
function calculateOffsets(scrollTop) {
  const passNodeCount = Math.floor(scrollTop / rowHeight) // 지나온 노드의 개수
  const maxStartIndex = dataSize - visibleNodeCount // startIndex의 최대값

  // 인덱스 계산
  let startIndex = Math.min(Math.max(passNodeCount - nodePadding, 0), maxStartIndex)
  const endIndex = startIndex + visibleNodeCount
  const offsets = [startIndex, endIndex]

  return offsets
}

DOM에 데이터 렌더링

위의 과정으로 계산한 offsets를 사용하여 DOM에 데이터를 표출할 수 있어야한다. 나는 그려지지 않는 데이터들에 대해서 높이값을 설정해주고, 변화하는 offsets에 대응하여 로우를 동적으로 추가해주는 함수를 작성하였다.

const $tbody = document.querySelector('table tbody')
const $thead = $tbody.previousElementSibling
const $tfoot = $tbody.nextElementSibling

const rowMap = {} // 렌더링 된 요소를 저장할 변수

/**
 * @param {[number, number]} offsets 
 */
function render(offsets) {
  const [startIndex, endIndex] = offsets

  // 상단 하단 여백 설정
  const virtualTopHeight = Math.max(startIndex * rowHeight, 0)
  const virtualBottomHeight = Math.max((dataSize - endIndex) * rowHeight, 0)

  if (virtualTopHeight === 0) $thead.innerHTML = ''
  else $thead.innerHTML = `<tr role="row" style="height:${virtualTopHeight}px"><td></td></tr>`
  if (virtualBottomHeight === 0) $tfoot.innerHTML = ''
  else $tfoot.innerHTML = `<tr role="row" style="height:${virtualBottomHeight}px"><td></td></tr>`

  // 데이터 로우 렌더링
  datas.forEach((data, index) => {
      const rowindex = index + 1
      const mapItem = rowMap[rowindex]
      if (startIndex < rowindex && index < endIndex) {
          // 보여질 데이터인 경우
          if (!mapItem) {
              // DOM에 추가되지 않았다면 추가해준다.
              const $tr = document.createElement('tr')
              $tr.role = 'row'
              $tr.ariaRowIndex = `${rowindex}`
              $tr.style.height = `${rowHeight}px`
              $tr.innerHTML = `<td role="gridcell">Row ${rowindex}</td>`

              const $after = document.querySelector(`tr[aria-rowindex="${rowindex}"]`) // 그려질 로우의 다음에 올 노드
              if ($after) $tbody.insertBefore($tr, $after)
              else {
                  // 가장 가까운 인덱스가 큰 요소를 찾아 해당 요소 전에 삽입
                  const $next = Array.from($tbody.childNodes).find(($row) => rowindex < Number($row.ariaRowIndex))
                  $tbody.insertBefore($tr, $next ?? null)
              }
              rowMap[rowindex] = $tr // 맵에 요소 저장
          }
      } else if (mapItem) {
          // 보이지 않는 데이터인 경우
          mapItem.remove() // DOM에 그려진 요소가 있다면 삭제
          delete rowMap[rowindex] // 맵에서 삭제
      }
  })
}

render(calculateOffsets(0)) // 초기 화면 렌더링

Scrollbar와 연동

마지막으로 스크롤영역에 스크롤 이벤트를 통하여 scrollTop 변화에 따라 데이터를 렌더링 할 수 있도록 해준다.

const $container = document.querySelector('.container')
$container.addEventListener('scroll', (event) => {
  render(calculateOffsets(event.currentTarget.scrollTop))
});

✨ 데모

!codepen[niyzvcda-the-bashful/embed/LYqeYJZ?default-tab=js%2Cresult]

♻️ Next?

이렇게 그리 길지 않은 코드로 virtual scroll을 구현할 수 있었다.

이 글에서는 container의 scrollTop을 연동하여 사용하였지만 스크롤을 따로 두고 컨텐츠의 translate를 조정하여 데이터를 표현하는 방법도 있고 다양한 구현방식이 존재할 것이다. 더 좋은 방식이 찾으면 그걸로도 구현해볼 예정이다...

중간에도 언급하였듯이 나는 스크롤바 또한 가상으로 만들어 구현하였기에 다음글에는 virtual scroll + virtual scrollbar를 구성하는 방법에 대해 올리도록 하겠다.

[참조]

• Build your Own Virtual Scroll - Part I

Next.js를 Express 서버와 함께 실행시키는 방법입니다.

설치

CRN - Next.js 프로젝트를 생성

npx create-next-app@latest

# √ What is your project named? ... client
# √ Would you like to use TypeScript with this project? ... No
# √ Would you like to use ESLint with this project? ... Yes

기존 폴더 구조	src 사용

Express 설치

npm install --save express dotenv

# 서버 자동 재시작을 위한 패키지
npm install --save-dev nodemon

Express 서버 생성

Express 서버파일을 작성합니다.

생성한 Next.js 프로젝트 폴더에 server 폴더 생성 server.js 파일에 Express 서버를 실행하기 위한 코드 작성

// server.js
const express = require('express');
const dotenv = require('dotenv');
dotenv.config({ path: '.env' }); // 환경변수 사용

const app = express();
const port = process.env.PORT; //.env 파일에서 설정해준다

app.set('port', port);
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/', (req, res, next) => {
  res.send('hello!');
});

app.listen(app.get('port'), () => {
  console.log(`Express server listen port:${port}`);
  console.log(`http://localhost:${port}`);
});

Next.js 서버 설정

server/server.js 파일에 next.js 서버 설정을 추가합니다.

# .env
SERVER_PORT=[YOUR_PORT]

// server.js
const express = require('express');
const dotenv = require('dotenv');
dotenv.config({ path: '.env' }); // 환경변수 사용
const path = require('path');

/** Create Express */
const app = express();

/** Next.js 모듈 가져오기 */
const next = require('next');
const { parse } = require('url');

/** Next.js 설정 */
const port = process.env.SERVER_PORT;
/**
 * 개발환경이아니라면 dev 옵션을 false 로 설정하고
 * 서버 시작전에 next build 를 실행해준다.
 */
const nextApp = next({ dev: true, port });
const handle = nextApp.getRequestHandler();

nextApp
  .prepare()
  .then(() => {
    /** Express Settings */
    app.use(express.json());
    app.use(express.urlencoded({ extended: true }));
    /** static 경로 설정 */
    app.use(express.static(path.join(__dirname, '../', 'public')));

    /** Express Router Settings */
    app.use('/api', (req, res, next) => {
      res.send('hello!');
    });

    /** Next.js Routing */
    app.get('/', (req, res) => {
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;
      nextApp.render(req, res, pathname, query);
    });
    app.get('*', (req, res) => {
      return handle(req, res);
    });

    app.listen(port, () => {
      console.log(`Express server listen port:${port}`);
      console.log(`http://localhost:${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

module.exports = app;

실행 설정

package.json 파일의 시작명령어 script를 Express를 사용하도록 수정합니다.

// package.json
...,
"scripts": {
    "dev": "node server/server.js",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
...

nodemon 사용

// package.json
...,
"scripts": {
    "dev": "nodemon server/server.js",
  },
...

nodemon.json 사용

• nodemon.json 파일을생성

// nodemon.json
{
  "watch": ["server/server.js", "server/src"],
  "exec": "node server/server.js",
  "ext": "js json"
}

• script 수정

// package.json
...,
"scripts": {
    "dev": "nodemon",
  },
...

시작

모든 설정이 완료되었습니다! 이제 시작명령어를 입력하고 Express를 Custom 서버로 사용하는 Next.js를 시작해보세요.

npm run dev

참조

• Next.js 공식문서

• Next.js Custom Server
• d0orHyeok | Express-Next.js-Boiler-Plate