kimmgamjja

AxiosHTTP 요청 라이브러리서버와 통신할 때 HTTP 요청을 쉽게 보내고, 응답을 처리하도록 도와주는 라이브러리“어떤 데이터를 가져오고 보내는 도구”비동기 통신 Javascript 라이브러리특징요청과 응답 모두 JSON 형식으로 자동변환시켜준다GET/POST/PUT/DELETE 요청요청 / 응답 인터셉터 지원브라우저 , node.js 모두 지원import axios from 'axios';axios.get('') .then(response => console.log(response.data)) .catch(err => console.error(err));.then() → promise를 기반으로 한 비동기 처리일 뿐, axios 자체는 HTTP 요청 라이브러리다사용법const axios = re..

TanStack React Query란 ? 서버에서 가져온 데이터를 React 애플리케이션에서 효율적으로 관리하기 위한 라이브러리 ex) 특정 웹에서 사용자 목록을 가져온다고 하면 화면 ↓GET /users ↓FastAPI ↓Database ↓사용자 목록 반환 React Query는 이 과정에서 가져온 서버 데이터를 관리해준다 단순히 API를 호출하는 것 뿐만 아니라데이터 조회, 로딩/에러 상태 관리, 캐싱, 데이터 재조회 ,데이터 변경 후 캐시 갱신, 서버 데이터의 최신 상태 관리 등을 담당한다 즉, API 요청 ↓응답 데이터 ↓React query가 캐시에 저장 ↓컴포넌트에서 사용 ↓필요하면 다시 조회 ↓데이터 최신 상태 관리 서버에서 가져온 데이터를 관리하는 역할을..

n8n 에서 MCP Sever Trigger 에서 Test URL, Production URL 로 claude desktop 에 MCP 연결하려했지만 claude desktop을 여러번 껏다 켜도 MCP n8n: Server disconnected. For troubleshooting guidance, please visit our debugging documentation 이 에러가 나고 fail 이 떴다 원인을 찾아보는데 cmd창에 npx -y supergateway --sse http://localhost:5678/mcp-test/mcp-claude-desktop 입력하면 다음과 같은 내용이 나왔다 즉, 이 내용은 Node.js 가 설치되어 있지 않았다는 것 https://nodejs.org..

Fragment 문법 : 필요한 DOM 노드를 추가하지 않고 하나의 컴포넌트 안에서 여러 개의 자식 요소를 그룹화하여 반환할 수 있도록 해주는 문법 return() 안에 두 개의 HTML 태그 나란히 적기 안됨return 내부에는 하나의 태그로 시작해서 하나의 태그로 끝나야한다 ⇒ fragment 문법

기존 state == 신규 state 의 경우 변경 안해줌array/object 특징array/ object 담은 변수엔 화살표만 저장된다.배열 안 데이터가 어딨는지 알려주는 화살표만 들어있음 { let copy = 글제목; copy[0] = '운동화추천'; 변경(copy);}} > 버튼 button 을 눌러도 내용이 바뀌지 않음 { // 글제목-> 화살표만 있음 let copy = 글제목; // 글제목과 같은 화살표를 가지고 있음 copy[0] = '운동화추천'; console.log(글제목 == copy); //true 변경(copy);}} > 버튼 배열 안 내용이 바뀌긴 하지만 화살표는 수정안됨⇒ 그래서 기존 state 와 신규 state 같음⇒ 버튼을 눌러도 내용이 바뀌지않는다 array, ..

데이터 바인딩은 {중괄호}데이터바인딩이란 ? → 데이터를 꽂아 넣는다style 넣을 때style={ { 스타일명 : ‘값’} } return 안에는 병렬로 태그 2개이상 기입 금지 return ( //금지)자료 저장 시 변수 let,var,const 사용state 사용import { useState}useState(보관할 자료)let [작명, 작명] → destructuring 문법ex) let [a, b] = useState(’운동화 추천’)a ⇒ state 에 보관했던 자료 나옴b ⇒ state 변경 도와주는 함수import{useState} from 'react';function app(){ let [a,b] = useState('운동화 추천') //state 사용}state 쓰는 이유?변수와 ..

node_modules 폴더라이브러리 코드 보관함public 폴더static 파일 모아놓은 곳src코드 짜 놓은 곳package.json프로젝트 정보

- 컴퓨터 내 새 폴더 만들기 - shift + 우클릭 → ‘여기에 powershell 창 열기’npm create vite@latest - y 입력 - 프로젝트명 입력- Select a framework : React 선택- Select a variant : Javascript 선택- 해당 폴더로 이동 (cd shopping) npm install - npm 시작 npm run dev

docker desktop 에서 n8n 컨테이너 Run 한 후, 브라우저 url 입력칸에 http://localhost:5678 입력하면아래와 같은 화면이 나온다 여기서 Create workflow 를 눌러주면 새로운 워크플로우 생성가능 Create workflow 클릭 후 기본 화면 + 버튼 클릭시 이러한 브라우저? 가 뜨고 여기서 추가 가능노드를 추가할 수 있는 방법은 다양하다 - Execute workflow : 워크플로우 실행- + 버튼 : 노드 추가- 휴지통 버튼 : 연결된 노드 삭제 노드 > Settings Tab ex) AI Agent 노 - 에러 발생시 어떤 동작을 실행할 지 - 한번만 실행할 지 등 어떤식으로 노드를 실행할지에 대한 설정 가능 기능 1) 핀 기능 - 특정..

docker desktop 설치 후 프로그램을 열었을때 Virtualization support not detectedDocker Desktop failed to start because virtualisation support wasn’t detected. Contact your IT admin to enable virtualization or check system requirements 이 에러가 떠서 찾아보니까 CPU 가상화 기능이 비활성화 되어 있거나 Windows의 가상화 플랫폼 기능이 꺼져있을때 이런 에러가 발생한다고 한다 - CPU 가상화 기능 확인 방법1) Ctrl + Shift + Esc 키를 > 작업 관리자 > 성능 > CPU > 가상화 항목이 사용으로 되어 있는지 확인 필요만약 사..