COMMIT

Fullstack

금융수학과 IT 동아리 COMMIT 공식 홈페이지

2025.08 ~ 진행중Fullstack Developer1인 팀

IT 동아리 COMMIT의 소개, 스터디 진행 상황, 프로젝트 포트폴리오를 한 곳에서 관리하는 공식 홈페이지를 직접 기획하고 풀스택으로 구현한 프로젝트입니다.

프로젝트 개요

목표: 금융수학과 IT 동아리 COMMIT의 소개, 스터디 자료와 프로젝트를 한곳에서 확인하는 공식 홈페이지를 구축했습니다.
배경: 신입과 외부 방문자가 동아리 운영 방향과 실제 활동을 이해하려면 소개·스터디 진행 상황·프로젝트 결과가 연결된 정보 구조가 필요했습니다.
주요 기능: 동아리 소개, 운영 방향, 활동 현황을 외부/신입이 쉽게 이해할 수 있도록 구조화했습니다.
스터디 주차별 자료와 프로젝트 정보를 정리해서 한눈에 볼 수 있는 페이지를 제공합니다.
Node.js 기반 API로 동아리 관련 데이터를 관리할 수 있는 풀스택 구조를 설계했습니다.

Fullstack Developer

동아리 운영 경험을 바탕으로 필요한 정보를 정리하고 프론트엔드부터 API까지 직접 구현했습니다.

동아리 사이트 기획 및 프론트엔드 구축

백엔드 구현 및 품질 관리

백엔드 API 구현·연동
Node.js로 간단한 백엔드 API를 구현해 동아리 소개/스터디/프로젝트 데이터를 프론트와 연동
코드 품질 관리 플로우 정리
ESLint 및 npm 스크립트(dev/build/preview/lint) 구성을 통해 개발 및 코드 품질 관리 플로우 정리

React · TypeScript · Vite

Tailwind CSS

Node.js

설계 요구: 동아리 소개만으로는 실제로 어떤 스터디와 프로젝트가 진행되는지 전달하기 어려워, 활동 기록까지 함께 확인할 수 있어야 했습니다.
원인: 소개, 주차별 자료, 프로젝트 결과는 목적과 데이터 형태가 달라 각각의 표시 구조가 필요했습니다.
추가 확인 사항: 활동이 추가될 때마다 소개 화면 전체를 다시 구성하지 않고 정보를 확장할 수 있어야 합니다.

소개·스터디·프로젝트를 구분한 페이지와 데이터 구조를 만들고, Node.js API에서 관련 정보를 제공하도록 연결했습니다.

COMMIT · 동아리 활동을 탐색할 수 있는 정보 구조 설계 비교
항목	설계 전 요구	구현 결과
전달할 정보	소개 외에 활동 근거도 필요	주차별 스터디·프로젝트 페이지
콘텐츠 제공	유형별 데이터 구조 필요	React 화면 + Node.js API 연동

공식 홈페이지에서 동아리의 운영 방향과 활동 결과를 함께 확인할 수 있게 했습니다.