URL 단축 사이트 bfurl 제작 후기?

2022년 1월부터 3월 16일까지 URL단축 사이트 bfurl.me를 제작했다. 프론트엔드는 친구가, 백엔드는 내가 맡아서 했으면서 전체적인 구성은 내가 맡았다. JS나 웹쪽을 배운지 몇 주 안되어서 하는 첫 프로젝트라서 모르는 것도 많고, 이게 왜 안될까? 하는 것도 많았지만 하나하나 알아가면서 토이 프로젝트를 끝마칠 수 있었다.

http://bfurl.mePermalink

작명에는 사실 큰 의미는 없었다. bf는 이유를 붙이긴 했는데, 2달 전에 붙인거라서 기억이 안나고 url은 뭔가 넣어야할 것 같아서, .me는 싼 도메인을 찾다가 .me가 가장 싸서 사서 넣었다. 백엔드는 Node.js의 express이고, 프론트엔드는 부트스트랩을 사용했다. DB는 MongoDB, 호스팅은 heroku를 사용했는데 셋 다 처음 사용해 보는 거라서 꽤 난항을 겪었다.

매우 간단한 메인화면. 일단 둘 다 프론트엔드가 사실상 처음이기도 하고, 막 화려하거나 그런 걸 좋아하지도 않는지라 최대한 간단한 디자인을 지향했다. 결과물은 간단하면서도 모던한 디자인이라고 스스로 생각되어 만족중이다. 메인화면에서의 기능은 간단하다. Make your link briefly 바 안에다가 “https://twitter.com/home” 등 링크를 넣고 Shorten을 누르면 Your link is here! 밑에 있는 바에 http://bfurl.me/DsMlxze라고 url를 단축한 걸 출력한다. 그걸 복사해서 사용자가 웹 브라우저의 url에다가 붙여넣으면 그렇게 이동되는 식이다. 이 기능 자체는 구현하는데 몇 시간 걸리지 않았다. 문제는 로그인, 회원가입, URL 커스터마이징, URL 삭제, 쿠키, 세션, URL 설명 문자열 추가, 프론트엔드 제작, DB 연결, 구글 Oauth등 여러가지에서 시간을 잡아먹었다.

회원가입과 로그인.. 로그인도 회원가입도 처음 js를 공부한 나에게 어려운 과제였다. 회원가입을 해서 사용자 정보를 DB에 저장하는데, 사용자가 신뢰할 수 있는 프로그램이여야하니, 암호화를 걸었다. bcrypt를 사용했는데 이걸로 사용자의 비밀번호를 암호화 하는 코드를 짜고, 그 사용자의 정보가 이미 DB에 있는지 확인하고 등등 여러가지 코드를 짜는데 정말 고생을 많이 한 것 같다. 특히 bcrypt는 heroku에서 작동을 안해서, 부랴부랴 bcryptjs로 교체하는 등, 나중에도 은근히 거슬리게 한 것 같다. 그리고 매번 들어올 때마다 로그인을 하면 사용자가 귀찮겠다고 생각해서 세션을 짜는 것도 넣었는데 쿠키를 통해서 암호회된 세션을 DB에 넣고, 쿠키를 보내주고 사용자가 메인화면에 들어올때마다 검사하고 하는 것도 어려웠지만 뭔가 직접 짜니까, 만족감이 유독 크게 들었던 부분이었다.

그리고 Sign in with Google. 이건 진짜 넣어야할 기능 같아서 넣었는데, 정말 어려웠다. oauth를 하면서 passport를 만들고, passport session하는데 Sign in with Google을 눌러도 redirect_uri_mismatch가 뜨기도 하고, 구글에서 보내준 데이터를 또 제대로 받아오지 못하는 경우도 있었고, 겨우겨우 받아와도 이걸 다시 재가공해서 암호화하는 등, 여기서만 몇십 시간을 쓴 건지 모르겠다. 지금은 그래도 얼추 이해한 것 같으니 다행이지만… 콜백이 제대로 안들어가서 왜 그런지 도데체 몰라서 일주일을 날린 경험이 있는데, router의 경로 설정을 oauth가 아니라 login으로 잘못 끼워넣기도 하는 문제도 있었다.

유저 페이지. 가장 허접하지만, 그래도 어떻게 기능 구현을 다 해서 다행이라고 생각한 부분이다. 각 칸마다 맨 위에는 그 링크에 대한 설명이 있다. 따로 Create를 할 때 넣어주지 않았다면, 그 url의 원본 url이 들어간다. 그리고 두 번째 칸에는 “https://www.noion.so…“처럼 보이는 것 처럼 원래 url이 들어간다.

그리고 맨 아래에는 bfurl.me/단축링크 가 들어간다. 이걸 드래그해서 붙여넣기 해도 되지만, 옆에 Copy가 있으니까 이걸 누르면 바로 복사가 된다. Delete는 말그래도 그 링크를 삭제하는 것.

Edit은 그 링크노드를 편집하는 거다. 위에서 말했듯이 그 링크의 설명을 바꿀수도 있고, 단축 url을 커스터마이징 할수도 있다. 만약 “bfurl.me/dA8c_1”로 되어있는데, 내가 만약에 커스터마이징을 하고싶다. 그러면 edit을 눌러서 “bfurl.me/나만의_url”이런 식으로 바꿀 수 있다. 물론 이미 등록된 url이면 안된다.

구조는 그 사용자의 쿠키를 받아서, DB에서 쿠키로 검색한다음에 사용자 토큰을 얻는다. 그 사용자 토큰으로 Create된 URL들을 전부 불러와서 for문으로 받아오는데, 여기서 문제가 있었다. 결국 받아오니까 모든 노드들의 값이 마지막 노드의 값으로 된 것. 어떻게 그 문제를 해결하고 프론트엔드에서 for문으로 노드들을 출력하는데도 똑같은 문제가 생겼다. 그 이유는 “변수1 = 변수2”로 받아오는 값이 value를 =로 옮기는 게 아니라, reference를 옮기는 것. 참조를 옮긴다고 생각하면 되겠다. C++로 생각하면 포인터값을 옮기는 것이니까, for문으로 계속 돌리면 결국 전부 마지막꺼가 옮겨지게 되는 것이다. 이것도 깨닫기까지 3일정도 걸렸다. 근무를 하면서 틈틈히 제작하는 것이라서, 많은 시간을 투자할 수 없고, 중간중간에 끊기는 것도 시간이 많이 걸리는 이유가 됬을 것이다.

##heroku

서비스를 해야하는데 무슨 호스팅에 올릴까 하다가, 처음에는 google cloud platform을 생각했다. 거기서 위키도 운영해봤고 했지만, 토이 프로젝트라서 돈이 드는 걸 원하지 않았는데 3개월정도마다 바꿔주는게 너무 귀찮아보였다. 그래서 생각하다보니 떠오른게 heroku다. heroku는 파일만 git으로 올려주면 알아서 실행하고, 호스팅해주는 사이트다.

한 달에 550시간인가, 대충 그 정도 호스팅을 기본으로 해주는데 신용카드를 등록만 하고, 결제하지 않아도 450시간 정도를 더 줘서 한 달에 1000시간. 한 달은 31일로 잡아도 744시간이니까 무료로 계속 호스팅을 할 수 있는 점이 끌려서 선택하게 되었다. 빌드도 알아서 해주고, git으로 올려주기만 하면 되니깐. 단점은 30분간 접속하지 않으면 sleep모드로 들어가서 다시 접속하는데 시간이 조금 걸린다는거? 그래도 10초 정도면 켜지니까 그렇게 큰 문제는 아니라고 생각했다.

일단 서비스한지 이틀째지만 별다른 문제는 없었다. 서버가 미국에 있기도 하고, 서버 성능에 대한 문제는 어차피 별다른 큰 데이터를 사용하는 것도 아닌 단축URL서비스니까 문제도 안됬다. 그리고 이왕하는 김에 www.서버.heroku.com이런 식으로 되는 건 원치 않아서 url을 namecheap에서 구매해서 사용했다. 결과는 만족스럽다.

만들면서 정말 많은 공부를 했다. js의 구조부터, 여러가지 기능들과 패키지들. 세션, UI/UX나 DB에 이르기까지 두 달이란 시간 동안 많이 알아간 것 같았다. 그리고 내가 주도하는 입장인만큼 프론트엔드도 알아야해서 css, html, bootstrap까지 공부한 것도 많았다. 요 근래동안 가장 만족스러웠고 배운게 많은 토이 프로젝트였다고 생각한다.

다들 많이들 http://bfurl.me를 사용해줬으면 좋겠다. 만약 사용하면서 버그나 에러를 발생하면 bfurlDev@gmail.com 으로 연락을 주신다면 최대한 고치도록 노력하겠습니다.

Hobby 카테고리 내 다른 글 보러가기