EP.1 링크 단축 서비스 (1) — 시작하기

잇(IT)! 가이드
EP.1 링크 단축 서비스 (1) — 시작하기
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

 

Intro

한번쯤은 bit.ly와 같은 링크 단축 서비스를 사용해 본 적이 있을 것이다. 긴 URL을 내가 원하는 짧은 링크로 줄여 사용할 수 있는 장점이 있기에 필자 또한 즐겨 사용하는 서비스 중 하나이다.

들어가기에 앞서, 다른 서비스들에 대해 간단히 살펴보며 우리가 왜 이 서비스를 직접 만들어 사용해야 하는지 설명하도록 하겠다.

만약 바로 프로젝트를 시작하고 싶다면, 목차의 'Get Started' 부분부터 시작하기를 권한다.

bit.ly

bit.ly 로고

링크 단축 서비스의 대명사라고 불릴만큼 가장 많이 사용하는 링크 단축 서비스의 하나이다.

bit.ly/[문자열]의 형태로 링크가 이루어지며, 유료 플랜 결제를 할 경우 내가 갖고 있는 도메인을 사용하여 서비스를 만들 수 있다.

문자열은 원하는 대로 설정할 수 있으나, 제한이 있고, 이미 유명한 서비스인지라 사용중인 url이 많다.

 

Firebase Dynamic Link

이전에 한 번 다뤘던 Firebase Dynamic Link는 이러한 문제점을 깔끔히 해결해 주지만, 지원 종료가 선언되었다.

필자는 이 서비스를 사용하다 필요성을 체감하여 이 프로젝트를 진행하게 되었다.

2022.10.09 - [💻 IT/⭐️ Lifehacks] - 사용자 도메인으로 링크 단축하기 - bitly 대체

사용자 도메인으로 링크 단축하기 - bitly 대체

 

Solution

그래서, 우리는 내가 가지고 있는 도메인에 연결하여(만약 도메인이 없다고 해도, 걱정할 것은 없다. 무료로 도메인을 제공해 주는 서비스를 사용해도 되고, 후술할 호스팅 사이트에서도 무료로 도메인을 제공해 준다.) 나만의 링크 단축 서비스를 만들어 보고자 한다.

여기서 더 나아가, 어떤 사용자가 링크를 클릭했는지 분석하고, 아이폰이나 안드로이드 등에서 접근했을 때 다른 URL로 연결되도록 딥링크 기능 또한 구현해 보고자 한다. 또한, 웹상에서 링크를 쉽게 만들고, 관리자만 볼 수 있는 링크를 만들거나, 비밀번호를 알아야 연결할 수 있는 링크 등 다양한 기능도 넣어 보고자 한다.

준비가 되었다면, 어떻게 만들 것인지 간단하게 알아보고 가자!

 

Node.js

Node.js 로고

우리는 링크 단축 서비스를 만들기 위해 Node.js라는 자바스크립트 기반의 런타임을 사용할 것이다.

쉽게 말하면, 자바스크립트라는 언어를 이용해 코드를 짜서 링크 단축 서비스를 만드는데, 그 중에서도 Node.js라는 친구를 이용해서 서버를 돌릴 수 있도록 할 것이다.

 

SQL

우리는 링크 목록을 저장하기 위해 SQL을 사용할 것이다. SQL은 데이터베이스의 일종으로, 데이터 간의 관계를 중심으로 하는 관계형 데이터베이스이다. 필자는 별도의 리눅스 서버를 운용 중으로, MySQL 데이터베이스를 직접 구축해 사용하고 있으나, 이 과정 전체를 다루기에는 너무 복잡하므로, 본 프로젝트에서는 무료 SQL 호스팅을 사용할 예정이다.

 

Vercel

Vercel은 우리가 만든 링크 단축 서비스를 24시간동안 돌릴 수 있도록 도와주는 호스팅 서비스로, 우리가 만든 코드를 업로드하면 쉽게, 그것도 무료로 호스팅해주는 좋은 서비스이다. Vercel과 관련해서는 EP.0에서 다룬 적이 있으니 아래 글을 참고하자.

2024.05.13 - [잇(IT)! 가이드] - 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

 

Get Started

자, 우리는 관련한 내용을 간단히 살펴보았고, 프로젝트를 시작할 준비가 되었다.

본격적으로 프로젝트를 시작해 보자!

Visual Studio Code 설치

우리는 앞으로 코드를 작성할 것인데, 코드를 작성하기 위해서 Visual Studio Code라는 IDE(통합 개발 환경; 쉽게 말하면 코드를 작성할 수 있는 프로그램이자 공간이라고 생각하면 된다.)를 사용할 것이다.

사용중인 운영체제에 맞는 버전을 아래 사이트에서 다운로드받자. 만약 이미 설치했다면, 건너뛰어도 좋다.

앞으로는 Visual Studio Code를 줄여 VSCode라고도 부를 것이니 참고하자.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

VSCode 시작하기

VSCode를 설치하고, 기본 설정을 마치면 아래와 같은 화면을 볼 수 있다. 우선 이 화면을 켜둔 상태로 다음 단계로 넘어가자.

필자는 macOS를 기준으로 설명하도록 하겠다.

VSCode 실행 화면

GitHub, GitHub Desktop 세팅하기

먼저, 아래 EP.0의 게시글을 보고 GitHub와 GitHub Desktop을 설정하자.

Vercel은 추후 사용할 예정이니, 잠시 새 탭에 아래 글을 띄워 놓고 GitHub Desktop의 설치까지만 진행하도록 하자.

2024.05.13 - [잇(IT)! 가이드] - 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

 

설정이 완료되었다면, 위 글을 따라 만든 리포지토리를 VSCode에서 열어주자.

열기.. 버튼을 눌러 리포지토리가 위치한 폴더를 선택해 주자.

리포지토리 열기

Node.js 설치

아래 사이트에서 Node.js를 설치하자.

https://nodejs.org/en/download

Node.js — Download Node.js®

기본적으로 설정된 값으로 (LTS 버전), 운영체제에만 맞게 설치하자.

설치법은 많은 블로그에서 다루고 있으니, 생략하도록 하겠다.

 

NPM init & 기본 설정

보기 → 터미널을 눌러 폴더를 터미널에서 열어준다.

control+shift+` (컨트롤 + 쉬프트 + 백틱(원화 기호))를 사용해도 열 수 있다. (macOS에서도 ^키이다.)

터미널에서 폴더 열기

여기에 아래 명령어를 입력한다.

npm init

 

npm init (1)

이어 나오는 질문들에 엔터를 치다가, entry point를 app.js로 바꿔준다.

서버에서 가장 먼저 실행할 파일을 정해주는 것이며, 우리는 app.js라는 이름으로 파일을 만들 것이다.

npm init (2)

아래 창이 나오면 엔터 키를 한 번 더 눌러 마무리해 준다.

npm init (3)

잘 따라왔다면 왼쪽 explorer에 package.json 파일이 잘 생성되었는지 확인한다.

package.json 생성 확인

이후, New File 버튼을 눌러 app.js라는 이름의 파일을 생성해 준다.

New File

아래처럼 화면이 나타나면 잘 된 것이다.

(Copilot Chat 관련된 메시지—스크린샷에서 파란 글씨는 나타나지 않을 것이니 무시해도 좋다.)

app.js 생성 완료 화면

여기까지 잘 따라왔다면, 링크 단축 서비스를 만들기 위한 첫 단계는 완성한 것이다.

모두 축하하며, 다음 편으로 넘어가도록 하자.

 

다음 편 바로가기

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축