환경 변수

Neople SDK JS에서 사용하는 환경 변수 설정 및 관리 방법을 알아보세요.

필수 API 키

SDK를 사용하기 위해 반드시 설정해야 하는 API 키입니다.

# 던전앤파이터 API 키
NEOPLE_DF_API_KEY=your_df_api_key_here

# 사이퍼즈 API 키
NEOPLE_CYPHERS_API_KEY=your_cyphers_api_key_here

API 키 발급 방법

네오플 개발자 센터에 방문
계정 로그인 또는 회원가입
애플리케이션 등록
API 키 발급 받기

API 키 보호

네오플 API는 크로스 도메인(CORS)을 지원하지 않습니다.

CORS 미지원: 브라우저에서 직접 네오플 API를 호출할 수 없음
API 키 보안: 클라이언트 사이드에서 API 키가 노출되면 악용 가능
서버 사이드 필수: 반드시 백엔드 서버를 통해 API를 호출해야 함

// ❌ 이렇게 하지 마세요 - 하드코딩
const client = new NeopleDFClient('your-api-key-here');

// ❌ 이렇게 하지 마세요 - 클라이언트 사이드에서 노출 (CORS 오류 + 보안 위험)
const client = new NeopleDFClient(process.env.REACT_APP_API_KEY);

// ❌ 브라우저에서 직접 호출 (CORS 오류 발생)
fetch('https://api.neople.co.kr/df/characters?apikey=YOUR_KEY')
  .then(response => response.json()) // CORS 오류로 실패
  .catch(error => console.error('CORS 오류:', error));

// ✅ 이렇게 하세요 - 서버 사이드에서만 사용
const client = new NeopleDFClient(process.env.NEOPLE_DF_API_KEY);

// ✅ 프록시 서버를 통한 안전한 호출
fetch('/api/characters/search?name=홍길동') // 자체 백엔드 API 호출
  .then(response => response.json())
  .then(data => console.log(data));

문제 해결

일반적인 오류

API 키가 없음

// 오류: API key is required
if (!process.env.NEOPLE_DF_API_KEY) {
  console.error('NEOPLE_DF_API_KEY 환경 변수를 설정해주세요');
  process.exit(1);
}

잘못된 API 키 형식

// API 키 형식 검증
function validateApiKey(apiKey: string): boolean {
  return /^[a-zA-Z0-9]{32,}$/.test(apiKey);
}

const apiKey = process.env.NEOPLE_DF_API_KEY;
if (!validateApiKey(apiKey)) {
  throw new Error('잘못된 API 키 형식입니다');
}

디버깅 팁

// 환경 변수 디버깅
console.log('Environment variables:');
console.log('NODE_ENV:', process.env.NODE_ENV);
console.log('API Key length:', process.env.NEOPLE_DF_API_KEY?.length);
console.log('Debug mode:', process.env.NEOPLE_DEBUG);

플랫폼별 설정

Node.js

.env 파일 사용

npm install dotenv

// 애플리케이션 시작 부분에 추가
import 'dotenv/config';
import { NeopleDFClient } from 'neople-sdk-js';

const client = new NeopleDFClient(process.env.NEOPLE_DF_API_KEY);

직접 설정

// 환경 변수 직접 설정
process.env.NEOPLE_DF_API_KEY = 'your_api_key';
process.env.NEOPLE_DEBUG = 'true';

import { NeopleDFClient } from 'neople-sdk-js';
const client = new NeopleDFClient(process.env.NEOPLE_DF_API_KEY);

Next.js

환경 변수 파일

# .env.local
NEOPLE_DF_API_KEY=your_df_api_key_here
NEOPLE_CYPHERS_API_KEY=your_cyphers_api_key_here

# 클라이언트 사이드에서 접근 가능한 변수 (주의: 공개됨)
NEXT_PUBLIC_NEOPLE_DEBUG=false

서버 컴포넌트에서 사용

// app/page.tsx
import { NeopleDFClient } from 'neople-sdk-js';

export default function HomePage() {
  const client = new NeopleDFClient(process.env.NEOPLE_DF_API_KEY);

  // 서버 사이드에서만 실행됨
  return <div>...</div>;
}

API 라우트에서 사용

// app/api/character/route.ts
import { NeopleDFClient } from 'neople-sdk-js';

const client = new NeopleDFClient(process.env.NEOPLE_DF_API_KEY);

export async function GET() {
  try {
    const data = await client.searchCharacter('test');
    return Response.json(data);
  } catch (error) {
    return Response.json({ error: error.message }, { status: 500 });
  }
}

React (CRA/Vite)

Create React App

# .env
REACT_APP_NEOPLE_DF_API_KEY=your_api_key_here
REACT_APP_NEOPLE_DEBUG=false

// src/App.tsx
import { NeopleDFClient } from 'neople-sdk-js';

const client = new NeopleDFClient(process.env.REACT_APP_NEOPLE_DF_API_KEY);

Vite

# .env
VITE_NEOPLE_DF_API_KEY=your_api_key_here
VITE_NEOPLE_DEBUG=false

// src/App.tsx
import { NeopleDFClient } from 'neople-sdk-js';

const client = new NeopleDFClient(import.meta.env.VITE_NEOPLE_DF_API_KEY);

Express.js

// app.js
import express from 'express';
import { NeopleDFClient } from 'neople-sdk-js';

const app = express();

// 환경 변수 검증
if (!process.env.NEOPLE_DF_API_KEY) {
  throw new Error('NEOPLE_DF_API_KEY 환경 변수가 필요합니다');
}

const client = new NeopleDFClient(process.env.NEOPLE_DF_API_KEY);

app.get('/api/character/:name', async (req, res) => {
  try {
    const result = await client.searchCharacter(req.params.name);
    res.json(result);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

환경 변수

On this page