설치npm install react-dnd react-dnd-html5-backend 시작하기프로바이더 정의src / components / DndProviderLayer.tsx"use client"; // 클라이언트 컴포넌트로 설정import { DndProvider } from "react-dnd";import { HTML5Backend } from "react-dnd-html5-backend";export default function DndProviderLayer({ children }: { children: React.ReactNode }) { const options = { enableMouseEvents: true, // 마우스 이벤트 활성화 enableTouchEvents..
전체 글
1. 클라이언트 애플리케이션이 데이터 전송 요청 2. OS 네트워크 스택이 TCP/IP 패킷을 구성 3. NIC 드라이버가 이진 데이터(패킷)를 NIC에 전달 4. 클라이언트 NIC가 이진 데이터를 전기 신호로 변환 5. (유선/무선으로 전송) 6. 서버 NIC가 전기 신호를 수신해 디지털 데이터로 복원 7. 이더넷 프레임 → IP 패킷 → TCP 세그먼트로 파싱 8. 커널 네트워크 스택이 해당 소켓으로 전달 9. 사용자 애플리케이션이 소켓으로 데이터 수신
Electron에서 React를 함께 사용하는 건 매우 일반적인 패턴입니다. React로 UI를 만들고, Electron으로 데스크탑 앱화하는 거죠.아래에 기본적인 구성 방법을 순서대로 정리해드릴게요.✅ 목표Electron + React를 연동해서 데스크탑 앱 개발하기→ React가 렌더링한 UI가 Electron 창에 표시되는 구조🧱 1. 프로젝트 생성# 1. 새로운 React 프로젝트 생성npx create-react-app my-electron-appcd my-electron-app# 2. Electron 설치npm install --save-dev electron concurrently wait-onconcurrently와 wait-on은 React dev 서버 + Electron을 동시에 실행..
헤더 이름 자동 설정 여부 기본 자동 설정값 설명 Host✅ 자동요청한 도메인(ex. example.com)대상 서버 도메인User-Agent✅ 자동브라우저 정보(ex. Mozilla/5.0 ...)사용자 브라우저 정보Accept✅ 자동text/html,application/xhtml+xml,...클라이언트가 수용 가능한 MIME 타입Accept-Language✅ 자동ko-KR,ko;q=0.9,...사용자 브라우저 언어 설정Accept-Encoding✅ 자동gzip, deflate, br수용 가능한 압축 방식Referer✅ 자동현재 페이지 URL요청 발생 위치Origin✅ 자동 (CORS 시)요청 출처 (ex. https://mysite.com)CORS 관련Connection✅ 자동keep-ali..
사전 준비메타 디벨로퍼 회원가입 + 로그인https://developers.facebook.com/ 소셜 테크놀로지 | Meta for Developers2024년 10월 1일 Introducing new features for the Threads API We want to make Threads the place where people, especially creators and businesses, connect with new and existing audiences around their interests and experiences. In June, we launched the Thrdevelopers.facebook.com 시작하기https://developers.facebook.com/ap..
// 메인 컬러 - 이동규 생일primary: { main: "rgba(00, 10, 9, 1.0)", dark: "rgba(00, 10, 9, 0.7)", light: "rgba(00, 10, 9, 0.3)",},// 서브 컬러 - 이(李)의 유나코드secondary: { main: "rgba(84, 25, 252, 1.0)", dark: "rgba(84, 25, 252, 0.7)", light: "rgba(84, 25, 252, 0.3)",},// 배경색 - (흰색 - 이동규 생일) background: { default: "#FFFFFF", paper: "rgba(255, 245, 246, 1.0)",},
// 이미지 검색 함수export async function searchImage(query: string) { try { const response = await axios.get(`https://pixabay.com/api?key=${process.env.PIXABAY_API_KEY}&q=${query}`); // eslint-disable-next-line @typescript-eslint/no-explicit-any const imageLinkList = response.data.hits.map((hit: any) => hit.webformatURL); if (imageLinkList.length === 0) { return "no image"; } co..
이미 보내버린 API 요청을 취소해보자제발 돌아와 API 야 미리보기 코드import axios, { CancelTokenSource } from "axios";const TestComponent = () => { const [cancelTokens, setCancelTokens] = useState([]); ////////// 게시물 업로드 const articleUpload = async () => { // 취소 토큰 발급 const source = axios.CancelToken.source(); // 취소 토큰 배열에 추가 setCancelTokens((prev) => [...prev, source]); // API 요청 const response = awai..