logo
회고

2024년 2월 회고

문성석2024년 2월 29일

thumbnail


1월이 지나고 벌써 2월도 끝나버렸다. 2월 초에는 몸이 갑자기 아픈 바람에 1주일 정도 쉬었다. 설날도 껴있는 바람에 고향인 부산에 내려가서 책 조금 읽으면서 푹 쉬었다. 그래서 대략 3주 정도만 개발 공부를 할 수 있었다. 한 게 많지는 않지만, 정리해서 기록으로 남겨두자.



만다라트 제작 웹사이트를 만들었다

mandal art

지난 1월 달에 만다라트 계획표를 알게 되었다. 일본의 경영 전문가 마츠무라 야스오가 목표 달성을 위해 만든 기법을 활용한 계획표인데, 가장 큰 목표를 세우고 이에 대한 해결점, 아이디어, 생각들을 Who, Why, What, Where, When을 통해 확산해 나가는 형태이다.


제작 웹사이트에서 하나 만들어볼까 하는 생각으로 구글에서 찾아봤는데, 딱히 마음에 드는 웹사이트가 없어서 하나 만들어봤다. 여기 회고에서 제작 과정을 간단하게 정리해 보고자 한다.


1) 기획

만다라트 계획표 제작 관련 노션 페이지를 생성하고, 필요한 기능들을 나열해보았다.


  1. 9 X 9 목표칸 작성 기능
  2. 이미지로 저장 기능
  3. 로그인으로 데이터 저장 기능 (Firebase)
  4. 언어 설정 기능
  5. 다크모드 기능

최초 MVP 개발 기한을 3~4일 정도로 예상했기 때문에 우선 순위에 따라서 기능들을 다시 분류하였다.


  1. Must have
    • 9 X 9 목표칸 작성 기능
    • 이미지 저장 기능
  2. Good to have
    • 로그인 기능
    • 언어 설정 기능
  3. Nice to have
    • 다크모드 기능

이렇게 분류하고 나니 당장 어떤 작업부터 시작해야 되는지 파악하기가 쉬워졌다. 우선 MVP 개발 기간 동안은 Must have에 분류된 기능들을 작업하고, 이후에 시간이 될 때 나머지 기능들을 업데이트 하는 방식으로 결정하였다.


2) 디자인

원페이지 프로젝트라 디자인은 크게 시간을 쏟지 않았다. 그저 항상 심플한 디자인이 최고라고 생각하고 있어서 미니멀 디자인 컨셉으로 구상하였다.


3) 기술 스택

  • Typescript
  • SCSS
  • Webpack

처음에는 React로 빠르게 개발해서 하루 만에 끝내버릴까 했다. 그런데 최근 감명 깊게 읽었던 Vanilla Javascript로 웹 컴포넌트 만들기 블로그 글과 최근에 수강한 타입스크립트 & 객체 지향 프로그래밍 강좌에 영향을 받아서 Typescript만을 사용하여 개발하기로 결정하였다.


// src/core/Component.ts
 
export interface Component<S = {}> {
  setup: () => void;
  template: () => string;
  setEvent: () => void;
  setState: (newState: S) => void;
  mounted: () => void;
}
 
export abstract class BaseComponent<T extends HTMLElement, S = {}, P = {}> implements Component<S> {
  $target: T;
  state: Readonly<S>;
  props: Readonly<P>;
 
  constructor(element: T, props: Readonly<P>) {
    this.$target = element;
    this.props = props;
 
    this.setup();
    this.render();
    this.setEvent();
  }
 
  ...생략

이러한 코어 컴포넌트 역할을 하는 추상 클래스를 만들어서 개발하였다. 여기에 기술 관련된 내용을 더 쓰자면 너무 길어질 것 같아서 따로 글을 작성할 예정이다. 우선은 깃허브 저장소에만 업로드 해놓은 상태이다. 데이터 저장 기능까지 구현하고 글을 쓰고 싶기는 한데 3월 달에 시간이 날지..



알고리즘 공부를 했다

오랜만에 알고리즘 공부를 시작했다. 간만에 프로그래머스와 LeetCode 들어가서 알고리즘 문제를 풀면서 상쾌하게 아침을 시작하니 머리가 아팠다. 진작에 습관으로 만들어 놨어야 했다.. 그래도 간만에 해시, 힙, DFS 등 예전에 고생했던 문제들을 다시 풀어보니 처음 코딩 공부할 때가 생각이 나면서 재밌었다. 앞으로 최소 1시간은 꾸준하게 알고리즘 공부에 투자할 예정이다.



리액트 클린 코드 강의를 들었다

3월에 시작되는 원티드 프리온보딩 챌린지를 시작하기에 앞서, 현재 내가 올바른 방식으로 리액트 코드를 작성하고 있는지 점검하는 시간이 필요했다. 이러한 생각을 하고 있었는데, 갑자기 인스타그램에 리액트 클린 코드 강의가 추천으로 떴다 ; 소름 돋는 마음과 함께 강의를 확인해보니 우아한 형제들 프론트엔드 개발자 출신 강사님이 제작하신 강의였다. 지금 나에게 딱 맞는 강의라고 생각이 들어 바로 쿨결제 후 수강했다.


조금은 기초적인 내용이 포함되어 있기는 했지만, 무심코 지나칠 수 있었던 안티 패턴들을 다시금 확인할 수 있었다. 그리고 좋은 코드는 어떻게 작성할 수 있을까 ? 어떻게 많은 사람들이 보기에도 편한 코드를 작성할 수 있을까? 하는 생각들을 해볼 수 있었던 좋은 강의였다.