FE개발자 혼자서 만드는 사이드 프로젝트 후기

Youngsu Han·2023년 1월 27일
42
post-thumbnail

최근 my-articles 서비스를 약 두 달 정도 만든 끝에 오픈했어요:D

혼자서 만드는 이라는 키워드와 함께 뭔가 대단한 개발자가 만든 프로젝트라고 생각하시는 분도 계시겠지만, 저는 현업에서 앱 -> 웹 개발을 해온 천생 프론트엔드 개발자이고 서버개발 경험은 없었어요.

이 글을 보고 많은 개발자 분들이 용기내서 만들어 보고 싶은 프로덕트를 만들어 보셨으면 좋겠습니다 🙏

아 만들어 봐야겠다

  1. 여러 회사를 다니면서 각 회사 블로그에 기술 블로그를 많이 작성했고, 더 이상 운영하지 않은 개인 블로그를 보고서 연락 주시는 분들이 종종 생겼어요. (대단한 글은 아니지만 좋은 리크루터는 대상이 어떤 활동을 했는지 꼼꼼하게 보고 연락을 하시는거 같아요)

  2. 아무리 블로그를 잘 만들어도 벨로그나, 브런치, 미디엄보다 이뿌게 만들 자신이 없었어요. 감성적인 글은 브런치에, 개발 얘기는 벨로그나 미디엄에 작성하고 싶고 한곳에서 모아서 보여주고 싶었어요. linktree 같은 서비스도 있지만 뭔가 벨로그나 미디엄 같이 친숙한 UI로 공유하고 싶었어요

디자인은 어떻게 하지

제일 고민되는 부분이었어요. 그렇게 복잡하지 않은 서비스라 디자인이 좋아야 WOW하고 더 오래 머무르고 회원가입 하고 싶을거 같았거든요🤔 디자이너가 없기 때문에 tailwind ui, chakra-ui, mui, bootstrap 같은 잘 만들어진 시스템을 사용하기로 마음 먹고 빠르게 훑어 봤습니다.

  • tailwind ui - tailwind를 기반으로 만들어진 ui 컴포넌트입니다. 개발자가 보기에 디자인은 역시 쓸만했던거 같아요. 하지만 tailwind를 한번도 사용해보지 않았기 때문에 조금 거부감이 들었고 제공되는 템플릿도 유료버전이 많았던걸로 기억합니다. 나중에 tailwind에 익숙해지면 두 번째 프로젝트는 tailwind를 사용해 볼 생각이에요.

  • mui - 회사 어드민에 사용하고 있어서 쉽고 빠르게 개발 할 수 있을거 같아서 알아봤는데 느낌이 너무 admin스러웠습니다. 템플릿을 보면 admin스럽지 않게 이쁘게 만들어진 사이트도 있었지만 필요한 컴포넌트 단위로 템플릿이 제공 되면 좋겠다라는 생각이에요. 디자이너 없이 개발자 혼자 만든다면 어드민인거 같으면서 어드민이 아닌 끔찍한 사이트가 나올거 같았습니다.

  • chakra-ui - mui보다 제공되는 컴포넌트는 적어 보였지만 잘 만들어보면 어드민처럼 안보이게 만들 수 있다는 첫인상이었습니다. 무엇보다 템플릿모음Form, Card 같은 제가 원하는 컴포넌트가 잘 모여있었어요. (Card만 보고 달려왔다...)

  • bootstrap - 사실 진짜 쓸거 없으면 쓰려고 했는데 뭔가 만들다 현타와서 중간에 포기했을거같아요

chakra-ui를 선택하고 개발을 시작했습니다.

잘 만들어진 디자인시스템을 사용해보니 나중에 회사에서 디자인시스템을 만들 일이 있다면 좋은 참고 코드가 될 수 있다는 생각이 들었어요. 개인적으로 React를 개발 하신다면 학습용으로 한번 쯤 써봐야 할 필요가 있지 않을까라는 생각도 드네요

서버는 어떻게 하지

약 3년전에 graphql 공부 한다고 express server를 npm install 수준으로 띄웠다가 잠깐 보고 내린게 전부였어요.
돌아가는 프로덕트를 빨리 보고 싶었기 때문에 최대한 빠르고 쉽게 만들 수 있는 express 를 설치하려고 하던 시점에 koa 를 발견하고 벨로퍼트님이 작성하신 koa 개발 가이드 문서 를 발견했습니다. 이 문서를 보니 갑자기 원하는 프로덕트를 빠르게 만들 수 있을거같다는 자신감이 생겼습니다. 정말 프로덕트 제작에 딱 필요한 것들만 잘 정리해주셨어요👍👍👍👍

  • koa
  • mongodb
  • mongoosejs
  • js (ts는 과감하게 포기했습니다)

를 통해 개발을 시작했습니다. 벨로퍼트님이 작성해주신 문서에는 mongodbd에서 사용되는 join같은 개념의 aggregation은 설명 되지 않았기 때문에 복잡한 mongodb 문법은 그때그때 구글링 하면서 만들어 나갔어요.

mongodb를 사용하면 보통 mongoosejs 같은 ODM(object document mapping)을 사용하게 되는데 평소 js를 사용하는 개발자가 쉽게 개발 할 수 있을정도로 문법이 그렇게 복잡하지 않고 문서화도 잘 되어있어서 쉽게 원하는 결과를 만들어 나갈 수 있었습니다. (물론 반나절 이상 삽질하는 경우도 있었습니다)

여담이지만 서버개발을 할때는 프론트를 만들때보다 그렇게 손이 많이 가진 않았어요. 물론 간단한 프로젝트라 그랬겠지만 혹시 누군가 나중에 사이드프로젝트를 같이 하자고 한다면, 어렵지 않은 프로젝트라면 무조건 서버한다고 할거에요

개발보다 어려운 AWS

프론트엔드 개발자로써 어색하지 않게 접하는 S3, Cloudfront를 통한 이미지 서빙은 기본적으로 생각하고 있었지만 서버비용, 보안 등을 생각하니 평소에 잘 모르던 개념과 허들이 많이 있었습니다.

어떻게 서버비용을 조금 덜 낼까 고민하고 주변 서버 개발자분들에게 조언도 구했습니다. 그 결과 람다에 서버를 올릴까 잠깐 고민을 했지만 맘편하게 비교적 간단하고 친숙한 ec2에 서버를 올리기로 했어요.

아무리 간단하게 서버를 올린다고 하더라도 다음사항은 꼭 지켜야 할 것 같았어요.

  • 클라이언트에서 s3에 직접 이미지를 올리는 방법을 선택했고, 무조건적인 버킷에 대한 접근을 막기 위해 presignedUrl 방식을 사용했습니다. 이 방법을 통해 서버에서 내려주는 upload url에 정해진 시간동안만 이미지를 업로드를 할 수 있게 제한 했습니다.

  • SSL적용과 트래픽 관리를 위해 LB(LoadBalancer)를 적용했어요. 단순하게 API서버로만 쓸 용도였기 때문에 nginx같은 웹서버를 따로 올리지 않았지만 AWS에서 발급하기 위한 SSL인증서를 적용하기 위해서라도 결국 LB는 반드시 붙여 줘야 했습니다.

혹시 처음 서버개발을 하시고 AWS에 서버를 올리시는 분이라면 위 내용은 한번쯤 시도해보셔도 좋을거같아요.
처음 하는 설정이라 삽질을 많이 하긴 했지만 사실 서버개발에서는 기본적인것들이라 presignedurl, aws ssl 인증서 적용 등의 키워드만 검색해도 무수히 많은 블로그와 참고문서들이 검색됩니다

하지만 굳이 SSL인증서를 AWS에서 관리하지 않아도 되고 nginx서버를 올려놓은 상태에서 api서버로 서버를 사용하신다면 LB는 옵션이 되지 않을까 싶네요(제 프로젝트를 기준으로 lb가 돈이 제일 많이 나옵니다...)

또 이미지 리소스가 그렇게 중요하지 않은 프로젝트라면 cloudfront를 안붙여도 될거에요. 각 AWS service가 어떤 기능을 하는지 이해하고 적용하는게 중요할 것 같네요

이제 배포 해보자

나름 MVP라고 생각했던 기능들

  • url을 입력하면 메타데이터를 읽어와서 이미지, 타이틀을 보여주는 기능
  • 내가 작성했던 글과 스크랩하고 싶었던 글을 분리해서 저장하고 조회하는 기능


  • 소셜로그인(카카오 로그인)
  • DB 테이블과 관련된 모든 CRUD 작업
  • favicon, 미리보기 등에서 사용될 로고와 심볼 만들기

까지 개발을 마치고 배포했습니다.
로고와 심볼은 adobe express라는 서비스를 통해 간단하게 만들었습니다. 디자인을 전혀 모르는 분들도 간간하게 로고를 만들 수 있는 좋은 사이트인거같아요

MVP 확장 해보기

  1. 글을 카테고리별로 모을 필요가 있어서 폴더구조를 생성하고 아카이빙에 대한 소개를 할 수 있도록 기능을 추가했습니다.

  2. 브라우징 하면서 글을 쉽게 저장 할 수 있도록 크롬 익스텐션 을 만들었어요

크롬 익스텐션을 만드는것도 처음이라 비교적 많은 조사를 통해 개발을 시작했는데요. 원래는 서비스와 동일하게 React + Chakra를 SPA으로 만드려고 했어요. 하지만 크롬익스텐션을 만드는 예제코드 대부분이 첫 화면을 보여주는 html파일, js파일 로 구성 되어 있어 이걸 React로 어떻게 개발해야하나 감이 잘 안오기도 했고, 만든다 하더라도 무거운 번들사이즈가 걱정되었어요
(불가능한건 아닙니다 참고)

생각해보니 크롬익스텐션 기능이 크지 않아서 React로 만들 필요도 없어보였습니다.
간단하게 코드 몇줄을 첨부하자면 아래와 같아요

example popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="popup.css" />
    <link rel="stylesheet" type="text/css" href="reset.css" />
  </head>
  <body>
    <section class="container">
      <h1>My articles extention 📚</h1>
      <div class="profile_container">
        <img
          class="profile"
          id="profile"
        />
        <p class="username" id="username"></p>
      </div>
      <p class="currentUrl" id="currentUrl"></p>
      <div class="buttons">
        <button id="scrap" class="button">스크랩하기</button>
        <button id="article" class="button">내글로 저장하기</button>
      </div>
      <div class="description" id="description"></div>
    </section>
    <script src="popup.js"></script>
  </body>
</html>

크롬 익스텐션 에서 실행되는 js에서는 chrome API를 사용할 수 있습니다. API를 통해 원하는 도메인의 쿠키를 얻어올 수 있고, 현재 실행중인 탭의 정보등을 알 수 있어요

example popup.js

   // 원하는 도메인에서 쿠키정보 가져오기
   await chrome.cookies.get({
      name: "accessToken",
      url: my_article_url,
   });

  // 현재 탭의 url 정보 가져오기
  const w = await chrome.windows.getCurrent();
  const tabs = await chrome.tabs.query({ active: true, windowId: w.id });

  if (!tabs || !tabs[0]) {
    description.innerText = "웹사이트의 정보를 가져오지 못했습니다";
    description.style.color = "#C53030";
    return;
  }

  const url = tabs[0].url;

마치며

이 글을 쓰게 된 이유는 만든 서비스 홍보하기 위해(50% 35%), 내가 쓴글에 카드 하나 더 채우기 위해 (15%), 非 풀스택 개발자 분들이 재밌는 프로젝트를 많이 만들어 보셨으면 좋겠다고 생각해서(50%)정도 입니다.

안해본거라고 너무 겁먹지 말고 완벽하지 않더라도 만들어보셨으면 좋겠어요!

DONE IS better than PERFECT!

profile
이것저것 만들어보고 느끼고 싶은 개발자입니다 :D

4개의 댓글

comment-user-thumbnail
2023년 2월 3일

저도 개인 사이드 프로젝트 기획중인데 감사합니다!

1개의 답글
comment-user-thumbnail
2023년 2월 4일

그동안 express로 서버 개발중이었는데 koa는 이번에 처음 알았어요! 다음 프로젝트 때는 한번 사용을 고려해봐도 괜찮을거 같네요, 잘 읽었습니다!

1개의 답글