나만의 개발블로그

React1.1 프록시 서버 사용개발 환경에서 CORS 문제를 가장 쉽게 해결할 수 있는 방법은 프록시 서버를 사용하는 것입니다.React 애플리케이션에서 프록시를 설정하면 API 요청이 동일한 도메인에서 이루어지는 것처럼 보이도록 할 수 있습니다.설정 방법: package.json 파일에 프록시 설정 추가// package.json{ "name": "my-app", "version": "1.0.0", "dependencies": { // ... }, "proxy": "http://localhost:8080" // Spring Boot 백엔드 주소}설명: 이 설정은 React 앱이 http://localhost:3000에서 실행 중일 때, API 요청을 http://localhost:808..

해당 포스팅은 크롤링과 자동화 봇을 활용해자원 고갈 및 많은 데이터 변경 및 조작을 방지하기 위해찾아본 정보를 담은 포스팅Google reCAPTCHA 설정 및 사용 방법reCAPTCHA 사이트 등록:Google reCAPTCHA 사이트로 이동하여 사이트를 등록합니다.사이트 등록 후, 사이트 키와 비밀 키를 받습니다.세부 과정1. reCAPTCHA 유형 선택: reCAPTCHA v2, Invisible reCAPTCHA, reCAPTCHA v3 중 하나를 선택합니다.2. 도메인 추가: 사용하고자 하는 도메인(예: example.com)을 추가합니다.3. 소유자: 이메일 주소를 입력합니다.4. reCAPTCHA 약관 동의: 약관에 동의합니다.5. 등록: 'Submit' 버튼을 클릭하여 사이트를 등록합니다...

해당 포스팅은 추후에 사용해보고 싶은 실시간 동작을 처리하기 위해 사용되는 라이브러리 및 도구의 목록으로현재는 Socket.IO, SSE, FireBase 만 사용해봤기에기억해두고자 작성함.1. Socket.IO설명: WebSocket 프로토콜을 사용하여 브라우저와 서버 간의 실시간 양방향 통신을 가능하게 하는 라이브러리입니다.특징:자동 재연결이벤트 기반 통신브로드캐스팅 기능사용 예제:import { io } from "socket.io-client";const socket = io("http://localhost:3000");socket.on("connect", () => { console.log("Connected to server");});socket.on("message", (data) => {..

하나의 게시글로 자주 사용했던 프로젝트 셋팅을 확인하기 위해 작성한 포스팅으로 수정이 필요하다면 댓글로 남겨주시면 감사하겠습니다 :) PWA - 사실 아래의 코드만 추가하게 되면 간단하게 셋팅이 완료된다. (단, 프로젝트 생성시 셋팅을 해야 간단하며, 생성 이후에 수정하려면 꽤나 복잡하다) npx create-react-app 프로젝트명 --template cra-template-pwa - 이후 index.js 파일에 있는 아래의 코드를 수정해주기 (이유는 register()를 사용하여 새로운 서비스 워커를 등록하여 사용자의 브라우저가 최신 버전의 서비스 워커를 다운로드하고 캐시하여 새로운 버전의 웹 어플리케이션이 배포될 때마다 브라우저에 새로운 서비스 워커를 설치하고 활성화하기 위해 사용하기 위해 사용..

NodeJS+Express 서버 & React 연동 기존 nodeJS로 만든 서버가 있다면 생략하고 아래 설치 목록을 한번 더 체크 후 넘어가보기 // nodejs npm i init -y npm i express React의 프로젝트를 바로 사용할 수 없기에 Build를 하기 // react Project npm run build 이후 Back과 Front가 같은 경로에 있다고 할 경우로 예시를 들자면 nodejs의 server.js에서 아래와 같이 코드를 작성하기 const express = require("express"); const app = express(); const path = require("path"); app.listen(8080, () => { console.log("hi"); }..