각진 세상에 둥근 춤을 추자

https://visualstudio.microsoft.com/ko/vs/community/ Visual Studio 2022 커뮤니티 버전 – 최신 무료 버전 다운로드Windows, Android 및 iOS용 최신 개발자 앱을 만들기 위한 모든 기능을 갖춘 확장 가능한 무료 IDE를 사용해 보세요. 지금 무료로 커뮤니티를 다운로드하세요.visualstudio.microsoft.com 'C++를 사용한 데스크톱 개발' 선택 오래 걸립니다... (30분~1시간 소요) 설치가 완료되면 컴퓨터를 재시작한다. 설치가 된 Visual Studio를 실행시킨다. 우선 건너뛰기 색 테마 설정하기 > 시작 새 프로젝트 만들기 'Windows 데스크톱 마법사' 선택 > 다음 프로젝트 이름 작성 > 만들..

0. 사용하는 패키지 다운로드 1. react-router-dom 설치npm install react-router-domnpm install --save-dev @types/react-router-dom 1. 폴더 구조와 역할 파악 이전 게시글에서 프로젝트의 src 하위에 폴더를 용도에 따라 추가해주었다. 2025.07.29 - [FRONTEND/React] - [React] 프로젝트 구조 추가 설정 (src 하위 폴더, Prettier) [React] 프로젝트 구조 추가 설정 (src 하위 폴더, Prettier)이전에는 Vite를 통해 리액트 프로젝트를 생성했다. 이번에는 실제 간단한 프로젝트를 구현하기 앞서 구조에 대한 설정을 추가해준다. 1. 용도에 따른 폴더 추가 Vite를 통해 프로젝트를 ..

이전에는 Vite를 통해 리액트 프로젝트를 생성했다. 이번에는 실제 간단한 프로젝트를 구현하기 앞서 구조에 대한 설정을 추가해준다. 1. 용도에 따른 폴더 추가 Vite를 통해 프로젝트를 생성하면 src 폴더 하위에는 assets 폴더(정적 자원 저장)만 생성되어 있다. 이를 용도에 맞게 좀더 세분화하여 관리할 수 있다. ├─ src/│ ├─ assets → 이미지, 아이콘, 폰트 등 정적 파일│ ├─ apis → API 요청 함수 모음 (예: axios 요청들)│ ├─ components → 버튼, 모달 등 재사용 가능한 UI 컴포넌트│ ├─ contexts → React Context API 관련 코드 (전역 상태 공유용)│ ├─ hooks ..

1. Node.js 설치하기 React 자체는 브라우저에서 실행되지만 개발의 번들링, 빌드 등을 위해 Node.js를 설치해야 한다. - 번들링: 여러 파일들을 하나의 실행 파일로 압축 (예: Vite, Webpack 등) https://nodejs.org/ko Node.js — Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 위 버전 중 가장 안정적인 LTS 버전인 v22.17.1 (LTS)로 설치를 진행..

지난 게시글: 2025.05.26 - [Java] - Spring 기반 Kafka Producer-Consumer + Java 알람 매니저 (Kafka Streams 모듈화)로 실시간 알람 기능 구현 Project Structure > Modules > Dependencies에" data-og-host="this-circle-jeong.tistory.com" data-og-source-url="https://this-circle-jeong.tistory.com/254" data-og-url="https://this-circle-jeong.tistory.com/254" data-og-image="https://scrap.kakaocdn.net/dn/bzadYu/hyYYvUJgkW/3p8wwsSt3gIQkq..

기존에는 카프카의 프로듀서와 컨슈머를 같은 서버에 두어 메시지를 전송 및 수신하였다. 2025.05.15 - [Java] - Kafka 로컬 설치 및 Spring Boot에서 Kafka 연동하기 File > Project Structure > Modules > Dependencies에서 스프링부트 버전을 확인한다. 스프링부트 버전: 3.4.3" data-og-host="this-circle-jeong.tistory.com" data-og-source-url="https://this-circle-jeong.tistory.com/253" data-og-url="https://this-circle-jeong.tistory.com/253" data-og-image="https://scrap.kakaocdn.n..

출처 및 참고: https://docs.spring.io/spring-kafka/reference/quick-tour.html 1. 스프링부트 버전 확인인텔리제이 > File > Project Structure > Modules > Dependencies에서 스프링부트 버전을 확인한다. 스프링부트 버전: 3.4.3 스프링부트 3.4.X의 경우 카프카 3.3.X 버전을 사용하는 게 좋다. 2. Maven에서 spring-kafka 추가하기 org.springframework.kafka spring-kafka 3.3.2 3. application.properties에 카프카 설정 작성# ===========================# Kafka 브로커 주소# ==================..

❗ 문제 상황  SecurityConfiguration 클래스에서 아래와 같이 @Qualifier("userLoginService")를 통해 UserDetailsService 구현체인 UserLoginService를 주입하려 했지만,@Beanpublic SecurityFilterChain securityFilterChain( HttpSecurity httpSecurity, @Qualifier("userLoginService") UserDetailsService userDetailsService) throws Exception { ...} 다음과 같은 오류가 발생함Cannot find bean with qualifier 'userLoginService'   🧠 원인 분석 ..

2단계 인증 (Two-Factor Authentication, 2FA) 2단계 인증(2FA)은 사용자의 계정 보안을 강화하기 위한 인증 방식으로, 단순히 아이디와 비밀번호를 사용하는 기존의 1단계 인증 방식보다 더 안전한 방식이다.   💡 2단계 인증의 기본 원리  2FA는 아래 세 가지 사항 중 두 가지를 조합하여 사용자를 인증한다.사용자가 알고 있는 것: 비밀번호, PIN, 보안 질문의 답변 사용자가 가지고 있는 것: 스마트폰, OTP(One-Time Password) 생성기, 보안 토큰, 카드사용자인 것 자체: 생체 인증 (지문, 얼굴, 홍채, 음성 인식)  💡 2단계 인증의 흐름  1차 인증: 사용자가 아이디와 비밀번호 또는 PIN을 입력하여 첫 번째 인증을 완료한다.2차 인증: 첫 번째 인증..

✨ 기획 순서 사업 분석기능 정의서 (주요 기능 정의)기능 명세서 (요구사항 정의/ 기술 요구사항/ 정책 정의서)개발 일정 수립스토리보드/화면 설계서 작성  📌 사업 분석 - 목적:  프로젝트의 목표와 비전을 설정하고 시장 조사 및 경쟁 분석을 수행 - 산출물 프로젝트 목표타겟 유저 정의경쟁사 분석 자료성공 기준 (KPI)  📌 기능 정의서 (주요 기능 정의) 작성 - 목적: 시스템이 수행할 주요 기능을 정의하고 각 기능 간의 관계와 흐름을 이해 - 작업 내용주요 기능 리스트 작성 각 기능 간의 상호작용 정의심플한 플로우 차트 작성 (이래도 되나 싶을 만큼 심플하게, 상세 스펙은 상세 기획서에) - 산출물기능 정의서플로우 차트 (간단한 흐름도)   📌 기능명세서 (요구사항 정의서) 작성  - 목적:..