URL 단축기를 만드는 방법.

이 프로젝트에서는 express.js를 사용하여 API를 구축하는 방법, API를 백엔드에 연결하는 방법 및 http 요청을 처리하는 방법을 배웁니다.

참조용으로 포크 또는 복제repository

NPM 패키지 사용

종속성

cors
crc
express
mongodb
url

dev 종속성( npm i ${package_name}--save-dev )

dotenv
nodemon

프로젝트 초기화

npm 프로젝트npm init -y 초기화 및 api.js 파일 생성

서버 구축

종속성 설치 및 가져오기

위에 제공된 모든 종속성을 설치합니다. dev 종속성은 선택 사항입니다.

- nodemon은 api.js라는 서버 파일을 자동으로 업데이트하는 데 사용됩니다.
- dotenv는 환경 변수를 파일에 로드하는 데 사용됩니다.

2. 종속성을 api.js로 가져오기

const express = require("express");
const cors = require("cors");
const { crc32 } = require("crc");
const { MongoClient } = require("mongodb");
const { URL } = require("url");

** 서버 시작 **

1. 이 코드 줄을 사용하여 익스프레스 앱 인스턴스를 만듭니다.

const app = express();

2. 서버가 POST 요청에서 json 파일을 수신할 수 있도록 합니다.

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

3. 서버에서 CORS를 활성화합니다. 이것은 다른 주소에서 서버에 대한 액세스를 제어하는 ​​데 도움이 됩니다here.

app.use(cors());

4. 서버가 포트에서 수신하도록 합니다.

app.listen(process.env.PORT || 3030); 

process.env.PORT 배포 지원

이제 작동하는 서버가 생겼습니다 🎉🎉. 하지만 지금은 아무 것도 하지 않습니다. 그래서 그것을 고칠 수 있습니다 ...

서버를 mongoDB에 연결

로컬에서 mongodb를 시작하는 방법을 모르는 경우. 시작할 수 있는 link입니다.

npm 패키지 monodb를 사용하여 데이터베이스에 연결합니다.

const dbName = "dbName";

let collection = null // Global Variable

let main = async () => {
  let url = "mongodb://localhost:27017";
  const client = new MongoClient(url);
  await client.connect();
  const db = client.db(dbName);
  collection = db.collection("urls");
  const deleteResult = await collection.deleteMany({});
  // deletes all entry after each restart
};

그리고 함수를 호출합니다main().

이제 서버가 데이터베이스에 연결되었습니다.

링크 쇼트너 기능

URL을 축소하기 위해 CRC32 해시 알고리즘을 사용할 것입니다. 이것은 crc 패키지가 작동하는 곳입니다.

let createUrl = (url) => {
  let shortenedUrl = crc32(url).toString(16);
  return shortenedUrl;
};

이 기능은 URL을 8자 문자열로 줄입니다.

데이터베이스에서 생성 및 읽기

우리는 다음과 같은 쌍으로 컬렉션을 만들 것입니다.
{
  url:'original URL,
  shortenedUrl:'shrinked URL of the absolute URL
}

데이터베이스에 URL 추가

let addUrl = async (url, shortenedUrl) => {
  const insertResult = await collection.insertOne({ shortenedUrl, url });
  return insertResult;
};

데이터베이스에서 쌍 찾기

let findUrl = async (shortenedUrl) => {
  const findResult = await collection.find({ shortenedUrl }).toArray();
  return findResult;
};

API에 경로 추가

축소 URL

URL을 축소하려면 api.js에서 POST 요청을 생성해야 합니다.

app.post("/shrink", async (req, res) => {
  ...
});

경로를 정의한 후. 들어오는 요청을 처리해야 합니다.

게시물 요청 본문에서 URL을 가져오고 이전 기능을 사용하여 축소합니다.

let { url } = req.body;
let shortenedUrl = createUrl(url);

다음으로 findUrl() 함수를 사용하여 shortedUrl이 이미 데이터베이스에 있는지 확인합니다. 조회가 발생하면 shortedUrl을 반환하거나 다음 부분으로 이동합니다.

let result = await findUrl(shortenedUrl);
if (result.length >= 1) return res.json({ shortenedUrl });

shortedUrl이 존재하지 않으면 위에서 정의한 구조로 데이터베이스에 추가하고 shortedUrl을 다시 보냅니다.

let status = await addUrl(url, shortenedUrl);
if (status?.acknowledged) return res.json({ shortenedUrl });
else return res.json({ error: true }); // Not to make the server crash

한 스니펫의 '/shrink' 경로

app.post("/shrink", async (req, res) => {
  let { url } = req.body;
  let shortenedUrl = createUrl(url);
  let result = await findUrl(shortenedUrl);
  if (result.length >= 1) return res.json({ shortenedUrl });
  let status = await addUrl(url, shortenedUrl);
  if (status?.acknowledged) return res.json({ shortenedUrl });
  else return res.json({ error: true });
});

Strecth URL

URL을 늘리기 위해 GET 경로를 정의할 것입니다.

먼저 api.js에서 경로를 정의합니다.

app.get("/s/:shortUrl", async (req, res) => {
  ...
});

경로 섹션의 :shortUrl은 '/s/' 뒤의 모든 섹션을 변수로 캡슐화합니다.

먼저 URL이 데이터베이스에 있는지 확인합니다. 데이터베이스에 있는 경우 사용자를 URL로 리디렉션하거나 404 메시지를 보냅니다.

let { shortUrl } = req.params;
let result = await findUrl(shortUrl);
if (result.length > 0) return res.redirect(result[0]?.url);
else res.json({ 404: "no URL found" });

한 스니펫의 '/s/:shortUrl' 경로

app.get("/s/:shortUrl", async (req, res) => {
  let { shortUrl } = req.params;
  let result = await findUrl(shortUrl);
  if (result.length > 0) return res.redirect(result[0]?.url);
  else res.json({ 404: "no URL found" });
});

그리고 짜잔 작동하는 링크 단축기가 있습니다 🎉🎉🎊
다음은 작동하는 링크 단축기입니다shrinkinglinks.