고1이 직접 만든 실사용 코드 공유 서비스

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

고등학교 학생 및 교사, 초보 웹 개발자

핵심 요약

• Sh4re! 서비스는 highlight.js를 활용한 코드 하이라이팅 기능과 모달 기반 로그인 시스템을 포함한 실용적인 코드 공유 플랫폼을 구축
• V1 개발 시 한계점 : HTML/JS만 사용한 구조로 컴포넌트 분리 및 재사용성 부족
• V2 개선 방향 : React, TypeScript, Styled-Components 도입으로 타입 안정성 및 확장성 강화

섹션별 세부 요약

1. 문제 인식 및 프로젝트 기획

• 고등학교 파이썬 수업에서 구글 클래스룸의 코드 공유 기능 부족으로 불편함 발생
• 3명 팀(프론트, 백엔드, 디자인) 구성, 5월 4일부터 개발 시작
• 서비스명 Sh4re! 결정, 주요 기능(코드 공유, 발표 기능) 정의

2. 기술적 도전과 해결

• 코드 하이라이팅 : highlight.js 라이브러리 사용으로 간편히 구현
• 로그인 기능 : HTML/JS로 모달 창 구현, 쿠키 기반 로그인 상태 관리
• 서버 비용 : 월 6만 6천원 발생 → 단기 투자 결정

3. 개발 속도 및 학교 내 반응

• 선생님의 긍정적 피드백으로 수업 활용 목적 강화
• 1주일 집중 개발 후 1학년 반에 서비스 소개 → 깃허브 ⭐️ 17개 수확
• DB에 200개 코드 저장 성과 달성

4. V2 개선 계획

• V1 한계점 : JS 기반 개발로 타입 안정성 부족, 컴포넌트 분리 필요성 인지
• V2 기술 스택 : React, TypeScript, Styled-Components 도입
• 확장성 및 유지보수성 강화를 위한 모듈화 설계 고려

결론

• 실무 적용 팁: 기존 라이브러리 활용(highlight.js)으로 개발 시간 단축, 서버 비용 고려 필수
• V2 개발 시 TypeScript 도입으로 타입 안정성 확보 및 컴포넌트 기반 아키텍처로 확장성 강화 권장