하드코딩 (Hardcoding) 이해하기

// ❌ 실제로 GitHub에서 흔히 발견되는 패턴
const API_KEY = 'sk-1234567890abcdef';  // OpenAI API 키
const DB_PASSWORD = 'admin123';          // 데이터베이스 비밀번호

function calculateDiscount(price) {
  return price * 0.15;  // 0.15가 뭐지? 왜 15%?
}

function isAdult(age) {
  return age >= 20;  // 한국 기준? 미국 기준?
}

// 더 심각한 예
if (status === 3) {  // 3이 무슨 상태?
  // ...
}

const DISCOUNT_RATE = 0.15;  // 회원 할인율 15%

function calculateDiscount(price) {
  return price * DISCOUNT_RATE;
}

const ADULT_AGE = 20;  // 한국 성인 나이

function isAdult(age) {
  return age >= ADULT_AGE;
}

// enum이나 상수 객체 사용
const OrderStatus = {
  PENDING: 1,
  PROCESSING: 2,
  COMPLETED: 3,
  CANCELLED: 4,
};

if (status === OrderStatus.COMPLETED) {
  // 의미가 명확함
}

// API 엔드포인트를 여러 곳에서 사용
fetch('https://api.example.com/users')
  .then(res => res.json());

// 다른 파일에서도...
fetch('https://api.example.com/posts')
  .then(res => res.json());

// 또 다른 파일에서도...
fetch('https://api.example.com/comments')
  .then(res => res.json());

// 문제: 서버 주소가 바뀌면 모든 파일을 수정해야 함

// config.js
const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://api.example.com';

export const API = {
  USERS: `${API_BASE_URL}/users`,
  POSTS: `${API_BASE_URL}/posts`,
  COMMENTS: `${API_BASE_URL}/comments`,
};

// 사용
import { API } from './config';

fetch(API.USERS)
  .then(res => res.json());

// ⚠️ 절대 이렇게 하지 마세요!
const config = {
  apiKey: 'sk-1234567890abcdefghijklmnop',
  dbPassword: 'MyP@ssw0rd123',
  jwtSecret: 'super-secret-key',
};

// .env 파일 (Git에 올리지 않음!)
// API_KEY=sk-1234567890abcdefghijklmnop
// DB_PASSWORD=MyP@ssw0rd123
// JWT_SECRET=super-secret-key

// 코드에서는 환경 변수 사용
const config = {
  apiKey: process.env.API_KEY,
  dbPassword: process.env.DB_PASSWORD,
  jwtSecret: process.env.JWT_SECRET,
};

// ✅ 괜찮은 하드코딩
const DAYS_IN_WEEK = 7;
const HOURS_IN_DAY = 24;
const PI = 3.14159;
const MAX_USERNAME_LENGTH = 20;
const VALID_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// 왜 괜찮은가?
// - 비즈니스 로직이 아닌 물리적/수학적 상수
// - 변경될 가능성이 거의 없음
// - 코드 가독성을 높임

// ✅ 괜찮은 하드코딩
function fetchUsers(page = 1, limit = 10) {
  // page와 limit의 기본값 하드코딩
  return fetch(`/api/users?page=${page}&limit=${limit}`);
}

// React 컴포넌트 기본 props
function Button({ variant = 'primary', size = 'medium', children }) {
  return <button className={`btn-${variant} btn-${size}`}>{children}</button>;
}

// ✅ 프로토타입이므로 괜찮음
// 나중에 리팩토링할 예정
function demo() {
  const mockUsers = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ];

  mockUsers.forEach(user => console.log(user.name));
}

// ✅ 테스트이므로 괜찮음
describe('calculateDiscount', () => {
  it('should apply 15% discount for members', () => {
    const originalPrice = 100;
    const expected = 85;

    expect(calculateDiscount(originalPrice)).toBe(expected);
  });
});

// .env.development
REACT_APP_API_URL=http://localhost:3000/api

// .env.production
REACT_APP_API_URL=https://api.myapp.com

// src/config/api.js
const API_BASE_URL = process.env.REACT_APP_API_URL;

export const endpoints = {
  users: `${API_BASE_URL}/users`,
  posts: `${API_BASE_URL}/posts`,
  comments: `${API_BASE_URL}/comments`,
};

// 사용
import { endpoints } from '../config/api';

fetch(endpoints.users)
  .then(res => res.json())
  .then(setUsers);

// hooks/useApi.js
const API_BASE_URL = process.env.REACT_APP_API_URL;

export function useApi(endpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`${API_BASE_URL}${endpoint}`)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [endpoint]);

  return { data, loading, error };
}

// 사용
function UserList() {
  const { data: users, loading } = useApi('/users');

  if (loading) return <div>Loading...</div>;
  return <div>{/* ... */}</div>;
}

// db.js
const mysql = require('mysql2');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'admin123',  // 보안 위험!
  database: 'myapp',
  port: 3306,
});

module.exports = connection;

// .env (절대 Git에 올리지 말 것!)
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=admin123
DB_NAME=myapp
DB_PORT=3306

// .env.example (Git에 올림, 예시로 제공)
DB_HOST=your_db_host
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=your_db_name
DB_PORT=3306

// db.js
require('dotenv').config();
const mysql = require('mysql2');

const connection = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  port: process.env.DB_PORT,
});

module.exports = connection;

// LoginForm.jsx
function LoginForm() {
  return (
    <form>
      <h1>로그인</h1>
      <input placeholder="이메일을 입력하세요" />
      <input placeholder="비밀번호를 입력하세요" type="password" />
      <button>로그인</button>
      <p>계정이 없으신가요? <a href="/signup">회원가입</a></p>
    </form>
  );
}

// 문제: 영어, 일본어 등 다른 언어 지원 불가

// locales/ko.json
{
  "login": {
    "title": "로그인",
    "email": "이메일을 입력하세요",
    "password": "비밀번호를 입력하세요",
    "submit": "로그인",
    "signupPrompt": "계정이 없으신가요?",
    "signup": "회원가입"
  }
}

// locales/en.json
{
  "login": {
    "title": "Login",
    "email": "Enter your email",
    "password": "Enter your password",
    "submit": "Sign In",
    "signupPrompt": "Don't have an account?",
    "signup": "Sign Up"
  }
}

// LoginForm.jsx
import { useTranslation } from 'react-i18next';

function LoginForm() {
  const { t } = useTranslation();

  return (
    <form>
      <h1>{t('login.title')}</h1>
      <input placeholder={t('login.email')} />
      <input placeholder={t('login.password')} type="password" />
      <button>{t('login.submit')}</button>
      <p>
        {t('login.signupPrompt')} <a href="/signup">{t('login.signup')}</a>
      </p>
    </form>
  );
}

// 관리자 페이지에서 설정 변경 가능
const settings = await db.settings.findOne({ key: 'maintenance_mode' });

if (settings.value === true) {
  return res.status(503).send('Under maintenance');
}

// config.js - 너무 많은 것을 설정으로 뺌
const config = {
  buttonColor: process.env.BUTTON_COLOR || 'blue',
  fontSize: process.env.FONT_SIZE || '14px',
  marginTop: process.env.MARGIN_TOP || '10px',
  marginBottom: process.env.MARGIN_BOTTOM || '10px',
  paddingLeft: process.env.PADDING_LEFT || '5px',
  // ... 100개의 설정
};

// 문제: CSS가 환경 변수로 가득 차있음. 이건 과도함!

// 정말 필요한 것만 설정으로
const config = {
  apiUrl: process.env.API_URL,
  theme: process.env.THEME || 'light',  // 'light' or 'dark'
};

// 나머지는 테마 파일에서 관리
const themes = {
  light: {
    buttonColor: 'blue',
    fontSize: '14px',
    // ...
  },
  dark: {
    buttonColor: 'navy',
    fontSize: '14px',
    // ...
  },
};

const API_KEY = process.env.API_KEY || 'sk-real-production-key-1234';
// 문제: 기본값에 진짜 키를 넣어버림!

const API_KEY = process.env.API_KEY;

if (!API_KEY) {
  throw new Error('API_KEY environment variable is required');
}
// 환경 변수가 없으면 명확한 에러 발생

const MAX_ITEMS = process.env.MAX_ITEMS || 10;

// 문제: MAX_ITEMS는 "10" (문자열)
// 비교할 때 버그 발생 가능
if (items.length > MAX_ITEMS) {  // "5" > "10" 는 true!
  // ...
}

const MAX_ITEMS = parseInt(process.env.MAX_ITEMS, 10) || 10;
// 또는
const MAX_ITEMS = Number(process.env.MAX_ITEMS) || 10;

// boolean의 경우
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
// ❌ 나쁨: Boolean(process.env.IS_PROD)  // "false"도 true로 변환됨!

// config/validate.js
function validateConfig() {
  const required = ['API_URL', 'DB_URL', 'JWT_SECRET'];

  for (const key of required) {
    if (!process.env[key]) {
      throw new Error(`Missing required environment variable: ${key}`);
    }
  }

  // URL 형식 검증
  try {
    new URL(process.env.API_URL);
  } catch (error) {
    throw new Error('API_URL must be a valid URL');
  }

  // 숫자 범위 검증
  const port = parseInt(process.env.PORT, 10);
  if (port < 1 || port > 65535) {
    throw new Error('PORT must be between 1 and 65535');
  }
}

// 앱 시작 시 검증
validateConfig();

// .eslintrc.js
module.exports = {
  rules: {
    'no-magic-numbers': ['warn', {
      ignore: [0, 1, -1],
      ignoreArrayIndexes: true,
    }],
  },
};

// app.js (레거시 코드)
const express = require('express');
const mysql = require('mysql2');

const app = express();

// 데이터베이스 연결
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password123',
  database: 'myapp',
});

// API 라우트
app.get('/api/users', (req, res) => {
  // 페이지당 10개 고정
  const limit = 10;
  const page = req.query.page || 1;
  const offset = (page - 1) * limit;

  db.query(
    'SELECT * FROM users LIMIT ? OFFSET ?',
    [limit, offset],
    (err, results) => {
      if (err) throw err;
      res.json(results);
    }
  );
});

// 할인 계산
app.post('/api/calculate-discount', (req, res) => {
  const { price, userType } = req.body;

  let discount = 0;
  if (userType === 1) {  // 일반 회원
    discount = price * 0.05;
  } else if (userType === 2) {  // VIP 회원
    discount = price * 0.15;
  } else if (userType === 3) {  // VVIP 회원
    discount = price * 0.25;
  }

  res.json({ discount, final: price - discount });
});

// 서버 시작
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// .env
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=password123
DB_NAME=myapp
PORT=3000
ITEMS_PER_PAGE=10

// config/constants.js
const UserType = {
  REGULAR: 1,
  VIP: 2,
  VVIP: 3,
};

const DiscountRate = {
  [UserType.REGULAR]: 0.05,   // 5%
  [UserType.VIP]: 0.15,        // 15%
  [UserType.VVIP]: 0.25,       // 25%
};

module.exports = { UserType, DiscountRate };

// config/database.js
require('dotenv').config();
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  waitForConnections: true,
  connectionLimit: 10,
});

module.exports = pool;

// app.js (리팩토링 후)
require('dotenv').config();
const express = require('express');
const db = require('./config/database');
const { UserType, DiscountRate } = require('./config/constants');

const app = express();
app.use(express.json());

// 환경 변수 검증
if (!process.env.PORT || !process.env.DB_HOST) {
  console.error('Missing required environment variables');
  process.exit(1);
}

const PORT = parseInt(process.env.PORT, 10);
const ITEMS_PER_PAGE = parseInt(process.env.ITEMS_PER_PAGE, 10);

// API 라우트
app.get('/api/users', async (req, res) => {
  try {
    const page = parseInt(req.query.page, 10) || 1;
    const offset = (page - 1) * ITEMS_PER_PAGE;

    const [rows] = await db.query(
      'SELECT * FROM users LIMIT ? OFFSET ?',
      [ITEMS_PER_PAGE, offset]
    );

    res.json(rows);
  } catch (error) {
    console.error('Error fetching users:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
});

// 할인 계산
app.post('/api/calculate-discount', (req, res) => {
  const { price, userType } = req.body;

  // 유효성 검증
  if (!price || !userType) {
    return res.status(400).json({ error: 'Missing required fields' });
  }

  const discountRate = DiscountRate[userType];

  if (discountRate === undefined) {
    return res.status(400).json({ error: 'Invalid user type' });
  }

  const discount = price * discountRate;
  const final = price - discount;

  res.json({
    discount,
    final,
    discountRate: `${discountRate * 100}%`,
  });
});

// 서버 시작
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});