자주 사용하는 SQL 코드 덩어리를 저장해두고 필요할 때마다 호출하여 사용할 수 있는 기능입니다. 프로그래밍의 함수와 비슷한 개념입니다.DBeaver에서 생성:1\. 데이터베이스의 Procedures 메뉴에서 우클릭2\. 새로운 Procedure 생성 선택3\. sou

정규화된 데이터베이스에서는 데이터가 여러 테이블에 분산되어 있어 관련 정보를 함께 조회해야 하는 경우가 많습니다.예시 테이블 구조program 테이블teacher 테이블조건 없이 여러 테이블을 조회하면 카르테시안 곱(Cartesian Product)이 발생합니다:CRO

테이블을 만들 때는 컬럼명과 데이터 타입을 지정해야 합니다.기본값 설정데이터가 입력되지 않을 때 자동으로 채워질 기본값을 설정할 수 있습니다.주의사항: 이미 문자 데이터가 있는 컬럼을 숫자 타입으로 변경하는 것은 불가능해당 컬럼에 데이터를 반드시 입력해야 함빈 값으로

SELECT 쿼리 안에 다른 SELECT 쿼리를 넣는 문법으로, 복잡한 조건을 한 번에 처리할 수 있게 해줍니다.기본 예제: 평균보다 높은 사용금액 조회괄호 필수: 서브쿼리는 반드시 ( ) 괄호로 감싸야 함단일 값 반환: 대부분의 경우 하나의 값만 반환해야 함데이터 위

특정 단어가 포함된 데이터를 검색할 때 사용하는 문법입니다.% (퍼센트) - 0개 이상의 아무 문자\_ (언더스코어) - 정확히 1개의 아무 문자성능 저하: % 기호를 많이 사용하면 인덱스 활용이 어려워 속도가 느려질 수 있음CHAR 타입: 고정 길이로 공백이 자동 추

방법 1: 설치 프로그램 사용 (권장)1\. https://dev.mysql.com/downloads/mysql/ 접속2\. MySQL Server Community Edition macOS 버전 다운로드M1 이상 프로세서: ARM 버전 선택Intel 프로세서

기본 흐름1\. 사용자가 메시지 작성 후 전송2\. 서버가 메시지를 받아서 같은 채팅방의 다른 사용자들에게 전달3\. 모든 사용자가 실시간으로 메시지 확인Room 개념 활용전체 사용자가 아닌 특정 채팅방(Room) 사용자들에게만 메시지 전송채팅방별로 독립적인 대화 공간

Node.js 서버 생성설치 과정1\. Node.js 설치2\. 작업폴더 생성 후 에디터로 오픈3\. server.js 파일 생성4\. 터미널에서 npm init -y 입력5\. npm install express 입력6\. nodemon server.js 또는 nod

기본 흐름1\. 검색 UI 생성 → 사용자가 검색어 입력2\. 서버에서 DB 검색 → 검색어가 포함된 게시물 조회3\. 결과를 EJS로 전송 → 검색 결과 페이지 표시HTML 구조CSS 스타일링JavaScript로 검색 요청location.href: 페이지 이동과 동시

기본 개념많은 데이터를 여러 페이지로 나누어 보여주는 기능DB 부담과 브라우저 성능 최적화를 위해 필요URL 구조 설계기본 구현 (하드코딩)URL 파라미터 활용MongoDB 쿼리 메소드.limit(5) : 최대 5개 문서만 가져오기.skip(5) : 앞의 5개 문서 건

JavaScript에서 사용하는 조건부 연산자를 TypeScript 타입에서도 활용 가능합니다.핵심: extends 키워드로 조건을 만들고, 삼항연산자로 결과 타입을 지정합니다.조건부 타입에서 타입을 추출하여 변수로 사용할 수 있는 키워드입니다.참고: ReturnTyp

핵심: 컴포넌트 파일은 .tsx 확장자 사용 (JSX 문법 지원)배열의 각 위치별로 정확한 타입 지정중앙 집중식 state 관리 - props 없이도 state 공유 가능안전한 state 수정 - reducer 함수로 수정 방법을 미리 정의하여 버그 방지파일 확장자:

a.ts (내보내는 파일)b.ts (가져오는 파일)핵심 규칙:export: 다른 파일에서 사용할 수 있도록 내보내기import: 다른 파일에서 내보낸 것을 가져오기파일 경로는 ./로 시작 (현재 경로).ts 확장자는 생략a.tsb.ts로컬 타입: export를 붙이지

클래스 속성을 어디서든 접근하고 수정 가능하게 만듦기본값이므로 생략해도 동일하게 작동클래스 내부에서만 접근하고 수정 가능자식 객체에서도 접근 불가능외부에서 private 속성을 수정하려면 클래스 내부에 함수를 만들어 간접 접근활용법: 중요한 데이터를 실수로 수정하는 것

1. && 연산자를 활용한 null/undefined 처리 && 연산자의 특별한 기능 falsy 값: null, undefined, NaN, false 등 동작 원리: 첫 번째 falsy 값을 반환하거나, 모두 truthy면 마지막 값 반환 실무 활용법 2. in 연산자로 Object Narrowing 서로 다른 속성을 가진 객체들을 구분할 때 사용...

Type Aliases (타입 별칭) 기본 개념 긴 타입 정의를 변수처럼 저장하여 재사용하는 기능 기본 사용법 Object 타입 저장 readonly 속성 선택적 속성 (Optional Properties) 중요: color?는 color: string | undefined와 동일 Type Aliases 확장 Union으로 합치기 Inte...

PG사 연동: 직접 결제 처리 X, 전문 업체 활용결제 대행사: 다날, 이니시스, KG이니시스 등통합 솔루션: 포트원(구 아임포트) 활용 권장PG사 계약 및 테스트 계정 발급결제 라이브러리 연동결제 검증 로직 구현결제 내역 DB 저장환불 처리 로직에디터 라이브러리 선택

관리자 페이지(Admin Dashboard)는 웹 개발에서 자주 만들게 되는 실무 프로젝트입니다. Bootstrap 5와 Font Awesome 5를 활용하여 효율적으로 제작해보겠습니다.Bootstrap 5 CDN 또는 다운로드Font Awesome 5 아이콘 라이브러

참고: caniuse.com에서 정확한 호환성 정보 확인 가능CSS Grid는 격자(Grid) 기반 레이아웃 시스템으로, 복잡한 2차원 레이아웃을 쉽게 구현할 수 있습니다.position: sticky는 스크롤 기반 고정 요소를 만드는 속성입니다.일반 상태: 요소가 원

멀티 포맷 지원: 여러 형식을 제공하면 브라우저가 최적화된 포맷을 자동 선택HTML 비디오 삽입부터 고급 CSS 애니메이션까지 정리해보았습니다.