미래를 구현하는 엔지니어

Profile

동국대학교 Farm System 홈페이지 개발 TF (2025.02 ~ )

FarmSystem - 동국대학교 SW/AI 학습 동아리

<aside> 💡

동국대학교 개발 동아리 Farm System FE

기여 내용: 홈페이지의 기능 구현 개발 및 유지 보수

블로그 목록(/blog) 렌더링 중 링크 미리보기(OG 메타태그 추출) 과정에서 예외가 발생하며 리스트 전체가 표시되지 않는 간헐적 이슈 발생

외부 페이지에서 CORS/프록시 차단 또는 HTML 에러 페이지 반환으로 인해 OG 파싱(HTML => DOMParser) 단계에서 예외 발생
링크 프리뷰 배치 호출(getPreviewBatch) 내부에서 발생한 예외가 적절히 억제되지 않아, 렌더링 흐름 자체가 중단됨

실패 무시 + 부분 성공 전략
- Promise.allSettled 또는 try/catch로 배치 호출 보호
- 실패한 URL은 미리보기만 생략하고, 리스트 렌더는 정상 진행
타임아웃/레이트 제한 적용
- 배치 크기를 3~6개로 제한
- 호출 간 지연을 두어 프록시/봇 차단 완화
환경 플래그 도입
- 운영(prod) 환경에서는 미리보기 지연 실행(초기 렌더 후)
- 필요 시 프리뷰 비활성화 모드도 지원
서버 사이드 프록시 도입
- Vercel/Next.js API Route에서 OG 스크래핑 처리
- CORS/차단 회피 및 응답 스키마 통일 확보

미리보기 실행부 가드 추가
- 데이터 없으면 즉시 return
- 배치 단위 try/catch로 안전 실행
UI 보강
- 스켈레톤/레이아웃 정비 → 로딩/에러 시에도 리스트가 항상 유지되도록 방어적 렌더링
- 이미지 누락 시 기본 이미지 대체 삽입
서버 사이드 프록시 도입
- Vercel 내에서 API Route로 OG 스크래핑 처리
  - vercel 자체 안정성을 위해 구현은 하였으나, proxy 링크 활용 커스텀 훅으로 롤백

기술 스택: React + Typescript + Next.js

</aside>

오픈소스 개발자 대회 출품작 CubeAI (2025. 07 ~ )

https://github.com/OSS-Cube-AI/CubeAI-FE

<aside> 💡

기여 내용: 블록 코딩 기반 AI 모델 인터페이스 구현 및 AI 백엔드 서버와의 통신 계층 개선

dnd-kit 설정 (collisionDetection, sensors 등)가 기본값 또는 단순 구현으로 되어 있어 복잡한 블록 배치/이동 상황을 제대로 처리하지 못함
상태(state) 업데이트 및 렌더링이 사용자 조작(드래그/드롭)과 백엔드 응답 간 타이밍이 어긋날 때 UI가 멈추거나 갱신 누락됨
API 응답 구조가 환경별(dev/prod) 또는 엔드포인트별로 약간씩 달라 파서/처리 로직에서 예외 핸들링 부족함

dnd-kit 기반 블록 에디터 컴포넌트 개선: 블록 배치 및 연결 로직 수정 → 사용자 조작 시 미끄러짐(snap)/중첩(overlap) 오류 감소
API 레이어 재구성: apis/ 폴더 내에서 요청/응답 포맷 통일 처리 및 에러 처리를 공통 util로 통합
로딩 + 피드백 UI 추가: 블록 조작 중/API 응답 대기 중의 스켈레톤 또는 로딩 스피너, 에러 메시지 보이도록 구현
상태 관리 보완: store/hooks 간 역할 분리하여 중복 제거 → 블록 상태, 에디터 상태, 데이터/모델 구성 상태 간 명확한 경계 설정

</aside>