첫 번째 토이 프로젝트를 완료하고

Mafia Game - 역대글

▶ Node.js Docker로 배포하기

▶ Next.js Docker로 배포하기

▶ Github Actions으로 배포 자동화

▶ 첫 번째 토이 프로젝트를 완료하고

 

완성 URL

 

지금까지 몇 차례 토이 프로젝트를 진행했지만, 본격적으로 집중했던 프로젝트는 마피아 게임과 개발 중인 여행 일기 작성 어플리케이션이다. 

 

이번 마피아 게임 프로젝트는 여전히 부족한 부분이 많다. 프론트엔드 개발자로서 주어진 UI를 기반으로 작업한 경험은 많지만, 이번 프로젝트는 처음으로 UI를 직접 설계하고 필요한 이미지를 제작하는 작업을 병행했기 때문이다. 다소 낯선 작업이었지만, 새로운 도전을 통해 얻은 배움이 많았다. 

 

프로젝트의 주제는 그렇게 중요하지 않았다. 대신 Docker와 GitHub Actions 그리고 개발 환경을 정립하는 단계에 초점을 맞췄다. 새로운 도구와 환경을 익히는 것이 주된 목표였던 만큼, 이를 활용하여 느낀 점과 개선 사항을 지속적으로 업데이트를 할 계획이다. 

 

집 컴퓨터에서 서버로

일반 개발자 입장에서 서비스를 배포하는 방법이 몇가지 있다. vercel이나 github pages 같은 무료 서비스를 이용해서 정적 사이트를 배포하거나, 클라우드 서버를 구매해서 환경을 구현해 배포하는 방식이 일반적인 방식이다. 

 

하지만 서비스의 서버가 필요 없다면 무료 서비스를 활용할 수 있지만, 본격적으로 무언가를 만들려면 어쩔 수 없이 서버가 필요한 경우가 있다. 단순하게 API를 사용하기 위해서라도 CORS 때문에 Proxy Server가 필요할 수 있다. 

 

그렇기 때문에 무료 서비스는 사용하지 못했고, 다음으로 클라우드 서버를 구매해서 사용하는 방법을 생각했는데, 일반적으로 구현한 서버에 아무런 장치를 하지 않는다면 마음만 먹으면 비용이 폭발할 수 있기 때문에 장기적인 관점에서는 이 부분도 좋다고 생각하지 않았다. 

 

결과적으로 [무료]와 [서버배포]가 핵심인데, 방법이 없을까 고민하던 차에 집에 남아있는 PC가 생각났다. 호다닥 PC를 켜보니 아직 사용하는데 문제가 없었고 SSD는 아니지만 HD 1T 정도 있고 램도 16GB 정도가 되었다. 그럭저럭 무료 서버 환경의 스펙으론 괜찮을 것 같다고 생각해서 해당 PC를 서버로 사용하기로 했다. 

 

바로 리눅스 OS USB를 만들어서 설치하고 공유기에서 방화벽도 열고 포트포워딩도 해줬다. 이런 과정은 컴퓨터를 조금만 좋아한다면 또 정보가 너무 많기 때문에 굳이 글로 작성하지 않았다. 

 

어쨋든 결과적으로 무료 서버를 이번 기회로 구성하게 되었다. lol

 

징글뱅글 Docker와 GitHub Actions 

지금도 Docker와 GitHub Actions를 사용하는 방식이 최선인지는 고민을 하고 있다. 앞서 작성한 글에서 Nginx를 통해서 서비스를 배포하는데, 현재는 서비스를 먼저 배포하고 Nginx를 실행해야 문제가 발생하지 않는다. 

 

이런 과정이, 서버 하나에 하나의 서비스만 배포된다면 사실 그렇게 곤란한 부분은 아닐 수 있다. 까먹는다고 하더라도 서비스를 바로 실행시켜주면 큰 문제가 없기 때문이다. 하지만 하나의 서버에 여러 개의 서비스를 배포한다고 생각하면 좋은 방법이라고 생각되지는 않았다. 

 

간단하게 10개의 서버를 배포했는데, 전부 서비스단과 서버단을 배포해야 한다면 20개의 서버를 실행하게 된다.

그 중 하나라도 실행되지 않은 상태에서 Nginx를 배포하면 바로 오류가 발생한다는 뜻이다. 

 

그렇기 때문에 Docker와 Github Actions 연동 부분은 아니아니,

Docker와 Nginx를 사용한 부분은 추후 새로운 서비스를 만들면서 다시 변경될 수 있다. 

 

만능키는 없다.

개발 환경을 구성하는 단계에서 현재 내가 주로 쓰는 구성은 Styled-Components와 Atomic Design Pattern을 활용하고 있다. 이때 Atoms에도 속하지 않은 Layout 이라는 컴포넌트를 하나 만들었다. 

지옥과도 같은 Layout

사용하는 방법은 오직 레이아웃을 위한 요소를 만들 때 Styled-Components를 활용해서 새로 만드는 것이 아닌, Layout 컴포넌트를 활용해서 만들 생각이었다. 

 

의도는 정말 좋았다고 생각하지만 내가 생각하지 못한 것이 있었는데, 모바일 반응형이다. 

얼추 20~ 정도 되는 속성이 있는데, 이런 속성들에 반응형 처리를 위해서 속성을 추가하게 된다면 Layout은 미디어 타입 * 20이 된다. 

 

이런 과정을 거치면서까지 Layout이 필요할까 생각하면 아니라고 생각한다. 

<Layout
    width={"~"}
    height={"~"}
    
    display={"~"}
    flexDirection={"~"}
    gap={"~"}
    
    position={"~"}
    top={"~"}
    left={"~"}
    
    margin={"~"}
    padding={"~"}
    
    mobileWidth={"~"}
    mobileHeight={"~"}
    ...
>
 // ...
</Layout>

굳이 이런식으로 작성하는 것보다는 새로운 Styled 컴포넌트를 만들면 가독성도 좋고 작성도 편하게 할 수 있을텐데, 이런 느낌의 코드를 작성하고 있으니 어느순간 현타가 왔다. 

 

그래서 결과적으로 만능 컴포넌트를 포기하고 소요를 조금 더 잘게 자르는 방법을 생각했다. 

Atomic Design Pattern

디자인 패턴에 대해서도 많은 고민이 있었다. 요소를 잘게 자르는 부분에만 집중해서 Atom, Molecules, Organisms, Template 만으로는 단계가 부족했다.  그래서 재사용에 대해서 초점을 잡고 컴포넌트를 구성해봐야겠다는 생각을 하게 되었다. 

 

요소를 봤을 때 예를들어 헤더라도 재사용되지 않는다면 Atoms 요소에 들어가는 것이다. 

물론 해당 컴포넌트가 가지고 있는 관심사가 너무 많아진다면 그 이유로 요소를 자를 이유가 되기도 한다. 

 

이 부분에 대해서는 쓸 내용이 더 있지만 지금은 짧게 마무리 하고 다음 프로젝트에 해당 방법으로 진행해보고 이런 주제를 가지고 작성을 하겠다. 

디자인의 어려움

svg를 공부하고, UI 요소를 자주 봐서 애니메이션이 많고 화려하면 좋은 꽤 괜찮은 홈페이지가 나올거라고 생각했다. 하지만 막상 전부 때려 박으니 각각 따로 노는 이도저도 아닌 구성이 되었다. 

 

이부분이 이번 프로젝트의 아쉬운 점 TOP 2에 들어간다. 반드시 리팩토링을 할 생각이 들게하는 부분이다. 

하지만 지금 단계에서는 아직 디자인적으로 보는 눈이 부족하다고 생각해서 여러 프로젝트를 진행하면 점차 좋아진다고 생각되면 그때 업데이트를 할 생각이다. 

기획의 중요성

내가 정말 멍청하다고 생각되는 부분이 기획을 제대로 하지 않았던 부분이다. 

개발하면서 기획을 하니 중간 중간 기능을 바꿀 생각을 하니 전체 코드를 갈아엎어야 하는 문제가 생겼다. 

 

서버와 통신을 주고 받은 다음 상태를 업데이트를 해주는 핵심 훅만 4번을 갈아엎었다. 

처음부터 확실하게 기능을 정해두고 개발을 했다면 아마 개발 시간이 훨씬 단축 됐을거라고 생각된다. 

 

총총.

이번 기회를 통해서 내가 정말 서비스를 만들 수 있다는 자신이 생겼고 자기 객관화가 되었다. 

새로운 프로젝트를 바로 진행했는데, 그 프로젝트는 이번 아쉬운 점을 보안해서 더 나은 결과물을 만들려고 한다. 

 

사실 이 과정에서도 주변 디자이너분의 도움을 많이 받고 있지만... ㅎㅎ