전체 글 (77) 썸네일형 리스트형 [데이터베이스] One-to-Many와 Many-to-Many 관계 1. One-to-Many 관계 (1:N 관계)One-to-Many 관계는 하나의 엔티티가 여러 개의 다른 엔티티와 연결될 수 있는 관계를 말합니다. 이 관계에서 "하나"에 해당하는 엔티티는 "다수"에 해당하는 엔티티의 부모 역할을 하며, "다수"는 자식 엔티티로 볼 수 있습니다.1.1 주요 특징단방향성: 부모에서 자식으로의 명확한 방향성을 가집니다참조 무결성: 자식 레코드는 반드시 유효한 부모 레코드를 참조해야 합니다CASCADE 동작: 부모 레코드 삭제 시 자식 레코드 처리 방식을 정의할 수 있습니다1.2 예시와 구현학교-학생 관계:하나의 학교(One)는 여러 명의 학생(Many)을 가질 수 있습니다반대로, 하나의 학생은 단일 학교에만 속합니다CREATE TABLE School ( id INT .. [React]React useActionState Hook에 대해 알아보기 소개useActionState는 React 18.3.1에서 도입된 새로운 Hook으로, form 액션을 기반으로 상태를 효율적으로 관리할 수 있게 해줍니다. 이 Hook은 React 서버 컴포넌트를 지원하는 프레임워크에서 사용할 때 가장 큰 이점을 얻을 수 있습니다.참고: React Canary 버전에서는 이 Hook이 React DOM에 포함되어 있습니다. 기본 사용법1. Hook 초기화useActionState는 두 가지 매개변수를 받습니다:상태를 업데이트하는 함수초기 상태값"use client";import { useActionState } from "react";const [state, formAction] = useActionState( (previousState, formData) => { .. [nuqs 라이브러리] Nuqs 라이브러리 가이드: URL 쿼리 파라미터 관리와 최적화 Nuqs 라이브러리로 Next.js에서 URL 쿼리 파라미터를 효율적으로 관리하기Nuqs는 Next.js 애플리케이션에서 URL 쿼리 파라미터를 더 쉽고 타입 세이프하게 관리할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 URL 기반 상태 관리를 간소화하고, 타입스크립트를 통해 안정성과 생산성을 높일 수 있는 강력한 도구입니다. Nuqs의 주요 장점쿼리 파라미터가 많은 페이지에서 유용필터링이나 정렬 기능이 있는 목록 페이지복잡한 검색 기능이 필요한 페이지여러 상태값을 URL에 저장해야 하는 경우주요 기능타입스크립트 지원으로 타입 안정성 제공URL 쿼리 파라미터를 React 상태처럼 사용 가능URL 업데이트 자동 처리쿼리 파라미터의 파싱 및 직렬화 자동화Nuqs 사용법1. App Router에서 .. [회고] 다사다난 했던 2024년도 회고 2024년은 개발자로서 새로운 도전과 변화의 해였습니다. AI 자막 서비스 개발부터 이커머스 도메인 탐구까지, 다양한 경험을 통해 성장할 수 있었던 의미 있는 시간이었습니다. KPT 방식으로 한 해를 돌아보며, 앞으로의 성장 방향을 정리해보고자 합니다.유지하고 싶은 것들 (Keep)2024년은 개발 프로세스와 기술적 성장 측면에서 여러 의미 있는 성과를 이룬 한 해였습니다.1. 체계적인 개발 관리 도입올해는 WBS(Work Breakdown Structure)를 활용해 개발 일정 관리를 체계화했습니다. 이를 통해 프로젝트 진행 상황을 더욱 명확히 파악하고 관리할 수 있었으며, 협업 효율성을 크게 높일 수 있었습니다.또한 FSD(Feature-Sliced Design) 폴더 구조를 도입하여 코드 관리 방식.. 가챠권 소모 로직과 공정한 랜덤 확률 시스템 구현: 사용자 재방문율 20% 향상 가챠 시스템은 재미와 보상을 통해 사용자들의 참여를 극대화하는 강력한 기능입니다. 이번 글에서는 가챠권 소모 로직과 공정한 랜덤 확률 시스템을 어떻게 구현했는지, 그리고 이를 통해 사용자 재방문율을 20% 향상시킨 경험을 공유합니다. 가챠권 소모 로직 구현가챠 시스템을 만들기 위해 가장 먼저 가챠권 소모와 유효성 검사를 처리하는 로직이 필요했습니다. 1. 가챠권 보유 여부 확인사용자가 가챠를 실행하기 전, 현재 보유한 가챠권이 있는지 확인하는 과정이 필요했습니다. 만약 사용자가 가챠권을 보유하지 않았다면, 안내 모달을 띄워 가챠 진행을 막습니다.//가챠의 갯수가 없으면 안내모달 띄우기 {unusedGachas.length === 0 && !result && ( )} 2... [Tailwind] tailwind에서 cn을 사용하는 이유 Tailwind CSS의 cn() 유틸리티 함수는 조건부 클래스 이름을 쉽게 결합하고 관리할 수 있게 해주는 중요한 도구입니다. 주요 이유들을 설명드리겠습니다. 1. 조건부 클래스 처리의 간소화 cn() 함수는 조건부로 클래스를 적용하는 과정을 매우 간결하고 가독성 있게 만듭니다.cn("base-class", isActive && "active-class", isDisabled && "disabled-class") 2. 다양한 타입의 입력 처리 cn() 함수는 문자열, 객체, 배열 등 다양한 형태의 입력을 유연하게 처리할 수 있습니다. 이는 복잡한 조건부 스타일링을 간단하게 만들어줍니다.3. 타입스크립트 및 IDE 지원 대부분의 cn() 구현은 타입스크립트와 잘 호환되어 타입 체킹과 자동완성.. [테오스프린트] 테오스프린트 18기를 시작하며 테오스프린트, 설렘과 도전의 시작 드디어 제가 테오스프린트에 참가하게 되었어요! 😊 이번 기수는 오랜만에 진행되는 만큼 참가 인원이 더욱 많았다고 합니다. 처음엔 설레는 마음이 컸지만, 협업에 대한 기대와 함께 살짝의 걱정도 있었어요. 그래도 좋은 인연들과 함께 즐거운 시간을 만들어가길 기대하고 있습니다. 참가 전에 받은 첫 번째 미션은 프로젝트 아이디어를 구상해오는 것이었는데요. 저는 가구 배치 시뮬레이터 사이트, SweetHome을 제안했습니다.(아쉽게도 준결승까지만 올라갔지만... 여기에서 아이디어를 정리해 공유해봅니다!) SweetHome은 가구 배치를 쉽고 직관적으로 도와주는 가구 배치 시뮬레이터 사이트입니다.이사 준비나 인테리어를 고민할 때, '이 가구가 내 방에 어울릴까?' 망설였던 적 있.. [TypeScript] Props를 선언할 때 type과 interface 중에 어떤 것을 사용할까? TypeScript에서 Props를 정의할 때 interface와 type 사이의 선택은 프로젝트를 시작하기 전 규칙을 잡아나아가는 과정에서 흔히 고민되는 주제입니다. 저는 확장성 있게 사용하려고 하면 interface를 사용하고 type은 변경사항이 없는 상황에서 사용했습니다. 이 두 방식 모두 타입을 정의하는 데 사용될 수 있지만, 그 미묘한 차이점과 각각의 장단점을 명확히 이해하는 것은 코드의 유연성과 확장성을 높이는 데 중요합니다. 이 글에서는 interface와 type의 근본적인 차이점을 깊이 있게 탐구하고, 실무에서 어떤 상황에 각각을 사용하는 것이 적절한지 비교해보겠습니다.Interface vs Type: 기본적인 차이점Interface객체 형태의 타입을 정의하는 데 주로 사용됩니다.선언 .. 이전 1 2 3 4 5 6 ··· 10 다음 목록 더보기
