<
728x90
반응형

분류 전체보기 83

VS Code Copilot Agent와 Figma MCP 연결 가이드

VS Code Copilot Agent와 Figma MCP 연결 가이드개요이 글에서는 VS Code Copilot Agent를 Figma MCP(Model Context Protocol)와 연결하는 방법을 상세히 설명합니다. 대부분의 자료가 Cursor 기반으로 작성되어 있지만, VS Code Copilot을 주로 사용하는 개발자를 위해 해당 환경에서의 설정 방법을 다룹니다. 관련 정보가 제한적이어서 직접 시행착오를 거치며 성공한 방법을 공유합니다.테스트 환경OS: Windows 11Node.js: v22.17.0VS Code: v1.102.2Figma API Token: 필수 (Personal Access Token)참고: MCP(Model Context Protocol)는 Anthropic에서 개발한..

카테고리 없음 2025.07.29

certbot 인증서 발급 방법

Certbot 인증서 발급 및 관리 Cheat SheetCertbot은 Let's Encrypt를 통해 무료 SSL/TLS 인증서를 발급받고 관리하는 데 사용되는 도구입니다. 웹 서비스의 보안을 강화하고 사용자에게 신뢰를 제공하는 데 필수적입니다.1. Certbot 설치대부분의 리눅스 배포판에서 Certbot은 패키지 관리자를 통해 쉽게 설치할 수 있습니다.Ubuntu/Debian: Bash sudo snap install core sudo snap refresh core sudo snap install --classic certbot sudo ln -s /snap/bin/certbot /usr/bin/certbot근거 자료: Certbot 공식 문서 (https://certbot.eff.org..

카테고리 없음 2025.07.24

pm2 cheat sheet

PM2는 Node.js 애플리케이션의 프로세스를 관리하고, 서버가 예기치 않게 종료되었을 때 자동으로 재시작해주며, 부하 분산을 위한 클러스터링, 로그 관리 등 다양한 편의 기능을 제공합니다. Master께서 개발 중인 서비스를 안정적으로 운영하고, 중단 없는 서비스를 지향하신다면 PM2는 필수적인 도구라고 할 수 있습니다.PM2로 Node.js Express 서버 실행하기 (Cheat Sheet)PM2는 먼저 npm이나 yarn을 통해 글로벌로 설치해야 합니다.npm install pm2 -g# 또는yarn global add pm2기본 명령어 (Basic Commands)명령어설명pm2 start [app.js]app.js 파일을 실행하여 새로운 프로세스를 시작합니다.pm2 start [app.js]..

카테고리 없음 2025.07.24

NGINX 서버 제어 명령어 (Cheat Sheet)

NGINX 명령어는 주로 nginx 실행 파일 자체를 이용하거나, systemd를 관리하는 systemctl 명령어를 통해 실행합니다. 일반적으로 systemctl 사용이 권장됩니다.systemctl 사용 (권장 방식)이 명령어들은 sudo 권한이 필요합니다. Ubuntu와 같은 최신 리눅스 배포판의 표준 방식입니다.명령어설명sudo systemctl start nginxNGINX 서비스를 시작합니다.sudo systemctl stop nginxNGINX 서비스를 중지합니다.sudo systemctl restart nginxNGINX 서비스를 재시작합니다. (강제 종료 후 재시작)sudo systemctl reload nginxNGINX 설정을 다시 불러옵니다. (서비스 중단 없음)sudo systemc..

카테고리 없음 2025.07.24

[react] useRef 사용 못할 때, createRef

문제 상황함수 안에서 다음과 같이 코드를 작성 - "return { ...task, isEditting: true, ref: useRef() };".useRef를 직접 map 내부에서 호출하면 에러가 남1. 문제의 원인1-1. React Hook 규칙 위반React의 공식 규칙(React Hooks 규칙, 공식문서)에 따르면,Hook(예: useRef, useState, useEffect 등)은 컴포넌트 최상위(혹은 커스텀 Hook)에서만 호출해야 하며,조건문, 반복문, 함수 내부 등에서 호출하면 안 됩니다.master의 코드에서 prevList.map(task => { ... return { ...task, isEditting: true, ref: useRef() }; // 처럼 map(반복문) ..

문제해결 2025.07.04

[vite/react/typescript] 프로젝트에 절대경로 적용하기

개요vite/react/typescript 프로젝트에 절대경로를 적용하면 다음 사진과 같이 절대경로를 이용한 것과 같이, 특정 폴더를 기준으로 다른 파일을 import할 수 있다. 정확한 절대 경로의 정의는 아니지만, 해당 글에서는 다음 사진과 같은 경로를 '절대경로'라고 지칭하겠다.상대경로를 사용하면 좋기는 하지만, 여러 서로 다른 위치의 파일을 import하는 경우엔 각 파일이 위치한 경로에 따라 같은 파일이라도 경로가 다르게 적힐 수 있다.프로젝트에 절대 경로를 적용하여 이를 단순화하자.해당 글은 여러 다른 react 절대경로 글을 보고, 이것만 봐도 성공할 수 있도록 작성된 글이다. 명시된 버전에서는 따로 오류가 나지 않을 뿐더러, 성공적으로 절대경로를 적용할 수 있을 것이다.환경작성일: 2025..

문제해결 2025.06.26

VSCode 미니맵(Minimap) 활용하기: 긴 코드도 한눈에 파악하는 비법

코드를 작성하다 보면 파일이 길어져 어느 부분이 어떤 기능을 담당하는지 찾기 어려울 때가 있습니다. VSCode의 미니맵 기능을 효과적으로 활용하면 이런 문제를 해결할 수 있습니다. 이 글에서는 미니맵을 더 유용하게 만드는 방법을 알아보겠습니다.왜 미니맵이 중요할까요?VSCode를 사용하는 개발자라면 대부분 화면 오른쪽에 있는 미니맵 기능을 활용하고 있을 것입니다. 미니맵은 코드의 전체적인 구조를 한눈에 보여주는 역할을 합니다. 하지만 코드가 길어질수록 미니맵만으로는 어느 부분이 어떤 기능을 하는지 파악하기 어려워집니다.다행히도 VSCode는 미니맵에 텍스트를 표시할 수 있는 기능을 제공합니다. 이 기능을 활용하면 코드의 특정 영역이 어떤 기능을 담당하는지 한눈에 파악할 수 있게 됩니다.미니맵에 텍스트 ..

[web] 성적 예상 등수 계산기 개발 회고

성적 예상 등수 계산기시험을 보고 나서 평균, 표준편차, 총원, 내 점수를 입력하면 정규분포 식을 이용해 해당 점수가 몇등일지 예상 등수, 예상 학점을 알려 주는 프로그램프로그램 데모 사진, 이런 식으로 표시된다.링크 : https://gpa-calc.daybreaker42.com/배운 점확률과 통계 수업에서 pdf, cdf에 대해 배웠는데, 해당 프로젝트에서 정규분포를 사용할 때 이 식이 사용될 줄은 몰랐다.normalPDF, normalCDF, erf, normalInverseCDF 이렇게 4개의 함수가 대표적으로 사용되었으며, 해당 함수 각각의 기능은 다음과 같다.normalPDF : x, mean(평균), stddev(표준분포)를 이용해 현재 점수가 전체 구간 중 얼마정도를 차지하는지 알려준다.확..

개인 프로젝트 2025.05.02

sudo systemctl reload nginx와 restart nginx의 차이점

sudo systemctl reload nginx와 sudo systemctl restart nginx의 차이점안녕하세요, 이번 글에서는 AI가 설명한 sudo systemctl reload nginx와 sudo systemctl restart nginx 명령어의 차이점에 대해 설명해 드리겠습니다.두 명령어의 핵심 차이sudo systemctl reload nginx:설정 파일만 다시 읽어 적용합니다.기존 연결은 유지하면서 새 연결에만 새 설정이 적용됩니다.서버가 중단되지 않습니다(무중단).sudo systemctl restart nginx:Nginx 서버를 완전히 중지했다가 다시 시작합니다.모든 연결이 끊어집니다.서버가 잠시 중단됩니다(중단 발생).기술적 배경Nginx 공식 문서에 따르면, reload..

카테고리 없음 2025.04.10
728x90
반응형