미리보기

가상 프렛보드와 메트로놈을 구현하여, 사용자 설정에 따른 다양한 스케일 연주 시뮬레이션을 제공

주요 성과

1. 문제 해결 과정 전반 경험

• 스스로 발견한 문제를 해결하기 위해 필요한 도구와 이론을 학습

• 기획부터 개발, 배포까지 단독으로 수행하며 시행착오를 경험

2. Tone.js 학습 및 웹 오디오 프레임워크의 실무 적용

3. TypeScript와 styled-components의 숙달 및 동작 원리 이해

4. useRef를 활용한 상태의 실시간 변동사항 처리

5. 가독성과 유지보수성 강화

• UI 렌더링은 컴포넌트에 집중하고, 동작 로직은 커스텀 훅과 유틸리티 함수로 분리하여 개발

6. 배포 자동화: Vercel과 GitHub을 활용해 코드 푸시 시 자동으로 배포되는 CI/CD 워크플로우 구축

주요 기능

1. 사용자 설정 보드 : 스케일, Key, BPM, Subdivision 선택 가능

2. 가상 메트로놈과 프렛보드 시각화 : 연주 노트 및 블록별 하이라이팅 기능 포함

3. Tone.js 기반의 정확한 음정과 박자를 구현한 스케일 연주 시뮬레이션

4. 블록별 연습, 반복/단일 재생 모드, 볼륨 컨트롤 등 세부 기능

예정 사항

- 모바일을 고려한 반응형 디자인으로 레이아웃 리디자인 진행 중

링크

배포 링크 : https://scale-mate.vercel.app

Github : https://github.com/Ag-crane/scale-mate

흩어진 합주실 예약 정보를 통합하여 지역, 날짜, 시간에 따른 예약 가능한 합주실을 빠르게 검색할 수 있고, 다양한 편의 기능을 제공

사용 기술

Node.js, Puppeteer, MySQL, React.js, AWS EC2, REST API

주요 기여

1. 크롤링 및 데이터 처리

• Puppeteer를 활용해 네이버 예약현황 및 합주실 데이터를 크롤링하여 DB에 저장

• Linux crontab으로 주기적인 데이터 최신화 자동화

• 실시간 크롤러 개발 및 AWS EC2에 배포하여 사용자 요청 시 예약 가능한 룸 리스트 실시간 제공

2. 프론트엔드 구현

• React 기반으로 UI 주요 컴포넌트 구현

• 예약 가능한 룸 검색 페이지 : 사용자 입력값을 서버로 전송하고 반환된 룸 데이터를 출력

• 합주실 카드 컴포넌트 : 카드 형태와 상세 정보 모달로 구현, 8개씩 페이지네이션

• 관리자 페이지 구현 및 접근 제어 : 사용자 ID 확인을 통한 권한 관리

3. 팀장 역할

• 프로젝트 기획, 진행 관리, 팀 회의 주도 및 협업 조율

주요 기능

1. 예약 가능한 룸 통합 검색

2. 지도 기반 위치 검색

3. 전체 합주실 리스트, 검색/필터/정렬 기능, 상세정보 모달

4. 공급자 전용 관리자 페이지

링크

Github : https://github.com/Ag-crane/Team-ED-fall

기업의 요구사항에 맞추어, NASA API를 활용하여 위성 데이터를 수집하고 대시보드를 개발한 산학 연계 프로젝트

주요 기여

1. 프론트엔드 전담 구현

• 기업의 요구에 따라 Bootstrap5 기반의 템플릿을 분석 및 적용하여 HTML5와 Vanilla JS로 페이지를 설계

• 비동기 요청(Fetch API)을 통해 공통 컴포넌트(헤더, 사이드바 등)를 동적으로 로드

• 기능별로 스크립트를 분리하여 코드의 모듈성과 유지보수성을 강화

3. 팀장 역할

• 기업으로부터 요구사항을 전달받아 기능별로 역할 분담

• 에자일 방식의 스프린트 회의를 주도하여 팀의 개발 진행 상황을 점검하고 조율

주요 기능

1. 로그인 및 회원가입

2. 대시보드

• 데이터 수집 추이를 Chart.js를 활용한 차트와 테이블로 정리 및 제공

• 전세계 위성의 위치를 추적하는 위성 지도 제공

3. 전체 위성 데이트 목록 및 상세 정보 제공

• NASA TLE 데이터에서 제공하는 상세 데이터를 정리하여 제공

• 관리자는 UNKNOWN으로 표기된 비식별위성의 이름을 수정하여 추적 관리 가능

4. 데이터의 추가 / 삭제를 추적할 수 있도록 수집 로그 기록

링크

Github : https://github.com/Ag-crane/Team-ED-summer

경험: 웹 개발 전반에 대한 체계적인 교육과 2회의 산학 협력 프로젝트 수행

• 기업과 협력하여 기획, 설계, 개발, 발표까지의 전 과정을 경험

• 실무 중심의 프로젝트를 통해 문제 해결 능력 및 협업 역량 강화

Node.js, React.js, Typescript 기반 교육, 실습과 프로젝트 경험