수입식품 조회 웹앱

수입식품정보마루의 "수입식품조회"처럼 수입식품을 검색하고 목록·상세를 볼 수 있는 웹앱입니다. 식품의약품안전처가 공공데이터포털에 공개한 Open API를 실시간으로 호출합니다. 인터넷에 배포하면 링크를 가진 사람 누구나 쓸 수 있습니다.

기능

• 수입식품 제품 조회: 신고제품구분, 제조국, 제품명, 품목명으로 검색
• 수입신고 접수 조회: 접수번호, 해외제조업소명으로 검색 (접수일 포함)
• 상세 보기: 행을 누르면 해외제조업소, 작업장, 포장장소, 수출업소 정보 표시
• 자동 새로고침 + 신규 표시: 1·5·10·30분 간격으로 다시 조회하고, 직전 조회에 없던 건은 "신규"로 강조
• CSV 저장: 현재 페이지 결과를 엑셀에서 바로 열리는 CSV로 저장

1. 인증키 준비 (공통)

공공데이터포털(data.go.kr)에 로그인해서 아래 3개 API를 각각 활용신청합니다. 개발계정은 자동승인입니다.

• 식품의약품안전처_수입식품 제품DB 정보 — https://www.data.go.kr/data/15073949/openapi.do
• 식품의약품안전처_수입식품 수입신고 접수 업체 — https://www.data.go.kr/data/15073921/openapi.do
• 식품의약품안전처_수입식품 고유제품 상세정보 — https://www.data.go.kr/data/15098132/openapi.do

마이페이지 > 개발계정에서 일반 인증키(Decoding 키)를 복사해 둡니다. 승인 직후 1~2시간은 키가 안 먹을 수 있습니다.

2. 인터넷에 배포하기 (Vercel, 무료)

서울 리전(icn1)에서 실행되도록 설정돼 있습니다.

방법 A: GitHub로 배포 (코드 수정 없이 웹에서만)

1. GitHub에 새 저장소를 만들고 이 폴더의 파일을 전부 올립니다. (.env 파일은 올리지 마세요)
2. https://vercel.com 에 GitHub 계정으로 가입합니다.
3. Add New → Project → 방금 만든 저장소 Import
4. Environment Variables에 이름 SERVICE_KEY, 값에 인증키를 넣습니다.
5. Deploy를 누르면 1분 안에 https://프로젝트이름.vercel.app 주소가 생깁니다. 이 링크를 공유하면 됩니다.

이후 GitHub에 파일을 바꿔 올리면 자동으로 다시 배포됩니다.

방법 B: 내 컴퓨터에서 명령어로 배포

이 폴더에서 차례로 실행합니다. (Node.js 18 이상 필요)

npx vercel login
npx vercel                     # 질문에는 모두 Enter
npx vercel env add SERVICE_KEY # 인증키 붙여넣기, Production 선택
npx vercel --prod

마지막 줄이 출력하는 https://...vercel.app 주소가 공유할 링크입니다.

인증키를 바꾸거나 처음 넣은 경우

Vercel 프로젝트 Settings → Environment Variables에서 수정한 뒤, Deployments에서 최신 배포의 Redeploy를 눌러야 반영됩니다.

3. 다른 곳에 배포하기

Render, Railway, 사내 서버처럼 Node를 직접 실행하는 곳에서는:

• 시작 명령: node local-server.js (또는 npm start)
• 환경변수: SERVICE_KEY = 인증키 (포트는 PORT 환경변수를 따름)

4. 내 컴퓨터에서만 실행해 보기

node local-server.js

브라우저에서 http://localhost:3000 접속. .env.example을 .env로 바꿔 인증키를 넣으면 실제 데이터가 나옵니다. 인증키가 없으면 예시 데이터 모드로 실행돼 화면과 기능을 먼저 확인할 수 있습니다(상단에 "예시 데이터" 표시).

구조

public/          화면 (index.html, style.css, main.js)
lib/core.js      공공데이터포털 호출, 응답 정리, 1분 캐시, 예시 데이터
api/[name].js    Vercel용 서버리스 함수 (/api/products 등)
local-server.js  일반 서버용 실행 파일 (로컬, Render 등)
vercel.json      Vercel 설정 (서울 리전, 정적 파일 위치)
.env.example     인증키 설정 예시

브라우저에서 공공데이터포털 API를 직접 부르면 CORS로 막히고 인증키가 노출되기 때문에, 서버가 대신 호출합니다. 인증키는 서버에만 있고 사용자 화면에는 절대 노출되지 않습니다.

여러 사람이 쓸 때 알아둘 점

• 호출 한도는 인증키 하나를 함께 씁니다. 개발계정은 API별 하루 10,000건입니다.
• 이를 아끼기 위해 같은 조건의 조회는 1분 동안 저장된 결과를 재사용합니다. 10명이 같은 화면을 1분마다 새로고침해도 API 호출은 1분에 1번입니다. 저장 시간은 환경변수 CACHE_SECONDS로 바꿀 수 있습니다.
• 사용자가 늘어 한도가 부족하면 공공데이터포털에 활용사례를 등록하고 운영계정 트래픽 증설을 신청하세요.
• 링크를 아는 사람은 누구나 쓸 수 있습니다. 접근을 제한해야 하면 Vercel의 Password Protection(유료) 등을 쓰거나 로그인 기능을 추가해야 합니다.

원래 사이트와 다른 점

• 화면 항목 차이: 수입식품정보마루 화면의 수입업체, 수입일자, 제조일자 등은 공개 API에 없어 표시되지 않습니다. 필요하면 식약처(공공데이터포털 해당 API 페이지의 "데이터 개선요청")에 요청해야 합니다.
• 신규 감지 방식: API에 날짜 조건이 없어서 같은 조건으로 다시 조회한 결과를 직전 결과와 비교합니다. 각 사용자가 화면을 열어둔 동안에만 동작하고, 현재 페이지 범위 안에서만 비교합니다.
• 오류 코드: 30 = 인증키 미등록(승인 직후 지연 가능), 20 = 해당 API 미신청, 22 = 일일 한도 초과.