Turborepo + pnpm + Next.js 환경 구성기 (실전 예시: turborepo-pnpm-next-docker-letsgo) monorepo로 여러 앱과 공용 패키지를 빠르게 운영하는 법왜 이 조합인가 하나의 팀에서 여러 앱(웹, 어드민)을 개발하는데 생산성을 높이기 위해서 앱과 공용 패키지(UI, ESLint, Tailwind, TS 설정)을 한 저장소에서 관리하기 하기 위해서 Turborepo + pnpm 조합으로 모노레포을 구성합니다. Turborepo: 캐시/파이프라인으로 빌드 중복 제거pnpm: 빠른 설치 + 효율적인 의존성 관리Next.js(+Turbopack): 개발속도와 DX 강화실제 코드를 아래 링크에서 확인 가능합니다.[https://github.com/dosanHoon/t..
WebP vs SVG, 그리고 Next.js에서의 실전 활용법웹 성능 최적화를 고민한다면 "WebP와 SVG, 무엇을 언제 써야 할까?"라는 질문에 한 번쯤은 부딪히게 됩니다.이 포스팅에서는 WebP와 SVG의 차이점과 각각의 장단점, 그리고 Next.js에서의 활용 노하우를 간단하게 정리해봅니다.1. WebP와 SVG의 차이점WebPSVG포맷비트맵(이미지)벡터(수학적 도형, 코드 기반)확대/축소품질 저하 발생무한 확대/축소 가능(손실 無)용도사진, 썸네일, UI 배경 등아이콘, 로고, 일러스트, UI 도형 등용량매우 작음, 압축 효율 좋음단순 도형일 때 매우 작음애니메이션지원(제한적)CSS/JS로 자유로운 애니메이션스타일링불가CSS로 색상·크기·스타일 동적 제어브라우저 지원최신 브라우저 대부분대부분 지..
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..
📘 TIL – 2025.04.14"Ubuntu 서버에 Docker 기반 Nexus 설치 및 내부 레지스트리 구축하기"오늘은 온에어 에셋 프로젝트에서 사용할 사내 Docker Registry로 Nexus Repository OSS를 설치하고,이를 Docker 컨테이너로 구동하면서 겪은 시행착오들을 정리했다.✅ 시도한 작업들1. Ubuntu 서버에 Docker로 Nexus 설치sudo docker run -d \ --name nexus \ -p 8081:8081 \ -v /opt/nexus-data:/nexus-data \ sonatype/nexus3컨테이너 실행 직후 바로 종료되는 문제가 발생로그 확인 결과, 디렉토리 권한 부족으로 로그 디렉토리를 만들지 못하는 에러가 있었다:AccessDenie..
개발자 오디세이아라는 책을 읽었다. "오디세이아"는 트로이 전쟁 영웅 오디세우스(Odysseus)의 10년간에 걸친 귀향 모험담이다. 오디세우스는 트로이 전쟁에서 승리했기 때문이 아니라 10년이 걸린 귀향길 그 과정 속에서 겪는 일들을 통해서 영웅으로 거듭난다. 책 "개발자 오디세이아"는 개발자들을 위한 개발자의 경력을 오디세우스가 갖은 고초를 겪는 귀향길에 빗대서 이야기한다. 훌륭 한 개발자란 어떤 사람인가? 이 질문에 대한 정답은 없다. 이 질문에 대한 대답은 기술이라는 사소한(정말 기술은 사소한 부분이다) 분야로부터 시작하여 훌륭한 팀원, 조직원은 어떠해야 하는가로 이어질 수 있으며 결국 훌륭한 인간은 어떠해야 하는가?라는 인문학적 근본 질문으로 귀착되게 된다. 위 인용문처럼 "개발자 오디세..
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..
최근 이직한 회사에서 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": "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 디렉토리 내에 생성합니다. 이..
