😀 자신과 팀소개를 부탁드립니다.

1인 개발입니다 ㅎㅎ

🤗 프로덕트 소개좀 해주세요~

Krll은 로그인 없이 간편하게 긴 URL을 단축할 수 있는 서비스입니다. QR 코드도 함께 생성되어 스마트폰으로도 쉽게 URL을 열 수 있습니다.

크롬 확장으로 링크를 우클릭하고 메뉴를 클릭하기만 하면 선택한 링크를 단축해 클립보드에 복사시킬 수도 있습니다.

마스토돈(SNS) 용 봇도 개발하여 돌리고 있습니다.

웹사이트: https://www.krll.me

크롬 확장: https://github.com/sunwoo1524/krll-chrome-extension

마스토돈 봇 사용법: https://github.com/sunwoo1524/mastodon-url-shortener-bot/blob/main/README.md

⁉ 프로덕트를 만들게 된 계기는 무엇인가요?

백엔드, 프론트엔드, 데이터베이스를 모두 혼자서 개발, 즉 풀스택 웹 서비스 개발을 한번은 해보고 싶었습니다.

개발 초보자가 처음 개발해보기 좋은 서비스로 링크 단축기가 좋을 것 같았습니다.

🤝 팀원분들은 어떻게 만나셨나요?

1인 개발입니다 ㅎㅎ

😱 개발은 어떻게 진행이 됬나요?

FastAPI가 파이썬 프레임워크이기도 하고, 프레임워크 문법도 간단하고, Flask, Django보다 빠르다고 해서 백엔드는 FastAPI를 선택했습니다.

프론트엔드는 React를 선택했고 데이터베이스는 PostgraSQL을 선택했습니다.

처음엔 쉬워보였으나 시행착오가 많았습니다.

왜냐하면 전 데이터베이스와 백엔드 그리고 도커를 제대로 다뤄본 적이 없었기 때문입니다.

공식 문서와 구글링한 자료들, 그리고 수많은 시행착오와 함께 겨우 프로젝트를 완성할 수 있었습니다.

기술 스택

• Python, FastAPI, PostgreSQL , React

백엔드

백엔드는 FastAPI를 이용했습니다. Flask만큼 쉽고 간단한데다 더 빠르기 때문입니다.
API 문서 자동으로 만들어주는 기능은 기가 막합니다. 문서에서 API 테스트도 할 수 있습니다.

데이터베이스는 PostgreSQL을 이용했습니다. 배포는 도커를 이용했습니다.

백엔드를 만들면서 가장 힘들었던 부분은 개발환경 세팅과 배포가 아니었을까 합니다.

이걸 만들면서 도커와 도커 컴포즈를 처음 접했습니다…!
데이터베이스도 굉장히 어려웠습니다.
개발환경 세팅하고 데이터베이스 연결하는데 대부분의 시간을 보낸 것 같습니다.

백엔드 메인 로직

메인 로직은 간단합니다.

1. 데이터베이스에 랜덤한 문자열 키와 원본 URL을 저장한다.

2. 문자열 키는 https://example.tld/<문자열 키> 와 같이 단축된 링크에 사용된다.

3. 단축된 링크를 열면 문자열 키에 연결된 원본 URL을 데이터베이스에서 꺼내 리디렉트 시킨다.

아래는 위의 로직이 있는 소스 코드의 일부입니다.
주석으로 설명을 넣었습니다. FastAPI를 이용했습니다.

# URL을 단축시켜 데이터베이스에 저장
@app.post("/api/urls", response_model=schemas.ShortenedURL)
def create(url: schemas.URLToShorten, db: Session = Depends(get_db)):
    # 올바른 URL이 아니면 400 오류 반환
    if not validators.url(url.url):
        raise HTTPException(status_code=400, detail="Invalid URL")
    
    # 데이터베이스에 있는 URL과 키 가져오기
    shortened_url = crud.get_shortened_url(db, url.url)
    
    if shortened_url is None: # 데이터베이스에 없다면 키를 새로 생성하고 데이터베이스에 저장
        string = "abcdefghijklmnopqrstuvwxyz"
        string += string.upper()
        string += "0123456789"
        string = string * KEY_LEN

        key = "".join(random.sample(string, KEY_LEN))

        # 데이터베이스에 중복된 키가 있는지 확인
        while not crud.get_original_url(db, key) is None:
            key = "".join(random.sample(string, KEY_LEN))

        shortened_url = crud.shorten_url(db, url.url, key)

        return {
            "key": key,
            "original_url": url.url
        }
    
    return shortened_url


# 단축된 URL을 열었을 때 원래 URL로 리디렉트
@app.get("/{key}")
def redirect(key: str, db: Session = Depends(get_db)):
    # 데이터베이스에서 키에 맞는 URL 꺼내기
    shortened_url = crud.get_original_url(db, key)

    if shortened_url is None: # 데이터베이스에 없다면 404 오류 반환
        raise HTTPException(status_code=404, detail="URL is not found.")
    
    # 원래 URL을 301 리디렉트
    return RedirectResponse(shortened_url.original_url, status_code=301)

이 코드는 일부분이고 자세한 내용은 깃허브 저장소를 확인할 수 있습니다.

https://github.com/sunwoo1524/krll-backend

백엔드 배포

백엔드와 프론트엔드를 분리 개발했습니다.
그래서 배포 또한 백엔드는 GCP 프리 티어에서, 프론트엔드는 Vercel에서 했습니다.
프리 티어 VPS로 오라클 클라우드도 있는데 가입이 죽어도 안돼 포기했습니다.
가입이 안돼 문의 이메일을 남겼더니 꺼지라고 했다는 사람도 있는 거 보면 가입할 생각이 싹 사라집니다.

결국 GCP에도 평생 무료 서버가 있다는 것을 듣고 GCP를 선택했는데 얘는 자동 결제가 멋대로 될 것 같아 불안합니다… 결국 답은 돈

어떤 분이 클라우드플레어 CDN을 이용하면 https 인증서까지 무료로 이용할 수 있다고 하여 해봤습니다.
사실 인증서 발급과 적용도 배포만큼 어려웠습니다…

프론트엔드

프론트엔드는 리액트를 사용했습니다.
그냥… 리액트가 가장 무난하고 많이 쓰여서? 선택했습니다.
API로 단축된 URL을 받고 QR 코드로 만들어주는 기능을 넣었습니다.
이용 규칙도 명시했습니다. 배포는 Vercel을 이용했습니다.

프론트엔드 깃허브 저장소도 공개되어 있습니다.
https://github.com/sunwoo1524/krll-frontend

👍 재미있었던 것은 무엇이었나요?

시행착오가 많아 방학 안에 배포는 불가능할 수도 있겠다고 생각되었지만 다행히 방학 안에 배포를 할 수 있었습니다.

이 프로젝트를 진행하면서, 정말 많은 것을 배운 것 같습니다.

도커와 도커 컴포즈, 백엔드, 데이터베이스 그리고 리눅스에 대해 더 잘 알게된 것 같습니다. 이것만으로도 정말 좋은 경험이었다고 생각합니다.
도커와 도커 컴포즈 사용법, SQL 문법, 백엔드와 데이터베이스의 연결, 백엔드와 프론트엔드의 분리, 리눅스 서버에서 백엔드 배포 그리고 왜 윈도우가 쓰레기같은지 등…

전 현직 개발자가 아니라 학생이기 때문에 여름방학 한달 안에 완성하고 배포까지 하는 것이 계획이었습니다.

방학이 끝나기 전 성공적으로 프로젝트를 완성하고 배포해서 기분이 정말 좋습니다.

깃허브 저장소에 이 프로젝트의 모든 코드가 공개되어 있습니다.

혹시 제 부족한 소스코드가 궁금하신 분은 언제든지 구경하고 참고하고 복붙하셔도 됩니다.

끝으로 제가 만든 서비스를 홍보하겠습니다.
긴 글 읽어주셔서 정말 감사드리고 댓글은 언제든지 환영입니다.

👎 아쉽거나 어려웠던 점은 무엇이었나요?

중간에 만들다 갈아엎고 다시 시작했었는데, 그 이유가 도커 컴포즈에서 데이터베이스와 백엔드를 연결하는 부분에서 어려움을 겪었기 때문이었습니다.

커뮤니티에 물어봐 외국 분들에게 도움을 받아서 문제를 해결했습니다.

💯 앞으로의 계획을 알려주세요

파이어폭스 확장, 안드로이드 앱 까지 만드는 것이 계획입니다.

또 광고를 달아서 0.01 달러라도 쌓이는 걸 볼 계획입니다.