"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > Node.js와 MongoDB를 사용하여 URL 단축기 앱 구축

Node.js와 MongoDB를 사용하여 URL 단축기 앱 구축

2024-07-30에 게시됨
검색:851

Building a URL Shortener App with Node.js and MongoDB

URL 단축 서비스를 만드는 것은 Node.js 및 MongoDB를 사용하여 풀 스택 개발을 시작하는 좋은 방법입니다. 이 블로그에서는 사용자가 긴 URL을 단축 버전으로 변환하고 사용량을 추적할 수 있는 URL 단축기 애플리케이션을 구축하는 과정을 안내합니다.

전제 조건

이 튜토리얼을 따르려면 다음이 필요합니다.

  • Node.js 설치됨
  • JavaScript 및 Express.js에 대한 기본 지식
  • MongoDB 데이터베이스(클라우드 솔루션에 MongoDB Atlas를 사용할 수 있음)

프로젝트 설정

1단계: 프로젝트 초기화

먼저 프로젝트에 대한 새 디렉터리를 만들고 npm으로 초기화합니다.

mkdir url-shortener-app
cd url-shortener-app
npm init -y

2단계: 종속성 설치

다음으로 필요한 종속성을 설치합니다.

npm install express mongoose cors dotenv
npm install --save-dev nodemon

3단계: 프로젝트 구조

다음 폴더 구조를 만듭니다.

url-shortener-app/
├── controllers/
│   └── urlController.js
├── models/
│   └── urlModel.js
├── routes/
│   └── urlRoutes.js
├── .env
├── index.js
├── package.json

백엔드 구축

4단계: Express Server 설정

index.js 파일에서 Express 서버를 설정하고 MongoDB에 연결합니다.

const express = require('express');
const mongoose = require('mongoose');
const urlRoutes = require('./routes/urlRoutes');
const cors = require('cors');

const app = express();
app.use(express.json());

require("dotenv").config();

const dbUser = process.env.MONGODB_USER;
const dbPassword = process.env.MONGODB_PASSWORD;

// Connect to MongoDB
mongoose
    .connect(
        `mongodb srv://${dbUser}:${dbPassword}@cluster0.re3ha3x.mongodb.net/url-shortener-app`,
        { useNewUrlParser: true, useUnifiedTopology: true }
    )
    .then(() => {
        console.log("Connected to MongoDB database!");
    })
    .catch((error) => {
        console.error("Connection failed!", error);
    });

app.use(cors({
    origin: "*",
}));

app.get('/', (req, res) => {
    res.send('Welcome to URL Shortener API');
});

app.use('/api', urlRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

환경 변수를 저장할 루트 디렉터리에 .env 파일을 만듭니다.

MONGODB_USER=yourMongoDBUsername
MONGODB_PASSWORD=yourMongoDBPassword

5단계: URL 모델 정의

models/urlModel.js 파일에서 URL에 대한 스키마를 정의합니다.

const mongoose = require('mongoose');

const urlSchema = new mongoose.Schema({
    originalUrl: { type: String, required: true },
    shortUrl: { type: String, required: true, unique: true },
    clicks: { type: Number, default: 0 },
    expirationDate: { type: Date },
    createdAt: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Url', urlSchema);

6단계: 경로 생성

routes/urlRoutes.js 파일에서 API에 대한 경로를 정의합니다.

const express = require('express');
const { createShortUrl, redirectUrl, getUrls, getDetails, deleteUrl } = require('../controllers/urlController');
const router = express.Router();

router.post('/shorten', createShortUrl);
router.get('/urls', getUrls);
router.get('/:shortUrl', redirectUrl);
router.get('/details/:shortUrl', getDetails);
router.delete('/delete/:shortUrl', deleteUrl);

module.exports = router;

7단계: 컨트롤러 구현

controllers/urlController.js 파일에서 컨트롤러 기능을 구현합니다.

const Url = require('../models/urlModel');

function generateUniqueId(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i  {
    const { originalUrl } = req.body;
    const shortUrl = generateUniqueId(5);
    const urlRegex = new RegExp(/^(http|https):\/\/[^ "] $/);
    if (!urlRegex.test(originalUrl))
        return res.status(400).json('Invalid URL');
    const url = await Url.findOne({ originalUrl });
    if (url) {
        res.json(url);
        return;
    }
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate()   7);
    const newUrl = new Url({ originalUrl, shortUrl, expirationDate });
    await newUrl.save();
    res.json(newUrl);
};

const redirectUrl = async (req, res) => {
    const { shortUrl } = req.params;
    const url = await Url.findOne({ shortUrl });
    if (!url || (url.expirationDate && url.expirationDate  {
    try {
        const urls = await Url.find({}).sort({ _id: -1 });
        res.json(urls);
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const getDetails = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        const url = await Url.findOne({ shortUrl });
        if (url) {
            res.json(url);
        } else {
            res.status(404).json('URL not found');
        }
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const deleteUrl = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        await Url.findOneAndDelete({ shortUrl });
        res.json('URL deleted');
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

module.exports = { createShortUrl, redirectUrl, getDetails, getUrls, deleteUrl };

애플리케이션 실행

다음 명령을 사용하여 서버를 시작합니다.

npm run dev

이 명령은 Nodemon으로 서버를 시작하며, 코드를 변경하면 서버가 자동으로 다시 시작됩니다.

결론

이 블로그에서는 Node.js와 MongoDB를 사용하여 간단한 URL 단축 애플리케이션을 구축했습니다. 이 애플리케이션을 사용하면 사용자는 URL을 단축하고, 사용량을 추적하고, 만료 날짜로 관리할 수 있습니다. 이 프로젝트는 풀 스택 개발에 대해 배우기 위한 훌륭한 출발점이며 사용자 인증, 사용자 정의 URL 별칭 등과 같은 추가 기능으로 확장될 수 있습니다.

코드 탐색

GitHub 저장소를 방문하여 코드를 자세히 살펴보세요.


원하는 대로 블로그를 자유롭게 맞춤설정하고 필요한 경우 추가 세부정보나 설명을 제공하세요.

릴리스 선언문 이 기사는 https://dev.to/manthanank/building-a-url-shortener-app-with-nodejs-and-mongodb-bhh?1에 복제되어 있습니다. 침해가 있는 경우에는 [email protected]으로 문의하시기 바랍니다. 그것을 삭제하려면
최신 튜토리얼 더>
  • EchoAPI와 불면증: 실제 사례를 통한 종합 비교
    EchoAPI와 불면증: 실제 사례를 통한 종합 비교
    풀 스택 개발자로서 저는 API 디버깅, 테스트, 문서화를 위한 최고의 도구를 보유하는 것이 얼마나 중요한지 알고 있습니다. EchoAPI와 Insomnia는 두 가지 뛰어난 옵션으로 각각 고유한 기능과 기능을 갖추고 있습니다. 이러한 도구를 안내하고, 기능과 이점을 ...
    프로그램 작성 2024-11-02에 게시됨
  • 이동 시간 및 기간 | 프로그래밍 튜토리얼
    이동 시간 및 기간 | 프로그래밍 튜토리얼
    소개 이 랩의 목표는 Go의 시간 및 기간 지원에 대한 이해도를 테스트하는 것입니다. 시간 아래 코드에는 Go에서 시간과 기간을 사용하는 방법에 대한 예가 포함되어 있습니다. 그러나 코드의 일부가 누락되었습니다. 귀하의 임무는 예상대로 작...
    프로그램 작성 2024-11-02에 게시됨
  • 호이스팅 면접 질문 및 답변
    호이스팅 면접 질문 및 답변
    1. 자바스크립트에서 호이스팅이란 무엇인가요? 답변: 호이스팅은 변수와 함수에 메모리가 할당되는 실행 컨텍스트 생성 단계의 프로세스입니다. 이 프로세스 동안 변수에 대한 메모리가 할당되고 변수에는 정의되지 않은 값이 할당됩니다. 함수의 경우 전체 함수 ...
    프로그램 작성 2024-11-02에 게시됨
  • JavaScript의 DOM(문서 개체 모델) 이해
    JavaScript의 DOM(문서 개체 모델) 이해
    안녕하세요, 놀라운 JavaScript 개발자 여러분? 브라우저는 스크립트(특히 JavaScript)가 웹 페이지 레이아웃과 상호 작용할 수 있도록 하는 DOM(문서 개체 모델)이라는 프로그래밍 인터페이스를 제공합니다. 페이지의 구성 요소를 개체로 배열...
    프로그램 작성 2024-11-02에 게시됨
  • SPRING BATCH로 프로그래밍 시작
    SPRING BATCH로 프로그래밍 시작
    Introduction Dans vos projets personnels ou professionnels, Il vous arrive de faire des traitements sur de gros volumes de données. Le traite...
    프로그램 작성 2024-11-02에 게시됨
  • CSS로 Github 프로필을 돋보이게 만드세요
    CSS로 Github 프로필을 돋보이게 만드세요
    이전에는 Github 프로필을 맞춤 설정할 수 있는 유일한 방법은 사진을 업데이트하거나 이름을 변경하는 것이었습니다. 이는 모든 Github 프로필이 동일해 보이고 이를 사용자 정의하거나 눈에 띄게 하는 옵션이 최소화되었음을 의미합니다. 이후부터 Markdown을 사용...
    프로그램 작성 2024-11-02에 게시됨
  • TypeScript 유틸리티 유형: 코드 재사용성 향상
    TypeScript 유틸리티 유형: 코드 재사용성 향상
    TypeScript는 개발자가 유형을 효과적으로 변환하고 재사용할 수 있는 내장 유틸리티 유형을 제공하여 코드를 더욱 유연하고 DRY하게 만듭니다. 이 기사에서는 TypeScript 기술을 다음 단계로 끌어올리는 데 도움이 되는 Partial, Pick, Omit 및 ...
    프로그램 작성 2024-11-02에 게시됨
  • 텔레그램 window.open(url, &#_blank&#); iOS에서는 이상하게 작동합니다
    텔레그램 window.open(url, &#_blank&#); iOS에서는 이상하게 작동합니다
    텔레그램 봇을 만들고 있는데 미니앱의 일부 정보를 채팅으로 전달하는 옵션을 추가하고 싶습니다. 나는 window.open(url, '_blank');를 사용하기로 결정했습니다. iPhone에서 사용해 보기 전까지는 잘 작동했습니다. 전달하는 대신 공유 기...
    프로그램 작성 2024-11-02에 게시됨
  • 프론트엔드 개발자는 누구인가요?
    프론트엔드 개발자는 누구인가요?
    오늘날 인터넷상의 모든 웹사이트나 플랫폼의 사용자 인터페이스 부분은 프런트 엔드 개발자의 작업 결과입니다. 이들은 사용자 친화적인 인터페이스를 만드는 데 참여하여 사이트의 모양과 기능을 보장합니다. 그렇다면 프론트엔드 개발자는 정확히 누구일까요? 간단하게 설명드리겠습니...
    프로그램 작성 2024-11-02에 게시됨
  • 보존된 CSS 스타일을 사용하여 HTML 콘텐츠를 PDF로 저장하는 방법은 무엇입니까?
    보존된 CSS 스타일을 사용하여 HTML 콘텐츠를 PDF로 저장하는 방법은 무엇입니까?
    CSS가 포함된 HTML 콘텐츠를 PDF로 저장웹 개발에서는 콘텐츠를 다른 형식으로 내보낼 때에도 시각적 미학을 유지하는 것이 중요합니다. 변환 프로세스 중에 CSS 스타일이 손실될 수 있으므로 HTML 요소를 PDF로 저장하려고 할 때 문제가 발생할 수 있습니다.저장...
    프로그램 작성 2024-11-02에 게시됨
  • Print_r()을 사용할 때 왜 팬텀 속성이 DateTime 객체에 추가됩니까?
    Print_r()을 사용할 때 왜 팬텀 속성이 DateTime 객체에 추가됩니까?
    Print_r() DateTime 객체 변경Print_r()는 DateTime 객체에 속성을 추가하여 디버깅 중에 자체 검사를 활성화합니다. PHP 5.3에 도입된 내부 기능의 부작용인 이 동작은 텍스트에 덤프된 인스턴스에 가상 공용 속성을 할당합니다.이러한 속성으로 ...
    프로그램 작성 2024-11-02에 게시됨
  • C의 데이터 구조 및 알고리즘: 초보자에게 친숙한 접근 방식
    C의 데이터 구조 및 알고리즘: 초보자에게 친숙한 접근 방식
    C에서는 데이터 구조와 알고리즘을 사용하여 데이터를 구성, 저장 및 조작합니다. 데이터 구조: 배열: 정렬된 컬렉션, 요소에 액세스하기 위해 인덱스 사용 연결 목록: 포인터를 통해 요소 연결, 동적 길이 지원 스택: FILO(선입선출) 원칙 큐: FIFO(선입선출) 원...
    프로그램 작성 2024-11-02에 게시됨
  • ## `has_key()` 또는 `in`?  Python에서 사전 키를 확인하는 가장 좋은 방법은 무엇입니까?
    ## `has_key()` 또는 `in`? Python에서 사전 키를 확인하는 가장 좋은 방법은 무엇입니까?
    Python에서 사전 키 확인을 위해 'has_key()'와 'in' 중에서 선택 Python 사전의 특정 키, 'has_key()' 및 'in' 모두 실행 가능한 옵션을 제공합니다. 그러나 선호되는 방법은 시간...
    프로그램 작성 2024-11-02에 게시됨
  • AJAX를 사용하여 JSON 데이터를 PHP로 보내는 방법은 무엇입니까?
    AJAX를 사용하여 JSON 데이터를 PHP로 보내는 방법은 무엇입니까?
    Ajax를 사용하여 JSON 데이터를 PHP로 전송하는 방법JSON 형식으로 PHP 스크립트에 데이터를 전달하려면 다음이 중요합니다. AJAX를 사용하여 효과적으로 데이터를 보낼 수 있습니다.JSON 데이터 보내기제공된 코드는 AJAX를 사용하여 JSON 데이터를 보내...
    프로그램 작성 2024-11-02에 게시됨
  • JS: 약속인가, 콜백인가?
    JS: 약속인가, 콜백인가?
    JavaScript의 Promise와 Callback 이해하기 인증 테스트에 대한 주요 질문 및 답변 콜백 함수란 무엇이며 일반 함수와 어떻게 다릅니까? 콜백 함수는 다른 함수에 인수로 전달되고 비동기 작업을 처리하기 위해 호출됩니다. 일...
    프로그램 작성 2024-11-02에 게시됨

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3