Back

트랜센던스

42서울 2023년 12월
트랜센던스
내 역할
디자인, 프론트엔드, 프로젝트 리드
팀
박태양 백엔드
안현준 벡엔드
임윤선 게임
타임라인
4 Months, starts December 2023
사용 기술
Vanilla JavaScript, Figma, HTML, CSS, Tailwindcss, Docker, Git/GitHub
개요
트랜센던스는 Pong game 웹 사이트 프로젝트입니다. 디자인 단계부터 Figma를 활용해 컴포넌트화된 구조를 기획했으며, Tailwind CSS를 사용해 일관된 스타일을 적용했습니다.
프론트엔드는 바닐라 JavaScript를 사용하여 구축되었습니다. 모듈화된 컴포넌트를 통해 코드 재사용성을 고려하였고 유지보수성과 확장성을 높였습니다.
페이지 새로고침이 없는 원활한 사용자 경험을 위해 커스텀 라우터를 구현한 SPA 아키텍처를 적용했습니다.
Redux 또는 Vuex와 유사한 Store 패턴을 사용하여 커스텀 상태 관리 시스템을 구현했습니다.
HIGHLIGHTS
트랜센던스는 클래식 Pong game을 재해석한 웹사이트 프로젝트입니다.
Project highlight
Project highlight
Project highlight
Project highlight
DESIGN
디자인을 어떻게 해야할까?
디자인 컴포넌트화
처음에는 컴포넌트와 개발은 생각하지 않고 막 디자인하기 시작했습니다. 하지만 이렇게 하다가는 개발을 할 때 고생을 하지 않을까. 다시 사용할 수 있는 디자인은 재사용하는게 좋지 않을까라는 생각에 3일에 걸쳐 리디자인을 시작했습니다.
재사용성을 생각해 컴포넌트를 만들었고, 만든 컴포넌트를 활용해 페이지를 디자인했습니다. 그 결과 개발을 할때, 코드를 작성할 때 어떤 컴포넌트를 만들어야 할지 배치를 어디에 해야할지 생각하는 불필요한 시간들을 단축할 수 있었습니다.
UI Component Design
COMPONENT
SPA 구현을 위해 뭘 해야 할까?
코드 컴포넌트 모듈화
React 컴포넌트를 참고 했습니다. 컴포넌트화를 하기 위해서 컴포넌트 클래스를 만들었고, 모든 함수형 클래스들은 컴포넌트를 상속하여 render()를 통해 컴포넌트를 렌더링하게 됩니다.
class Component {
  //...
  render() {}
  initialize() {
    //...
  }
}
export default Component;
Component 클래스는 render() 메소드를 가지고 있습니다.
Component.js
FriendsButton.js
createComponent.js
ComponentSwitch.js
ROUTER
새로고침을 하지 않고 페이지 전환을 어떻게 할까?
커스텀 라우터 구현
Router 클래스를 통해 URL에 맞는 page를 반환합니다. JavaScript의 History API와 관련된 기능들을 사용하여 URL을 감지하고 기록을 관리하고 root id를 찾아 페이지 컴포넌트를 반환합니다.
this.router = new Router({
  "/home/": HomePage,
  "/options/": OptionsPage,
  "/profile/": ProfilePage,
  "/gameMode/": GameModePage,
  "/game/": GamePage,
});;
App 클래스는 애플리케이션의 시작점으로 Router라는 객체를 만들어서 URL과 해당 페이지가 매칭되는 규칙을 정해줍니다.
app.js
router.js
routing
render
PUB/SUB
다크모드, 프로필 상태, 게임모드 상태는 어떻게 관리해야 할까?
Pub/Sub 패턴
Redux의 store를 참조해, 한 곳에서 상태가 변경되면 그 변경을 구독하고 있던 다른 부분에서 변화를 감지해 반응하는 패턴인 Publisher/Subscriber 패턴을 사용했습니다.
class PubSub {
  constructor() {
    this.events = {};
  }

  subscribe(event, callback) {
	  //..
  }

  publish(event, data = {}) {
	  //..
  }
}
PubSub 클래스는 이벤트를 발행하고 구독하는 메커니즘을 구현합니다.
pubsub.js
store.js
mutation.js
using example
COLLABORATION
협업을 위한 노력
GitHub flow
GitHub flow 브랜치 전략을 기반으로 한 Git 협업 시나리오를 통해 체계적인 개발을 제안, 브랜치를 관리했습니다.
GitHub Issue 라벨, Issue Template, PR Template, Git Commit Convention 규칙들을 생성 하여 협업을 진행했습니다.
작업 이슈 등록
브랜치 생성
작업
PR 생성
리뷰
테스트
병합
노션
노션을 사용해 팀원들과의 정보격차를 해소 할 수 있도록 노력했습니다.
Notion Collaboration