본문 바로가기
728x90
반응형
SMALL

분류 전체보기155

피그마 MCP 사용법 피그마에서 자신의 토큰키 가져오기설치# Figma 개발자 MCP 설치 npx figma-developer-mcp --figma-api-key=토큰키  3. Curosr→ 환경설정 →MCP - +Add new MCP server 설정 파일 준비 Windows용{ "mcpServers": { "figma-developer-mcp": { "command": "cmd", "args": [ "/c", "npx", "-y", "figma-developer-mcp", "--stdio", "--figma-api-key=토큰키" ] } }} - Mac용 { "mcpServers": { "figma-.. 2025. 4. 11.
GET,POST,PUT,DELETE Axios는 JavaScript에서 HTTP 요청을 처리하기 위한 인기 있는 라이브러리로, Fetch API보다 더 많은 기능과 편리한 문법을 제공 1. GET 요청: 데이터를 가져오는 요청import axios from 'axios';const fetchData = async () => { try { const response = await axios.get('', { params: { api_key: 'YOUR_API_KEY', language: 'ko-KR', }, }); console.log(response.data); // 가져온 데이터 출력 } catch (error) { console.error('Error fetching .. 2025. 4. 3.
useLocation useLocation 훅은 React Router에서 제공하는 훅으로, 현재의 위치(location) 객체를 가져오는 데 사용이 객체는 URL, 쿼리 파라미터 및 상태와 같은 정보가 포함되어 있음주로 라우팅과 관련된 정보에 접근하고, 특정 URL에 따라 컴포넌트를 조건부로 렌더링하거나 동작을 수행하는 데 유용1. useLocation의 기본 사용법1.1. 임포트먼저, useLocation 훅을 사용할 컴포넌트에서 임포트import { useLocation } from 'react-router-dom';1.2. 사용 예시import React from 'react';import { useLocation } from 'react-router-dom';const LocationDisplay = () => { .. 2025. 3. 31.
replace : true 1. replace: false (기본값)navigate('/some-path'); // replace: false가 기본값새로운 경로를 히스토리 스택에 추가뒤로 가기 버튼을 누르면 이전 페이지로 돌아갈 수 있음히스토리가 계속 쌓임→ 히스토리가 쌓인다는 것은 브라우저의 뒤로가기/앞으로가기를 했을 때 방문했던 모든 페이지를 순서대로 이동할 수 있다는 의미   2. replace: truenavigate('/some-path', { replace: true });현재 경로를 새로운 경로로 대체현재 페이지의 히스토리를 새 페이지로 교체뒤로 가기 버튼을 누르면 현재 페이지 이전의 페이지로 이동 사용 예시// 인터뷰 완료 후 결과 페이지로 이동navigate(`/Person/${projectId}`, { rep.. 2025. 3. 31.
props로 함수 전달하기/자식에서 사용하기 props로 함수 전달하기(매개변수x)부모 컴포넌트import React from "react";import Child from "./Child";const Parent = () => { // props로 전달할 함수 const testFunc = () => { console.log("addArticle 함수 호출"); }; return ;};export default Parent;자식 컴포넌트import React from "react";const Child = ({ propsFunc }) => { return ( // 버튼 클릭 시 부모 컴포넌트의 testFunc 함수 호출 Add Article );};export default Child; props로 함수 전.. 2025. 3. 28.
state통해 데이터 전달 React Router를 사용하여 컴포넌트 간에 state를 통해 데이터를 전달하는 방법이 방법은 주로 페이지 간의 데이터 전송에 유용. 1. 데이터 전달데이터를 전달할 컴포넌트: navigate 함수를 사용하여 다른 페이지로 이동할 때 state를 함께 전달.navigate 함수는 두 개의 인자를 받을 수 있다 :첫 번째 인자는 이동할 경로.두 번째 인자는 선택적인 객체로, state를 포함할 수 있다.// 예: OrganismProjectItem.jsxconst handleClick = async () => { if (onClick) { onClick(); } else if (isNoData) { navigate("/ProjectCreate"); } else { // 프로젝트 데.. 2025. 3. 24.
728x90
반응형
LIST

티스토리툴바