본문 바로가기

Web 프로그래밍210

클라우드 용어 온디맨드(on demand) 뜻 "온디맨드(On-Demand)"은 말 그대로 "요구하는 순간에 제공되는 방식"을 의미하며, 주로 클라우드 컴퓨팅이나 IT 서비스 요금제에서 사용되는 개념입니다. AWS나 Azure, Google Cloud 같은 클라우드 서비스에서 "온디맨드 요금제(On-Demand Pricing)"는 다음과 같은 뜻을 가집니다:🧾 온디맨드(On-Demand)의 정의✅ 일반적 의미사용자가 필요한 시점에 즉시 자원을 사용할 수 있고, 사용한 만큼만 시간 단위로 요금이 부과되는 방식.선불이나 장기 약정 없이도 사용할 수 있음.✅ 클라우드에서의 의미 (예: AWS EC2, RDS 등)서버 인스턴스, 데이터베이스 인스턴스를 실시간으로 생성해서 사용하고, 사용한 시간만큼 비용을 지불예) EC2 인스턴스를 3시간 사용했다면, 3시.. 2025. 4. 24.
React, nextjs 콘솔로그 모바일 브라우저에서 실시간으로 확인하는 방법 (콘솔 오버레이 구현하기)📱 모바일 웹 앱을 개발하다 보면, 모바일 브라우저에서 console.log() 출력값을 확인하는 것이 매우 불편합니다.특히 Android나 iOS 환경에서는 USB 디버깅 없이 로그를 보는 것이 어려운데요, 오늘은 React에서 콘솔 로그를 화면에 직접 출력해주는 오버레이 컴포넌트를 만드는 방법을 소개합니다.이 방법은 Next.js, React SPA 모두에 적용 가능하며, Chrome 개발자 도구 없이도 콘솔 로그를 쉽게 확인할 수 있습니다.✅ 콘솔 로그가 모바일에서 보이지 않는 이유console.log()는 기본적으로 브라우저 개발자 도구(DevTools) 콘솔에서만 확인할 수 있습니다.모바일 크롬에서는 콘솔을 볼 수 있는 DevTools UI가 없기 때문에 디버깅이 어렵습니다.chrome://insp.. 2025. 4. 22.
shadcn 프레임워크를 이용한 react next js 전체적인 폴더구조 Next.js (App Router)에서 app/page.tsx는 루트 URL(/)에 해당하는 페이지입니다.이 페이지에서 별도의 설정 없이도 app/layout.tsx에 정의된 Header, Footer, 그리고 ThemeProvider 등은 자동으로 적용됩니다.즉, layout.tsx는 상위 루트 레이아웃이고, page.tsx는 그 안에 children으로 포함되므로, page.tsx는 오직 메인 콘텐츠만 넣어주면 됩니다.✅ 최종 동작 흐름layout.tsx └── └── {children} ← 여기로 page.tsx의 컴포넌트가 렌더링됨 └── ✅ app/page.tsx 예시 (레이아웃 자동 포함됨)import Container from '@/components/layout/Container'imp.. 2025. 4. 20.
두 개의 Object array 특정 키 값으로 Join 하는 방법 JavaScript에서 두 개의 객체 배열(Object Array)을 특정 키를 기준으로 join하려면 SQL의 JOIN처럼 직접 구현해야 합니다. JavaScript에는 기본적으로 SQL처럼 자동으로 JOIN해주는 기능이 없기 때문에, map, filter, find 또는 reduce 등의 메서드를 활용해서 수동으로 조합해야 합니다. 아래는 다양한 방법으로 inner join(교집합 형태)을 구현하는 예시입니다.✅ 예시 상황const users = [ { id: 1, name: '철수' }, { id: 2, name: '영희' }, { id: 3, name: '민수' }];const orders = [ { userId: 1, product: '노트북' }, { userId: 2, product.. 2025. 4. 15.
Nuxt, Next) Hydration completed but contains mismatches. 오류 해결방안 Nuxt에서 발생하는 "Hydration completed but contains mismatches." 오류는 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 서로 다를 때 나타나는 문제입니다.즉, SSR(Server Side Rendering) 과 클라이언트 렌더링(Client Side Rendering) 결과가 일치하지 않을 때 이 오류 메시지를 브라우저 콘솔에서 확인할 수 있습니다.이 문제를 해결하려면, SSR과 CSR의 출력이 왜 달라졌는지를 파악해야 하며, 일반적으로는 아래와 같은 원인들이 많습니다.💡 오류 메시지: Hydration completed but contains mismatches."Hydration completed but contains mismatches."N.. 2025. 4. 7.
htop 명령어 htop 명령어 설명 : 현재 프로세스 상태를 보기위한 명령어. 기본 명령어는 아니고 패키지를 따로 설치해야 한다. Linux 계열root@~# yum install htop unix 계열root@~# apt-get install htop  메모리, CPU 프로세스 등을 한눈에 확인이 가능하다. ( shift + h , t : 트리구조 보기 )root@~# htop 2024. 7. 23.