나만의 개발블로그

해당 포스팅은 크롤링과 자동화 봇을 활용해자원 고갈 및 많은 데이터 변경 및 조작을 방지하기 위해찾아본 정보를 담은 포스팅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()를 사용하여 새로운 서비스 워커를 등록하여 사용자의 브라우저가 최신 버전의 서비스 워커를 다운로드하고 캐시하여 새로운 버전의 웹 어플리케이션이 배포될 때마다 브라우저에 새로운 서비스 워커를 설치하고 활성화하기 위해 사용하기 위해 사용..

상세페이지에 상품명 넣기 뭐가 좀 이상해졌는데 … 무튼 현재 Detail 컴포넌트는 따로 만들지 않고 해당 코드를 Route안의 element에 넣었는데 갑자기 강사님은 따로 파일을 빼서 정리를 해뒀다. 우선 App에서 Detail로 item 데이터를 전송하기 위해서 props를 이용 function Detail(props) { return ( {props.item.map((item) => { return item})} ) } export default Detail 근데 여기서 Q. Detail.js 안에 item이라는 state를 하나 더 만들어주고 props를 하지 않으면 더 편하지 않음?? 이렇게 되면 앞서 프젝했을 때처럼 당황스러운 결과가 나오게 되는데 데이터의 수정사항이 생겼을 때 예를 들어 데..

React - Router 리엑트에서 페이지 나누는 법 컴포넌트를 만들어서 상세페이지 내용 채우기 누가 /detail에 접속하면 해당 커포넌트를 보여줌 설치 순서 terminal → npm i react-router-dom@6 index.js → BrowserRouter 를 작성하기 import 또한 함께 해주고 BrowserRouter 태그로 App을 감싸주기 그리고 팁으로 react에서는 태그로 감싼뒤 요소들을 넣어야 하기 때문에 이때 div태그를 적기 그렇다면 그냥 만 넣어줘도 된다. 무튼 해당 element 속성 안에 원하는 데이터를 태그 혹은 다른 태그로 감싼 상태로 넣어주게 되면 { return item})} }/> 페이지 이동 버튼 Link 태그 사용하기 to 속성을 이용해서 기존에 작성했던..

만약 input태그에 뭔가 입력시 코드를 실행하고 싶다면 onChange/ onInput 을 작성하면 된다. 그래서 이벤트핸들러(onClick, onChange, onInput …) 종류는 굉장히 많다. 여기서 input태그 내부의 입력값을 가져오고 싶을 경우 함수의 파라미터값을 가져와서 사용 // onchange가 감지할 때마다 생성되는 e { console.log(e) }}/> // onchange가 감지할 때마다 생성되는 이벤트가 발생한 html태그 { console.log(e.tartget) }}/> // onchange가 감지할 때마다 생성되는 이벤트가 발생한 html태그에 입력한 값 { console.log(e.target.value) }}/> 그리고 현재 강의대로 작성했다면 아래의 코드가 작..

React 시작 (Terminal 에 입력) npx create-react-app {{프로젝트명}} cd {{프로젝트 명}} npm start 리엑스에서 데이터 바인딩 {} 중괄호를 사용하여 바인딩 하기 (className과 같은 거의 모든 곳에서 사용이 가능) import './App.css'; import logofrom './logo.svg' function App() { // let post = "강남 고기 맛집" function 함수() { return 100 } return ( 개발 Blog {함수()} ); } exportdefault App; JSX에서 Style 속성을 집어넣을 때 Vue, Html에서 Style의 속성을 집어넣을 때처럼 style='font-size: 16px' 와 같이..