전자서명 로그인 원리 완벽 정리: tokenId는 어디에 저장되고 공개키는 어떻게 사용될까?

전자서명 로그인 원리 완벽 정리: tokenId는 어디에 저장되고 공개키는 어떻게 사용될까?

전자서명 기반 로그인 시스템을 처음 접하면 가장 헷갈리는 부분이 바로 tokenId, tokenRef, PublicKey, PrivateKey의 역할입니다.특히 다음과 같은 질문을 많이 하게 됩니다.tokenId는 서버에서 가져오는 것일까?tokenId는 어디에 저장되는 걸까?서버는 왜 tokenId를 가지고 있을까?랜덤(Random)은 공개키로 만드는 걸까?tokenRef는 무엇이며 왜 서버로 보내지 않을까?이번 글에서는 인증서 발급부터 로그인까지의 전체 흐름을 따라가며 각각의 역할을 쉽게 정리해보겠습니다.전체 구조전자서명 로그인은 아래와 같은 구조로 동작합니다.사용자 │브라우저 │로컬 SDK │인증 서버가장 중요한 점은 개인키(PrivateKey)는 절대로 서버로 전송되지 않는다는 것..

  • format_list_bulleted 서버 & 인프라
  • · 2026. 7. 2.
  • textsms
간편인증 로그인 원리 완벽 이해하기 - PIN, 공개키, 개인키, 전자서명까지 한 번에 정리

간편인증 로그인 원리 완벽 이해하기 - PIN, 공개키, 개인키, 전자서명까지 한 번에 정리

간편인증은 비밀번호 로그인이 아니다카카오 인증, PASS 인증, 공동인증서, 금융인증서 등 대부분의 간편인증 서비스는 일반적인 ID/PW 로그인 방식과 전혀 다른 원리로 동작합니다.많은 사람들이 "PIN이 비밀번호다."라고 생각하지만 실제로는 그렇지 않습니다.간편인증의 핵심은 서버가 사용자의 비밀번호나 개인키를 보관하지 않는다는 것입니다.이번 글에서는 간편인증이 어떤 구조로 동작하는지, 서버에는 무엇이 저장되고 로그인은 어떻게 검증되는지 단계별로 쉽게 알아보겠습니다.일반 로그인과 간편인증 로그인 차이먼저 일반적인 로그인 방식부터 살펴보겠습니다.일반 로그인사용자 │ID / PW 입력 │ ▼서버 │DB에 저장된 비밀번호와 비교 │로그인 성공이 방식에서는 서버가 사용자의 비밀번호(또는 해시값..

  • format_list_bulleted 서버 & 인프라
  • · 2026. 7. 2.
  • textsms

Nuxt에서 이미지 압축하는 방법: 브라우저 기반 JPG PNG WEBP 압축 구현

Nuxt 프로젝트에서 이미지 압축 기능을 구현하는 방법을 npm, yarn 설치부터 파일 업로드, 브라우저 압축, 미리보기, 다운로드 처리까지 개발자 관점에서 자세히 정리합니다.Nuxt 이미지 압축 기능 구현하기: npm, yarn 설치부터 실제 사용까지Nuxt 이미지 압축 기능은 블로그, 쇼핑몰, 관리자 페이지, 프로필 업로드, 게시판 첨부파일 기능을 만들 때 자주 필요한 기능입니다. 사용자가 업로드하는 JPG, PNG, WEBP 이미지의 용량이 너무 크면 페이지 로딩 속도가 느려지고, 서버 저장 공간과 트래픽 비용도 증가합니다. 이 글에서는 Nuxt 프로젝트에서 이미지 압축 기능을 처음 설치하는 단계부터 npm 또는 yarn을 이용한 패키지 설치, 이미지 선택, 압축 처리, 미리보기, 다운로드 기능까..

  • format_list_bulleted 실무개발
  • · 2026. 7. 2.
  • textsms
Nuxt로 QR 코드 생성하는 방법: qrcode 라이브러리 실무 소스코드 정리

Nuxt로 QR 코드 생성하는 방법: qrcode 라이브러리 실무 소스코드 정리

Nuxt에서 QR 코드를 생성하는 방법을 개발자 관점에서 정리합니다. qrcode 라이브러리를 사용해 클라이언트에서 QR 이미지를 만들고, 서버 API로 QR 코드 Data URL을 반환하는 실무형 예제를 제공합니다.Nuxt로 QR 코드 생성하는 방법: qrcode 라이브러리 실무 소스코드 정리Nuxt로 QR 코드 생성 기능을 구현할 때는 사용자가 입력한 URL이나 텍스트를 QR 이미지로 변환하고, 화면에 미리보기로 보여주거나 다운로드할 수 있게 만드는 방식이 가장 많이 사용됩니다. 이 글에서는 Nuxt에서 qrcode 라이브러리를 사용해 QR 코드를 생성하는 방법을 개발자 관점에서 정리하고, 바로 사용할 수 있는 소스코드까지 함께 설명합니다.Nuxt는 Vue 기반의 풀스택 프레임워크이며, server/..

  • format_list_bulleted 실무개발
  • · 2026. 7. 2.
  • textsms
Nuxt로 PDF 합치기 도구 만들기: 서버 업로드 없이 브라우저에서 PDF 병합 구현하기

Nuxt로 PDF 합치기 도구 만들기: 서버 업로드 없이 브라우저에서 PDF 병합 구현하기

Nuxt와 pdf-lib를 사용해 여러 PDF 파일을 브라우저에서 합치는 PDF 병합 도구를 구현하는 방법을 설명합니다. 파일 업로드, 드래그 순서 변경, PDF 병합, 다운로드, SEO 설정까지 개발자 관점에서 정리했습니다.Nuxt로 PDF 합치기 도구 만들기: 서버 업로드 없이 브라우저에서 PDF 병합 구현하기PDF 합치기 기능은 여러 개의 PDF 파일을 하나의 문서로 병합해야 할 때 자주 사용되는 웹 도구입니다. 특히 사용자가 계약서, 견적서, 스캔 문서, 보고서 등을 하나로 묶고 싶을 때 검색하는 대표적인 키워드가 “PDF 합치기”, “PDF 병합”, “PDF 파일 합치기”입니다.이번 글에서는 실제 PDF 합치기 도구 페이지를 참고해, 개발자 입장에서 Nuxt로 서버 업로드 없이 브라우저에서 PD..

  • format_list_bulleted 실무개발
  • · 2026. 6. 30.
  • textsms
Nuxt3로 제비뽑기 웹 서비스를 만든 이유와 랜덤 추첨 기능 구현 방법

Nuxt3로 제비뽑기 웹 서비스를 만든 이유와 랜덤 추첨 기능 구현 방법

Nuxt3를 활용해 제비뽑기 웹 서비스를 개발한 과정을 정리했습니다. 랜덤 추첨 알고리즘 구현, 상태 관리, SEO 적용, 배포 과정까지 실제 개발 경험을 기반으로 설명합니다.Nuxt3로 제비뽑기 웹 서비스를 만든 이유와 랜덤 추첨 기능 구현 방법최근 간단한 이벤트나 모임에서 사용할 수 있는 웹 기반 제비뽑기 서비스를 만들게 되었습니다. 단순히 랜덤 숫자를 출력하는 수준이 아니라, 누구나 모바일에서 쉽게 사용할 수 있고 검색 유입까지 고려한 서비스가 필요했습니다. 그래서 선택한 기술이 바로 Nuxt3입니다.이번 글에서는 실제로 제작한 제비뽑기 서비스인 '제비뽑기' 기능을 예시로, 왜 Nuxt를 선택했는지와 랜덤 추첨 기능을 어떻게 구현했는지 개발자 관점에서 정리해보겠습니다.https://tool.dapl..

  • format_list_bulleted 실무개발
  • · 2026. 6. 30.
  • textsms