고등학생의 파이썬 코드 공유 사이트 'Sh4re!' 개발기: 문제 해결과 실전 경험

핵심 기술

고등학생 팀이 수업의 불편함을 해결하기 위해 파이썬 코드 공유 사이트 'Sh4re!'를 개발하며 겪은 실제 경험을 공유합니다. highlight.js를 활용한 코드 하이라이팅과 순수 HTML/JS 기반의 쿠키를 활용한 로그인 기능 구현이 핵심입니다.

기술적 세부사항

• 프로젝트 배경: 대구소프트웨어마이스터고등학교 1학년 학생들의 파이썬 수업 중 코드 공유의 불편함을 해소하기 위한 자발적 프로젝트.
• 팀 구성: 프론트엔드 1명, 백엔드 1명, 디자인 1명.
• 초기 개발: 학교 행사 및 시험 기간으로 인해 3월~4월 말까지 지연, 5월 4일부터 본격 기획 및 개발 시작.
• 주요 기능 구현 (V1):
  • 코드 공유: 사용자들이 파이썬 코드를 공유하고 발표할 수 있는 기능.
  • 코드 하이라이팅: highlight.js 라이브러리를 사용하여 코드 구문 강조.
  • 로그인/회원가입/로그아웃: 순수 HTML과 JavaScript를 사용하여 모달 형태로 구현, 쿠키를 활용한 로그인 상태 유지.
  • 동적 UI 업데이트: 로그인 상태에 따라 헤더 및 모달 UI가 동적으로 변경되는 구조.
  • 기타 기능: 티처 페이지, 유저 페이지, 코멘트 기능 구현 (백엔드 담당 친구가 추가 구현).
• 개발 과정 및 경험:
  • 서버 비용: 월 66,000원의 서버 비용 발생 (이후 과도한 스펙임을 인지).
  • 교사 피드백: 수업 시간 활용 가능성에 대한 긍정적 답변 획득.
  • 집중 개발: 수업 활용을 위해 5월 11일부터 18일까지 1주일간 프로젝트에 집중 (주말 17시간 개발 등).
  • 협업 및 학습: 서버 통신, DB 사용법, 협업 방식, SEO 등 이론 외 실무 경험 습득.
• 결과 및 성과:
  • 1학년 반 대상 서비스 소개 및 긍정적 반응.
  • GitHub Star 17개 획득.
  • DB에 200개의 코드 데이터 축적.
  • 개인적인 동기 부여 및 학습 경로 확립에 기여.
• V2 개발 계획:
  • 기술 스택: React, Styled-Components, TypeScript 도입 예정.
  • 개선 필요성: 컴포넌트화의 필요성 절감, 코드 재사용성 향상, 타입 안정성 확보.