Algorithm Cinema

1. 목표 개요 전역 UI 컴포넌트(예: 온보딩 모달, 토스트, 로딩 스피너 등)를 Zustand를 통해 상태로 제어하는 건 잘 알려진 프론트엔드 개발론이다.실제 렌더링은 단일 위치에서만 구독하도록 구성하는 방식을 공부했으며, Next.js(App Router)와 Vite + React에서의 사용차이점도 비교해보았다. 실제 AITUTOR 서비스의 온보딩(튜토리얼) 모달을 사용자가 어디 페이지에 있든 전역적으로 컴포넌트를 렌더링해야하는 모달을 만들어렌더링하는 것이 목적이다.2. 상태 관리: Zustand store 예시Store 함수를 만들어, 전역 상태관리 스토어를 만든다.이 상태들을 사용하는 쪽에서는 store 함수를 마치 커스텀 훅처럼 사용하기에, zustand custom Hook이라고도 불린다. ..

개요진행하고 있는 MJS 프로젝트에서 내가 주장했던 버튼 컴포넌트를 atomic design 패턴에 따라Button.tsx, Button.type.ts, index.ts로 구성한다.또한 Barrel Export를 통해 외부에서 접근성과 재사용성을 높인다.이 구조로 디자이너와의 협업에서 나온 디자인을 프론트엔드 동료 개발자분들이 쉽게 분기된 컴포넌트를 사용할 수 있기를 바랬다.구성 구조src/components/atomic/Button/├── Button.tsx # 실제 UI 및 로직 구현├── Button.type.ts # 타입 정의├── index.ts # barrel export1. Button.type.tsvariant, size 등의 옵션을 타입으로 분리해 ..

1. 전체 구성 계층 (Spring MVC 구조 기준)개념 구조Controller클라이언트의 요청을 받아 처리 흐름을 제어서비스 계층을 호출해 필요한 데이터를 가공하고, View로 전달Service비즈니스 로직을 처리하는 계층Controller와 Repository 사이에서 데이터 흐름을 조율Repository (DAO)데이터베이스와 직접 통신하는 계층JPA를 통해 SQL과 매핑되는 메서드 작성 (예: findAll, save 등)Entity (Domain)데이터베이스 테이블과 1:1로 매핑되는 클래스주로 @Entity, @Table, @Id, @Column 등의 JPA 어노테이션으로 구성JSP (View)사용자가 실제로 보게 되는 화면Controller에서 받은 Model 데이터를 표현JSTL, EL(..

DDL (Data Definition Language)주요 명령어CREATE TABLE: 테이블 생성ALTER TABLE: 테이블 스키마(구조) 변경 (컬럼 추가/수정/삭제 등)DROP TABLE: 테이블 삭제 (스키마 + 데이터 완전 삭제)RENAME: 테이블 이름 변경TRUNCATE TABLE: 데이터만 삭제 (스키마 유지)COMMENT: 주석 달기 (테이블, 컬럼 설명)테이블 생성CREATE TABLE book ( id NUMBER, title VARCHAR2(100), author VARCHAR2(50));Subquery로 생성CREATE TABLE empsales ASSELECT * FROM empWHERE job = 'SALES';ALTER TABLE (테이블 구조 변경)컬럼 추가ALTE..