시작 경위와 기획

문제 발견 및 설정

2023년도 1학기에 처음 웹 관련 내용을 접했다.
아직 많이 부족했지만, 그 동안 생각했던 주위의 문제를 하나 씩 해결하고 싶었다.
그 중 하나가 동아리 방 사용 문제였다.

나는 밴드 동아리를 하고 있다.
지금은 다른 것에 집중하느라 밴드 연습을 하고 있지 않다.
하지만 수년 전부터 밴드 동아리방 사용 일정을 관리할 수 있으면 좋겠다고 생각했다.
이쯤이면 아무도 없을 것이라 생각하고 갔더니 나와 비슷한 생각으로 마주친 경험이 많았기 때문이다.

그래서 문제를 밴드 동아리 연습실 사용 일정을 공유할 방법이 뭘지 생각해보았다.
마침 웹 관련 내용을 접해서 자신감이 붙어 밴드 홈페이지를 제작하기로 마음먹었다.

기획

23년도 현재 동아리 회장을 맡고 있는 후배가 웹 앱 설계 경험이 있어 같이 하고 있다.
하지만 학교 수업에서 경험은 html과 open API 사용 경험이 전부라 많이 공부해야 했다.
현재도 헷갈리는 개념들이 여럿 있지만 일단은 부딪히면서 배우고 있다.
다행히 같이 하는 친구가 경험이 많아 기본 골격을 마련한 토대로 세부 로직을 구현했다.

소통 방법

처음으로 기획한 부분은 소통 방법이다.
git commit 방법, 변수나 함수 이름 정의하는 방법, docstring을 다는 방법 등 최대한 세세하게 정했다.
특히 docstring 같은 경우 그 친구가 설계한 코드를 이해하는 데 큰 도움이 됐다.

회의

그 이후로 약 1주에 한 번 회의를 했다.
딱히 주기적으로 정하진 않고 만날 때마다 회의를 했는데, 현재는 팀원이 한 명 들어와 주기적으로 회의를 하기로 했다.
회의때는 초반에는 전반적인 구조에 대해서 주로 회의를 가졌고, 나중에는 클래스 동작에 초점을 두고 회의를 했다.
후술하겠지만, 처음 기획한대로 그 무엇도 그대로 진행되지 않았다.

변하는 환경에 유연하게 대처하는 자세가 그 무엇보다 중요하다는 사실을 깨달았다.

프로젝트 구조

기본적으로 서버-클라이언트 모델이었다.
백엔드를 REST API로 설계하고, 클라이언트 사이드에서 이를 호출하는 방식으로 고안했다.
백엔드 프로젝트는 클래스 중심으로 설계했다.
클래스 중심으로 설계한 이유는 일종의 실험이었는데, 지난 학기 C++ 강의에서 객체지향적 설계가 유지 보수에 강하다고 배웠기 때문이다.
그 수업에서 어떻게 프로그램을 설계하고 추상화하는지 생각하는 방법을 배웠는데 한 번 활용해보고 싶었다.

워크 플로우

처음에는 클래스 다이어그램을 만들었다.
이 단계에서 나는 개인적인 일로 아무것도 못했다.
그 다음 데이터베이스 구조를 짜맞추고, REST API 명세서를 만들었다.
그러고 코딩을 했는데 전부 처음해보는 경험이다보니 많이 헤맸고, 수없이 많이 돌아갔다.

기술 스택

IDE: WebStorm

같이 하는 친구가 WebStorm이 아주 좋다고 하길래 Webstorm으로 IDE를 맞췄다.
마침 Jetbrain 학생 계정으로 무료로 WebStorm을 사용할 수 있어서 사용하고 있다.
configuration이나 프로그램 실행, 테스트 실행에 있어서 직관적이라서 매우 만족하면서 사용하고 있다.

Node.js, Express.js

처음에는 파이썬의 FAST API를 사용하자고 했지만, 그래도 한 사람이라도 경험이 있는 Node.js로 진행했다.
라우팅은 express.js로 코드를 짰는데, 어쩌면 node.js를 사용하기 때문에 당연했다.

DB: mysql

데이터베이스도 가장 접근성이 좋고 비교적 문법이 간단한 mysql를 사용했다.
mysql workbench까지 사용하니 더욱 간편하게 사용할 수 있었다.

그외

그외에도 테스트: mocha, 로깅: chalk, 보안: crypto를 사용했다.
mocha의 경우 원래는 jest를 사용하려 했지만, ECMAScript 모듈을 지원하는 mocha를 사용했다.
그리고 아직 보안 부분은 공부해야 할 부분이 많다.

프론트

프론트는 기본적으로 react와 tailwind를 사용할 예정이다.

설계 방법과 문서화

클래스 기반 구조

클래스를 캡슐화하여 동작을 직관적으로 만드려고 했다.
가장 상위 클래스인 Server 클래스를 예시로 들자면

export default class Server {
    static instance;
    config;
    databaseManager;
    routerManager;

    constructor() {
        Server.instance = this;
        this.config = new Config('settings.json');
        this.keyManager = new KeyManager('keys/');
        this.googleAuthManager = new GoogleAuthManager(this.config);
        this.databaseManager = new DatabaseManager(
            this,
            this.config.getDatabaseConnectionInfo()
        );
        this.routerManager = new RouterManager(this, this.databaseManager);
    }

    async start() {
        Logger.info("데이터베이스 로드 중");
        await this.databaseManager.initDatabase();
        Logger.notice("데이터베이스 로드가 완료되었습니다.");
    }
  ...
}

Server 객체가 생성되면 매소드로 Config, KeyManager, GoogleAuthManager등 여러 하위 객체를 만들어 가진다.
그리고 이들이 서로 유기적으로 동작하도록 만들었다.

어려웠던 점

클래스 기반 프로그래밍

우선 기존에 개인으로 하던 프로젝트보다 난이도가 있었다.
클래스 기반으로 설계를 하다보니 계층이 생길 수 밖에 없었다.
그리고 계층 간의 동작을 유기적으로 엮기가 처음에 매우 힘들었다.
하지만 어느 정도 익숙해지니 이전에 하던 방식보다 편리했다.

개념 부재

지금은 그나마 무얼 모르는지 정도는 파악된 상태인데, 프로젝트 초기에는 무얼 공부해야 하는지 조차 모르는 상태였다.
그래서 처음에는 같이 하는 친구가 짠 코드를 보면서 하나 하나 씩 읽고, 조금씩 바꿔보면서 진행했다.
진행 속도가 상당히 더뎠다.
하지만 어느 정도 전반적인 구조를 파악하고 나니 그래도 코드에 의견을 낼 수 있는 수준까지 올라왔다.
아직 내가 온전히 기능을 추가해서 처음부터 설계하지는 못하지만, 그래도 실력 상승과 약간의 자신감을 얻을 수 있었다.

진행 방향

전반적인 진행 방향

현재 백엔드는 6~70% 정도 완료했다.
지난 수요일(23.08.30)에 회의를 진행했었는데, 백엔드를 완성하고 프론트로 넘어가는 것이 아니라 일정 부분 마무리가 되면 프론트로 넘어가기로 했다.
글을 쓰다 보니 생각이 났는데, 어느 정도 백엔드 진행이 본격적으로 프론트 진행 완성으로 볼 지 정확하게 정해야겠다.
이전에 개발은 아니지만, 여러 프로젝트를 보면서 성과를 정확한 수치로 표현하는 것이 무엇보다 중요하다는 걸 깨달았다.

인원 추가가 생겼다.
원래 3명이서 프로젝트를 하기로 했는데, 1명이 디자인을 온전히 맡고 싶다고 해 중간에 합류했다.
다음 주말(9월 2주차)까지 나는 회원가입/이벤트 생성 서비스 플로우차트 작성 및 백엔드, 디자인 보조,
백엔드를 같이 한 친구는 이벤트 중복 체크 및 기타 기능 추가,
새로 합류한 친구는 기존 만들어 놓은 서비스 플로우차트를 기반 피그마 UI 프로토타입 고안을 맡았다.

백엔드 진행

백엔드는 현재 중심이 되는 라우팅 정도가 작성됐다.
회원 가입, 회원 정보 변경, 이벤트 생성, 이벤트 변경/호출, 관리자 전용 기능 구현 정도이다.
세부 로직은 아직 손봐야 하지만, 스키마 혹은 기타 정보들을 추상화해서 유효성 검증 코드는 충분히 완성됐다고 생각한다.
그리고 OAuth도 일부 구현해서 구글 계정으로 가입하는 기능도 추가했다.

구글 계정으로 인증 토큰과 캘린더 API를 활용해서 이벤트 생성이 각 사용자 구글 캘린더에 연동하는 기능을 고안하고 있다.
감사하게 거의 같은 프로젝트를 했던 지인의 레포를 볼 수 있어서 참고하려고 한다.
디자인 패턴이 다르지만, API 사용 예시 정도를 참고하기에 충분하다고 생각이 든다.

프론트엔드 진행

프론트엔드는 이제 막 시작했다.
현재 로그인 및 아이디/비밀번호 찾기 서비스 플로우차트 정도만 고안했다.
프론트의 경우 React로 디자인할 예정이다.
UI/UX 디자인 패턴, 클래스(컴포넌트) 다이어그램 등을 먼저 고안하고 본격적으로 코딩에 들어갈 것 같다.
React도 아직 많이 써본 경험이 없기 때문에 계속 공부해야 한다.

개인 프로젝트로 React로 클론 코딩이나 기존에 했던 과제를 구현해야 겠다.