Nuxt4의 디렉토리 구조와 일부 설정 방식이 변경됐다. 환경은- Nuxt 4.x- Vuetify 4.x- vite-plugin-vuetify 2.x 1. 프로젝트 생성 npm create nuxt@latest my-appcd my-app 2. 패키지 설치 npm install vuetify @mdi/fontnpm install -D vite-plugin-vuetify 왜 이 세 개인가???- "vuetify" - 컴포넌트 본체- '@mdi/font' - 'mdi-' 아이콘 클래스를 제공하는 폰트 패키지, 없으면 아이콘이 텍스트로 깨진다.- "vite-plugin-vuetify" - Vite 빌드 레벨에서 Vuetify 컴포넌트를 자동 import하고 트리쉐이킹한다. devDependency로 설치하..

1. SCP 기본 사용법 (로컬에서 테스트)① 같은 디렉토리 내에서 파일 복사 테스트 (cp 명령어 활용)먼저, 일반적인 cp 명령어를 실행해 보자.cp source.txt destination.txtsource.txt → 복사할 원본 파일destination.txt → 새롭게 생성될 복사본🔹 이게 정상적으로 되면 scp도 문제없이 동작할 가능성이 높아.② scp를 사용하여 같은 로컬 내에서 파일 복사 (SCP 기본 동작 확인)일반적으로 scp는 원격 서버와의 파일 전송에 사용되지만, 같은 로컬에서도 테스트할 수 있어.scp source.txt destination.txtsource.txt → 복사할 파일destination.txt → 새 파일 (원래 scp는 원격 전송용이라, 로컬에서 이 방식은 잘 ..

Nginx에 도메인 등록하는 방법1. 도메인 구매 및 DNS 설정먼저, 원하는 도메인을 구매하고 DNS 설정을 해야 합니다. 보통 도메인 등록 업체(예: 가비아, GoDaddy, Namecheap)에서 구매할 수 있습니다.네임서버 설정도메인 등록 업체에서 네임서버(NS)를 설정해야 합니다. 만약 자체 서버를 운영하는 경우 클라우드플레어(Cloudflare) 등의 서비스를 이용할 수도 있습니다.A 레코드 및 CNAME 설정A 레코드: 도메인의 IP 주소를 설정합니다.예: billydev.shop -> 123.456.78.90CNAME 레코드: www.billydev.shop을 billydev.shop으로 연결합니다.예: www.billydev.shop -> billydev.shop2. Nginx 설치 및 ..

라즈베리파이에서 Docker를 사용할 때 매번 sudo를 붙이는 게 귀찮았던 적 있나요? 저도 docker ps나 docker-compose up 같은 명령어를 실행할 때마다 sudo를 입력하는 게 점점 짜증 나더라고요. 다행히 간단한 설정으로 이 번거로움을 없앨 수 있습니다. 바로 현재 사용자를 Docker 그룹에 추가하는 방법인데요, 단계별로 따라 하면 금방 해결됩니다. 함께 해볼까요?왜 sudo가 필요한 걸까?Docker는 기본적으로 루트 권한으로 실행되기 때문에, 일반 사용자는 명령어를 실행하려면 sudo를 붙여야 해요. 하지만 사용자를 docker 그룹에 추가하면 루트 권한을 직접 쓰지 않아도 Docker를 자유롭게 사용할 수 있습니다. 보안상 주의는 필요하지만, 개인 프로젝트나 로컬 환경에서는..

MongoDB의 aggregate는 여러 단계의 파이프라인을 사용하여 데이터를 처리하고 변환하는 강력한 기능입니다. 이를 통해 복잡한 쿼리, 그룹화, 필터링, 정렬 등을 수행할 수 있습니다.📌 aggregate 기본 구조db.collection.aggregate([ { 단계1 }, { 단계2 }, { 단계3 }, ...])각 단계는 데이터를 변환하는 역할을 하며, 다음 단계로 결과를 전달합니다.📌 주요 aggregate 연산자1. $match (필터링)특정 조건을 만족하는 문서만 선택합니다. find()와 비슷한 역할을 합니다.db.users.aggregate([ { $match: { age: { $gte: 18 } } } // 18세 이상만 선택])2. $group (그룹화)_id를 기준으..

Express.js에서의 에러 핸들링: 세 가지 접근 방식Express.js 애플리케이션에서 에러를 효과적으로 처리하는 것은 매우 중요합니다. 여기서는 세 가지 주요 에러 핸들링 접근 방식을 살펴보고, 각각의 장단점을 분석해 보겠습니다.1. Promise 기반 asyncHandler const asyncHandler = (fn) => (req, res, next) => { Promise.resolve(fn(req, res, next)).catch(next);}; 장점:동기 및 비동기 에러를 모두 캐치할 수 있습니다.모든 종류의 함수(동기/비동기)를 안전하게 처리할 수 있습니다.Promise로 래핑되어 일관된 에러 처리가 가능합니다.동작 원리:함수를 Promise로 감싸 실행합니다.에러 발생 시 catc..

MongoDB를 사용할 때, 특정 속성을 제외하고 데이터를 가져와야 하는 경우가 있습니다. 예를 들어, 사용자의 비밀번호나 내부적으로 사용되는 민감한 데이터를 클라이언트에 노출하지 않도록 해야 합니다. 이를 위해 Mongoose에서 .select() 메서드를 활용할 수 있습니다.기본적인 데이터 조회 코드다음과 같이 Content 컬렉션에서 모든 데이터를 조회하는 API를 만들 수 있습니다.app.get("/api/contents", async (req, res) => { try { const contents = await Content.find().lean(); res.status(200).json(contents); } catch (error) { console.error("콘텐츠 ..

🚀 React 퀴즈 컴포넌트 타이머 추가기: 의존성 배열과의 전쟁오늘은 React 컴포넌트에 타이머를 추가하며 마주친 ESLint 경고와 이를 해결한 과정을 공유합니다. 의존성 배열 관리의 중요성과 최적화 방법을 깊이 이해하게 된 경험을 글로 풀어봅니다.---1. 문제 발생: ESLint의 경고 메시지 📢React Hook useEffect has a missing dependency: 'handleButtonClick'.React Hook useCallback has missing dependencies: 'currentQuestion._id' and 'currentQuestion.correctAnswer'.🚨 상황 분석타이머를 추가한 직후, 위 경고가 나타났습니다.  원인은 간단했습니다.- us..

문제 개요React 컴포넌트에서 useRef([])를 사용하여 40개의 단어를 입력받는 폼을 만들었지만, 입력한 값이 화면에 반영되지 않는 문제가 발생했다.이 컴포넌트는 상위 컴포넌트의 옵션이 변경될 때마다 렌더링되지만, useRef를 이용해 생성한 HTML 요소는 업데이트되지 않았다.문제 분석🔹 현상페이지가 처음 렌더링될 때 useRef([])를 사용하여 40개의 단어 입력 필드를 초기화함.사용자가 입력 필드에 값을 입력하면 useRef의 배열이 변경됨.하지만 React는 useRef의 변경을 감지하지 않으므로, 입력값이 화면에 반영되지 않음.🔹 원인useRef는 값이 변경되어도 리렌더링을 트리거하지 않음.React의 상태 업데이트 메커니즘에서 useRef의 변경은 감지되지 않으므로 UI가 갱신되지..