react4 [VUE] 학습 - 1 vue란 js 기반의 프레임워크React처럼 SPA 전용 동작을 많이 지원한다특정 라이브러리 중 Vuetify가 vue 관련 컴포넌트의 다양한 서식을 지원한다. Bootstrap과 비슷함MVVM(Model-View-ViewModel) 패턴 기반View: 화면(UI)Model: 데이터ViewModel: View와 Model 연결, 반응형 관리반응형(Reactivity) 시스템데이터가 바뀌면 UI가 자동 업데이트상태 관리와 렌더링이 자연스럽게 연결됨위 개념을 기억하고 학습하면 좋겠다. 크게 두가지의 문법(? 작성 형식?)이 존재하는데 그건 Options와 Composition이고이에 따른 방식은 또 은근하게 다르다이에 따른 유형 차이는 추후에 학습하도록 하자 개념Vue2Vue3 React 컴포넌트 생성cre.. 2025. 9. 21. React + Spring / Nginx / S3 마이그레이션 배포 해결하는데 걸린 시간 : 약 3시간 해결했던 방법 : GPT + 구글링 기존 업로드되어 배포되었던 과거 파이널 프로젝트 결과물 을 다시 내 도메인으로 호스팅하기 위해 시행했다.얼핏 보면 front에서 api 주소와 back에서의 엔드포인트만 잘 바꾸면 문제가 없을 것 같았지만 몇 가지 문제점이 생겼다. 첫 번째 문제는 CORS 문제였다. 백엔드 SecurityConfig.java → CORS 허용 도메인 추가 를 깜빡했던 것. config.setAllowedOrigins(List.of( "http://localhost:3000", // 개발 환경용 (필요시 유지) "https://pilllaw.kcanmin.com" )); 리스트 형식의 Origin 허가를 내 도메인으로 허가했어야 했.. 2025. 7. 17. DEBUGLOG - React + Vite 프로젝트 "배포" 시 겪은 문제 해결하는데 걸린 시간 : 약 4시간 해결했던 방법 : GPT + 구글링개요최근 개인 포트폴리오 사이트를 React + Vite로 개발하고, EC2 + Nginx + Docker + Cloudflare 환경에 배포하면서 겪은 몇 가지 문제와 해결 방법을 정리하였음. 문제를 파악하고 해결하는 데 약 4시간 정도 소요하였음..🔸 1. Cloudflare + 포트 문제: :82 접속 이슈🔍 문제 상황EC2에서 React 앱을 :82 포트로 노출했으나, Cloudflare를 통과하면 접속이 안 되는 문제가 발생로컬 네트워크에서는 http://IP:82로 접속 가능했지만, 도메인(www.kcanmin.com:82)으로는 접속 실패🛠 해결 방법Cloudflare는 기본적으로 허용하는 포트 번호를 제한함:82는 .. 2025. 6. 5. [Project Lottomate] 개발일지(6) ✅ 29. 사용자 로또 응모 기록 저장 기능 구현 완료목표: 사용자가 추천 받은 번호 또는 직접 선택한 번호를 응모 기록으로 DB에 저장테이블: lotto_user_history구현 내용:LottoUserHistoryRequest DTO 설계 (번호 6개 + drawRound 등 포함)컨트롤러: POST /api/lotto/user/history서비스: saveUserLottoHistory(userId, request)로 DB에 저장중복 저장 방지를 위해 복합 유니크 제약(userId + drawRound)📌 사용자가 응모한 번호를 기반으로 당첨 여부 평가, 마이페이지 기록에 활용 가능✅ 30. 당첨 결과 자동 평가 기능 구현 완료목표: 저장된 사용자 응모 번호에 대해 당첨 등수/금액 자동 계산DTO:.. 2025. 4. 25. 이전 1 다음
