미리보기

사용 기술 스택

: Electron, React, TypeScript, Tailwind, Zustand, Web Socket, Web RTC, pnpm, Vite, Git, Figma, Jira

목표

  1) 이전에 사용해보지 못했던 Web Socket, Web RTC과 같은 기술들을 사용해보기

  2) 기존 웹 서비스에서 벗어나, Electron을 활용한 웹 앱을 제작해보기

  3) 팀장의 역할을 맡아, 프로젝트를 성공적으로 완수하기

활동 내용

1. Front-End 개발

  1) Electron을 활용한 웹/앱 제작

  2) Web-Socket, Stomp를 활용한 양방향 통신 및 메시지 송/수신 관리

  3) React, TailWind를 통한 화면단 구성 및 공통 컴포넌트 제작

2. 팀장

  1) Vite, pnpm을 통한 프로젝트 빌드 관리

  2) 팀의 Git, Branch 관리

  3) 요구사항 정의서 및 기능 명세서 작성, 앱의 기획 및 정책 설계

성과

  1) 처음으로 팀장의 역할을 맡게 되어 프로젝트를 리드하게 됨.

  2) 기존 React를 사용한 화면 구성과 API 연결 뿐만이 아니라, 라이브러리와 기술의 확장을 이룰 수 있었음.

사용 기술 스택

: React, TypeScript, Axios, Zustand, Phaser3.js, WebSocket, GitHub, Figma, Jira, MatterMost

목표

  1) React, TypeScript 기반의 웹 게임 프로젝트 제작. (Unity, C를 사용하지 않음)

  2) 게임 특성 상 많은 양의 CSS 파일이 포함되기 때문에, 빠른 화면 렌더링이 필요

  3) 많은 사용자들을 확보하여, 유의미한 데이터 및 통계를 얻기

활동 내용

1. Front-End 개발

  1) 직관적인 인터페이스와 편리한 UI, UX를 위한 설계 및 개발

  2) Vanilla-Extract-CSS를 활용하여 공통 컴포넌트 설계 -> 기존 CSS-in-JS 방식보다 빠른 정적 CSS 생성으로 번들링 속도를 약 30% 정도 개선할 수 있었음.

  3) Phaser3.js와 유일하게 호환되는 React 상태관리 Zustand를 사용하여, 캐릭터 정보 및 배경음악 상태 관리

  4) 재사용성 및 리팩토링을 위한 서비스 구조를 위한 코드 분리, AxiosInstance를 제작하여 일관적인 API 통신 및 응답 체계 유지.

2. Project-Manager

  1) 게임 기획 및 정책 설계 – 메인 스토리, 아이템, 칭호, 업적

  2) 요구사항 정의서 및 기능 명세서 작성

  3) Project Readme 소개, Figma를 활용한 프로토타입 제작

성과

게임 회원 수 1100명, 누적 플레이 타임 55시간, 누적 아이템 사용 수 3800회, 상대방을 밟은 횟수: 9000회, 우수 프로젝트 시상 (1등), 하단 링크를 통해 현재도 배포되고 있는 서비스를 확인할 수 있음.

사용 기술 스택

: React, TypeScript, TailWind, Zustand, React-Query, Axios, Jira, Git

목표

1) 첫 프로젝트를 진행하며 개발의 프로세스를 파악하기

2) Front-End 개발을 시작하며, React 다루기

활동 내용

1) 직관적인 인터페이스와 편리한 UI, UX를 위한 설계 및 개발

2) 약 50개의 페이지 컴포넌트 개발

성과

1) React, TypeScript, TailWind를 학습함.

2) 개발의 프로세스를 파악함.

3) 문서 작성, 협업 툴을 사용법을 익힘, 요구사항 정의서, 개발 명세서 작성을 시작함.

• 비전공자를 위한 컴퓨터 프로그래밍 교육 동아리 활동.

• 웹 개발 기초교육, Python, HTML, CSS, Django 및 AWS 기반 서버 배포 교육.

• 경기대학교 멋쟁이 사자처럼 동아리 가입 페이지 제작.

• 춤의 기본기 교육, 왁킹, Chreography, 방송안무. 20번의 무대를 기획하고 공연함.

• 교내 대내외 행사에 참여.