Dev study and Repost

Node.js 서버 프로젝트 설정 가이드 (Express + MongoDB + JWT + Multer) 완전 기초!

devlunch4 — Wed, 1 Oct 2025 00:48:12 +0900

Node.js 서버 프로젝트 설정 가이드 (Express + MongoDB + JWT + Multer) 완전 기초!

client 프로젝트에 연동할 server 프로젝트

해당 server 프로젝트 폴더에

server.js 파일 생성

server 폴더 터미널에서

아래 명령어 실행

$ npm init -y

각종 패키지 설치

$ npm i express mongoose cors dotenv jsonwebtoken multer

express - Node.js 웹 서버 프레임워크 (라우팅/미들웨어 쉽게 관리).

mongoose - MongoDB ODM (JS 객체처럼 DB 다루기).

cors - 다른 도메인에서 오는 요청 허용 설정.

dotenv - .env 파일에서 환경 변수 관리.

jsonwebtoken - JWT 토큰 생성/검증 (인증용).

multer - 파일 업로드 처리 미들웨어.

추가 패키지 설치

$ npm i nodemon --save-dev

nodemon - 코드 변경 시 자동으로 서버 재실행해주는 개발용 툴.

--save-dev - 개발 의존성(devDependencies) 으로 설치.

(실행 환경이 아닌 개발 환경에서만 필요한 패키지라는 의미)

설치된 패키지 확인 및 환경 조건 확인

package.json 내 일부 키와 값 추가,

주석은 불가능으로 키 앞에 _를 넣어서 주석과 같은 역할처리

이어서 server.js 에 소스작성

서버폴더 터미널에서 서버 기동을 위해 명령어 실행

$ npm run server

활성 로그로 정상 서버 기동 확인!

해당 포트로 웹 링크 접속하고 확인!

끝!

Quill 에디터 쉽게 적용하기 - react vite 프로젝트 웹서비스, 웹개발, 자바스크립트, 리치 텍스트 편집기

devlunch4 — Wed, 1 Oct 2025 00:19:11 +0900

Quill 에디터 쉽게 적용하기 - react vite 프로젝트 웹서비스, 웹개발, 자바스크립트, 리치 텍스트 편집기

웹서비스 개발중 텍스트 편집기가 필요한 경우가 있습니다.

이를 빠르게 구현 할수 있는 npm 패키지인 quill 리치 텍스트 편집기 적용, 사용법을 간단히 블로그 글로 남겨봅니다.

https://www.npmjs.com/package/quill

Quill 간단 설명

Quill 은 오픈 소스 리치 텍스트 에디터(rich text editㅐr) 입니다.

웹에서 글 작성시 사용하는 툴, 지금의 네이터에디터 같은 역할을 하지요.

웹에서 글 작성시 볼드, 이텔릭, 링크, 이미지 삽입 같은 서식을 손쉽게 적용할 수 있습니다.

사용법이 간단하고, react, vue, angular 같은 프론트엔드 프레임워크에서도 쉬운 사용과 적용으로 많이 사용되고 있습니다.

Quill 설치 방법

설치 할 프로젝트 폴더로 터미널을 실행합니다.

이어서 아래 명령어로 quill를 설치합니다

$ npm install quill

설치를 완료하고, 소스에 적용을 하고자합니다.

app.jsx 소스 상단에 임포트/적용 소스를 추가합니다.

import "quill/dist/quill.snow.css"

이어서 추가, 구현할 웹페이지 소스에 해당 quill 패키지 소스를 적용합니다.

예시 소스를 적어봅니다.

import React, { useEffect, useRef } from "react"; import Quill from "quill"; import "quill/dist/quill.snow.css"; const Editor = () => { const editorRef = useRef(null); useEffect(() => { new Quill(editorRef.current, { theme: "snow", }); }, []); return <div ref={editorRef} />; }; export default Editor;

해당 웹페이지를 호출!

위와 같은 화면 일부를 볼수 있습니다!

텍스트 에디터 답게, 폰트크기, 이탤릭, 볼드 다양하게 설정 가능해요.

편하게 적용 및 사용하시길 바랍니다!

자세한 문서를 보면 다양한 디자인 설정이 가능합니다.

앞선 링크를 참고해주세요~

끝!

와이어프레이밍과 프로토타이핑 쉽게 이해하기 Wireframing and Prototyping

devlunch4 — Wed, 1 Oct 2025 00:14:18 +0900

와이어프레이밍과 프로토타이핑 쉽게 이해하기 Wireframing and Prototyping

사용자 경험(UX) 설계는 디지털 제품을 더 편리하고 매력적으로 만드는 과정이에요.

여기서 중요한 개념들을 간단히 설명할게요.

와이어프레이밍과 프로토타이핑 쉽게 이해하기

먼저, 사용자 경험 글쓰기는 앱이나 웹사이트에서 보이는 글을 만들어 사용자에게 더 나은 경험을 주는 일이에요. 사용자가 쉽게 이해하고 따라갈 수 있도록 도와줍니다.

정보 구조는 정보를 논리적으로 정리하고 이름을 붙여 사용자가 쉽게 찾을 수 있게 만드는 작업이에요. 이를 확인하기 위해 설계자는 카드 분류라는 방법을 써서 정보가 잘 정리되었는지 점검합니다.

사이트맵은 디지털 제품의 전체 구조를 그림으로 보여주는 도구예요. 마치 건물의 설계도라고 생각하면 쉽습니다.

와이어프레임은 화면의 뼈대를 간단히 그린 설계도입니다.

화면 배치와 기능을 시각적으로 표현해 설계자가 아이디어를 구체화할 수 있게 도와주지요.

와이어프레임은 간단한 저충실도, 적당히 자세한 중충실도, 매우 정교한 고충실도로 나뉩니다.

사용자 인터페이스(UI) 설계는 제품을 보기 좋고 쓰기 쉽게 만드는 과정이에요.

이를 위해 고려하는 점은 기능과 효율성, 시각적 아름다움, 접근성, 그리고 사용자와의 상호작용입니다.

접근성은 모든 사람이, 특히 다양한 능력을 가진 사람들이 쉽게 사용할 수 있도록 만드는 걸 의미해요.

좋은 UI 설계는 몇 가지 원칙

좋은 UI 설계는 몇 가지 원칙을 따릅니다.

명확하고 단순해야 하며, 사용자가 자유롭게 제어할 수 있어야 해요.

오류가 생기더라도 사용자가 쉽게 해결할 수 있도록 설계하고,

즉각적인 피드백을 통해 편리함을 더합니다.

또한, 버튼이나 아이콘이 어떤 기능을 하는지 직관적으로 알 수 있도록 해야 해요.

시각적으로도 매력적인 UI를 만들기 위해 색상, 글씨체, 구성, 비율, 그리고 중요한 요소를 강조하는 시각적 우선순위를 신경 씁니다.

마지막으로, 프로토타입은 제품의 실제 모습을 미리 체험해 볼 수 있는 모형이에요.

종이로 간단히 만들거나 디지털 도구로 정교하게 제작할 수 있습니다.

설계자는 프로젝트에 맞는 도구를 골라 저충실도나 고충실도 프로토타입을 만듭니다.

이 모든 과정은 사용자가 더 편하고 즐겁게 디지털 제품을 사용할 수 있도록 돕는 데 목적이 있어요!

쉽게 이해하셨길 바라며! 끝!

Moment.js 설치와 간단 활용법 npm install moment 날짜와 시간 다루기

devlunch4 — Wed, 1 Oct 2025 00:08:44 +0900

Moment.js 설치와 간단 활용법 npm install moment 날짜와 시간 다루기

날짜와 시간을 다루는 npm 패키지입니다.

자바스크립트(javascrpit) 기본 Date 객제로 표현이 가능하지만,

포맷팅이나 계산 반복시 코드가 복잡해지는 경우가 많다.

이런 것을 쉽게 해결하고 날짜, 시간을 다루는데 유용한 패키지인 moment 패키지 정보를 간단하게 글로 남겨본다.

https://www.npmjs.com/package/moment

참 오래된 패키지이다. 깃헙 소스를 보니 최신 업데이트가... 2024년2월..

실제 활용 소스 기준으론 2023년12월 이후 업데이트가 없다.

공식홈페이지 링크: https://momentjs.com/

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

웹서핑을 하다가..

접속하면.. 서울 시간대신 도쿄 시간으로 웹 출력되어서 나온다..

아쉽다..

아무튼 사용하긴 좋다.

Moment.js 설치

설치를 위해 프로젝트내 터미널, 터미널 명령어를 사용한다.

$ npm install moment

용량이 너무 적어서 2초만에 설치가 완료된다.

패키지가 추가된 것을 확인한다.

터미널에서 명령어로 확인해본다

$ npm list moment

설치된 경로와 버전 확인이 된다.

적용 확인

소스에 적용하기 위해 임포트한다.

간단하게 예시 코드를 작성해보았다.

웹페이지 출력결과

끝!

vscode 줄바꿈(Word Wrap) 설정 방법 간단 안내 - 코드가 한줄로 길게 보일때 에디터 옵션, 편집, 단축키, 스크린샷 안내

devlunch4 — Tue, 30 Sep 2025 23:32:15 +0900

vscode 줄바꿈(Word Wrap) 설정 방법 간단 안내 - 코드가 한줄로 길게 보일때 에디터 옵션, 편집, 단축키, 스크린샷 안내

vscode 또는 다양한 IDE를 사용하여 소스코드를 입력 하다보면,

특히 여러창을 띄우고 작업하다보면, 작업중인 화면의 너비가 좁아서 긴 길이의 소스코드가 짤려서 보이지 않는다.

36번 소스코드를 보면 실제 입력 된 길이는 더 길다.

뒤쪽의 내용이 가려져 보이지 않는다.

이 경우, 소스가 누락 또는 보지 못하게 된다.

어떠한 화면 너비에서도 소스코드 라인/줄 전체를 볼수 있도록, 설정이 가능한데,

내가 선호하는 설정 방법을 기록으로 남겨본다.

word wrap 설정 변경 - 단계 순서대로 진행

설정, 옵션/편집 창을 확인한다. 또는 cmd + "," 단축키로 설정 옵션/편집 창에 진입한다.

설정 검색 찾에서 wrap (랩, 줄나눔)을 입력 한다.

Editor 항목에 word Wrap 항목이 검색된다.

현재 "off" 상태이다.

이 상태이기 때문에 소스가 길이가 길어도 한줄로 표시된다.

창을 벗어나 보이지 않는 소스코드를 보려면 오른쪽으로 화면 옮기기(스크롤)을 해야한다.

한 화면에 보이게 하려면 "on"으로 선택한다.

그러면 한줄로 표현되된 36번 줄이 하나의 줄이지만 아래로 줄바꿈 처럼 보여진다.

하지만 실제로는 한줄로 유지된다.

코딩을 할때 더 편리하다.

깔끔하게 예술 코딩이 가능하다.

끝!

자바스크립트 비동기 처리 쉽게 이해하기: 콜백 지옥 탈출, Promise와 async/await 정리

devlunch4 — Tue, 30 Sep 2025 23:31:00 +0900

자바스크립트 비동기 처리 쉽게 이해하기: 콜백 지옥 탈출, Promise와 async/await 정리

평상시 익숙하지만, 갑자기 헷갈리는 경우가 있는 동기/비동기 코딩..

짧게 핵심있게, 요약 정리해보았다.

동기 vs 비동기

동기(Sync) : 한 작업이 끝나야 다름 작업 처리, 직렬 처리

비동기(Async): 기다리지 않고 다음 작업 진행, 병렬 처리

비동기 처리 방식

*콜백 callback

초창기 비동기 방식

function oldTask(cb) {
  setTimeout(() => cb("완료!"), 1000);
}
oldTask(result => console.log(result));

단점, 콜백 중첩으로 콜백 지옥 발생

*프로미스 Promise

비동기 결과를 다루는 객체

const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve("완료!"), 1000);
});

fetchData()
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => console.log("끝!"));

*싱크/어싱크 Sync/Async

async function load() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error("에러:", err);
  }
}

promise를 더 직관적으로 쓰는 문법,

await 덕분에 코드가 동기처럼 읽혀 가독성이 높음.

*타이머 함수(setTimeout / setInteral)

setTimeout(() => console.log("3초 후 실행"), 3000);
setInterval(() => console.log("반복 실행"), 1000);

요약

Callback: 옛날 방식, 콜백 지옥 문제

Promise: 비동기 결과 표현 (then/catch)

async/await: Promise를 더 쉽게, 실무 표준

setTimeout/Interval: 기본 비동기 도구

try/catch: async/await 에러 처리

비동기 처리의 진화: Callback > Promise > async/await

실무에서는 async/await + try/catch 조합을 사용하고 있다.

끝!

PERN - 08 vercel 배포 설정 - json 환경설정 환경변수

devlunch4 — Thu, 28 Aug 2025 15:32:42 +0900

PERN - 08 vercel 배포 설정 - json 환경설정 환경변수

vercel에 배포를 위한 설정

각 프로젝트내 vercel.json 파일 생성

각프로젝트에 맞게 소스작성

개인정보와 불필요 파일이 깃되지 않게 설정 후 비공개 레포지토리 생성

---

배포를 위해 versel 에 로그인

https://vercel.com/

Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel

Vercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

vercel.com

새로운 프로젝트를 생성하기위해 add new 버튼 선택,

프로젝트 선택

깃험 계정연동을 하거나 아래 서드파티를 선택하고 링크주소를 넣어 import

또는 깃헙 설정 참고

깃헙 계정 설정에서 어플리케이션 설정에서 vercel에서 연동할 레포지토리를 선택하여 진행

프로젝트 이름 설정 확인

루트 디렉토리 설정

환경변수 설정 필요

이후 Deploy 버튼 선택 후 대기.

서버 배포 확인.

대시보드의 서버 링크 접속하여 재확인

///

클라이언트 배포를 위해

클라이언트용 프로젝트 새로 생성

앞선 절차와 비슷하게

디렉토리 클라이언트 선택 및 환경변수 설정,

단 base url의 경우 앞서 생성한 서버의 링크를 입력 그리고 주소 맨뒤의 슬래시 삭제

그리고 배포버튼 선택

배포 성공 및 확인

PERN - 07 clipdrop API 연동 / 인공지능 이미지생성, 자동 이미지 사진 제거, 이미지 편집 서비스 / 데이터 저장 cloudinary

devlunch4 — Thu, 28 Aug 2025 15:16:39 +0900

PERN - 07 clipdrop 이미지 AI 연동 / 자동 이미지 사진 제거, 이미지 생성, 이미지 편집

사진, 이미지 작업을 하는 관련자들은 요즘 인공지능, 자동화 도구를 주로 사용하고 있습니다.

이 기능을 서비스하는 웹서비스가 있고, 이를 연동한 서비스를 생성할수도 있는데요.

이번 시간에는 이미지 편집을 자동, 간편하게 할수 있는 Clipdrop!

클립드롭!

clipdrop api를 사용하여 웹서비스에 적용하는 방법을 기록으로 남겨봅니다.

---

기장먼저 클립드롭 공식웹사이트에 접속합니다.

https://clipdrop.co/apis

Clipdrop APIs · All Clipdrop Apis documentation and experiments

Cleanup Too many photos contain unwanted objects, text, or persons. Now, you can simply remove all these flaws with Cleanup API. Based on artificial intelligence, this API enables you to clean and remove flaws from photographs, such as strangers in the bac

clipdrop.co

접속후 상단 표시줄에 있는 "Doc" 항목을 선택하여

공식문서를 확인합니다.

Text to image

생성하고싶은 사진, 이미지에 대한 글 또는 프롬프트를 입력하고,

이에 따른 이미지를 생성하는 툴의 api를 이용하는 것을 적용해봅니다.

화면 스크롤을 아래로 내리면 cliptdrop 클립드롭 기능을 적용할수 있는 소스들을 볼수 있습니다.

사용하는 프로그래밍 언어에 맞는 탭을 선택합니다.

소스를 맞게 적용합니다.

변형을 해서 적용을 했습니다.

이어서, 이 기능을 사용하기위한 API KEY를 발급받아야합니다.

https://clipdrop.co/apis/signin

Clipdrop APIs · All Clipdrop Apis documentation and experiments

clipdrop.co

clipdrop에 가입 또는 로그인을 합니다.

이메일 주소만 입력하면 가능하지요.

이메일 입력 후, 파란 버튼을 선택하면, 이메일 받은 편지함을 확인하여 메일 확인하면 됩니다.

가입 확인을 위해 링크를 선택합니다.

그러면 해당 clipdrop 프로필 페이지로 접속이 됩니다.

reveal api key 버튼을 선택하여 api 키를 발급받습니다.

.env 파일에 키와 값을 넣습니다.

---

이어서 이미지 파일 저장 및 읽기를 할 서비스를 적용해야합니다.

사용할 서비스는 cloudinary 입니다.

클라우드데이터베이스에 저장을 위해 클라우디나리 웹사이트에 접속합니다.

https://cloudinary.com/

Image and Video Upload, Storage, Optimization and CDN

Streamline media management and improve user experience by automatically delivering images and videos, enhanced and optimized for every user.

cloudinary.com

회원가입/로그인을 합니다.

프로젝트내 api key를 생성합니다.

이어서 서버의 .env 파일에 키와 값을 넣어줍니다.

이어서 config/ 내 파일을 생성합니다.

클라우디너리와 관련된 소스를 작성합니다.

PERN - 06 구글 제미나이 연동 / google ai gemini api - 인공지능 openAI 연동

devlunch4 — Thu, 28 Aug 2025 15:10:06 +0900

PERN - 06 구글 제미나이 연동 / google ai gemini api - 인공지능 openAI 연동

지난 포스팅에 이어서 서버와 각 기능 연결, 연동 작업을 시작.

미들웨어로 인증에 사용할 소스 작성 auth.js

neon db 연결을 위한 config/db.js 작성

마무리 후, 인공지능 서비스 제공을 하고자합니다.

구글 인공지능 api 인 제미나이 연동을 하려고 하지요.

그방법을 기록으로 남겨봅니다.

---

스크린샷, 사진과 글 순서로 진행합니다.

가장 먼저 구글 ai 스튜디오에 접속합니다.

https://aistudio.google.com/prompts/new_chat

Sign in - Google Accounts

Couldn’t sign you in The browser you’re using doesn’t support JavaScript, or has JavaScript turned off. To keep your Google Account secure, try signing in on a browser that has JavaScript turned on. Learn more Help Privacy Terms

aistudio.google.com

구글 계정으로 로그인이 필요합니다.

이어서 메뉴 상단에 Get API key 버튼을 선택합니다.

고유한 api를 확인할수 있도록 가이드가 제공됩니다.

API 키 만들기 버튼을 선택합니다.

프로젝트를 만들것인지 팝업이 형성 됩니다.

파이어베이스 콘솔에서 프로젝트 생성 후 해당 프로젝트를 선택하면 키 생성이 가능합니다.

키 생성이 완료되고 값을 복사합니다.

생성된 키를 .env 파일에 키와 값을 입력합니다.

이어서 서버 터미널을 실행합니다.

인공지능 서비스를 위해 아래 명령어를 이용하여 패키지를 설치합니다.

$ npm install openai

openai 패키지:

OpenAI의 GPT, DALL·E, Whisper 등의 API를 JavaScript/Node.js에서 쉽게 사용할 수 있게 해주는 공식 라이브러리입니다.

패키지 설치를 했으니 적용을 위해 소스작성을 해보려합니다.

https://ai.google.dev/gemini-api/docs?hl=ko

Gemini API | Google AI for Developers

Gemini Developer API 문서 및 API 참조

ai.google.dev

구글 제미나이 api 도큐먼트 링크에 접속합니다.

왼쪽 바의 OPENAI 호환성 항목을 선택합니다.

openAi와 호환성을 위한 소스, ai 적용을 위한 소스를 추가합니다.(구글 문서 확인)

그리고 관련 소스를 작성합니다.

관련 소스 일부를 스크린샷으로 남겨봅니다.

이어서 포스트맨 postman 으로 테스트를 진행해봅니다.

클라이언트와 서버를 실행합니다.

헤어에 키와 값을 입력합니다.

Authorization : Beare <TOKEN>

서버에 오류없이 잘 작동하는지 확인이 됩니다.

어서 다른 값을 넣어봅니다.

Authorization : Bearer <TOKEN>

로 하면 포스트맨에서 리퀘스트에 따른 리스폰스를 받게됩니다.

데이터베이스 확인해보면,

클라우드 데이터베이스에 잘 기록이 되었습니다.

clerk의 로그인한 회원 user 에서 사용자의 private 값에 키와 값이 잘 적용됨을 확인할수 있습니다.

끝!

PERN - 05 neon 네온 연동 a/ 클라우드 네이티브 서버리스 데이터베이스 플랫폼 PostgreSQL

devlunch4 — Thu, 28 Aug 2025 14:39:19 +0900

PERN - 05 neon 네온 연동 a/ 클라우드 네이티브 서버리스 데이터베이스 플랫폼 PostgreSQL

지난번 서버를 생성하였고 이를 데이터베이스와 연동하려고합니다.

PostgreSQL 기반의 클라우드 네이티브 서버리스 데이터베이스 플랫폼인 네온

https://neon.com/

Neon Serverless Postgres — Ship faster

The database you love, on a serverless platform designed to help you build reliable and scalable applications faster.

neon.com

네온 neon 연동을 기록으로 남겨봅니다.

PostgreSQL:

오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)으로, 안정성과 확장성이 뛰어난 SQL 기반 데이터베이스입니다.

Neon:

PostgreSQL을 기반으로 한 서버리스 클라우드 플랫폼으로, 자동 확장, 고가용성, 브랜칭 기능 등을 제공하는 개발자 친화적인 DB 서비스입니다.

공식 웹사이트에 접속합니다.

https://neon.com/

Neon Serverless Postgres — Ship faster

The database you love, on a serverless platform designed to help you build reliable and scalable applications faster.

neon.com

neon 회원가입 또는 로그인을 합니다.

새로 시작한다면 바로 프로젝트 생성 화면을 보게 됩니다.

프로젝트 생성을 합니다.

AWS, Azure 가 있는데 원하는 것으로 선택 후 프로젝트를 생성합니다.

대시보드에서 프로젝트 내 데이터베이스를 연결을 위한 방법을 설정해봅니다.

connect 버튼을 선택합니다.

새로 나타나는 모달창을 보고

connection String 값을 복사합니다(비밀번호 포함 주의!)

.env 파일을 생성하고

DATABASE_URL 키를 생성하고 복사한 값을 대칭시킵니다.

이어서 neon 공식 문서 파일의 안내 내용을 확인하며 진행합니다.

https://neon.com/docs/guides/express

Connect an Express application to Neon - Neon Docs

This guide describes how to create a Neon project and connect to it from an Express application. Examples are provided for using the Neon serverless driver, node postgres and Postgres.js clients. Use ...

neon.com

프로젝트 터미널에 neon 패키지를 설치합니다.

$ npm install @neondatabase/serverless

안내 소스코드를 참고하여 프로젝트 소스에 추가를 위한 소스작성이 필요합니다.

config 폴더 생성후 이에 db.js에 소스를 작성합니다.

다음 neon 콘솔의 sql 편집기에서 데이터베이스 테이블을 생성합니다.

PostgreSQL 을 사용합니다.

이어서 사용자 데이터 연돌을 위해 clerk를 이용합니다.

아래 링크를 참고하여 익스프레스에 적용가능한 clerk 패키지를 설치합니다.

https://clerk.com/docs/quickstarts/express

Express: Express Quickstart

Learn how to use Clerk to quickly and easily add secure authentication and user management to your Express server.

clerk.com

express:

Node.js 기반의 웹 서버/백엔드 프레임워크

서버터미널에서 아래 명령어로 설치 실행

$npm install @clerk/express

이어서 clerk 대시보드 api 키 설정에서 키정보를 복사하여 .env 파일에 소스 추가합니다.

다음 도큐먼트 안내로 아래 명령어로 패키지를 설치해야하지만 이미 설치했으니 생략

$ npm install dotenv

이어지는 문서 내용을 보고 적용 소스를 추가합니다.

보안을 위한 인증 기능을 위해 인증요구 소스코드를 추가합니다.

이어서 관련 미들웨어. 컨트롤러 설정을 하면되는데 다음 포스팅으로!