안녕하세요, H:Dev+ 팀입니다. Nuxt3로 서비스를 만들다 보면 게시판 하나 넣는 일이 생각보다 큽니다. 게시물 저장용 테이블을 설계하고, 목록·상세·등록 API를 만들고, 페이지네이션과 검색까지 백엔드 코드를 따로 짜야 하기 때문입니다. 작은 프로젝트라도 이 과정을 건너뛸 수는 없어서, 화면보다 서버 작업에 먼저 손이 가게 됩니다. H:Dev+는 이 과정을 서버 코드 작성 없이 커넥터 호출로 대체합니다.
1. 커넥터를 설치하고 연결 정보를 설정합니다
H:Dev+는 Nuxt3 전용 커넥터를 @hdevplus/connector-nuxt3 패키지로 npm에 공개하고 있습니다. 공식 문서대로 npx nuxi@3.2 init으로 Nuxt3 프로젝트를 만든 뒤 이 패키지를 설치하고, .env에 보안키(HDP_SECURE_KEY)와 API 주소(NUXT_PUBLIC_HDP_API_URL)를 적고, nuxt.config.ts의 modules에 커넥터를 등록하면서 runtimeConfig로 이 값을 연결하면 준비가 끝납니다. 이 커넥터는 Nuxt3 전용이라 버전 없이 npx nuxi init으로 만든 Nuxt4 프로젝트에는 설치되지 않습니다. 보안키는 시스템(System) 콘솔의 설정(Settings) 메뉴에서 발급받는 값이며, 공식 문서는 개발 초기에 가입 없이 바로 쓸 수 있는 데모 보안키도 함께 안내합니다.
2. 데이터 식별자로 목록을 불러옵니다
연결이 끝나면 화면마다 필요한 데이터를 "데이터 식별자(JSON)"로 정의하고 useNuxtApp().$connector(requestData)를 호출합니다. 게시물 목록은 GET_POST_LIST 식별자에 board_seq, 정렬(order)·검색(search_keyword)·페이지(page, list_per_page) 조건을 담아 요청하면 됩니다. 응답에는 post_list 배열과 함께 전체 게시물 수·페이지 번호 같은 pagination 정보도 같이 들어 있어, 받은 post_list를 템플릿에서 그대로 반복(v-for) 출력하고 pagination 값으로 페이지 이동 링크를 만들면 목록 화면이 완성됩니다. 별도의 목록 API를 설계하거나 데이터베이스 쿼리를 짜는 과정은 없습니다.
3. 등록은 폼 속성만으로 처리합니다
게시물 등록은 ADD_POST 식별자로 커넥터를 호출해 게시판 목록(board_list)을 받은 뒤, id="frm_save_post"인 폼에 board_seq·subject·content 같은 정해진 name 속성을 지정하는 방식입니다. 저장 뒤 이동할 경로는 return_url 속성으로, 회원이 아닌 방문자가 쓸 경우의 작성자 정보·비밀번호 입력칸은 email·cell_phone·reg_name·password 속성으로 지정합니다. 저장 버튼을 누르면 커넥터가 저장 요청과 응답 처리까지 맡으므로, 등록 페이지에서도 별도의 요청 코드를 작성하지 않습니다. 공식 Nuxt3 퀵스타트 샘플 저장소에 목록·등록 화면 전체 예제가 공개돼 있어, 프로젝트 구조를 그대로 참고할 수 있습니다.
백엔드 코드 없이, 커넥터 설정만으로
이 글에서는 Nuxt3 프로젝트에 커넥터를 설치하는 단계, 게시물 목록을 불러오는 방법, 게시물을 등록하는 방법 세 가지를 소개했습니다. 게시물 보기·수정·삭제·코멘트 기능도 같은 방식(데이터 식별자 정의 → 커넥터 호출 → 응답 사용)으로 연동할 수 있습니다. 실 서비스에 쓸 보안키 발급이나 게시판별 세부 옵션은 관리 콘솔에서 별도로 확인해야 합니다. 설치 명령과 전체 예제 코드는 빠르게 시작하기 문서 보기에서 확인하실 수 있습니다.