728x90 전체 글175 [OAuth2] 기존 시스템에 네이버 소셜 로그인 기능 연동하기 (JWT + 팝업 방식) ✅ 프로젝트 목표기존 이메일/비밀번호 로그인 시스템이 있는 웹 애플리케이션에 네이버 소셜 로그인(OAuth2) 기능을 추가합니다. 로그인 후 네이버 계정을 통해 별도 회원으로 가입되며, JWT 방식으로 인증 처리됩니다.✅ 전체 동작 시나리오사용자가 "네이버 로그인" 버튼 클릭팝업 창으로 네이버 로그인 화면으로 이동로그인 성공 후, 등록된 redirect_uri로 code 와 state 전달백엔드에서 access_token 요청 → 사용자 정보 요청네이버 UID로 사용자 조회 → 없으면 자동 회원가입JWT 발급 → 팝업창에서 부모창으로 전달부모창은 토큰 저장 후 로그인 상태 처리✅ 핵심 처리 방식naverId: 네이버에서 제공하는 비식별 UID로, 계정 식별자로 사용됨이메일: 사용자 정보 중 하나지만, 로.. 2025. 4. 2. [C#] ASP.NET Core에서 클라이언트 데이터 전달 방법 (쿼리 스트링 vs 경로 변수) ASP.NET Core에서 클라이언트가 데이터를 API로 전달하는 방법에는 크게 두 가지가 있습니다.쿼리 스트링(Query Parameter) - ?key=value 형식으로 데이터를 전달경로 변수(Path Parameter) - URL 경로 일부로 데이터를 포함이 글에서는 두 가지 방법의 차이점을 설명하고, 각각의 코드 예제와 시행착오를 공유합니다.1. 쿼리 스트링 방식 (Query Parameter)쿼리 스트링 방식은 URL 뒤에 ?key=value 형태로 데이터를 전달하는 방법입니다.📌 클라이언트 요청 예제import axios from 'axios';const dataToSend = "https://example.com";const encodedData = btoa(unescape(encodeU.. 2025. 3. 19. [git] semantic-release에서 커밋 실수로 누락된 배포 해결 방법 semantic-release는 Git 커밋 메시지를 기반으로 버전 관리와 자동 배포를 수행하는 도구입니다. 하지만 실수로 fix 또는 feat와 같은 Conventional Commit 태그를 빼먹었다면, 배포가 누락될 수 있습니다. 이런 상황에서 배포를 다시 트리거하는 방법을 자세히 안내합니다.1. 왜 semantic-release에서 커밋 메시지가 중요한가?semantic-release는 Conventional Commits 방식을 사용하여 커밋 메시지를 분석하고, 이에 따라 자동으로 버전을 업데이트하고 배포를 진행합니다.예를 들어, 다음과 같은 규칙이 있습니다:fix: - 패치 버전 (bug 수정)feat: - 마이너 버전 (새로운 기능 추가)feat!: BREAKING CHANGE - 메이저 버.. 2025. 3. 17. [git] 회원가입 비밀번호 추천 생성조건, 정규식 회원가입 시 비밀번호를 어떻게 설정해야 할지 고민해본 적 있으신가요? 단순히 '123456'이나 'password' 같은 쉬운 비밀번호를 사용하면 계정이 해킹될 위험이 매우 큽니다. 따라서 보다 안전한 계정 보호를 위해 강력한 비밀번호 정책이 필요합니다. 이 글에서는 비밀번호 생성 조건과 실제 시행착오 사례를 통해 어떻게 하면 더 안전한 비밀번호를 만들 수 있는지에 대해 자세히 안내해드립니다.정규식(Regular Expression)이란?정규식은 문자열에서 특정한 패턴을 찾거나, 검증하거나, 치환하는 데 사용되는 문자열입니다. 예를 들어, 이메일 주소, 전화번호, 비밀번호와 같은 입력값을 검증할 때 유용하게 사용됩니다.정규식의 작동 원리정규식은 문자열을 패턴과 비교하여 일치 여부를 판단합니다. 정규식의 .. 2025. 3. 17. [React] Material-UI Popover 위치 보정과 애니메이션 적용 시행착오 기록 이번 글에서는 Material-UI의 Popover 컴포넌트 사용 중 겪었던 시행착오와, 위치 보정 및 자연스러운 애니메이션을 적용하기까지의 해결 과정을 기록합니다.1. 문제 상황처음에는 Material-UI의 Popover를 사용하여 특정 버튼을 클릭하면 팝업이 열리도록 구현하였습니다. 하지만 팝업 내부의 내용이 확장될 때 다음과 같은 문제가 발생했습니다.내용이 확장되면 Popover가 화면 밖으로 벗어나는 현상Popover 위치가 자동으로 보정되지 않아 부자연스러운 UI위치 보정이 되어도 움직임이 너무 딱딱해서 UX가 나쁨2. 처음 시도한 방법 (실패)처음에는 Popover를 Popper로 변경하여 popperRef를 사용해 위치를 직접 업데이트하려고 했습니다. {/* 내용 */} 문제점:기존.. 2025. 3. 14. [React] Material-UI Popover에서 Popper로 전환한 시행착오 1. 배경 및 요구사항프로젝트에서는 Popover를 사용하여 특정 UI를 구현하고자 하였다. 그러나 팝오버가 열려 있는 동안에도 배경 요소와 상호작용할 수 있도록 하려는 요구사항이 존재하였다.2. 초기 시도: Popover의 ModalProps 활용Material-UI Popover는 내부적으로 Modal을 사용하여 포커스를 팝오버 내부로 강제하는 특성을 지니고 있다. 이에 ModalProps를 이용하여 백드롭 숨김, 스크롤 잠금 해제, 포커스 강제 해제를 시도하였다. 아래 코드는 그 예이다. {/* Popover 내용 */}그러나 이 방법을 사용하면 TypeScript 에러가 발생하였다.오류 메시지는 다음과 같다.Property 'ModalProps' does not exist on type 'Int.. 2025. 3. 14. [React] React Query 사용법 | 데이터 캐싱과 리페칭 쉽게 정리 React Query란?React Query는 React 애플리케이션에서 서버 상태(데이터)를 효율적으로 관리하기 위한 데이터 패칭 라이브러리이다. API로부터 데이터를 가져오고, 캐싱하고, 업데이트하며, 동기화하는 작업을 간편하게 만들어 준다. 서버와 클라이언트 간의 데이터 통신을 효율적으로 관리하여 사용자 경험을 개선할 수 있다.✅ React Query, 왜 사용해야 할까?자동 캐싱과 데이터 동기화데이터를 자동으로 캐싱하고, 필요한 경우에만 서버로부터 데이터를 다시 가져온다.백그라운드에서 데이터를 자동으로 동기화하여 최신 상태를 유지할 수 있다.서버 상태 관리 간소화API 호출, 로딩 상태, 에러 처리 등을 직접 관리할 필요 없이 간편하게 처리할 수 있다.편리한 리페칭(Refetching)특정 조건(.. 2025. 3. 14. [ssh] GitLab SSH 키 설정 및 문제 해결 시행착오 (MacBook) GitLab SSH 키 설정 및 문제 해결 가이드 (MacBook)GitLab에서 SSH로 원격 저장소에 접근하기 위해 SSH 키를 생성하고 설정하는 과정을 상세히 정리했습니다. 시행착오까지 포함하여 바로 사용할 수 있도록 정리하였으니, 복사해서 사용하세요.✅ 1. SSH 키가 이미 있는지 확인하기ls -al ~/.ssh결과에 id_rsa와 id_rsa.pub 파일이 있다면, 이미 SSH 키가 생성되어 있는 상태입니다.만약 .ssh 폴더가 없다면, 새로 생성하세요.✅ 2. SSH 키 새로 생성하기ssh-keygen -t rsa -b 4096 -C "your_email@example.com"-t rsa: RSA 방식으로 생성.-b 4096: 4096비트 길이로 생성 (더 안전).-C: 이메일 주석 (Git.. 2025. 3. 13. [Git] Semantic Release를 활용한 자동 버전 관리 및 릴리스 자동화 가이드 1. Semantic Release 개요Semantic Release는 커밋 메시지에 포함된 정보를 분석해 Semantic Versioning 규칙에 따라 자동으로 버전을 결정하고, 릴리스 노트를 생성하며, 태깅 및 배포까지 수행하는 도구다. 이 도구는 개발자가 수동으로 버전 번호를 관리하거나 릴리스 노트를 작성하는 번거로움을 줄여주며, CI/CD 환경에서 배포 프로세스를 효율적으로 관리한다.2. 작동 원리커밋 메시지 분석:개발자가 작성한 커밋 메시지가 Conventional Commit 형식을 따르는지 확인한다.버전 결정:커밋 메시지의 키워드에 따라 다음 버전 업데이트 유형을 결정한다.feat: 새로운 기능 추가를 의미하며, 마이너 버전 업데이트가 일어난다.fix: 버그 수정을 의미하며, 패치 버전 업.. 2025. 3. 7. 이전 1 2 3 4 ··· 20 다음 728x90
