프로그래밍 공부방

[LostBoard 프로젝트] 더보기 효율 화면 수정 - 2. 컴포넌트 분리 및 인터렉티브 UI 수정

qweasd5123 — Tue, 30 Sep 2025 23:57:12 +0900

현재 상황 분석

1단계에서 탄탄한 데이터 구조를 구축한 후, "거대한 컴포넌트를 어떻게 작은 단위로 나눌 것인가?" 그리고 "사용자가 원하는 인터랙티브한 UI를 어떻게 구현할 것인가?" 라는 두 가지 핵심 문제를 해결해야 합니다.

1. 동일한 코드가 반복되는 문제

// Tier4.js - 기존 코드
function Tier4(props) {
  return (
    <div>
      <Grid container spacing={{ xs: 2, md: 3 }}>
        {raidList.map((raidName, index) => (
          <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
            <div className="efficiency-raid-card">
              <img src={...} className="efficiency-raid-image" />
              <div className="efficiency-raid-title">{raidName}</div>
              <div className="efficiency-raid-info">
                {/* 복잡한 배열 처리 로직 */}
                {arr[index]?.map((a, i) => (
                  <div key={i}>{a}</div>
                ))}
              </div>
            </div>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

// Tier3.js - 거의 동일한 코드 반복

Tier4.js와 Tier3.js에서 90% 이상 동일한 코드
새로운 기능 추가 시 두 파일 모두 수정 필요
버그 수정도 두 번씩 해야

2. 복잡한 데이터 처리 로직

UI 컴포넌트에 데이터 처리 로직이 섞임
특히 Tier3.js의 중첩 배열 처리가 매우 복잡
가독성과 유지보수성 저하

3. 관심사 분리 부족

레이아웃, 데이터 처리, UI 렌더링이 한 곳에 섞임
테스트하기 어려운 구조
재사용성 제로

해결 방안: 컴포넌트 아키텍처 설계

설계 원칙 수립

단일 책임 원칙: 각 컴포넌트는 하나의 역할만
재사용성: 4티어, 3티어에서 동일한 컴포넌트 사용
확장성: 새로운 기능 추가 시 최소한의 수정
관심사 분리: 데이터 처리와 UI 로직 완전 분리

새로운 컴포넌트 구조

src/components/
├── RaidCard/
│   ├── RaidCard.js          # 메인 카드 컴포넌트
│   └── RaidCard.css         # 카드 전용 스타일
└── RaidGrid/
    ├── RaidGrid.js          # 그리드 레이아웃 컴포넌트
    └── RaidGrid.css         # 그리드 전용 스타일

RaidCard 컴포넌트 구현

핵심 아이디어: 하이브리드 데이터 처리

기존 코드와의 호환성을 유지하면서 새로운 구조도 지원

/**
 * 메인 RaidCard 컴포넌트
 */
function RaidCard({ 
  raidName, 
  raidData, 
  isNewStructure = false,  // 구조 타입 구분
  onDetailClick = null 
}) {
  // 데이터 처리 (구조에 따라 다른 처리)
  const processedData = isNewStructure 
    ? processNewData(raidData, selectedDifficulty)
    : processLegacyData(raidData);

  const { summary, details, availableDifficulties } = processedData;
  
  // ... UI 렌더링
}

레거시 데이터 처리 함수

기존 문자열 배열 형태의 데이터를 처리하는 함수:

function processLegacyData(legacyArray) {
  if (!Array.isArray(legacyArray)) {
    return { summary: '데이터 없음', details: [] };
  }

  // 기본 정보 추출 (첫 번째 항목에서)
  const firstItem = legacyArray[0] || '';
  const goldMatch = firstItem.match(/더보기 골드: (\d+)G/);
  const rewardMatch = firstItem.match(/더보기 보상 골드: ([\d.]+)/);
  
  const totalGold = goldMatch ? parseInt(goldMatch[1]) : 0;
  const totalReward = rewardMatch ? parseFloat(rewardMatch[1]) : 0;
  const efficiency = Math.round(totalReward - totalGold);

  return {
    summary: {
      totalGold,
      totalReward,
      efficiency: efficiency,
      gateCount: legacyArray.length
    },
    details: legacyArray
  };
}

새로운 구조 데이터 처리 함수

1단계에서 만든 구조화된 데이터를 처리:

function processNewData(structuredData, selectedDifficulty = null) {
  if (!structuredData || !structuredData.difficulties) {
    return { summary: '데이터 없음', details: [] };
  }

  // 선택된 난이도가 있으면 사용, 없으면 기본 난이도 사용
  const targetDifficulty = selectedDifficulty || structuredData.defaultDifficulty;
  const difficultyData = structuredData.difficulties[targetDifficulty];

  // 요약 정보 계산
  const totalGold = difficultyData.gates.reduce((sum, gate) => sum + gate.goldCost, 0);
  const totalReward = difficultyData.gates.reduce((sum, gate) => sum + gate.totalMaterialPrice, 0);
  
  return {
    summary: {
      totalGold,
      totalReward,
      efficiency: difficultyData.overallEfficiency,
      gateCount: difficultyData.gates.length,
      difficulty: targetDifficulty,
      itemLevel: difficultyData.itemLevel
    },
    details: difficultyData.gates,
    availableDifficulties: structuredData.availableDifficulties
  };
}

UI 컴포넌트 구조화

카드 레이아웃 설계

return (
  <div className="raid-card">
    {/* 카드 헤더 */}
    <div className="raid-card__header">
      <img src={...} className="raid-card__image" />
      <div className="raid-card__title">{raidName}</div>
      {/* 난이도 배지 */}
    </div>

    {/* 카드 내용 */}
    <div className="raid-card__content">
      {/* 요약 정보 */}
      <div className="raid-card__summary">
        <div className="summary-item">
          <span className="summary-label">총 골드</span>
          <span className="summary-value">{totalGold}G</span>
        </div>
        {/* ... 다른 요약 정보들 */}
      </div>

      {/* 상세 정보 */}
      <div className="raid-card__details">
        {/* 관문별 상세 정보 */}
      </div>
    </div>

    {/* 카드 액션 */}
    <div className="raid-card__actions">
      {/* 버튼들 */}
    </div>
  </div>
);

RaidGrid 컴포넌트 구현

그리드 레이아웃

return (
    <div className="raid-grid">
      {/* 그리드 헤더 : 업데이트된 시간 표시 */}
      <div className="raid-grid__header">
        <div className="stat-item">
          <span className="stat-label">데이터 업데이트</span>
          <span className="stat-value">
            {new Date().toLocaleTimeString('ko-KR', {
              hour: '2-digit',
              minute: '2-digit'
            })}
          </span>
        </div>
      </div>

      {/* 메인 그리드 */}
      <Grid
        container
        spacing={{ xs: 2, md: 3 }}
        columns={{ xs: 4, sm: 8, md: 12 }}
        className="raid-grid__container"
      >
        {raidList.map((raidName, index) => (
          <Grid
            key={`${raidName}-${index}`}
            size={{ xs: 4, sm: 4, md: 4 }}
            className="raid-grid__item"
          >
            <RaidCard
              raidName={raidName}
              raidData={raidDataArray ? raidDataArray[index] : null}
              isNewStructure={isNewStructure}
              onDetailClick={onRaidDetailClick}
            />
          </Grid>
        ))}
      </Grid>
     
    </div>
  );
}

난이도별 탭 시스템 구현

사용자 요구사항 분석

"하드 난이도만 보고 싶어요"
"노말이랑 하드 효율성을 쉽게 비교하고 싶어요"
"클릭 한 번으로 난이도를 바꿀 수 있으면 좋겠어요"

난이도 변경 기능 구현

1. 상태 관리 추가

function RaidCard({ raidName, raidData, isNewStructure = false }) {
  // 난이도 변경을 위한 상태 추가
  const [selectedDifficulty, setSelectedDifficulty] = useState(null);

  // 난이도 변경 핸들러
  const handleDifficultyChange = (difficulty) => {
    setSelectedDifficulty(difficulty);
    console.log(`${raidName} 난이도 변경: ${summary.difficulty} → ${difficulty}`);
    
    //변경된 데이터 미리보기
    const newData = processNewData(raidData, difficulty);
    console.log(`순이익 변화: ${summary.efficiency}G → ${newData.summary.efficiency}G`);
  };
}

2. 클릭 가능한 난이도 탭

{/* 클릭 가능한 난이도 탭 표시 */}
{isNewStructure && availableDifficulties && availableDifficulties.length > 1 && (
  <div className="raid-card__difficulties">
    <span className="difficulties-label">난이도 선택:</span>
    <div className="difficulties-list">
      {availableDifficulties.map(diff => (
        <button
          key={diff} 
          className={`difficulty-tag difficulty-tag--clickable ${
            diff === summary.difficulty ? 'difficulty-tag--active' : ''
          }`}
          onClick={() => handleDifficultyChange(diff)}
          title={`${diff} 난이도로 변경`}
        >
          {diff.toUpperCase()}
        </button>
      ))}
    </div>
  </div>
)}

3. 시각적 피드백 강화

.difficulty-tag--clickable {
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.difficulty-tag--clickable:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary-gold);
  color: var(--primary-gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.difficulty-tag--active {
  background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-light));
  color: var(--bg-primary);
  border-color: var(--primary-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

기존 컴포넌트 리팩토링

Tier4.js 완전 개선

Before (97줄의 복잡한 코드)

function Tier4(props) {
  const raidList = ['카제로스(종막)', '아르모체(4막)', ...];
  let arr = calcEfficiency(raidList, props.itemData);

  if (!props.itemData) {
    return <div>로딩 중...</div>;
  }

  return (
    <div>
      <Grid container spacing={{ xs: 2, md: 3 }}>
        {raidList.map((raidName, index) => (
          <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
            <div className="efficiency-raid-card">
              {/* 복잡한 UI 코드 30줄... */}
              <div className="efficiency-raid-info">
                {arr[index]?.map((a, i) => (
                  <div key={i}>{a}</div>
                ))}
              </div>
            </div>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

After (35줄의 깔끔한 코드)

function Tier4(props) {
  const raidList = ['카제로스(종막)', '아르모체(4막)', ...];
  
  // 새로운 데이터 구조 사용
  const useNewStructure = process.env.NODE_ENV === 'development' && true;
  
  let raidDataArray = useNewStructure 
    ? hybridCalcEfficiency(raidList, props.itemData, true)
    : calcEfficiency(raidList, props.itemData);

  // 상세 정보 클릭 핸들러
  const handleRaidDetailClick = (raidName, raidData) => {
    console.log(`${raidName} 상세 정보:`, raidData);
  };

  return (
    <div className="tier4-container">
      {/* 페이지 헤더 */}
      <div className="tier-header">
        <h2 className="tier-title">4티어 레이드 효율성</h2>
        <p className="tier-description">
          4티어 레이드의 더보기 보상 효율성을 확인하세요
        </p>
      </div>

      {/* 새로운 RaidGrid 컴포넌트 사용 */}
      <RaidGrid
        raidList={raidList}
        raidDataArray={raidDataArray}
        isNewStructure={useNewStructure}
        onRaidDetailClick={handleRaidDetailClick}
        loading={!props.itemData}
        error={props.error || null}
      />
    </div>
  );
}

사용자 피드백 반영: 추가 개선사항

1. 효율성 계산 방식 개선

사용자 피드백: "백분율보다는 실제 골드를 보여주는게 더 알아보기 편할 것 같다."

Before (백분율 방식)

efficiency: (totalReward / totalGold * 100).toFixed(1) + "%"
// 결과: "150.0%"

After (실제 골드 차이)

efficiency: Math.round(totalReward - totalGold)
// 결과: "+500G" 또는 "-200G"

개선 효과:

사용자가 "아, 500골드 이익이구나!" 바로 이해
손실인 경우 "-200G"로 명확하게 표시
레이드 선택 시 더 직관적인 판단 가능

2. 상세 정보 기본 표시

사용자 피드백: "매번 '상세히 보기'를 클릭하는게 번거로워요"

Before (토글 방식)

1. 카드 확인
2. "상세히 보기" 버튼 클릭
3. 관문별 정보 확인
4. 다른 카드로 이동
5. 다시 "상세히 보기" 클릭 (반복)

After (기본 표시)

1. 카드 확인
2. 관문별 정보 바로 확인 
3. 난이도 변경으로 즉시 비교
4. 다른 카드로 이동
5. 바로 정보 확인 가능

구현:

// 상세 정보 (항상 표시)
<div className="raid-card__details">
  {isNewStructure ? (
    details.map((gate, index) => (
      <div key={index} className="gate-detail">
        <div className="gate-detail__header">
          <span className="gate-number">{gate.gate}관문</span>
          <span className="gate-efficiency">
            {gate.efficiency >= 0 ? '+' : ''}{gate.efficiency.toLocaleString()}G
          </span>
        </div>
        <div className="gate-detail__content">
          <span>골드: {gate.goldCost.toLocaleString()}G</span>
          <span>보상: {gate.totalMaterialPrice.toLocaleString()}G</span>
        </div>
      </div>
    ))
  ) : (
    // 기존 구조 처리
  )}
</div>

핵심 학습 포인트

1. 컴포넌트 설계 원칙

처음부터 완벽할 필요는 없지만, 확장 가능한 구조를 고민해야 합니다.

단일 책임 원칙 적용

// ❌ 잘못된 예: 하나의 컴포넌트가 모든 일을 함
function Tier4() {
  // 데이터 처리 + UI 렌더링 + 레이아웃 + 상태 관리
}

// ✅ 올바른 예: 각 컴포넌트가 하나의 역할만 담당
function Tier4() {
  return <RaidGrid />; // 레이아웃만 담당
}

function RaidGrid() {
  return <RaidCard />; // 그리드 배치만 담당
}

function RaidCard() {
  // 카드 UI만 담당
}

2. 사용자 중심 설계

코드를 작성하기 전에 사용자가 어떻게 사용할지 충분히 고민

실제 사용 패턴 분석

사용자들은 여러 레이드를 빠르게 비교하고 싶어함
백분율보다 실제 골드 차이를 선호
클릭 수를 최소화하고 싶어함

피드백 반영 프로세스

문제 발견: "백분율이 이해하기 어려워요"
해결책 설계: 실제 골드 차이로 변경
구현: 계산 로직 수정
검증: 사용자 테스트 및 피드백 수집

[LostBoard 프로젝트] 더보기 효율 화면 수정 - 1. 복잡한 데이터 구조 수정

qweasd5123 — Mon, 29 Sep 2025 23:18:25 +0900

현재 상황 분석

더보기 효율 화면은 플레이어들이 어떤 레이드의 "더보기 보상"의 효율을 한눈에 볼 수 있도록 도와주는 서비스입니다. 하지만 현재 효율성 분석 페이지에는 몇 가지 심각한 문제점들이 있었습니다

발견된 문제점들

1. 가독성이 너무 떨어진다

현재 화면에는 이런 식으로 정보가 표시됩니다:

사용자 입장에서는 "어떤 보상을 얼마나 받는지", "효율성이 얼마나 되는지" 직관적으로 파악하기 어려웠습니다

2. 어떤 보상을 얼마만큼 얻었는지 확인할 수 없다

위의 텍스트에서는 "더보기 보상 골드: 1234.5"라고만 나오지, 실제로 어떤 재료를 몇 개씩 받는지 알 수 없었습니다.

3. 레이드별 특수 보상 획득량을 알 수 없다

Lost Ark의 각 레이드는 고유한 특수 아이템들을 제공하는데, 이런 정보가 전혀 표시되지 않았습니다

기존 코드 분석

기존 코드의 구조

// calcEfficiency.js - 기존 코드
function calculateAdditionalReward(raid, itemData, reward) {
    return raid.additionalGold.map((gold, k) => {
        let additionalRewardPrice = Object.keys(reward).reduce(
            (sum, key) => sum + calcPrice(key, itemData, raid.additionalReward[k][Object.keys(reward).indexOf(key)]),
            0
        );
        //   문제: 모든 정보를 하나의 문자열로 반환
        return `${raid.RaidDifficulty} ${k + 1}관문 더보기 골드: ${gold}G 더보기 보상 골드: ${additionalRewardPrice}`;
    });
}

function calcEfficiency(raidList, itemData) {
    return raidList.map(raidName => {
        let raids = Raid.filter(x => x.RaidName === raidName);
        let reward = filteringItem(raids[0]?.RaidItemLevel || 0);
        
        //   문제: 모든 난이도가 배열에 섞여서 반환
        return raids.flatMap(raid => calculateAdditionalReward(raid, itemData, reward));
    });
}

기존 구조의 문제점들

1. 문자열 기반 데이터 반환

// 반환되는 데이터 예시
[
  [
    "hard 1관문 더보기 골드: 2700G 더보기 보상 골드: 1234.5",
    "hard 2관문 더보기 골드: 4100G 더보기 보상 골드: 2345.6", 
    "normal 1관문 더보기 골드: 2400G 더보기 보상 골드: 987.3"
  ]
]

UI에서 이 문자열을 파싱해야 함
새로운 정보를 추가하려면 문자열 형식을 변경해야 함
정렬이나 필터링이 어려움

2. 난이도별 구분 부족

모든 난이도(하드, 노말, 싱글)가 하나의 배열에 섞여 있어서, UI에서 탭으로 나누기 어려웠습니다.

3. 특수 보상 정보 누락

// 기존 코드에서는 이 정보들이 무시됨
"clearUniqueRewards": [
    { "우뢰의 뇌옥": 3, "특수 재련 : 순환 돌파석": 0 }
],
"additionalUniqueRewards": [
    { "우뢰의 뇌옥": 3, "특수 재련 : 순환 돌파석": 0 }
]

4. 복잡한 예외 처리

// 하드코딩된 예외 처리
const specialRaids = {
    '에키드나': [...],
    '카멘': [...],
    '아브렐슈드': [...]
};

해결 방안: 새로운 데이터 구조 설계

설계 원칙

구조화된 데이터: 문자열 대신 객체로 정보 전달
명확한 분리: 난이도별, 관문별 정보를 명확히 구분
완전한 정보: 특수 보상까지 모든 정보 포함
확장 가능성: 새로운 레이드 추가 시 코드 수정 불필요

핵심 개선사항 구현

1. 구조화된 데이터 매핑

기존의 하드코딩된 구조를 개선했습니다:

// raidDataProcessor.js - 새로운 구조
const MATERIAL_MAPPING = {
    1640: { 
        destruction: '운명의 파괴석', 
        guardian: '운명의 수호석', 
        fragment: '운명의 파편', 
        breakthrough: '운명의 돌파석' 
    },
    1580: { 
        destruction: '정제된 파괴강석', 
        guardian: '정제된 수호강석', 
        fragment: '명예의 파편', 
        breakthrough: '찬란한 명예의 돌파석' 
    },
    // ... 다른 레벨들
};

function getMaterialTypes(raidItemLevel) {
    const levels = Object.keys(MATERIAL_MAPPING).map(Number).sort((a, b) => b - a);
    const targetLevel = levels.find(level => raidItemLevel >= level) || 0;
    return MATERIAL_MAPPING[targetLevel];
}

개선점:

레이드 레벨에 따른 재료 타입 자동 결정
새로운 재료 추가 시 매핑만 수정하면 됨
코드의 가독성 향상

2. 관문별 상세 정보 구조화

function processGateDetails(raidData, itemData, materialTypes) {
    return raidData.additionalGold.map((goldCost, gateIndex) => {
        //   기본 재료 보상 계산
        const materials = {};
        const materialKeys = Object.keys(materialTypes);
        
        materialKeys.forEach((key, index) => {
            const materialName = materialTypes[key];
            const quantity = raidData.additionalReward[gateIndex][index] || 0;
            materials[key] = {
                name: materialName,
                quantity: quantity,
                price: calculateMaterialPrice(materialName, itemData, quantity)
            };
        });

        //   특수 보상 처리 (기존에 누락되었던 부분!)
        const specialRewards = {};
        const uniqueRewards = raidData.additionalUniqueRewards[gateIndex] || {};
        
        Object.entries(uniqueRewards).forEach(([itemName, quantity]) => {
            if (quantity > 0) {
                specialRewards[itemName] = {
                    name: itemName,
                    quantity: quantity,
                    price: 0 // 특수 아이템은 가격 정보가 없으므로 0
                };
            }
        });

        //   효율성 자동 계산
        const totalMaterialPrice = Object.values(materials).reduce(
            (sum, material) => sum + material.price, 0
        );

        return {
            gate: gateIndex + 1,
            goldCost: goldCost,
            materials: materials,
            specialRewards: specialRewards,
            totalMaterialPrice: totalMaterialPrice,
            efficiency: totalMaterialPrice > 0 ? (totalMaterialPrice / goldCost * 100).toFixed(1) : 0
        };
    });
}

개선점:

각 관문별로 상세한 정보 제공
재료별 수량과 가격 정보 분리
특수 보상 정보 완전 포함
효율성 자동 계산

3. 난이도별 데이터 분리

function getStructuredRaidData(raidName, itemData) {
    const raidVariants = Raid.filter(raid => 
        raid.RaidName === raidName || 
        raid.RaidName.includes(raidName) ||
        raidName.includes(raid.RaidName.split('(')[0])
    );

    //   난이도별로 그룹화
    const difficulties = {};
    const availableDifficulties = [];

    raidVariants.forEach(raidData => {
        const difficulty = raidData.RaidDifficulty;
        const materialTypes = getMaterialTypes(raidData.RaidItemLevel);
        
        difficulties[difficulty] = {
            itemLevel: raidData.RaidItemLevel,
            gates: processGateDetails(raidData, itemData, materialTypes),
            overallEfficiency: 0 // 나중에 계산
        };

        if (!availableDifficulties.includes(difficulty)) {
            availableDifficulties.push(difficulty);
        }
    });

    //   기본 난이도 설정 (우선순위: hard > normal > single)
    const difficultyPriority = ['hard', 'normal', 'single'];
    const defaultDifficulty = difficultyPriority.find(diff => 
        availableDifficulties.includes(diff)
    ) || availableDifficulties[0];

    return {
        raidName,
        difficulties,
        availableDifficulties: availableDifficulties.sort((a, b) => {
            const order = { 'hard': 1, 'normal': 2, 'single': 3 };
            return (order[a] || 999) - (order[b] || 999);
        }),
        defaultDifficulty
    };
}

개선점:

난이도별 명확한 분리
사용 가능한 난이도 자동 감지
기본 난이도 자동 설정
확장 가능한 구조

Before vs After

Before (기존 구조)

// 반환되는 데이터
[
  [
    "hard 1관문 더보기 골드: 2700G 더보기 보상 골드: 1234.5",
    "hard 2관문 더보기 골드: 4100G 더보기 보상 골드: 2345.6", 
    "hard 3관문 더보기 골드: 5800G 더보기 보상 골드: 3456.7",
    "normal 1관문 더보기 골드: 2400G 더보기 보상 골드: 987.3"
  ]
]

문제점:

❌ 문자열 파싱 필요
❌ 난이도별 구분 어려움
❌ 특수 보상 정보 없음
❌ UI 컴포넌트에서 활용 제한적
❌ 효율성 계산을 별도로 해야 함

After (새로운 구조)

// 반환되는 데이터
[
  {
    raidName: "모르둠(3막)",
    availableDifficulties: ["hard", "normal"],
    defaultDifficulty: "hard",
    difficulties: {
      hard: {
        itemLevel: 1700,
        overallEfficiency: "142.3",
        gates: [
          {
            gate: 1,
            goldCost: 2700,
            totalMaterialPrice: 1234.5,
            efficiency: "45.7",
            materials: {
              destruction: { 
                name: "운명의 파괴석", 
                quantity: 830, 
                price: 128.65 
              },
              guardian: { 
                name: "운명의 수호석", 
                quantity: 1660, 
                price: 136.12 
              },
              fragment: { 
                name: "운명의 파편", 
                quantity: 7000, 
                price: 1.98 
              }
            },
            specialRewards: {
              "우뢰의 뇌옥": { 
                name: "우뢰의 뇌옥", 
                quantity: 3, 
                price: 0 
              }
            }
          }
          // ... 다른 관문들
        ]
      },
      normal: {
        // ... 노말 난이도 데이터
      }
    }
  }
]

개선점:

✅ 구조화된 객체 데이터
✅ 난이도별 명확한 분리
✅ 특수 보상 정보 완전 포함
✅ UI에서 바로 활용 가능
✅ 효율성 계산 자동화
✅ 확장 가능한 구조

배운 점들

1. 데이터 구조의 중요성

처음에는 "일단 동작하게 만들자"는 생각으로 문자열 기반으로 구현했지만, 기능이 복잡해질수록 한계가 드러났습니다. 처음부터 확장 가능한 구조를 고민하는 것이 중요하다는 것을 깨달았습니다.

2. 사용자 관점에서 생각하기

개발자 입장에서는 "동작하면 되지"라고 생각할 수 있지만, 사용자가 실제로 어떤 정보를 원하는지 고민해야 합니다.

3. 테스트의 중요성

새로운 구조를 만들 때 테스트 코드를 함께 작성하면 검증과 디버깅이 훨씬 쉬워집니다.

[LostBoard 프로젝트] 현황판 화면 디자인 수정

qweasd5123 — Sun, 21 Sep 2025 01:10:20 +0900

기존 현황판 화면

문제점 분석

현황판 화면은 LostBoard의 핵심 페이지이지만, 여러 문제점들이 있었습니다.

1. 시각적 가독성 문제

// 기존 코드 - 단순한 이미지 표시
<img src={`${process.env.PUBLIC_URL}/class_logo/${characterInfo.CharacterClassName}.png`}
  width="30%" alt={characterInfo.CharacterClassName} />

캐릭터 정보가 평면적으로 나열되어 중요도 파악 어려움
캐릭터 간 구분이 어려움

2. 정보 과부하

한 화면에 너무 많은 정보가 동시에 표시
캐릭터별 구분이 명확하지 않음
시각적 계층 구조 부족

3. 구식 UI 요소

// 기존 체크박스 - 밋밋한 디자인
<Checkbox
  checked={checkedValues[characterIndex]?.[raidIndex] || false}
  onChange={(e) => handleCheckboxChange(e, characterIndex, raidIndex)}
/>
<span>{raidName}</span>

기본 체크박스로 재미없는 인터페이스
상태 변화에 대한 시각적 피드백 부족

4. 코드 복잡성

현황판 페이지 코드가 300줄 이상으로 유지보수 어려움
모든 로직이 한 파일에 집중
재사용 가능한 컴포넌트 부족

단계별 개선 과정

1단계: 캐릭터 카드 컴포넌트 분리

개선 목표

캐릭터 정보를 카드 형태로 구조화
직업 로고 가독성 개선
아이템 레벨별 시각적 구분

새로운 CharacterCard 컴포넌트

const CharacterAvatar = styled(Avatar)(({ theme }) => ({
  width: 80,
  height: 80,
  border: '3px solid var(--primary-gold)',
  boxShadow: '0 0 20px var(--primary-gold-glow)',
  background: 'var(--bg-tertiary)',
  
  '& img': {
    filter: 'drop-shadow(0 0 10px rgba(212, 175, 55, 0.3))',
  }
}));

const ItemLevelChip = styled(Chip)(({ itemlevel }) => {
  const getColorByLevel = (level) => {
    if (level >= 1700) return { bg: '#FF6B6B', color: '#FFF' };
    if (level >= 1640) return { bg: '#4ECDC4', color: '#FFF' };
    if (level >= 1580) return { bg: '#45B7D1', color: '#FFF' };
    if (level >= 1490) return { bg: '#96CEB4', color: '#FFF' };
    return { bg: '#FFEAA7', color: '#2D3436' };
  };
  // ...
});

개선 효과:

✅ 금색 테두리로 직업 로고 가독성 대폭 개선
✅ 아이템 레벨별 색상 구분으로 한눈에 파악 가능
✅ 카드 형태로 캐릭터별 명확한 구분

2단계: 인터랙티브 레이드 아이템 컴포넌트

개선 목표

클래식한 체크박스를 모던한 인터페이스로 교체
상태별 시각적 피드백 강화
사용자 경험 개선

새로운 RaidItem 컴포넌트

const RaidContainer = styled(Box)(({ ischecked, isgoldselected }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '16px 20px',
  background: ischecked === 'true' 
    ? 'linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary))' 
    : 'var(--bg-tertiary)',
  border: `2px solid ${
    ischecked === 'true' 
      ? 'var(--primary-gold)' 
      : 'var(--border-color)'
  }`,
  borderRadius: '12px',
  transition: 'all 0.3s ease',
  
  '&:hover': {
    borderColor: 'var(--primary-gold)',
    transform: 'translateX(4px)',
    boxShadow: '0 4px 20px rgba(212, 175, 55, 0.2)',
  },
}));

인터렉티브 버튼

// 클리어 상태 토글
<IconButton onClick={onRaidToggle}>
  {isChecked ? <CheckCircleIcon /> : <RadioButtonUncheckedIcon />}
</IconButton>

// 골드 획득 버튼
<GoldButton isselected={isGoldSelected.toString()} disabled={isGoldDisabled}>
  <PaidIcon />
</GoldButton>

// 더보기 보상 버튼  
<GoldButton isselected={isAdditionalSelected.toString()} disabled={isAdditionalDisabled}>
  <AddIcon />
</GoldButton>

개선 효과:

✅ 체크박스 → 직관적인 아이콘 버튼으로 변경
✅ 호버 시 슬라이드 애니메이션으로 반응성 증대
✅ 상태별 색상 변화로 명확한 피드백
✅ 툴팁으로 기능 설명 추가

3단계: Board.js 리팩토링

개선 목표

코드 간소화
컴포넌트 분리로 가독성 향상
재사용 가능한 구조로 변경

기존 복잡한 구조

// 기존 - 모든 로직이 한 곳에
return (
  <div className='content'>
    {sortedData.map((characterInfo, characterIndex) => (
      <Grid container spacing={3} key={characterIndex}>
        <Grid size="grow">
          {/* 캐릭터 정보 */}
        </Grid>
        <Grid size="grow">
          {/* 복잡한 레이드 목록 로직 */}
          {filteredRaidName[characterIndex].map((raidName, raidIndex) => {
            // 50줄 이상의 복잡한 로직...
          })}
        </Grid>
        <Grid size="grow">
          {/* 재료 정보 */}
        </Grid>
      </Grid>
    ))}
  </div>
);

개선된 구조

// 개선 후 - 컴포넌트 분리로 깔끔하게
return (
  <div className='content'>
    <Container maxWidth="lg">
      {sortedData.map((characterInfo, characterIndex) => (
        <Fade in={true} timeout={300 + characterIndex * 100} key={characterIndex}>
          <CharacterCard characterInfo={characterInfo}>
            {filteredRaidName[characterIndex]?.map((raidName, raidIndex) => (
              <RaidItem
                key={raidIndex}
                raidName={raidName}
                isChecked={checkedValues[characterIndex]?.[raidIndex] || false}
                // ... 기타 props
                onRaidToggle={(e) => handleCheckboxChange(e, characterIndex, raidIndex)}
              />
            ))}
            <Material /* ... props */ />
          </CharacterCard>
        </Fade>
      ))}
    </Container>
  </div>
);

개선 효과:

✅ 코드 라인 수 50% 감소
✅ 컴포넌트별 책임 분리
✅ 재사용 가능한 구조
✅ 유지보수성 대폭 향상

4단계: 시각적 개선 및 애니메이션

페이드 인 애니메이션

<Fade in={true} timeout={300 + characterIndex * 100} key={characterIndex}>
  <CharacterCard>
    {/* 컨텐츠 */}
  </CharacterCard>
</Fade>

호버 효과

.character-card:hover {
  border-color: var(--primary-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px);
}

.raid-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}

개선 결과 비교

Before (기존)

평면적인 정보 나열
밋밋한 체크박스 UI
300줄의 복잡한 코드
반응성 부족

After (개선 후)

✅ 금색 테두리로 명확한 구분
✅ 카드 기반 구조화된 정보
✅ 인터랙티브한 버튼 UI
✅ 150줄의 깔끔한 코드
✅ 부드러운 애니메이션

배운 점

이번 디자인 개선을 통해 깨달은 것들

1. 사용자 경험 우선 사고

기능이 작동하는 것과 사용하기 편한 것은 다름
시각적 피드백의 중요성

2. 컴포넌트 분리의 중요성

하나의 거대한 컴포넌트보다 작은 단위로 분리하는 것이 유지보수에 유리
각 컴포넌트가 단일 책임을 가지도록 설계

[LostBoard 프로젝트] 초기화면 디자인 수정

qweasd5123 — Tue, 16 Sep 2025 22:38:17 +0900

기존 초기화면

초기화면 변경 이유

LostBoard를 처음 만들고 나서 몇 명의 친구들에게 보여줬는데, 공통적으로 나온 피드백이 있었습니다.

"이게 뭐하는 사이트야?"
"Lost Ark 관련 사이트 맞아?"
"뭘 해야 할지 모르겠어"

맞는 말이었습니다. 기존 초기화면은 단순히 텍스트 필드와 버튼만 덩그러니 있어서, 처음 방문하는 사용자가 이 사이트의 목적을 파악하기 어려웠습니다.

기존 디자인의 문제점

1. 정보 부족

// 기존 코드 - 너무 심플함
<div className="content">
  <TextField
    label="캐릭터명"
    variant="standard"
    value={characterName}
    onChange={handleInputChange}
  />
  <Button variant="contained" onClick={handleSearch}>
    검색
  </Button>
</div>

사이트 제목이나 설명이 전혀 없음
무엇을 검색하는 건지, 왜 검색해야 하는지 불분명
Lost Ark와의 연관성을 알 수 없음

2. 시각적 정체성 부족

/* 기존 CSS - 밋밋한 디자인 */
.content {
  background-color: #1f2125;
  color: white;
  padding: 20px;
}

일반적인 화이트 테마로 게임 특성 반영 안됨
Lost Ark의 느낌과 거리가 멀음
브랜딩 요소 전혀 없음

개선 방향 설정

개선하면서 중점을 둔 4가지 포인트입니다:

명확한 정보 전달 - 사이트 목적 명시
Lost Ark 테마 적용 - 게임 유저들의 친숙함 증대
인터랙티브 요소 - 반응성 있는 UI
반응형 디자인 - 모든 화면 사이즈에서 최적화

구체적인 개선 작업

1. 브랜딩과 정보 전달 강화

변경 후:

<div className="home-content">
  <h1 className="home-title">LostBoard</h1>
  <p className="home-subtitle">
    Lost Ark 플레이어를 위한 레이드 효율성 분석 도구<br/>
  </p>
  
  <div className="search-container">
    {/* 검색 UI */}
  </div>
</div>

개선효과:

사이트명과 목적을 명확히 표시
사용자가 무엇을 해야 하는지 직관적으로 안내
전문적이고 신뢰감 있는 첫인상 제공

2. Lost Ark 테마 색상

색상 팔레트 정의:

:root {
  /* Lost Ark 시그니처 골드 */
  --primary-gold: #D4AF37;
  --primary-gold-light: #F4E4BC;
  --primary-gold-dark: #B8941F;
  --primary-gold-glow: rgba(212, 175, 55, 0.3);
  
  /* 다크 배경 */
  --bg-primary: #0A0A0B;
  --bg-secondary: #1A1B1E;
  --bg-tertiary: #2A2B2E;
  --bg-card: #1E1F22;
  
  /* 텍스트 계층 */
  --text-primary: #FFFFFF;
  --text-secondary: #B0B3B8;
  --text-muted: #8A8B8F;
}

제목 그라데이션 효과 적용:

.home-title {
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px var(--primary-gold-glow);
  letter-spacing: 2px;
}

개선 효과:

Lost Ark 게임 내 UI와 유사한 고급스러운 느낌
금색 포인트로 프리미엄 서비스 인상
일관된 색상 시스템으로 브랜드 정체성 강화

3. 인터랙티브한 검색 컨테이너

카드 형태의 검색 영역:

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-heavy);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  min-width: 400px;
}

.search-container:hover {
  border-color: var(--primary-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-5px);
}

Material-UI 입력 필드 커스터마이징:

<TextField
  id="character-search"
  label="캐릭터명"
  variant="outlined"
  fullWidth
  sx={{
    '& .MuiOutlinedInput-root': {
      backgroundColor: 'var(--bg-tertiary)',
      color: 'var(--text-primary)',
      borderRadius: '12px',
      '& fieldset': {
        borderColor: 'var(--border-color)',
        borderWidth: '2px',
      },
      '&:hover fieldset': {
        borderColor: 'var(--primary-gold)',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'var(--primary-gold)',
        boxShadow: '0 0 10px var(--primary-gold-glow)',
      },
    },
  }}
/>

개선 효과:

호버 시 시각적 피드백으로 반응성 증대
카드 형태로 검색 영역을 명확히 구분
부드러운 애니메이션으로 모던한 느낌

4. 반응형 디자인 적용

반응형 디자인 최적화:

@media (max-width: 768px) {
  .home-title {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
  }
  
  .search-container {
    min-width: auto;
    width: 100%;
    max-width: 350px;
    padding: 30px 20px;
  }
  
  .home-subtitle {
    font-size: 1rem;
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .home-title {
    font-size: 2rem;
  }
  
  .search-container {
    padding: 25px 15px;
  }
}

개선 효과:

다양한 화면 크기에서 일관된 사용자 경험

개선 결과 비교

기존 초기화면

수정된 초기화면

사용자 반응 변화

✅ "아, Lost Ark 사이트구나!" - 즉시 인식
✅ "뭘 하는 사이트인지 바로 알겠어" - 명확한 정보 전달
✅ "디자인이 게임이랑 잘 어울려" - 테마 일치성
✅ "화면 크기를 변경해도 잘 보여" - 반응형 디자인 효과

다음 개선 계획

초기화면 개선을 통해 얻은 인사이트:

일관된 디자인 시스템 - 다른 페이지에도 동일한 테마 적용 예정
로딩 상태 개선 - 검색 중 상태를 더 명확히 표시
애니메이션 강화 - 페이지 전환 시 부드러운 효과 추가
접근성 개선 - 키보드 네비게이션 및 스크린 리더 지원

배운 점

이번 디자인 개선을 통해 깨달은 것들

1. 사용자 관점의 중요성

개발자가 당연하다고 생각하는 것들이 사용자에게는 전혀 당연하지 않음
첫인상이 사용자의 사이트 이용 의지에 큰 영향을 미침

2. 브랜딩의 힘

단순히 기능만 잘 작동하는 것보다 정체성이 명확한 것이 중요
타겟 유저에게 친숙한 디자인 언어 사용의 효과

3. 점진적 개선의 가치

한 번에 모든 걸 완벽하게 만들 필요 없음
사용자 피드백을 받고 단계적으로 개선하는 것이 더 효과적

[Node.js, MongoDB] 7. 상세페이지 만들기

qweasd5123 — Sun, 1 Jun 2025 17:21:27 +0900

URL 파라미터 문법

app.get('/detail/:aaaa', (res, req) => {
  req.send('detail.ejs')
})

URL 입력란에 '/detail/아무문자'로 접속하면 위 코드 실행

'아무문자' 입력란에 글의 id를 입력하면 DB에서 해당 id 글을 가져와서 출력하면 된다.

DB에서 특정 document 1개 찾기

findOne() 사용

// a : 1 인 document를 찾는다
await db.collection().findOne({a : 1})

'_id'가 아래와 같은 document를 찾으려면

// _id 번호만 입력하는 것이 아닌 ObjectId까지 같이 입력해야 한다.
await db.collection('post').findOne({_id : new ObjectId('64bfde3b02d2932a4c06ffba')})

유저가 입력한 URL 가져오기

유저가 입력한 파라미터 가져오기

app.get('/detail/:aaaa', (res, req) => {
  console.log(res.params)
})

입력한 파라미터에 해당하는 글 가져오기

app.get('/detail/:id', async (res, req) => {
  let result = await db.collection('post').findOne({ _id : new ObjectId(res.params.id) })
  req.render('detail.ejs', { post : result })
})

예외처리

app.get('/detail/:id', async (res, req) => {
    try {
        let result = await db.collection('post').findOne({ _id: new ObjectId(res.params.id) })
        console.log(res.params)
        if (result == null) {
            req.status(404).send('잘못된 url')
        } else {
            req.render('detail.ejs', { post: result })
        }

    } catch (e) {
        console.log(e)
        req.status(404).send('잘못된 url')
    }
})

/list 페이지에서 제목을 클릭하면 해당 글의 상세페이지로 접속하기

list.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="/main.css" rel="stylesheet" />
  </head>
  <body class="grey-bg">

    <%- include('nav.ejs') %>

    <div class="white-bg">
      <% for(let i = 0; i < posts.length; i++){ %>
      <div class="list-box">
        <a href="/detail/<%=posts[i]._id%>" ><%= posts[i].title %></a>
        <p><%= posts[i].content %></p>
      </div>
      <% } %>
    </div>
    
  </body>
</html>

[Node.js, MongoDB] 6. POST 요청

qweasd5123 — Sat, 31 May 2025 02:44:06 +0900

글 작성 페이지 생성

write.ejs 레이아웃

<form class="form-box">
    <h4>글쓰기</h4>
    <input>
    <input>
    <button type="submit">전송</button>
</form>

input에 입력한 내용을 서버로 전송하기

<form class="form-box" action="/URL" method="POST">
   <h4>글쓰기</h4>
    <input name="title">
    <input name="content">
    <button type="submit">전송</button>
</form>

input 태그에 name 속성을 넣어야 입력한 내용을 서버로 전달할 수 있다.

URL은 /add로 작명

서버에서 글 확인하기

app.use(express.json())
app.use(express.urlencoded({extended:true}))

서버 상단에 데이터 추출을 도와주는 코드 작성

-app.use(express.json()): 클라이언트에서 보낸 요청(Request) 본문이 JSON 형식일 때, 그것을 자동으로 JavaScript 객체로 파싱해서 req.body에 담아줍니다.

-app.use(express.urlencoded({extended:true})): HTML <form> 같은 방식으로 데이터를 보낼 때, 그 데이터를 파싱해서 req.body에 담아줍니다.

추출한 데이터를 DB에 저장하기

write.ejs에서 /add로 데이터를 전송하기 때문에 POST 요청시 실행할 코드는 아래와 같다.

app.post('/add', (res, req)=>{
  console.log(res.body)
  // 실행할코드~
})

res.body 데이터를 MongoDB로 전송시키기

let db
const url = 'MongoDB URL 주소'
new MongoClient(url).connect().then((client)=>{
  console.log('DB연결성공')
  db = client.db('forum')
  app.listen(8080, () => {
    console.log('http://localhost:8080 에서 서버 실행중')
})
}).catch((err)=>{
  console.log(err)
})

// ~~~~~~~~~~

app.post('/add', async (res, req) => {
    console.log(res.body)
    // 'forum'에 연결해 놓은 db 변수를 활용
    // insertOne() 함수를 사용하여 DB에 자료 추가
    await db.collection('post').insertOne({title : res.body.title, content : res.body.content})
  	// 자료 추가에 성공하면 '/list' 페이지로 연결
    req.redirect('/list')
})

write.ejs 화면

제목과 내용을 입력하고 '전송' 버튼을 누르면 DB에 정상적으로 저장되는 것을 확인할 수 있다.

예외처리

app.post('/add', async (res, req) => {
    console.log(res.body)
    try {
    	//제목이 빈칸이라면 경고문 출력
        if (res.body.title == '') {
            req.send('제목을 입력해주세요.')
        } else {
            await db.collection('post').insertOne({ title: res.body.title, content: res.body.content })
            req.redirect('/list')
        }
    } catch (e) {
    	// 그 밖의 에러 발생 예외처리
        console.log(e)
        req.status(500).send('서버에러')
    }
})

[Node.js, MongoDB] 5. REST API

qweasd5123 — Wed, 28 May 2025 23:34:37 +0900

REST API 6가지 원칙

1. Uniform Interface
- 여러 URL과 method는 일관성이 있어야합니다.
- 하나의 URL로는 하나의 데이터를 가져오게 디자인하는게 좋고, 간결하고 예측가능하게 URL과 method를 만드는게 좋다.

2. Client-server 역할 구분
-유저에게 서버역할을 맡기거나 DB를 직접 입출력하게 하면 좋지 않다.

3. Stateless
-요청들은 서로 의존성이 있으면 안되고 각각 독립적으로 처리되어야합니다.

4. Cacheable
-서버가 보내는 자료들은 캐싱이 가능해야합니다.

5. Layered System
서버기능을 만들 때 레이어를 걸쳐서 코드가 실행되도록 만들어도 된다.

6. Code on demand
서버는 실행가능한 코드를 보낼 수 있습니다.

좋은 URL 작명법

- 단어들을 동사보다는 명사 위주로 구성함
- 띄어쓰기는 언더바(_)대신 대시(-)사용
- 파일 확장자 쓰지 말기 (.html 이런것)
- 하위 문서들을 뜻할 땐 / 기호를 사용함 (하위폴더같은 느낌)

[Node.js, MongoDB] 4. ejs

qweasd5123 — Wed, 28 May 2025 18:39:39 +0900

ejs 세팅

1. 터미널에 npm install ejs 입력해서 ejs 설치

2. 서버 파일 상단에 view engine 사용 코드 입력

app.set('view engine', 'ejs')

ejs 파일 만들어 보내주기

*ejs 파일은 views라는 폴더 안에 생성하는 것이 일반적

list.ejs 파일 생성후 간단한 html 코드 작성

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/main.css" rel="stylesheet" />
</head>
<body class="grey-bg">

  <div class="white-bg">
    <div class="list-box">
      <h4>글제목1</h4>
      <p>글내용1</p>
    </div>
    <div class="list-box">
      <h4>글제목1</h4>
      <p>글내용2</p>
    </div>
  </div> 

</body>
</html>

.grey-bg {
  background: #eee;
}
.white-bg {
  background: white;
  margin: 20px;
  border-radius: 5px;
}
.list-box {
  padding : 10px;
  border-bottom: 1px solid#eee;
}
.list-box h4{
  font-size: 16px;
  margin: 5px;
}
.list-box p {
  font-size: 13px;
  margin: 5px;
  color: grey;
}

ejs 파일에 데이터 넣는법

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  응답.render('list.ejs', { posts : result })
})

위에서 받은 데이터를 .ejs 파일에서 출력하는 문법

<%= posts %>

위 list.ejs 파일 수정

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/main.css" rel="stylesheet" />
</head>
<body class="grey-bg">

  <div class="white-bg">
    <div class="list-box">
      <h4><%= posts[0].title %></h4>
      <p><%= posts[0].content %></p>
    </div>
    <div class="list-box">
      <h4><%= posts[1].title %></h4>
      <p><%= posts[1].content %></p>
    </div>
  </div> 

</body>
</html>

결과

ejs 파일 안에서 자바스크립트 문법 활용하기

<div class="white-bg">
      <% for(let i = 0; i < posts.length; i++){ %>
      <div class="list-box">
        <h4><%= posts[i].title %></h4>
        <p><%= posts[i].content %></p>
      </div>
      <% } %>
</div>

ejs 파일 안에 다른 ejs 파일 첨부하기

(views/nav.ejs)

<div class="nav">
  <a class="logo">Appleforum</a>
  <a>page1</a>
  <a>page2</a>
</div>


(list.ejs)

<%- include('nav.ejs') %>

<%- %> 와 <%= %> 차이

-<%- %> 의 경우 안의 내용이 html이라면 실제 html 처럼 렌더링 해준다. (ex. <%- <button> %> -> 버튼 출력)

-<%= %> 의 경우 안의 내용이 html이라도 html로 렌더링 하지 않고 실제 문자로 출력한다. (ex. <%= <button> %> -> <button> 출력)

[Node.js, MongoDB] 3. MongoDB에서 데이터 받아오기

qweasd5123 — Wed, 28 May 2025 17:10:15 +0900

MongoDB 사이트에서 데이터 생성

insert document 버튼을 눌러 2개의 데이터 생성

MongoDB에 있는 데이터 가져오기

// /list 페이지에 접속하면 'post'에 있는 데이터 가져와서 출력하기
app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  console.log(result)
  응답.send(result[0].title)
})

결과

데이터 나눠서 출력하기

// 첫번째 게시물만 출력하기
app.get('/list', async (요청, 응답) => {
    let result = await db.collection('post').find().toArray()
    console.log(result[0])
    응답.send('DB에 있던 게시물')
})

// 첫번째 게시물의 제목만 출력하기
app.get('/list', async (요청, 응답) => {
    let result = await db.collection('post').find().toArray()
    console.log(result[0].title)
    응답.send('DB에 있던 게시물')
})

[Node.js, MongoDB] 2. MongoDB 세팅

qweasd5123 — Mon, 26 May 2025 23:12:41 +0900

MongoDB 데이터 저장 방식

- MongoDB는 document 데이터베이스라고 부르기도 하는데, collection을 만들고 그안에 document를 만들어서 데이터를 기록해놓기 때문이다.

- 이 document가 자바스크립트 object 자료와 똑같은 모습으로 기록하기 때문에 자바스크립트 코드 짜던것 그대로 데이터베이스에 넣을 수 있어서 저장과 출력이 편하다.

MongoDB 호스팅받기

MongoDB 가입 후 무료 호스팅 받기.

서버와 MongoDB 연결

1. 터미널을 열어서 npm install mongodb@5 입력(mongodb 라이브러리 설치)

2. 호스팅 받은 mongodb 접속

const { MongoClient } = require('mongodb')

let db
const url = 'mongodb사이트에 있던 님들의 접속 URL'
new MongoClient(url).connect().then((client)=>{
  console.log('DB연결성공')
  db = client.db('forum')
  // DB 접속 완료 후 서버를 띄우기
  app.listen(8080, () => {
    console.log('http://localhost:8080 에서 서버 실행중')
  })

}).catch((err)=>{
  console.log(err)
})

mongoDB에 연결되었는지 확인

// /news 페이지에 접속하면 DB에 데이터 저장하기
app.get('/news', ()=>{
  db.collection('post').insertOne({title : '뉴스'})
})

title: '뉴스' 데이터가 저장된 모습