본문 바로가기

분류 전체보기97

[서버 기초] Primary Key와 Foreign Key, 뭐가 다른데? 💡 “회원 정보는 ‘users’에 있고, 주문 정보는 ‘orders’에 있잖아… 어떻게 연결하지?”데이터베이스를 설계할 때 자주 등장하는 상황:회원 데이터는 users 테이블에 있고주문 데이터는 orders 테이블에 있어요.“그럼 이 주문이 누구의 주문인지 어떻게 알 수 있죠?”이럴 때 사용하는 게 바로 Primary Key(PK)와 Foreign Key(FK)입니다!🔑 Primary Key란?Primary Key (기본키)는테이블에서 각 행(row)을 고유하게 식별하는 열(column)입니다.📌 특징:중복 ❌NULL ❌보통 id, user_id, order_id 형태예시:users 테이블+----+----------+| id | name |+----+----------+| 1 | Alic.. 2025. 5. 15.
[HTML] input 입력창에서 영문 대문자만 입력받는 법 (pattern 속성 활용) 💡 영어 대문자만 입력받는 입력창을 만들고 싶다면?회원가입 시 닉네임을 영어 대문자만 받는다거나, 코드 입력란을 제한할 때input 박스에 영문 대문자만 입력되도록 설정할 수 있습니다.이럴 때는 HTML의 pattern 속성을 활용하면 간단하게 제한이 가능합니다.🛠️ 영문 대문자만 입력 제한: 코드 예제와 설명✅ 기본 예제 (pattern 활용) 제출✅ 위 코드에서:pattern="[A-Z]+" 👉 영문 대문자만 허용 (A부터 Z까지)+ 👉 하나 이상 입력해야 함title="대문자만 입력하세요" 👉 잘못 입력 시 나오는 안내 메시지🎯 포인트 설명pattern 속성은 정규식(Regular Expression)을 사용pattern="[A-Z]+": A부터 Z까지 대문자만 허용소문자, 숫자, .. 2025. 5. 15.
[서버 기초] Webhook이란? API랑 뭐가 다른 건데? 💡 “결제 완료되면 바로 알림 오던데, 그건 어떻게 되는 거야?”우리가 자주 사용하는 서비스들:카카오페이 결제 완료 → 우리 서버로 알림 도착깃허브에 푸시 → 디스코드에 메시지 자동 전송“이거 누가 요청한 거지? 우리가 요청한 것도 아닌데 자동으로 알림이 와요!”그 비밀이 바로 Webhook(웹훅)입니다.오늘은 API와의 차이를 중심으로Webhook을 알기 쉽게 정리해드릴게요 😊🌐 API란?API(Application Programming Interface)는우리가 서버에 요청해서 데이터를 가져오거나 저장하는 방식입니다. ✅ 우리가 먼저 요청!예시:GET /products → 상품 목록 가져오기POST /orders → 주문 요청📡 Webhook이란?Webhook(웹훅)은상대 서버가 우리 서버에게.. 2025. 5. 14.
[HTML] input 입력창에서 숫자만 입력받는 법 (type="number" 활용) 💡 숫자만 입력받는 입력창을 만들고 싶다면?전화번호, 나이, 금액 입력란 등에서는문자가 아닌 숫자만 입력받게 제한해야 할 때가 많아요.이럴 때 HTML input 태그의 type="number" 속성을 사용하면 간단하게 숫자만 입력받을 수 있습니다.🛠️ 숫자만 입력받는 입력창: 코드 예제와 설명✅ 기본 예제 (type="number")✅ 위 코드처럼 type="number"를 사용하면스마트폰에서는 숫자 키패드가 자동으로 나오고,영문·특수문자는 입력되지 않습니다.🎯 포인트 설명type="number" 👉 숫자만 입력 가능기본적으로 양수, 음수, 소수점까지 입력 가능문자 입력 시 자동으로 막지는 않지만, submit 시 validation 발생모바일 환경에서는 숫자 키패드 제공 → UX 향상!⚡ 최소.. 2025. 5. 14.
[서버 기초] JSON과 Form Data, 뭐가 다른 거야? 💡 “프론트에서 백엔드로 데이터를 보낼 때, 어떤 형식을 써야 해요?”프론트엔드에서 서버에 요청을 보낼 때,두 가지 방식 많이 보셨죠?Content-Type: application/jsonContent-Type: multipart/form-data“둘 다 데이터 보내는 건데, 왜 방식이 다르고 언제 뭘 써야 하는 거지?”오늘은 JSON과 Form Data 차이를 완전 깔끔하게 정리해드릴게요! 😊📦 JSON이란?JSON (JavaScript Object Notation)은데이터를 객체 형태로 주고받는 가장 일반적인 형식입니다. 📌 특징:가볍고 읽기 쉬움API 대부분이 JSON 기반서버에서 파싱하기 쉬움예시:{ "name": "Alice", "age": 25}HTTP 요청 예:Content-Typ.. 2025. 5. 13.
[HTML] input 입력창에 최대 글자수 제한하는 법 (maxlength 속성 활용) 💡 input 박스에 최대 몇 글자까지 입력할 수 있게 제한하고 싶다면?회원가입, 전화번호 입력, 닉네임 입력란 등에서는최대 글자수 제한을 두어야 하는 경우가 많아요.이럴 때는 maxlength 속성을 사용하면 간단하게 최대 입력 가능한 글자수를 설정할 수 있습니다.🛠️ 최대 글자수 제한: 코드 예제와 설명✅ 기본 예제 (maxlength 속성 사용)✅ 위 코드처럼 maxlength="10"을 설정하면 최대 10글자까지만 입력 가능합니다.추가 설정 없이 HTML만으로 바로 적용됩니다.🎯 포인트 설명maxlength="숫자" 👉 입력 가능한 최대 글자 수input, textarea 모두 사용 가능숫자, 문자, 특수기호 포함해서 한 글자 = 1로 계산됨(한글도 글자 단위로 1)⚡ textarea에 적.. 2025. 5. 13.
반응형

티스토리툴바