개발관련

개발관련

🎨 Figma 디자인을 코드로! Cursor IDE + MCP 연동 가이드

Figma에서 만든 UI를 자동으로 코드로 생성해주는 대 딸깍의 시대!Cursor IDE와 MCP를 활용해 Figma → React + Tailwind 코드 자동 생성 워크플로우를 구축해보자. ✅ 준비 사항Cursor IDEcursor.sh에서 설치Figma API KeyFigma → Settings → Personal Access Token 발급Node.jsMCP 서버 실행용1️⃣ Figma API Key 발급 https://www.figma.com/settings 접속 Personal Access Tokens에서 Generate new token 토큰 복사 후 안전하게 저장 3 Cursor IDE에 MCP 서버 연동MacOS / Linux{ "mcpServers": { "Framelin..

개발관련

how to vscode highlight HTML code syntax inside a string

javascript에서 html code를 string으로 제어하는 경우가 종종 있다. 이 경우에는 vscode가 일반적인 string으로 인식하기 때문에 code syntax highlight를 지원하지 않는다. 그래서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/raw 를 이용해서  const html = String.rawhtml`` 이런식으로 사용했었는데 찾아보니 vscod에 해당 기능을 지원해주는 플러그인이 있더라  https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html es6-string-html - V..

개발관련/리액트

레거시와의 조우 - web component로 바라본 react의 장점

최근 이직한 회사에서 php로 제작된 레거시 프로젝트를 담당하게 되었습니다. 프론트엔드 개발자 입장에서 백엔드 코드,DOM 조작 코드,HTML 코드 등이 뒤섞여있는 PHP 환경은 여간 불편한일이 아닙니다. 이를 개선하기 위해서 기존 프로젝트의 DOM 코드들을 web component로 적용하고 있습니다. 거의 매번 react로된 환경에서만 작업을 해오면서 생각할필요가 없어던 부분들을 고려해야 되다 보니 react의 장점이 느껴져서 둘을 비교하면서 정리해보겠습니다. 웹컴포넌트 web component const html = String.raw; class Modal extends HTMLElement { constructor() { super(); this.list = []; this.attachShado..

개발관련/프론트엔드 지식

next.js에서 next-auth를 사용한 oauth 구현하기 - next.js 14 app router

아래 버전에서 구현한 방법입니다. "next": "14.0.4", "next-auth": "^4.24.5" "typescript": "^5.3.2" Next.js 14에서 App Router를 사용하여 NextAuth로 OAuth 인증을 구현하는 과정은 몇 가지 핵심 단계를 포함합니다. 이 포스팅에서는 간단하게 이러한 단계들을 설명하겠습니다. 1. NextAuth 설치 및 설정 먼저, NextAuth를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행하세요: npm install next-auth # or yarn add next-auth 2. NextAuth 설정 파일 생성 nextauth 설정 파일을 app/api/auth/[...nextauth]/route.ts 디렉토리 내에 생성합니다. 이..

개발관련/자바스크립트 팁

javascript fetch response body가 null인 경우 처리 하는 방법.

fetch 함수를 사용하여 POST,GET 요청을 보내고 응답 본문(response body)이 null인 경우, response.json()을 호출하면 오류가 발생할 수 있습니다. 이는 response.json() 메소드가 유효한 JSON을 기대하기 때문입니다. 서버가 내용 없는 응답(예: 204 No Content 상태 코드)을 반환하는 경우, 이 메소드를 사용하기 전에 응답에 실제로 JSON 본문이 있는지 확인해야 합니다. 응답 본문이 null일 가능성이 있는 상황을 처리하는 방법은 다음과 같습니다: async function requestAPI() { try { const response = await fetch({APIURL}, { method: 'POST', headers: { 'Content..

개발관련

도커 볼륨 마운트 -v,--volume 컨테이너 경로를 호스트 경로 링크 마운트 하는 방법

도커 컨테이너에서 실행되는 애플리케이션의 로그를 기록하고, 이 로그를 호스트 시스템에 보존하고 싶을 때, 도커의 볼륨 마운트 기능을 사용할 수 있습니다. -v 또는 --volume 옵션을 사용하여 호스트와 컨테이너 간의 경로를 연결(마운트)함으로써, 컨테이너 내부에서 생성되는 로그 파일을 호스트 시스템의 지정된 경로에 저장할 수 있습니다. 이 방법을 사용하면 컨테이너를 삭제하거나 재시작해도 로그 파일이 유실되지 않습니다. 도커 볼륨 마운트를 사용한 로그 기록 방법 볼륨 마운트 옵션 구조: -v 또는 --volume 옵션을 사용할 때의 기본 구조는 다음과 같습니다.이 구조에서 는 호스트 시스템의 경로를, 는 컨테이너 내부의 경로를 의미합니다. docker run -v : 로그 파일을 위한 볼륨 마운트 예제..

개발관련

next.js + jenkins + harbor + docker 배포 구성하기

next.js 프로젝트 next.js app을 jenkins + harbor + docker 조합으로 ubuntu 서버에 배포 하는 설정입니다. jenkins에 설정된 github branch에 머지 되면 jenkins에서 shell이 실행되도록 합니다. next.js 앱을 빌드하고 도커 이미지로 빌드합니다. 1. Dockerfile 작성 docker 이미지로 빌드될 명령어 # 기본 이미지 설정 FROM node:18 # 작업 디렉토리 설정 WORKDIR /app # 의존성 파일 복사 COPY package.json yarn.lock ./ # 의존성 설치 RUN yarn install --frozen-lockfile # 애플리케이션 파일 복사 COPY . . # Next.js 빌드 RUN yarn bui..

개발관련/리액트

nextjs 14 app router에서 custom api 작성을 위한 Route Handlers

next.js 14 app router next.js 14에서는 기존 pages라는 폴더 기반의 라우팅에서 app router로 변경되었다. next.js 서버에서 custom api를 작성하는 방법에도 약간의 변화가 있기 때문에 이에 대해서 공유한다. export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} app/api/route.ts 위 예시를 보면 page.js나 layout.js처럼 파일 기반 route를 제공한다. app 폴더 내부에 동일한 방식으로 route.ts 파일을 작성하면된다. 동일하게 app폴더 내에서 파일 기반으로 동작하기 때문에 중첩을 피하기 위해서..