티스토리

codiary

검색하기

블로그 홈

codiary

joohee0826.tistory.com/m

기억용 메모장

구독자: 0

방명록 방문하기

주요 글 목록

로그인(JWT, 전체 개념) 토큰토큰이 왜 필요할까요?HTTP의 stateless 특성 때문에 사용자가 로그인 상태를 지속적으로 유지할 수 없음.즉, 사용자가 로그인을 한 후에도 마이페이지와 같이 로그인이 필요한 페이지에 접근할 때마다 재로그인이 필요한데 이를 해결하기 위해 토큰이 사용데이터 전달: 특정 정보를 안전하게 전달하기 위해 사용 식별: 사용자나 기기를 식별하는 데 필수 JWT란Jason Web Token의 약자이다. 모바일 앱이나 웹에서 사용자 인증(Authentication)을 수행할 때 사용하는 암호화된 토큰이다. 사용자의 정보 등을 암호화하여 사용자 정보가 필요한 API를 호출할 때, 해당 토큰을 보내주면 백엔드에서 그 토큰을 검증(verity)하는 과정을 거친다. 그 후 response해주는 것이다로그인 과정: 회.. 공감수 0 댓글수 0 2025. 4. 11.
피그마 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-.. 공감수 0 댓글수 0 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 .. 공감수 0 댓글수 0 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 = () => { .. 공감수 0 댓글수 0 2025. 3. 31.
replace : true 1. replace: false (기본값)navigate('/some-path'); // replace: false가 기본값새로운 경로를 히스토리 스택에 추가뒤로 가기 버튼을 누르면 이전 페이지로 돌아갈 수 있음히스토리가 계속 쌓임→ 히스토리가 쌓인다는 것은 브라우저의 뒤로가기/앞으로가기를 했을 때 방문했던 모든 페이지를 순서대로 이동할 수 있다는 의미 2. replace: truenavigate('/some-path', { replace: true });현재 경로를 새로운 경로로 대체현재 페이지의 히스토리를 새 페이지로 교체뒤로 가기 버튼을 누르면 현재 페이지 이전의 페이지로 이동 사용 예시// 인터뷰 완료 후 결과 페이지로 이동navigate(`/Person/${projectId}`, { rep.. 공감수 0 댓글수 0 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로 함수 전.. 공감수 0 댓글수 0 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 { // 프로젝트 데.. 공감수 0 댓글수 0 2025. 3. 24.
index.js index.js 파일의 역할기본 내보내기폴더의 기본 내보내기: index.js 파일은 해당 폴더의 기본 내보내기(default export) 역할을 한다.다른 파일에서 이 폴더를 import하면 자동으로 index.js의 내용을 가져올 수 있다. 파일 구조/components ├── DetailPage.js └── index.js DetailPage.js// DetailPage.jsconst DetailPage = () => { return Detail Page Content;};export default DetailPage; 1. index.js를 사용하는 경우index.js// index.jsexport { default } from './DetailPage'; App.js (index.js 사.. 공감수 0 댓글수 0 2025. 3. 20.
git stash/ stash pop [작업유지 당겨오기] 현재 작업 중인 브랜치에서 변경사항을 스태시하고(main 업데이트 후)**git stash 2. main 브랜치로 체크아웃 후 업데이트 진행git checkout maingit fetch upstreamgit merge upstream/main 3. 다시 원래 작업하던 브랜치로 이동git checkout git merge main 4. 그리고 스태시 복원git stash pop 공감수 0 댓글수 0 2025. 3. 20.
Git desktop 사용 방법 📍 아예 새로운 레포지토리를 생성하려면Add / create new repository / publish 📍 레포지토리를 이미 git 사이트에서 생성했다면레포지토리 들어가서Add / add existing repository내 로컬 폴더 경로 입력이후 몇가지 클릭하고 publish 📍깃허브 사이트의 프로젝트를 옮기려면Add/ clone repository 📍 수정 - 한 branch 내에서1) github desktop에서 vscode 열기맥북의 경우 단축키 : cmd/shift/a2) 업데이트 요약 내용(필수)와 설명(선택) 입력 후 commit3) push origin / pull / fetch origin 버튼 눌러서 실시간 업데이트 및 확인Push: 로컬 -> 원격 (자신의 변경 사항을 업.. 공감수 2 댓글수 0 2025. 3. 20.
내가 한 작업 upstream에 올리기 → 전제 :원격저장소가 연결되어있어야 함!! 1. 새 브랜치 생성 및 이동먼저 내 브랜치 생성 후 작업한 후에 메인으로 올리기 !!! -> 협업에 유용git branch # 현재 브랜치 확인git checkout -b feature/new-feature # 새 브랜치 생성하고 이동 2. 코드 수정 후 커밋git add -A # 모든 변경사항 스테이징 방법 1git add . # 모든 변경사항 스테이징 방법 2git commit -m "커밋 메시지" # 변경사항 커밋 3. 원격 저장소에 푸시 방법 #1 ) git push # 명령어 입력 이후 실제 명령어 복사 방법 #2 ) git push origin feature/new-feature # 새 브랜치를 원격에 푸시 4. **PR(Pul.. 공감수 1 댓글수 0 2025. 3. 20.
Git - upstream의 변경사항을 로컬로 merge merge 구조1. 처음 상태:Upstream (upstream) main ------>Your fork (origin) main ------> 2. 당신이 브랜치를 만들어서 작업:Upstream (upstream) main ---------------------->Your fork (origin) main ----------------------> \\\\ branch-addInfomationText (여기서 작업)3. 작업 후 PR을 생성하고 merge됨:Upstream (upstream) main ----------------------[merge]------> .. 공감수 0 댓글수 0 2025. 3. 20.
Git - merge 개념 Merge는 Git에서 한 브랜치의 변경사항을 다른 브랜치로 통합하는 과정 1. Merge가 필요한 상황 예시:메인 브랜치에서 작업하다가 새로운 기능 개발을 위해 브랜치를 만들었을 때개발이 완료되면 이 변경사항을 다시 메인 브랜치에 합치고 싶을 때메인 브랜치: A → B → C ↘개발 브랜치: D → E → F 2. Merge 후:두 브랜치의 변경사항이 하나로 합쳐짐메인 브랜치: A → B → C → → → M ↘ ↗개발 브랜치: D → E → F 3. 실제 예시:# 1. 메인 브랜치로 이동git checkout main# 2. 다른 브랜치의 변경사항을 현재 브랜치로 병합.. 공감수 0 댓글수 0 2025. 3. 20.
origin/upstream Terminal-   main ±  git remote -vorigin https://github.com/ (fetch) origin https://github.com/git (push) upstream https://github.com.git (fetch) upstream https://github.com/it (push) →로컬 저장소는 "origin"과 "upstream"이라는 두 개의 원격 저장소와 연결되어 있음.→ 위 정보는 현재 작업 중인 로컬 Git 저장소( 당신의 컴퓨터에 있는 프로젝트의 버전 관리 시스템)에 설정된 원격 저장소들을 보여줌→ "origin"은 개인 저장소를, "upstream"은 원본 프로젝트 저장소를 가리킴 origin:URL: https://github.com/s.. 공감수 2 댓글수 0 2025. 3. 20.
Git 기본 1. Git 기본 개념Repository (저장소)로컬 저장소 Local Repository: 로컬 컴퓨터에 있는 저장소원격 저장소 Remote Repository: GitHub 등 원격 서버에 있는 저장소Branch (브랜치)독립적인 작업 공간main/master: 기본 브랜치feature: 기능 개발용 브랜치hotfix: 긴급 수정용 브랜치원격저장소 연결 → 올리기 1. 원격 저장소와의 상호작용 관련 명령어 사용 시나리오일반적인 Fork & Pull Request 워크플로우# 1. upstream 저장소 등록 (최초 1회만)git remote add upstream # 2. upstream 확인git remote -v# 3. upstream의 최신 변경사항 가져오기git fetch upstream# .. 공감수 1 댓글수 0 2025. 3. 20.
JSX 문법 정리 JSX란 Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법이다.JSX는 React에서 UI를 정의하기 위해 사용되는 문법 확장JSX를 사용하면 JavaScript 코드 안에서 태그 기반의 구문을 통해 React 엘리먼트를 직관적으로 정의할 수 있으며, 이를 통해 동적인 UI를 쉽게 구현할 수 있음❓ XML이란?XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다.엄밀히 말하자면 XML은 마크업 언어라기 .. 공감수 1 댓글수 0 2025. 3. 19.
const /let JavaScript 변수 선언 방식 정리변수 선언 키워드let용도:변할 수 있는 값을 선언할 때 사용블록 내부에서만 유용특징: 재할당 가능, 재선언 불가능예시: let count = 1; count = 2; (유효)const용도: 변경되지 않는 상수나 재할당이 필요 없는 변수에 사용 (변하지 않는 값을 선언할 때 사용)블록 내부에서만 유용특징: 재할당 불가능, 재선언 불가능참조 타입: 객체나 배열의 내부 값은 변경 가능하지만 참조 자체는 변경 불가예시: const PI = 3.14; (재할당 시 오류)var (레거시)용도: ES6 이전의 변수 선언 방식특징: 재할당 가능, 재선언 가능, 함수 스코프단점: 블록 스코프를 무시하여 예상치 못한 동작 발생 가능 예시 1 ) 유효성 검사에서의 let / con.. 공감수 1 댓글수 0 2025. 3. 13.
formdata FormData정의: FormData는 파일과 다른 데이터를 함께 전송할 수 있도록 도와주는 객체로, 브라우저 API의 일부주요 용도: 주로 파일을 포함한 폼 데이터를 처리할 때 사용1. 폼 데이터 구성키-값 쌍: FormData는 데이터 항목을 키-값 쌍으로 저장일반적으로 HTML 폼의 입력 요소(name 속성)와 그 값을 매핑하여 구성const data = new FormData();data.append('username', 'exampleUser'); // 문자열 데이터 추가2. 파일 업로드 지원파일 포함: 사용자가 선택한 파일을 FormData에 추가할 수 있음.이는 이미지, 문서 등 다양한 파일 형식이 될 수 있음. FormData는 파일을 멀티파트 형식으로 자동으로 처리하여 서버에 전송cons.. 공감수 0 댓글수 0 2025. 2. 21.
Jotai 1. 기본 개념Jotai란?일본어로 "상태"를 의미React를 위한 원시적이고 유연한 상태 관리 라이브러리Recoil에서 영감을 받아 더 작고 단순한 API 제공주요 특징// 1. 최소한의 API// 2. TypeScript 기반 설계// 3. 작은 번들 사이즈 (~3KB)// 4. React Suspense 지원// 5. 중첩된 업데이트 최적화2. 기본 사용법Atom 생성import { atom } from 'jotai'// 기본 atomconst countAtom = atom(0)const textAtom = atom('hello')// 파생 atom (읽기 전용)const doubledAtom = atom((get) => get(countAtom) * 2)// 읽기/쓰기 atomconst toggl.. 공감수 0 댓글수 0 2025. 2. 14.
DOM 요소 선택 메서드 총정리 1. getElementByIdHTML 문서에서 특정 ID를 가진 요소를 찾아 반환하는 JavaScript 메서드document.getElementById('elementId')ID로만 요소 선택가장 빠른 성능단일 요소 반환 (또는 null)ID는 문서에서 고유해야 함예시1 )// 기본 선택const element = document.getElementById('myId');// 스타일 변경document.getElementById('myId').style.backgroundColor = 'red';// 클래스 조작const element = document.getElementById('myId');element.classList.add('active'); // 클래스 추가element.classL.. 공감수 0 댓글수 0 2025. 2. 12.
데이터 처리 [JSON 형식의 API에서 데이터를 불러올 때 주로 사용되는 데이터 처리 방법]이 과정은 API 호출, 데이터 변환, 상태 관리 및 오류 처리 등을 포함1. API 호출API를 호출할 때는 fetch API나 axios와 같은 라이브러리를 사용함1.1. Fetch API 사용fetch('') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 데이터로 변환 }) .then(data => { console.log(data); // 데이터를 처리 }) .. 공감수 0 댓글수 0 2025. 2. 12.
JSON 기본 구조 1. JSON 기본 구조객체: { "key": "value" } 형태로, 키와 값의 쌍으로 이루어져 있음배열: [ { "key": "value" }, { "key": "value" } ] 형태로, 여러 개의 객체를 포함할 수 있음2. 일반적인 API 응답 구조API 응답은 여러 가지 형태를 가질 수 있지만, 다음과 같은 구조가 일반적1. 단일 객체 응답{ "id": 1, "name": "John Doe", "email": "john@example.com"}2. 배열 응답[ { "id": 1, "name": "John Doe" }, { "id": 2, "name": "Jane Smith" }]3. 메타데이터 포함{ "data": [ { "id": 1, "name.. 공감수 0 댓글수 0 2025. 2. 12.
이미지 파일첨부 / 프로필 사진 이미지 파일 첨부 기능1. 구현 방법파일 입력 요소: HTML의 ****를 사용하여 이미지 파일만 선택할 수 있도록 제한파일 선택 및 상태 관리: 사용자가 파일을 선택하면 상태를 업데이트하여 선택된 파일을 저장미리보기 기능: 선택된 파일의 미리보기를 제공하기 위해 URL.createObjectURL 메서드를 사용합니다.파일 업로드 처리: FormData 객체를 사용하여 선택된 파일을 서버에 업로드 이미지와 함께 데이터를 보낼 때, 이미지가 아닌 항목들도 반드시 FormData로 보내야 함.2. 예시 코드import React, { useState, useRef } from 'react';import axios from 'axios';const FileUpload = () => { const [sel.. 공감수 0 댓글수 0 2025. 2. 11.
새로운 창으로 띄우기 const openChatInNewWindow = () => { window.open("/chat", "_blank", "width=600,height=400");};// 버튼 클릭 시 새로운 창 열기새 창으로 채팅 열기 공감수 0 댓글수 0 2025. 2. 11.
리액트 Hook 1. React 상태 (State)상태는 컴포넌트의 동적인 데이터를 관리하며, 상태가 변경되면 컴포넌트가 다시 렌더링됨.이 과정에서 React는 변경된 상태를 기반으로 새로운 UI를 계산한다.상태는 주로 다음과 같은 경우에 사용된다:사용자 입력 처리API 호출 결과 저장UI의 동적인 부분 관리상태 사용 예시import React, { useState } from 'react';const Counter = () => { const [count, setCount] = useState(0); // 상태 초기화 const increment = () => { setCount(count + 1); // 상태 변경 }; return ( 현재 카운트:.. 공감수 1 댓글수 0 2025. 1. 3.
Usestate useState는 React의 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리하는 데 사용됩니다.상태를 추가하고 업데이트할 수 있는 간편한 방법을 제공합니다.1. 기본 개념상태(State): 컴포넌트의 동적인 데이터를 관리하며, 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.Hook: React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서 상태 및 생명주기 기능을 사용할 수 있게 해줍니다.2. 사용법useState를 사용하려면 React에서 임포트해야 하며, 다음과 같은 형태로 사용합니다.import React, { useState } from 'react';const MyComponent = () => { const [state, setState] = useState(initialValue).. 공감수 0 댓글수 0 2025. 1. 3.
index.js 파일의 역할 파일 구조/src └── /components ├── DetailPage.js ├── AnotherComponent.js └── index.js DetailPage.js// DetailPage.jsconst DetailPage = () => { return Detail Page Content;};export default DetailPage; 1. index.js를 사용하는 경우 index.js// components/index.jsexport { default as DetailPage } from './DetailPage';export { default as AnotherComponent } from './AnotherComponent';index.js의 역할폴더의 기본 .. 공감수 0 댓글수 0 2024. 12. 17.
JSON SERVER 📍 아직 백엔드가 없는 경우 - json serversudo npm install -g json-server [javaScript] 프론트엔드 가상 서버 json-server 사용법 [javaScript] 프론트엔드 가상 서버 json-server 사용법가상 웹서버 json-server 사용방법velog.io 💡 json 파일이어야 됨 ~.json 💡 json 형식 데이터 보기 명령json-server --watch ./src/data.json --port 3003 💡data.json 파일 public 폴더에 두어야함 !→1. 정적 파일 제공정적 파일: React 애플리케이션에서 public 폴더에 있는 파일들은 웹 서버가 정적으로 제공하는 파일입니다. 즉, 사용자가 요청할 때 서버가 .. 공감수 0 댓글수 0 2024. 10. 25.
API 📍API의 주요 개념API(응용 프로그램 프로그래밍 인터페이스, Application Programming Interface)소프트웨어 애플리케이션 간의 상호작용을 위한 규칙과 프로토콜을 정의하는 것📍API의 주요 개념1. 인터페이스: API는 두 개의 소프트웨어 시스템이 서로 통신할 수 있도록 해주는 중간 역할예를 들어, 웹 애플리케이션이 데이터베이스와 상호작용할 때 API를 사용 2. 데이터 형식: API는 데이터를 주고받기 위해 여러 형식을 사용JSON은 그 중 하나로, 가볍고 읽기 쉬운 데이터 형식입니다. API는 JSON 외에도 XML, YAML 등의 형식을 사용 가능 3. HTTP 요청: 웹 API는 일반적으로 HTTP 프로토콜을 사용하여 요청과 응답을 처리클라이언트(예: 웹 브라우저 또.. 공감수 4 댓글수 0 2024. 10. 25.
아이콘 이용 npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons#필요한 type의 아이콘들만 골라서 설치 가능.# Free icons styles# 채워진 아이콘 종류로 사용yarn add @fortawesome/free-solid-svg-icons# 라인으로 된 아이콘 사용.yarn add @fortawesome/free-regular-svg-icons# 브랜드 로고 등의 종류 아이콘 사용.yarn add fortawesome/free-brands-svg-icons출처: [클로리셔 작은 공간:티스토리]📍importimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'.. 공감수 0 댓글수 0 2024. 9. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.