애플리케이션을 처음부터 만드는 것은 애플리케이션의 작동 방식을 배울 수 있는 가장 좋은 방법입니다. 이 게시물에서는 URL 단축기를 처음부터 만드는 방법에 대해 설명합니다.

URL 단축기는 만들기가 매우 쉽고, 제 생각에는 초보자가 언어를 배울 수 있는 좋은 방법입니다. 더 어려운 부분은 URL 단축기 서비스 위에 추가된 맞춤형 도메인, 분석, 그룹화 링크 및 기타 기능을 추가하는 것입니다. 처음부터 새로 만드는 방법은 다음과 같습니다.

이 튜토리얼에서는 hono(nodejs), drizzle orm 및 postgres를 사용하지만 모든 언어 및 프레임워크로 수행할 수 있습니다. sveltekit/golang 구현 kon.sh, github의 소스 코드를 확인하세요.

새로운 hono 프로젝트 생성으로 시작하세요

npm create hono@latest

그런 다음 다음 정보를 입력하세요.

[email protected]
Ok to proceed? (y)
create-hono version 0.13.1
? Target directory url-shortener
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm

postgres 데이터베이스가 준비되어 있는지 확인하고 url-shortener라는 새 데이터베이스를 만드세요.

src/ 폴더 아래에는 index.ts 파일이 있어야 하며, 이 파일에는 API 서버를 실행하는 코드가 포함되어 있습니다. 여기에 2개의 API 경로를 추가해야 합니다.

• 단축 도구 만들기
• 수신 요청을 리디렉션하는 포괄 경로

src/index.ts

app.post("/api/shortener", async (c) => {
    // create shortener route
    return c.text("Not yet implemented");
});

app.get("/:code", async (c) => {
    // redirect
    return c.text("Not yet implemented");
});

이제 drizzle orm을 설치하고 데이터베이스를 초기화할 수 있습니다. 먼저, 필수 패키지를 설치하세요

npm i drizzle-orm postgres
npm i -D drizzle-kit

그런 다음 src 폴더 아래에 새 db 폴더를 만들고 db 클라이언트 초기화를 위한 index.ts와 데이터베이스 스키마를 위한 Schema.ts를 추가해야 합니다.

src/db/schema.ts

import { pgTable, text, varchar } from "drizzle-orm/pg-core";

export const shortener = pgTable("shortener", {
    id: text("id").primaryKey(),
    link: varchar("link", { length: 255 }).notNull(),
    code: varchar("code", { length: 255 }).notNull().unique(),
});

src/db/index.ts

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const queryClient = postgres(
    "postgres://postgres:[email protected]:5432/url-shortener"
);
export const db = drizzle(queryClient, { schema });

그런 다음 루트 폴더에 drizzle.config.ts 파일을 만듭니다.

drizzle.config.ts

// drizzle.config.ts
import { defineConfig } from "drizzle-kit";

export default defineConfig({
    schema: "./src/db/schema.ts",
    out: "./drizzle",
    dialect: "postgresql",
    dbCredentials: {
        url: "postgres://postgres:[email protected]:5432/url-shortener",
    },
});

npx drizzle-kit push를 실행하여 스키마를 데이터베이스에 푸시합니다.

npx drizzle-kit push

모든 설정이 끝나면 마침내 API 작업을 할 수 있습니다. npm run dev를 실행하여 서버를 시작할 수 있습니다.

npm run dev

먼저 임의의 문자열 생성기를 만듭니다. src 아래에 utils라는 새 폴더를 만든 다음 index.ts 파일을 만듭니다.

index.ts

export function generateId(length: number) {
    let result = "";
    const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const charactersLength = characters.length;
    for (let i = 0; i 



그런 다음 단축 경로 생성을 업데이트하세요.


app.post("/api/shortener", async (c) => {
    const body = await c.req.json();

    const link = body.link;

    const code = generateId(6);

    await db.insert(shortener).values({
        id: generateId(8),
        link,
        code,
    });

    return c.json({ code });
});




그런 다음 새로운 단축기를 생성하기 위한 링크가 포함된 엔드포인트에 게시물 요청을 할 수 있습니다. 내 VSCode에서 Thunder Client를 사용하는 예는 다음과 같습니다.


마지막으로 리디렉션 API를 업데이트합니다.


app.get("/:code", async (c) => {
    const code = c.req.param("code");

    const link = await db
        .select()
        .from(shortener)
        .where(eq(shortener.code, code));

    if (link.length === 0) {
        return c.text("Invalid code");
    }

    return c.redirect(link[0].link);
});




그런 다음 브라우저에서 http://localhost:3000/{code}로 이동하면 원래 링크로 리디렉션됩니다.

그렇습니다. URL 단축기는 새로운 언어 학습을 시작하는 좋은 방법입니다. 해당 언어의 인기 있는 백엔드 프레임워크를 사용하고 해당 언어로 데이터베이스와 통신하는 방법을 배우게 됩니다.

단축기를 위한 QR 코드 생성, 분석을 위한 리디렉션 기록, 사용자 정의 도메인 등과 같이 탐색할 내용이 훨씬 더 많습니다. 이 튜토리얼에서는 이러한 내용을 다루지 않습니다.

내 작업을 보려면 내 github를 확인하세요. 내 모든 프로젝트는 오픈 소스이며 누구나 무료로 배우고 기여할 수 있습니다.

현재 기술이 난이도에 맞지 않을 수도 있지만 새로운 아이디어에도 열려 있습니다. 댓글로 자유롭게 공유해주세요.