[LostBoard 프로젝트] 초기 완성본

## 🎮 무엇을 만들었나?

**LostBoard**는 Lost Ark 플레이어를 위한 레이드 효율성 분석 도구입니다.

 

### 주요 기능

- 캐릭터명 검색으로 계정 내 모든 캐릭터 조회
- 캐릭터별 입장 가능한 레이드 목록 표시
- 레이드 클리어 체크 및 골드 수익 계산
- 티어별 레이드 효율성 비교 분석

 

### 기술 스택

- **Frontend**: React 18, Redux Toolkit
- **UI Library**: Material-UI + Bootstrap
- **API**: Lost Ark Open API
- **배포**: GitHub Pages

 

[🔗 데모 보기](https://jo-kwanwoo.github.io/lostboard) | [📁 GitHub](https://github.com/Jo-KwanWoo/LostBoardV2)

## 💡 왜 만들게 되었나?

Lost Ark의 레이드 시스템은 복잡합니다. 캐릭터마다 입장 가능한 레이드가 다르고, 
각 레이드의 수익성도 실시간 재료 가격에 따라 계속 변합니다.

기존에는 엑셀 시트나 커뮤니티 글을 참고했지만:
- 매번 수동으로 계산해야 하는 번거로움
- 실시간 가격 반영의 어려움  
- 여러 캐릭터 관리의 복잡성

이런 문제들을 해결하고 싶어서 직접 만들어보기로 했습니다.

초기 화면

초기 화면의 경우 최근 검색 기록을 삭제하고 심플하게 나타내어 보았습니다. 

 

현황판 화면

초기 화면에서 캐릭터 명을 검색한 결과를 보여주는 화면입니다. 클리어 한 레이드와 골드 체크박스를 선택하면 획득한 재화를 확인할 수 있습니다.

 

더보기 화면

로스트아크 api를 활용하여 레이드 더보기 시스템의 효율을 확인할 수 있습니다.

 

## 🛠 핵심 기능 구현기

 

1. Lost Ark API 연동
가장 먼저 부딪힌 것은 API 연동이었습니다.

// instance.js - API 인스턴스 설정
const instance = axios.create({
  baseURL: "https://developer-lostark.game.onstove.com",
  headers: {
    "content-type": "application/json;charset-UTF-8",
    accept: "application/json,",
  },
});

instance.interceptors.request.use(
  function (config) {
    config.headers.authorization = accessToken;
    return config;
  }
);

배운 점: API 키 관리의 중요성을 깨달았습니다. 처음에는 코드에 직접 넣었다가 .env 파일로 분리했습니다.

 

2. 복잡한 게임 데이터 처리

// 아이템 레벨에 따른 입장 가능 레이드 필터링
const filterRaidByItemLevel = [];
for (let i = 0; i < itemLevelArr.length; i++) {
  let filterRaid = Raid.filter(item => {
    const raidItemLevel = item.RaidItemLevel
    return raidItemLevel <= itemLevelArr[i];
  });
  filterRaidByItemLevel.push(filterRaid);
}

현재의 문제점: 이 로직이 컴포넌트 안에 직접 들어가 있어서 코드가 길어지고 테스트하기 어렵습니다. 다음 개선에서는 별도 유틸 함수로 분리할 예정입니다.

 

3. 상태 관리의 복잡성

가장 고생한 부분은 체크박스 상태 관리였습니다.

// 현재 상태 관리 (Board.js 일부)
const [checkedValues, setCheckedValues] = useState(() =>
  sortedData.reduce((acc, _, characterIndex) => {
    acc[characterIndex] = filteredRaidName[characterIndex].reduce((raidAcc, _, raidIndex) => {
      raidAcc[raidIndex] = false;
      return raidAcc;
    }, {});
    return acc;
  }, {})
);

현재의 문제점: 이 코드를 보시면 아시겠지만, 상당히 복잡합니다. 캐릭터별, 레이드별로 중첩된 상태를 관리하다 보니 이렇게 되었는데, Redux를 제대로 활용하지 못한 것 같습니다.

 

## 🤔 현재의 한계점들

개발하면서 "이건 좀 아닌 것 같은데..."라고 생각한 부분들이 많습니다.

1. 코드 구조

- 문제: `Board.js`가 300줄이 넘어갑니다
- 원인: 모든 로직을 한 컴포넌트에 몰아넣음
- 개선 계획: 컴포넌트 분할 및 커스텀 훅 활용

2. 성능

- **문제**: 캐릭터가 많으면 렌더링이 느려집니다
- **원인**: 불필요한 리렌더링, 최적화 부족
- **개선 계획**: `useMemo`, `useCallback` 적용

3. 사용자 경험

- **문제**: 로딩 상태 표시가 없습니다
- **원인**: UX에 대한 고려 부족
- **개선 계획**: 로딩 스피너, 에러 처리 개선

4. 타입 안전성

- **문제**: JavaScript 사용으로 런타임 에러 가능성
- **개선 계획**: TypeScript 도입 예정

5. 디자인

 -**문제**: Bootstrap + Material-UI 혼용으로 일관성 부족
- **개선 계획**: 디자인 시스템 구축인

 

## 📚 배운 점들

 

기술적 성장
- **외부 API 연동**: 인증, 에러 처리, 데이터 가공 경험
- **복잡한 상태 관리**: Redux의 필요성을 체감
- **실제 사용자 관점**: 개발자 관점과 사용자 관점의 차이

프로젝트 관리
- **기능 우선순위**: 완벽함보다는 동작하는 것부터
- **점진적 개선**: 한 번에 모든 걸 완벽하게 만들 필요 없음
- **문서화의 중요성**: README 작성의 필요

 

"같은 기능, 더 나은 코드"를 목표로 개선해 나가겠습니다.