차근차근

Ai 영상 어떻게 만드는 거야? Ai 영상 무료로 만들기 가이드(feat. 일론 머스크)

Anything Doing OK — Mon, 10 Nov 2025 11:29:20 +0900

요즘 유투브나 인스타 릴스 등에 ai 영상이 많이 올라온다. 이런 영상 어떻게 만드는 거야??

클릭 10번안에 만드는 ai 영상 가이드 시작합니다!

https://grok.com/

으로 들어가줍니다. 이상한 사이트 아니고 Tesla 의 일론 머스크가 만든 사이트이니 괜찮습니다!

들어가서 가입해줍니다. 간단한 이메일로 가입!

왼쪽의 상상 클릭! 클릭하면 여러 이미지가 나옵니다!

하단의 입력창에 자신이 원하는 이미지 입력해주세요! 아니면 옆의 클립을 클릭해서 파일 업로드도 가능합니다.
이미지를 한번 업로드 해볼까요?
이미지를 업로드 하자마자

이렇게 동영상을 만들어주네요!
동영상을

해당 버튼을 눌러서 다운로드해서 사용도 가능합니다!

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

생성된 영상이에요 더 재밌게 만들어볼까요??

아래 입력창에 이미지와 같이 써주면~

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

더 신기한 영상도 만들 수 있으니 사용해보세요!
모자가 귀여운 동물로 바뀌도록 변경해 << 이런식으로 써주면~

짜잔 생성완료! GPT 나 Gemmin 를 따라잡기 위해서 테슬라가 열심히 하네요!

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

재밌고 무료니 다들 한번씩 사용해보세요!
궁금한 건 댓글로 남겨주세요!

무료로 5분만에 React 배포하는 꿀팁 CI/CD 구축까지(feat.Cloudflare)

Anything Doing OK — Thu, 16 Oct 2025 17:00:08 +0900

저번 html, css, js 로 이루어진 간단한 사이트 Cloudflare Pages 로 간단하게 배포해봤습니다.

이번에는 React 로 만들어진 웹을 배포합니다.

npx create-react-app my-react-app 등의 명령어로 react app 을 생성해줍니다.

이후 코드수정

git diff 를 쳐보니 수정사항 목록이 나오네요.

git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   src/App.js

no changes added to commit (use "git add" and/or "git commit -a")

해당 방법으로 react app 을 만드신 분들은 이미 git 으로 추적하고 있으니 다음과 같이 명령어 작성해서

본인의 github와 연결해줍시다.

다음과 같습니다

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git << 여기다가 자신의 reposiroty git
git push -u origin main

으로 진행해줍니다.

이후 Cloudflare 에 접속해서 진행

Account home -> Developer Platform -> + Create application

Pages -> Get started

자신이 만든 react repository 가 안 보일 경우 페이지 하단의 Cloudflare Pages 클릭

쭉 내려와서

Select repositories 선택해서 자신이 만든 react application 추가해줍니다.

그러면 Main 페이지로 돌아가게 되는데 동일하게 Account home -> Developer Platform -> +Create application -> Pages -> Get Started -> Select a repository 로 가서 만든 React application 선택후 하단의 Begin Setup 클릭

그러면 입력폼이 나타나는데 여기에

위와 같이 입력해줍니다 Project name 은 자율 나머지 동일하게 Root directory 등 작성할 필요없습니다.

아래의 Save and Deploy 클릭 Framework preset 은 React 등 선택하지 마시고 None 선택해주세요.

빌드중 ....

빌드 성공!

해당 도메인으로 들어가면

성공적으로 나오는 걸 확인할 수 있습니다.

이제 로컬에서 작업 후 main 에 git push 만 하게되면 자동으로 적용되니 좀 더 편하게 개발할 수 있습니다.

Cloudflare 등에서 이해안되는 부분이 있다면

https://normal-operating.tistory.com/49

Vercel 말고 Cloudflare로 무료로 3분만에 배포하기(딸깍)

요즘 맨날 Cloudflare 에서 사람임을 확인하세요. 뜨길래 뭐하는 데인지 싶어서 찾아보니무료 플랜이 있다. 진짜 딸깍 배포가 가능하니(CI/CD 구축 필요 X) 잘 따라와주시길... 준비물 : git / github 우선

normal-operating.tistory.com

해당 게시물 참고해주세요.

Vercel 말고 Cloudflare로 무료로 3분만에 배포하기(딸깍)

Anything Doing OK — Mon, 29 Sep 2025 15:00:18 +0900

요즘 맨날 Cloudflare 에서 사람임을 확인하세요. 뜨길래 뭐하는 데인지 싶어서 찾아보니

무료 플랜이 있다. 진짜 딸깍 배포가 가능하니(CI/CD 구축 필요 X) 잘 따라와주시길...

준비물 : git / github

우선 개발자라면 당연히 있는 github 로 들어간다.

create repository 선택

새로운 repository 를 생성한다.

생성된 빈 repository clone

clone 완료

아... clone 까지 하고 나서 posting 이라고 쓴다는 걸 잘못쓴 걸 발견.... 구냥 봐주시길....

windsurf / vscode 등의 에디터로 편집

1. 코드작성

windsurf 딸깍

2. 로컬에서 동작 확인(생략가능)

딸깍 한 거 치곤 나쁘지 않다.

3. git 으로 push 하기

git push 딸깍

4. github repository 와 cloudflare 연결하기

Account home -> Developer platform

으로 가서 +Create application

Pages -> Get started

gogo

들어가면 어쩌고 저쩌고 내 repository 가 안보일텐데 하단에 있는

Cloudflare Pages 클릭

스크롤을 쭉 내리면

이게 있는데 select repository 에서 방금 git push 한 저장소 선택하고 Save

그럼 메인 화면으로 올텐데 다시

Account home -> Developer platform -> Create application 클릭 -> Pages -< import an ~ 어쩌고 클릭(Get started) ->

방금 등록한 repository 선택하고 Begin setup

무슨 입력창 뜰덴데 다 비우고 Save and Deploy 클릭

그러면

Building and deploying -> Success! Your project is deployed to Region: Earth]

되면 완료

아래 하이퍼링크 접속 ㄱㄱ

배포 완료

그러면 https://blog-postion.pages.dev/

생기면서 배포 완료 이렇게 해서 구글이 싫어하는 쓸모없는 사이트가 생성되었습니다.

심지어 무료 (카드 등록 안해도됨)

"git push 하면 자동으로 재배포됨" << 중요 ㄹㅇ

단점 : 디버깅 어려움 / 정적사이트만 가능 ㅠ

2부 : 도메인 연결하기

3부 : 리액트 정적사이트 배포하기

AWS Lightsail scale up

Anything Doing OK — Tue, 1 Jul 2025 18:13:44 +0900

사양이 너무 낮아서 새로운 Lightsail 로 scale up 진행하였다.

해당 인스턴스로 들어가서 Snapshot tab => Create snapshot => 생성되기까지 대기 => 점 3개 create new instance 선택

선택 후 맞는 사양을 선택하고 create instance 진행하면 된다.

해당 사양으로 성공적으로 생성된 모습을 볼 수 있다.

도메인 연결은 해당 글 참조

https://normal-operating.tistory.com/44

Andy Grammer - These Tears (가사/해석/번역/Lyrics/노래/추천)

Anything Doing OK — Wed, 25 Jun 2025 11:08:57 +0900

instagram 에서 좋은 노래 발견해서 가사 공유합니다

https://www.youtube.com/watch?v=c3qO96QK3QE&list=RDc3qO96QK3QE&start_radio=1

These tears mean I'm lettin' you go
이 눈물은 당신을 보내준다는 의미예요
I'm learnin' how to be alone
혼자서도 잘 지내는 법을 배우고 있어요
I'm broken, but give it time
몸과 마음이 다 망가졌지만, 시간이 지나면
I'm gon' be alright
괜찮아질 거예요

These tears mean it's settlin' in
이 눈물은 괜찮아지고 있다는 의미예요
That I'm not gon' see you again
다음 생에 우리 다시 만날 때까지
'Til one day in another life
다시는 당신을 못 보겠지만
But I'm gon' be al-, I'm gon' be alright
괜찮아질 거예요, 괜찮아지겠죠
I been missing you tonight
오늘 밤도 당신을 그리워할 거예요
I'll be missing you tomorrow
내일도 당신이 그립겠죠
It's the hardest pill to swallow
삼켜내기 힘든 이별이지만
But I'm starting to get it down
그래도 조금씩 괜찮아지고 있어요

I try to think of all the times
내가 도저히 못 이겨낼 거라 생각했던
I thought I wouldn't make it through
과거의 순간들을 떠올려보려고 해요
But somehow I always do
그때도 그랬듯이 어떻게든 이겨내겠죠
And I'll do the same for you
당신과의 이별도 그렇게 견뎌내 볼게요

it don't mean I'm good with goodbye-bye-bye
이별이 견딜만하다는 건 아니에요
But it ain't all that bad when I cry, cry, cry
하지만 너무 힘들 때 우는 것도 나쁘지 않아요
These tears mean I'm lettin' you go
이 눈물은 당신을 보내준다는 의미예요
I'm learnin' how to be alone
혼자서도 잘 지내는 법을 배우고 있어요
I'm broken, but give it time
몸과 마음이 다 망가졌지만, 시간이 지나면
I'm gon' be alright
괜찮아질 거예요

These tears mean it's settlin' in
이 눈물은 괜찮아지고 있다는 의미예요
That I'm not gon' see you again
다음 생에 우리 다시 만날 때까지
'Til one day in another life
다시는 당신을 못 보겠지만
But I'm gon' be al-, I'm gon' be alright
괜찮아질 거예요, 괜찮아지겠죠

I see you everywhere
꿈에서 걸을 때에도
On the sidewalks of my dreams
어디를 가든 당신이 보여요
Like a distant melody
저 멀리 들려오는 희미한 선율처럼
I hear you callin' and callin' to me
날 부르는 당신의 목소리가 들려요

And I love you, but I leave you
내가 살아가려면
In the past, baby, because I need to
당신을 너무 사랑하지만,
To not go insane
당신을 추억 속에 묻어두고 떠나야만 해요
I know I love you the same
당신을 사랑하는 내 마음은 변함이 없단 걸 알아요
it don't mean I'm good with goodbye-bye-bye
이별이 견딜만한 건 아니에요
(It don't mean I'm good with goodbye)
(이별이 견딜만한 건 아니에요)
But ain't all that bad when I cry, cry, cry
하지만 너무 힘들 때 우는 것도 나쁘지 않아요

These tears mean I'm lettin' you go
이 눈물은 당신을 보내준다는 의미예요
I'm learnin' how to be alone
혼자서도 잘 지내는 법을 배우고 있어요
I'm broken, but give it time
몸과 마음이 다 망가졌지만, 시간이 지나면
I'm gon' be alright 괜찮아질 거예요

These tears mean it's settlin' in
이 눈물은 괜찮아지고 있다는 의미예요
That I'm not gon' see you again
다음 생에 우리 다시 만날 때까지
'Til one day in another life
다시는 당신을 못 보겠지만
But I'm gon' be al-, I'm gon' be alright
괜찮아질 거예요, 괜찮아지겠죠
I'm gon' be al-, I'm gon' be alright
괜찮아질 거예요, 괜찮아지겠죠
I'm gon' be al-, I'm gon' be alright
괜찮아질 거예요, 괜찮아지겠죠

Postgres MCP 연결해서 데이터 뽑기

Anything Doing OK — Wed, 4 Jun 2025 14:47:43 +0900

1. MCP 기초

https://www.youtube.com/watch?v=fkqXQOjj8cA

12분 정도까지 보면서 MCP 기초 학습하기

2.MCP 설정 JSON 만들기

https://smithery.ai/server/@smithery-ai/postgres

PostgreSQL MCP Server | Smithery

smithery.ai

으로 접속하여 우측의 JSON 클릭

해당 정보를 작성해주고 첫번째 모자이크에 DB 비밀번호 맨뒤 '/'뒤에 에 접속하고자하는 DB명

ex ) postgresql://postgres:password@localhost:5432/databasename < 해당형식이된다.

"postgres": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@smithery/cli@latest",
        "run",
        "@smithery-ai/postgres",
        "--key",
        "**************",
        "--profile",
        "**************"
      ]
    }

제공받은 JSON 파일을

claude_desktop_config.json 에 붙여준다.

*** 에는 실제 제공받은 key 가 있을 것

이후 클로드 데스크탑 재실행

3. 프롬프트 작성

프롬프트로

' DB 에서 user 중에 john 이라는 이름을 포함한 사용자를 찾아줘 ' 라고 요청을 작성하면

{ `sql`: `SELECT * FROM users WHERE name ILIKE '%john%'` }
이런식으로 스스로 쿼리를 DB 에 날린다.

명령어를 잘못날려서 name 이 없는 상황

그러면 알아서 클로드가

테이블의 구조를 분석하고 쿼리를 재생성해서

"user_id": 1,
    "username": "john_doe",
    "email": "john.doe@example.com",
    "first_name": "John",
    "last_name": "Doe",
    "phone": "010-1234-5678",
    "created_at": "2025-06-04T04:20:11.211Z",
    "is_active": true,
    "role": "customer"
  }

의 데이터를 찾아준다.

실제로 DB 에서 쿼리를 날린 데이터와 같다.

4.사용후기

클로드처럼

쿼리 이렇게 날리면 DBA 한테 한대 맞을 거 같다. ILIKE '%john%' 라니.. 음...

도메인 지식이 중요하고 프롬프트의 중요성이 더욱 커질 것 같다.

아마 프롬프트로 Table 의 구조 와 DB 구조를 분석 시킨 후 데이터를 뽑도록하여 성능을 높여야겠다.

React with Nest.js Architecture

Anything Doing OK — Thu, 22 May 2025 17:13:40 +0900

신규 CRM 구축을 위한 NestJS & React 아키텍처 설계 제안

부제 : 단일 서버 통합구성과 서버분리 독립구성을 기반으로

1. 서론

본 문서는 신규 CRM(Customer Relationship Management) 시스템 구축을 위해 NestJS(백엔드)와 React(프론트엔드)를 기반으로 하는 두 가지 주요 아키텍처 접근 방식, 즉 1. 단일 서버 통합 구성(배포)와 2. 서버 분리 독립 배포를 비교 분석하고, 각 방식의 장단점, 적합한 시나리오, 그리고 구체적인 구현 고려 사항을 제시합니다. 이를 통해 프로젝트의 특성, 팀 구성, 확장성 요구사항 등을 종합적으로 고려하여 최적의 아키텍처를 선택하는 데 도움을 드리고자 합니다.

참고 자료:

NestJS 공식 문서: https://docs.nestjs.com/
Awesome NestJS (다양한 예제 및 보일러플레이트): https://github.com/nestjs/awesome-nestjs

2. 아키텍처 옵션 상세 분석

2.1. 옵션 1: 단일 서버 - 통합 배포 (Monolithic Frontend & Backend)

개념: NestJS 애플리케이션이 React 애플리케이션의 빌드된 정적 파일(HTML, CSS, JavaScript 번들)을 직접 서빙하거나, NestJS가 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG)을 통해 React 컴포넌트를 렌더링하여 완성된 HTML을 클라이언트에게 전달합니다.

주요 구현 방식: React 빌드 결과물을 특정 경로(예: /)에서 서빙하고, API 요청은 특정 접두사(예: /api)를 통해 처리합니다.

// Nest.JS main.ts 또는 app.module.ts
import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
import { YourApiModule } from './api/your-api.module'; // API 라우팅 모듈

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', 'client', 'dist'), // React 빌드 결과물 경로 (Vite는 dist, CRA는 build)
      exclude: ['/api/(.*)'], // API 경로는 제외하여 NestJS 컨트롤러가 처리하도록 함
      // serveRoot: '/', // 기본값. 특정 경로로 서빙하고 싶다면 변경 (예: '/app')
    }),
    YourApiModule, // CRM API 모듈 등록
    // ... other NestJS modules
  ],
})
export class AppModule {}

상세 흐름도:

[ 사용자 브라우저 ]
       |
       | (HTTPS 요청: www.example.com/dashboard 또는 www.example.com/api/users)
       V
[ 통합 서버 (Nginx/Apache 등 리버스 프록시 - 선택 사항) ]
       |
       V
[ Nest.JS 애플리케이션 서버 (Node.js 환경) ]
       |
       |-- (요청 경로 분석) --> [ ServeStaticModule ] -- (경로가 '/' 또는 React 라우트인 경우)
       |      |                                            |
       |      |                                            V
       |      |                                     [ React 빌드 산출물 (index.html, main.js, main.css) ]
       |      |                                            |
       |      |                                            V (클라이언트로 전송)
       |      |
       |      `-- (경로가 '/api/*' 인 경우) --> [ Nest.JS API 라우터/컨트롤러 ]
       |                                             |
       |                                             V
       |                                          [ 서비스 로직, 데이터베이스 연동 등 ]
       |                                             |
       |                                             V
       |                                          [ 데이터베이스 / 캐시 / 외부 API ]
       |                                             |
       |                                             V
       |                                          [ API 응답 (JSON 등) ]
       |                                             |
       |                                             V (클라이언트로 전송)
       V
[ 사용자 브라우저에 결과 표시 / React 앱에서 API 응답 처리 ]

장점:

단순화된 배포 및 인프라:
- 하나의 애플리케이션(NestJS)만 배포 및 관리.
- 단일 서버 인스턴스, 도메인, SSL 인증서로 인프라 관리 단순화.
- 초기 설정 및 배포 자동화(CI/CD) 파이프라인 구성이 상대적으로 용이.
인증/세션 관리 용이성:
- 동일 출처(Same-Origin)이므로 쿠키 기반 세션 관리(예: HttpOnly, Secure 플래그 쿠키)가 자연스럽고 보안적으로 유리.
- 참고: NestJS Passport 세션 인증: https://docs.nestjs.com/security/authentication#session-authentication
CORS 문제 없음: 프론트엔드와 백엔드가 동일 출처에서 서비스되므로 CORS(Cross-Origin Resource Sharing) 정책 설정이 불필요.
초기 개발 속도: 작은 팀이나 풀스택 개발자 중심의 환경에서는 단일 코드베이스 및 컨텍스트로 인해 초기 개발 속도가 빠를 수 있음.

단점:

강한 결합도:
- 프론트엔드와 백엔드가 하나의 프로세스 및 배포 단위로 묶여, 한쪽의 문제(예: NestJS 서버 다운)가 전체 서비스 중단으로 이어짐.
- 한쪽의 리소스 사용량 급증(예: API 요청 폭주)이 다른 쪽(정적 파일 서빙) 성능에 영향을 줄 수 있음.
개발 및 빌드 복잡성 증가 가능성:
- React 빌드 결과물을 NestJS 프로젝트 내 특정 위치로 복사하거나, NestJS 빌드 프로세스에 React 빌드 단계를 통합해야 함. (예: package.json 스크립트 관리)
기술 스택 및 팀 분리 어려움:
- 프론트엔드와 백엔드 라이브러리/프레임워크 버전 충돌 가능성.
- 각 팀의 독립적인 기술 결정 및 작업 흐름에 제약.
서버 부하 증가 (특히 SSR 시):
- SSR은 각 요청마다 서버에서 React 컴포넌트를 렌더링하므로 CPU 사용량 증가 및 응답 시간 지연 가능성. (캐싱 전략 필수)
- 정적 파일 서빙 자체도 Node.js의 주 스레드를 일부 사용할 수 있으므로, 고 트래픽 상황에서는 전용 웹 서버(Nginx 등)보다 비효율적일 수 있음.
확장성 제약: 프론트엔드 서빙과 백엔드 API 로직이 분리되지 않아, 특정 부분만 독립적으로 확장하기 어려움. (예: API 서버만 스케일 아웃)

적합한 경우:

프로토타입 또는 MVP(Minimum Viable Product) 개발.
개발팀 규모가 작고, 풀스택 개발자 중심으로 구성된 경우.
인프라 관리 복잡성을 최소화하고 빠른 초기 배포를 목표로 하는 경우.
내부용 소규모 애플리케이션.

2.2. 옵션 2: 서버 분리 - 독립 배포 (Decoupled Frontend & Backend)

개념: React 프론트엔드 애플리케이션과 NestJS 백엔드 API가 서로 다른 서버 또는 동일 서버 내 다른 포트에서 독립적으로 실행되고 배포됩니다. 이들은 네트워크를 통해 API를 호출하여 통신합니다.

주요 구현 방식:

React 프론트엔드:
NestJS 백엔드 API:
- 개발: 독립적인 Node.js 서버로 실행 (예: localhost:3000).
- 배포: Docker 컨테이너, PaaS(AWS Elastic Beanstalk, Google Cloud Run), IaaS(AWS EC2) 등에 배포.
- API 엔드포인트: api.example.com 또는 리버스 프록시를 통해 www.example.com/api로 구성.
- CORS 설정 필수.

// Nest.JS main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // CORS 설정
  app.enableCors({
    origin: [
        'http://localhost:5173', // 로컬 React 개발 서버 (Vite 기본 포트)
        'http://localhost:3000', // 로컬 React 개발 서버 (CRA 기본 포트)
        'https://crm-app.yourdomain.com', // 실제 배포될 프론트엔드 도메인
        // 필요한 경우 추가 도메인/출처 등록
    ],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true, // 인증 정보(쿠키 등)를 주고받아야 할 경우 true
  });
  // 참고: NestJS CORS 문서: https://docs.nestjs.com/security/cors

  // API 경로 접두사 설정 (선택 사항이지만 권장)
  app.setGlobalPrefix('api/v1');
  // 참고: NestJS 접두사 설정: https://docs.nestjs.com/faq/global-prefix

  // 전역 ValidationPipe 적용 (DTO 유효성 검사)
  app.useGlobalPipes(new ValidationPipe({
    whitelist: true, // DTO에 정의되지 않은 속성 제거
    forbidNonWhitelisted: true, // DTO에 정의되지 않은 속성 요청 시 에러 발생
    transform: true, // 요청 데이터를 DTO 타입으로 자동 변환
  }));
  // 참고: NestJS Validation: https://docs.nestjs.com/techniques/validation

  await app.listen(process.env.PORT || 3001); // 백엔드 서버 포트
  console.log(`Application is running on: ${await app.getUrl()}`);
}
bootstrap();

상세 흐름도:

[ 사용자 브라우저 ]
       |
       | (HTTPS 웹 페이지 요청: https://crm-app.yourdomain.com)
       V
[ 프론트엔드 서버 / CDN (예: Vercel, Netlify, AWS S3 + CloudFront) ]
       |  (React 정적 파일: index.html, main.js, main.css 등 서빙)
       V
[ 사용자 브라우저 - React 앱 로드 및 실행 ]
       |
       | (데이터 필요시 HTTPS API 요청: https://api.yourdomain.com/v1/users 또는 https://crm-app.yourdomain.com/api/v1/users (리버스 프록시 사용 시))
       V
[ (선택) API Gateway (예: AWS API Gateway, Nginx 등) ]
       |  (라우팅, 로드밸런싱, 인증, 요청 제한 등 역할 수행)
       V
[ (선택) 로드 밸런서 (예: AWS ALB/NLB) ]
       |
       V
[ Nest.JS 백엔드 API 서버 인스턴스들 (Node.js 환경) ]
       |  (API 로직 실행)
       |    |
       |    V
       |  [ 서비스 로직, 데이터베이스 연동 등 ]
       |    |
       |    V
       |  [ 데이터베이스 / 캐시 / 외부 API ]
       |    |
       |    V
       |  (API 응답 - JSON 등)
       V
[ 사용자 브라우저 - React 앱에서 API 응답 수신, 데이터 사용 및 UI 업데이트 ]

장점:

높은 유연성 및 확장성 :
- 프론트엔드와 백엔드를 독립적으로 확장(scale out/up) 가능. 프론트엔드는 CDN으로 글로벌 배포, 백엔드는 API 트래픽에 맞춰 유연하게 조정.
- 각 부분의 리소스(CPU, 메모리, 네트워크) 요구사항에 최적화된 인프라 구성.
관심사의 명확한 분리 :
독립적인 개발 및 배포 주기:
- 프론트엔드팀과 백엔드팀이 각자의 기술 스택, 개발 도구, 배포 파이프라인, 릴리스 주기를 가질 수 있음.
- API 계약이 유지되는 한, 한쪽의 변경이 다른 쪽에 즉각적인 배포 문제를 일으키지 않음.
기술 스택 선택의 자유:
- 각 영역에 가장 적합한 기술, 라이브러리, 프레임워크 선택 가능.
- 향후 특정 부분(예: 모바일 앱용 API, 특정 마이크로서비스) 추가 시 유연하게 대응.
마이크로서비스 아키텍처로의 전환 용이성: 백엔드가 이미 분리되어 있으므로, 필요에 따라 API를 여러 마이크로서비스로 분할하고 확장하기 용이.
최적화된 프론트엔드 제공: 정적 파일은 CDN을 통해 사용자에게 가장 가까운 엣지 로케이션에서 제공되므로 로딩 속도 극대화.

단점:

CORS 설정 필수: 다른 출처(Origin)에서 서비스되므로 브라우저의 동일 출처 정책(Same-Origin Policy)으로 인해 API 요청 시 CORS 설정이 백엔드에 반드시 필요.()
인프라 복잡성 증가:
- 프론트엔드 호스팅, 백엔드 서버, (선택적) API Gateway, CDN 등 여러 구성 요소 관리 필요.
- 별도의 도메인/서브도메인, SSL 인증서 관리.
인증/인가 처리의 복잡성 증가 가능성:
- 주로 토큰 기반 인증(JWT, OAuth2) 사용.
- 쿠키 기반 세션을 사용하려면 서드파티 쿠키 문제, 도메인 및 경로 설정(예: SameSite=None; Secure, 부모 도메인 설정)에 대한 깊은 이해 필요. CSRF 방어 전략 추가 고려.
- 참고: JWT 와 NestJS: https://docs.nestjs.com/security/authentication#jwt-functionality
개발 환경 설정의 복잡성:
네트워크 지연 약간 증가: API 요청이 별도 서버로 가므로 동일 서버 내 통신보다 미세한 네트워크 지연 추가 (대부분의 경우 무시 가능).
엔드투엔드(E2E) 테스트 복잡성 증가: 여러 시스템을 연동하여 테스트 환경을 구성해야 함.

적합한 경우:

중대규모 이상의 프로젝트, 서비스 지향 아키텍처(SOA)를 지향하는 경우.
프론트엔드와 백엔드 팀이 분리되어 있거나, 독립적인 개발/배포/확장이 중요한 경우.
높은 가용성, 확장성, 트래픽 처리 능력이 요구되는 서비스.
CDN을 통한 프론트엔드 성능 최적화가 매우 중요한 경우.
향후 마이크로서비스 아키텍처로의 전환 가능성을 열어두고 싶은 경우.
현대적인 웹 애플리케이션 개발에서 일반적으로 권장되는 방식.

3. 아키텍처 비교 요약

특징	1서버 (통합 배포)	2서버 (분리 배포)
배포 단위	단일 (NestJS 앱 + React 빌드 결과물)	다중 (NestJS 앱 따로, React 빌드 결과물 따로)
출처(Origin)	동일 (CORS 불필요)	분리 (백엔드 CORS 설정 필수, 로컬 개발 시 프론트엔드 프록시 설정 권장)
코드 공유 방식	내부적 (상대 경로, 모듈 임포트 등)	외부적 (API 호출)
빌드 의존성	높음 (프론트 빌드 -> 백엔드 패키징에 포함)	낮음 (API 계약만 준수)
CI/CD 파이프라인	통합 또는 순차적 (FE 빌드 후 BE 빌드/배포)	완전 분리 또는 독립적
결합도(Coupling)	높음 (Tight Coupling)	낮음 (Loose Coupling - API 계약 기반)
인프라 복잡성	낮음	중간 ~ 높음
확장성 유연성	낮음	높음
팀 독립성	낮음	높음
인증 (쿠키 기반)	간단	복잡 (토큰 기반 권장, 쿠키 사용 시 추가 설정 필요)
초기 개발 속도	빠를 수 있음	상대적으로 느릴 수 있음 (초기 설정)
장기적 유지보수성	낮아질 수 있음	높아질 수 있음

4. 추가 고려 사항 및 권장 사항

4.1. 프로젝트 초기 단계 vs. 장기적 관점
프로젝트 초기에는 옵션 1 (통합 배포) 이 빠른 프로토타이핑과 시장 검증에 유리할 수 있습니다. 그러나 CRM 시스템은 일반적으로 기능이 복잡해지고 데이터가 누적되며 사용자 수가 증가하는 경향이 있으므로, 장기적인 확장성, 유지보수성, 팀 분업 등을 고려할 때 옵션 2 (분리 배포) 가 더 적합한 선택이 될 가능성이 높습니다.

4.2. 개발팀 구성 및 전문성
팀이 풀스택 개발자 위주이고 규모가 작다면 옵션 1로 시작할 수 있습니다. 프론트엔드와 백엔드 전문 팀이 분리되어 있다면 옵션 2가 자연스럽습니다. 옵션 2는 각 팀이 자신의 전문 분야에 집중하여 개발 생산성을 높일 수 있습니다.

4.3. 인증 및 보안

옵션 1(통합 배포): HttpOnly, Secure, SameSite=Lax (또는 Strict) 쿠키를 사용하여 세션 관리가 비교적 간단하고 CSRF 공격에 대해 상대적으로 안전합니다.
옵션 2(분리 배포): JWT(JSON Web Token)를 사용하는 것이 일반적입니다.

4.4. 개발 환경 (DX - Developer Experience)

옵션 1: 단일 프로젝트 설정, 하나의 npm start 명령으로 실행 가능 (단, 빌드 스크립트 통합 필요).
옵션 2: 프론트엔드, 백엔드 각각 개발 서버 실행.

4.5. 코드 구조 (Monorepo vs. Polyrepo)

옵션 1: 자연스럽게 단일 레포지토리(Monorepo의 한 형태)가 됩니다.
옵션 2: 프론트엔드와 백엔드를 별도의 레포지토리(Polyrepo)로 관리하거나, Nx, Lerna, Turborepo 같은 도구를 사용하여 Monorepo로 관리할 수 있습니다. Monorepo는 코드 공유, 통합 테스트, 버전 관리 등에서 이점이 있을 수 있지만, 초기 설정과 빌드/CI 복잡성이 증가할 수 있습니다.

4.6. CI/CD (지속적 통합/배포)

옵션 1: 단일 파이프라인. React 빌드 후 NestJS 애플리케이션에 통합하여 배포.
옵션 2: 프론트엔드와 백엔드 각각 독립적인 CI/CD 파이프라인 구성. 프론트엔드는 정적 호스팅/CDN으로, 백엔드는 서버/컨테이너 환경으로 배포.

4.6. 폴더 구조의 차이점

주요 폴더 구조 차이점 비교

특징	옵션 1: 단일 서버 - 통합 배포	옵션 2: 서버 분리 - 독립 배포 (Polyrepo 기준)
프로젝트 루트	단일 루트 (crm-integrated-app/)	프론트엔드, 백엔드 각각 독립된 루트 (crm-frontend/, crm-backend/)
프론트엔드 위치	백엔드 프로젝트의 하위 디렉토리 (client/) 또는 빌드 결과물만 특정 위치에 복사	독립적인 프로젝트 폴더 (crm-frontend/)
백엔드 위치	프로젝트의 주축 (server/ 또는 프로젝트 루트)	독립적인 프로젝트 폴더 (crm-backend/)
node_modules	- React용, NestJS용 각각 존재 가능 (모노레포 도구 없이는 분리)<br/>- 모노레포 도구 사용 시 최상위 node_modules 공유 가능	프론트엔드, 백엔드 각각 완전히 독립된 node_modules/
package.json	- client/package.json, server/package.json 각각 존재<br/>- (선택) 최상위 package.json (모노레포 도구 사용 시)	crm-frontend/package.json, crm-backend/package.json 각각 존재
빌드 결과물 처리	React 빌드 결과물이 NestJS 프로젝트 내 특정 폴더(server/dist/client 등)로 복사되거나, NestJS가 직접 참조하여 서빙	- React: 독립적인 빌드 결과물 (dist/)을 정적 호스팅/CDN에 배포<br/>- NestJS: 독립적인 빌드 결과물 (dist/)을 서버에 배포
코드 공유 방식	- React -> NestJS: 불가능 (API 호출)<br/>- NestJS -> React: 불가능 (API 응답)<br/>- 동일 프로젝트 내 타입/유틸리티 공유는 상대 경로로 가능하나 권장되지 않음.	API 계약(명세)을 통한 완전한 분리. 코드 직접 공유 없음 (단, 타입 정의 등은 별도 패키지로 만들어 공유 가능)
설정 파일 (예: tsconfig.json, .eslintrc.js)	client/, server/ 각각 존재	crm-frontend/, crm-backend/ 각각 존재
개발 환경 실행	단일 npm start (내부적으로 React, NestJS 서버 동시 실행 스크립트 구성) 또는 NestJS 서버만 실행 (React는 빌드 후 서빙)	프론트엔드 서버, 백엔드 서버 각각 별도 터미널에서 npm start

핵심 차이점 요약

프로젝트 결합도 및 독립성:
- 옵션 1 (통합): 프론트엔드와 백엔드가 하나의 프로젝트 단위로 강하게 결합되어 있습니다. client 폴더는 server 폴더의 일부처럼 취급될 수 있습니다. 배포도 하나의 단위로 이루어집니다.
- 옵션 2 (분리): 프론트엔드와 백엔드가 완전히 독립된 프로젝트입니다. 각자의 생명주기(개발, 빌드, 배포)를 가집니다. API를 통해 통신하며 서로의 내부 구현에 대해 알 필요가 없습니다.
관리 단위:
- 옵션 1 (통합): 단일 저장소(repository)에서 관리되는 경우가 많습니다. 빌드 및 배포 파이프라인도 통합될 가능성이 높습니다.
- 옵션 2 (분리 - Polyrepo): 프론트엔드와 백엔드가 각각 별도의 저장소에서 관리될 수 있습니다. CI/CD 파이프라인도 분리됩니다.
- 옵션 2 (분리 - Monorepo): 단일 저장소 내에 여러 독립적인 프로젝트(apps/)를 두고, 공유 가능한 코드(libs/ 또는 packages/)도 함께 관리합니다. 모노레포 도구(Nx, Turborepo 등)가 이를 효율적으로 관리하도록 돕습니다.
코드 공유:
- 옵션 1 (통합): 직접적인 코드 공유는 어렵고 권장되지 않지만, 이론적으로는 같은 파일 시스템 내에 있으므로 가능성은 열려 있습니다. (주로 타입 공유 정도)
- 옵션 2 (분리 - Polyrepo): 코드 직접 공유는 불가능합니다. API 명세를 통해 상호작용합니다. 만약 공통 로직이나 타입이 필요하다면, 별도의 npm 패키지로 만들어 각 프로젝트에서 의존성으로 추가해야 합니다.
- 옵션 2 (분리 - Monorepo): 모노레포의 가장 큰 장점 중 하나로, libs/ (또는 packages/) 디렉토리를 통해 프론트엔드와 백엔드 간에 타입 정의(DTOs), 유틸리티 함수, 심지어 UI 컴포넌트까지 손쉽게 공유할 수 있습니다.

5. 최종 권고안

신규 CRM 시스템은 일반적으로 지속적인 기능 추가와 사용자 증가가 예상되는 서비스입니다. 따라서 장기적인 확장성, 유지보수성, 팀 간 협업 효율성, 기술적 유연성을 고려할 때, 옵션 2: 서버 분리 - 독립 배포 아키텍처를 채택하는 것을 강력히 권장합니다.

주요 사유:

확장성: 프론트엔드와 백엔드의 트래픽 및 리소스 요구사항이 다를 수 있으므로, 각각 독립적으로 확장하여 비용 효율성과 성능을 최적화할 수 있습니다.
팀 생산성: 프론트엔드팀과 백엔드팀이 각자의 전문 영역에 집중하고, 독립적인 개발 및 배포 주기를 가져갈 수 있어 개발 속도와 품질을 높일 수 있습니다.
기술 선택의 유연성: 향후 특정 기술 스택의 업그레이드나 변경 시, 다른 부분에 미치는 영향을 최소화할 수 있습니다.
견고성(Resilience): 한쪽 시스템의 장애가 다른 쪽 시스템에 직접적인 영향을 미치는 것을 방지할 수 있습니다 (예: 백엔드 API 서버 점검 중에도 캐시된 프론트엔드는 계속 서비스 가능).

물론, 옵션 2는 초기 설정의 복잡성(CORS, 인증, 다중 배포 파이프라인 등)이 존재하지만, 이는 잘 정립된 패턴과 도구(Docker, CI/CD 서비스, API Gateway 등)를 통해 관리 가능하며, 장기적인 이점을 고려할 때 충분히 감수할 만한 수준입니다.

AWS LightSail 도메인 연결 후 웹 서버 띄우기(1)(2025ver.)

Anything Doing OK — Sat, 15 Feb 2025 01:46:16 +0900

최종적으로 띄울 화면

EC2 가 요금문제 또는 해킹 문제가 많아 가벼운 토이프로젝트는 Lightsail 을 선택하는 경우가 왕왕있다.

우선 AWS 에 가입 후
https://lightsail.aws.amazon.com/

https://lightsail.aws.amazon.com/ls/webapp

lightsail.aws.amazon.com

이동

클릭

해당 선택지들 선택

지역은 잘못선택하면 접속 속도가 너무 느려지니 꼭 한국으로 선택

순서대로 선택한후 create instance 클릭

인스턴스는 삭제하고 만들일이 많다...인스턴스 만들 때 너무 공들이지 마시길....

Select a Network type 에는 IPv6-only 로 가면 3.5 달러짜리 사용할 수 있는데 관련 문서가 적어서 패스...

설정하다가 머리털 다 빠질거같아서 그냥 6천원 더쓰고 건강지켰다.

아직 만들어지기전

생성 완료!

ssh key 다운해준다 (추후 vscode 에서 연결할 때 필요)

Attach static IP 클릭( 고정 아이피 생성)

그러면 이렇게 고정 아이픽 ㅏ생성이된다.

이제 도메인을 구입하면 되는데

https://aws.amazon.com/ko/route53/

Amazon Route 53 - DNS 서비스 - AWS

Amazon Virtual Private Cloud(VPC)에 사용자 지정 도메인 이름을 할당하고 액세스합니다. DNS 데이터를 퍼블릭 인터넷에 노출하지 않고 내부 AWS 리소스 및 서버를 사용합니다.

aws.amazon.com

로 이동후

메인 페이지 -> Rout53 시작하기 -> 좌측 Side menu 에서 등록된 도메인 도메인 등록 클릭

검색 후 마음에 드는 도메인 클릭 여기는 비싼 거 밖에 안나왔지만

이런식으로 .link 형식의 도메인은 싸니까 부담없이 구매할 수 있다.

선택하고 자동갱신 비활성화 또는 활성화 (요금이 갱신되면서 많이 나올 수 있음)

다음 -> 다음 하고 나서 결제 하면된다.

그러면 aws 가입할 때 등록한 이메일로 등록완료 이메일이 온다.(이미지 미첨부)

기존걸로 보니까 몇시간 걸리는듯...

기존에 있는 도메인으로 진행합니다.

이렇게 이름 서버까지 업데이트 되면

인스턴스 -> Domains 가서 순서대로 설정해주면 된다 하고 하단의 Save 누르기

All subdomains ~ 는 www.구매한도메인. 으로 가도되고 ww.구매한도메인. 으로가도된다. 해당 고정 IP에 연결된 서버를 띄워준다.

인스턴스에서 nginx 관련해서 따로 설정해줄 건 없다. 기존에 설치되어있다.

그냥 이렇게 생김 Apache는 안깔려있는듯...?

이렇게 ssh 접속 하나도 안하고 웹 페이지에서만 딸깍 딸깍으로 설정 완료했다.

※ 3줄 요약(주의사항)

1. 인스턴스는 한국으로 설정하기

2. 도메인 등록후 이름서버 등록까지는 시간이 걸림(5시간 정도)

다음 포스팅은 인스턴스 vscode 연결하기로 오겠습니다.

Laravel Sail을 활용한 MySQL 설정과 개발환경 구축

Anything Doing OK — Fri, 3 Jan 2025 17:55:49 +0900

https://normal-operating.tistory.com/5

WSL2 와 Docker를 이용한 Laravel 개발환경 구축하기

https://laravel.kr/docs/9.x/installation 라라벨 9.x - 설치하기라라벨 한글 메뉴얼 9.x - 설치하기laravel.kr공식문서가 굉장히 잘되어있다 그럼에도 설치하는 구축하는 도중 몇가지 실수할 수 있는 점이 있

normal-operating.tistory.com

해당 게시글에서 이어지는 내용입니다. 해당 프로젝트를 git 으로 관리하고,
다른 컴퓨터에 git clone 을 받은 후 실행하기까지 설정 사항과 에러 해결 방법을 작성한 게시글입니다.

git clone 후 sail up 명령어를 실행하여 해당 화면 띄워야한다.

기초되는 환경은 다음과 같다.
1. WSL2 환경 구축이 되어있을 것

2. Docker Desktop 설치가 되고 환경 설정이 되어있을 것

git clone 을 받게되면 해당 폴더 구조로 이루어져 있다. (cd 해당폴더)

cp .env.example .env

명령어 실행 .env 가 없을 경우

이후 .env 파일을 열어서 해당 속성으로 변경

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=root

.env 파일이 있는 경우는 실행하지 않아도 됨

sail up 명령어가 실패할 경우

-bash: ./vendor/bin/sail: No such file or directory 로 명령어가 실패할 경우

해당 프로젝트 directory 에서 composer require laravel/sail --dev 명령어를 실행해준다.

대강 이런 식으로 설치가 완료된다.

Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:3306 -> 0.0.0.0:0: 
listen tcp 0.0.0.0:3306: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.

에러가 뜰 경우

docker ps 로 해당 포트를 사용중인 container를 찾아서 종료시키거나

.env 파일과 docker-compose.yml 파일에서 포트를 변경해준다. (추천)

   mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3308}:3308'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:

이렇게 변경

이후 ./vendor/bin/sail up 명령어를 써주면

동작은 잘되지만

No application encryption key has been specified.

에러가 발생한다.

해결방법은 해당 Laravel application 을 실행한 후

./vendor/bin/sail artisan key:generate 명령어를 쳐서 APP_KEY 를 생성

INFO Application key set successfully.

텍스트가 뜨면서 성공이 뜬다.

확인하고 싶으면 .env 파일 가면 확인가능하다.

SQLSTATE[HY000] [2002] Connection refused (Connection: mysql, SQL: select * from `sessions` where `id` = RLR6XGlxGaJRG6AKFXqVBQtGYAmLK9cYJRcnVEOX limit 1) 웹 페이지에서 해당 에러가 뜰 경우

mysql image 삭제 후 재설치하고 다시 sail up 명령어를 실행하면 된다.

Spring Boot & Redis 사용한 이메일 인증코드 구현

Anything Doing OK — Thu, 28 Nov 2024 00:40:47 +0900

저번에 Laravel 로 이메일 인증코드를 구현하는 방법을 알아보았다.

https://normal-operating.tistory.com/37

Laravel 이메일 인증코드 구현

https://normal-operating.tistory.com/36 Laravel 이메일 인증 연동 구현하기회사에서 레거시만 사용하다보니 기능을 간단하게 구현할 수 있는 laravel 을 통해서 구현해보았다. 진행하면서 발생한 오류

normal-operating.tistory.com

동작이미지

기능은 거의 비슷하다.

Redis 설치

https://jaey0ng.tistory.com/54

[Redis] 윈도우 환경에서 redis 설치/실행하기

윈도우 설치 Redis 공식문서입니다. https://redis.io/docs/install/install-redis/install-redis-on-windows/ Install Redis on Windows Use Redis on Windows for development redis.io 레디스 공식문서에는 위처럼 사용하면 된다라고 써

jaey0ng.tistory.com

다른 점은 Redis 를 사용해서 인증번호를 저장하고 인증번호를 이메일로 전송해준다는 점

설정사항

1. SecurityConfig 에 인증 관련 경로인

"/api/email/send",

를 추가해준다

.requestMatchers("/login", "/register","/api/register", "/api/email/send", "/verify").permitAll() // 인증 관련 경로는 누구나 접근 가능

2. application.properties 에 다음과 같이 설정 추가

spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=인증받은gmail
spring.mail.password=16자리-없이
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.connectiontimeout=5000
spring.mail.properties.mail.smtp.timeout=5000
spring.mail.properties.mail.smtp.writetimeout=5000
spring.mail.transport.protocol=smtp

3.build.gradle의 dependencies에 다음과 같이 설정 추가

implementation 'org.springframework.boot:spring-boot-starter-mail'

4. MailConfig 생성 후

package com.application.member.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.JavaMailSenderImpl;

import java.util.Properties;

@Configuration
public class MailConfig {

    @Bean
    public JavaMailSender getJavaMailSender() {
        JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
        mailSender.setHost("smtp.gmail.com");
        mailSender.setPort(587);

        mailSender.setUsername("이메일");
        mailSender.setPassword("인증코드16자리-없이");

        Properties props = mailSender.getJavaMailProperties();
        props.put("mail.transport.protocol", "smtp");
        props.put("mail.smtp.auth", "true");
        props.put("mail.smtp.starttls.enable", "true");
        props.put("mail.debug", "true");

//      SSL 설정 추가
        props.put("mail.smtp.ssl.trust", "smtp.gmail.com");
        props.put("mail.smtp.ssl.protocols", "TLSv1.2");

        return mailSender;
    }
}

다음과 같이 코드 작성

5. RedisConfig 에

package com.application.member.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.StringRedisTemplate;

@Configuration
public class RedisConfig {

    @Bean
    public StringRedisTemplate stringRedisTemplate(RedisConnectionFactory connectionFactory) {
        return new StringRedisTemplate(connectionFactory);
    }
}

다음과 같이 코드 작성

6. EmailService에

@Service
public class EmailService {

    private final JavaMailSender mailSender;
    private final StringRedisTemplate redisTemplate;

    public EmailService(JavaMailSender mailSender, StringRedisTemplate redisTemplate) {
        this.mailSender = mailSender;
        this.redisTemplate = redisTemplate;
    }

    // 인증번호 생성
    public String generateVerificationCode() {
        Random random = new Random();
        int code = 100000 + random.nextInt(900000); // 6자리 랜덤 숫자
        return String.valueOf(code);
    }

    // 인증번호 Redis에 저장 (5분 유효기간 설정)
    public void saveVerificationCode(String email, String verificationCode) {
        ValueOperations<String, String> ops = redisTemplate.opsForValue();
        ops.set(email, verificationCode, 5, TimeUnit.MINUTES); // 5분 TTL
    }

    // 인증번호 검증
    public boolean verifyCode(String email, String code) {
        ValueOperations<String, String> ops = redisTemplate.opsForValue();
        String storedCode = ops.get(email);

        if (storedCode != null && storedCode.equals(code)) {
            redisTemplate.delete(email); // 인증 성공 시 Redis에서 제거
            return true;
        }
        return false;
    }
    // 이메일 발송
    public void sendVerificationEmail(String toEmail, String verificationCode) {
        MimeMessage message = mailSender.createMimeMessage();
        try {
            message.setFrom(toEmail);
            message.setRecipients(MimeMessage.RecipientType.TO, toEmail);
            String body = "";
            body += "<h3>" + "요청하신 인증 번호입니다." + "</h3>";
            body += "<h1>" + verificationCode + "</h1>";
            body += "<h3>" + "감사합니다." + "</h3>";
            message.setText(body,"UTF-8", "html");
            mailSender.send(message);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

다음과 같이 코드작성

7. EmailController 에

@RestController
@RequestMapping("/api/email")
public class EmailController {

    private final EmailService emailService;

    public EmailController(EmailService emailService) {
        this.emailService = emailService;
    }

    @PostMapping("/send")
    public String sendVerificationCode(@RequestParam String email) {
        System.out.println("Received email: " + email);
        String verificationCode = emailService.generateVerificationCode();
        System.out.println("Generated Verification Code: " + verificationCode);
        emailService.saveVerificationCode(email, verificationCode); // Redis에 저장
        emailService.sendVerificationEmail(email, verificationCode); // 이메일 발송
        return "인증번호가 발송되었습니다.";

    }

다음과 같이 코드작성

프론트 코드

  const email = document.getElementById("email").value;
  const response = await fetch('/api/email/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({ email })
  });

Spring Security 때문에 고생좀 했다.

2일에 걸쳐서 구현하게 되어 빠져있는 부분이 있을 수 있습니다.

차근차근

Ai 영상 어떻게 만드는 거야? Ai 영상 무료로 만들기 가이드(feat. 일론 머스크)

요즘 유투브나 인스타 릴스 등에 ai 영상이 많이 올라온다. 이런 영상 어떻게 만드는 거야??

클릭 10번안에 만드는 ai 영상 가이드 시작합니다!

재밌고 무료니 다들 한번씩 사용해보세요! 궁금한 건 댓글로 남겨주세요!

무료로 5분만에 React 배포하는 꿀팁 CI/CD 구축까지(feat.Cloudflare)

Vercel 말고 Cloudflare로 무료로 3분만에 배포하기(딸깍)

Building and deploying -> Success! Your project is deployed to Region: Earth]

AWS Lightsail scale up

Andy Grammer - These Tears (가사/해석/번역/Lyrics/노래/추천)

Postgres MCP 연결해서 데이터 뽑기

React with Nest.js Architecture

신규 CRM 구축을 위한 NestJS & React 아키텍처 설계 제안

1. 서론

2. 아키텍처 옵션 상세 분석

2.1. 옵션 1: 단일 서버 - 통합 배포 (Monolithic Frontend & Backend)

2.2. 옵션 2: 서버 분리 - 독립 배포 (Decoupled Frontend & Backend)

3. 아키텍처 비교 요약

4. 추가 고려 사항 및 권장 사항

주요 폴더 구조 차이점 비교

핵심 차이점 요약

5. 최종 권고안

AWS LightSail 도메인 연결 후 웹 서버 띄우기(1)(2025ver.)

Select a Network type 에는 IPv6-only 로 가면 3.5 달러짜리 사용할 수 있는데 관련 문서가 적어서 패스...

Laravel Sail을 활용한 MySQL 설정과 개발환경 구축

Spring Boot & Redis 사용한 이메일 인증코드 구현

재밌고 무료니 다들 한번씩 사용해보세요!
궁금한 건 댓글로 남겨주세요!