Algorithm Cinema

Set 자료구조로 사이드바 UX 개선하기

예전 프로젝트에서 사용자 친화적인 사이드바(Sidebar)를 만들기 위해 다양한 UI/UX 개선을 적용했다. 진행하고 있는 AI TUTOR 프로젝트의 SIDEBAR의 UI/UX에도 개선이 필요했다. 1. Hovering을 하고 있지도 않은데, Hovering 시 바뀌는 스타일이 불필요하게 적용됨 2. toggling 반응속도가 느림 이때 쓸 수 있는 방법은 JavaScript의 Set 자료구조를 활용한 열림/접힘 상태 관리 최적화가 있었다. 이 문서는 해당 리팩토링 과정과 그 이유, 그리고 부수적인 UI 버그 해결 방법까지 총망라한 정리이다.1. 기존 사이드바 상태 관리 방식초기에는 각 폴더의 노트 리스트 열림 여부를 다음과 같이 관리했다:const [isNoteOpen, setIsNoteOpen] =..

백엔드에서 요구한 데이터 구조에 맞춘 API 타입 설계

"기존 백엔드에서 요구한 데이터 구조를 기반으로, 프론트엔드 협업을 위한 API 데이터 타입을 어떻게 정의하고 왜 그렇게 구성하는가?"스스로에게 정말 많이 던졌던 질문이다.한번 파헤쳐보자!1. 실제 백엔드에서 주는 /notices API 응답 구조HTTP Method: GETBody 없음 (GET 요청이기 때문에 일반적으로 body에 데이터를 담지 않음)모든 데이터는 query parameter로 전달됨{ "content": [ { "title": "[공지] ...", "date": "2025.04.08", "category": "career", "link": "https://..." } ], "pageable": { "pageNumber": 0,..

큰일난 상황우리 팀은 .env 파일이 Git 커밋 히스토리에 올라간 상황을 발견했다. 해당 파일은 민감한 환경변수 정보를 담고 있었고, 단순히 .gitignore 처리로는 과거 커밋 내역에서 제거되지 않기 때문에 근본적인 해결이 필요했다.결국 회의 결과 우리는 다음 명령어로 Git 히스토리를 완전히 재작성하게 된다:git filter-repo --path .env --invert-paths --force 이 명령은 .env가 포함된 모든 커밋을 히스토리에서 제거하고, 커밋 SHA를 전면 수정한다. 결과적으로 develop브랜치 (default branch) 는 전혀 다른 히스토리로 바뀌게 되었고, 기존의 어떤 브랜치와도 공통 조상을 가지지 않는 상태가 된다. 이때 유라님은 기존에 작업하던 커밋들을 로컬..

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..

이번 포스트에서는 Oracle DB를 기준으로 SQL 실습을 하며 겪은 여러 개념과 문제 해결 과정을 정리해보겠습니다..1. FOREIGN KEY와 INSERT 순서employee 테이블의 superssn은 같은 테이블의 ssn을 참조하는 외래키입니다. 이 경우 상사(superssn)가 될 사원의 데이터가 먼저 삽입되어 있어야 하며, 그렇지 않으면 다음과 같은 오류가 발생합니다:ORA-02291: integrity constraint violated - parent key not found해결 방법상사 레코드를 먼저 삽입한 뒤, 참조하는 레코드를 삽입INSERT 시 오류가 나더라도 전체를 무시하고 진행하면 이후에 수동 수정 필요 사실 베스트는, 나중에 제약사항을 추가하는것 (무결성 원칙 위배 가능성을 ..

팀장으로서의 후기나 포함 우리 팀원은 모두 다 해커톤은 처음이었다. 3일전부터 해커톤 준비하랴, 빌딩하랴 학교 수업에 집중을 잘 못했던 것 같다.내가 먼저 이야기를 꺼냈고 팀 빌딩을 내가했기에 팀장을 자연스레 맡았지만, 완벽한 팀장은 아니었어서 좀 미안한 마음이 들긴했다.해커톤이라는 짧고도 치열한 시간 속에서 팀을 이끄는 일은 결코 쉽지 않았다. 먼저, 주제는 지역사회의 활성화 방안이었다. 주제를 받고 우리의 기획 단계에선, 서로가 약간의 시간을 가져 서로의 생각을 공유했다. 다들 좋은 아이디어와 참신한 아이디어가 많이 나왔고, 나도 나만의 쭉쭉 하였다. 난 평상시에 사회문제에 매우 관심이 많고, 서울 초과밀화 현상, 지방도시의 소멸, 초고령화 사회와 같은 매우 심각한 문제를 인지하고 있었다. 그때나 지..

주제 : "지역사회의 활성화"1. 기획 발단DND 해커톤의 주제는 "지역사회의 활성화 방안" 이었다. 나는 프론트엔드 개발자 역할과 팀장의 역할을 동시에 맡았다.고령화 시대 속 지역사회와의 단절로 인해 고립되고 있는 독거노인의 삶. 우리가 주목한 문제는 '사회적 고립으로 인한 정서적·경제적 유동성의 정체'였다. 이를 해결하기 위해 우리는 노인과 청년을 연결하는 새로운 커뮤니티 매칭 플랫폼을 기획했다. 슬로건: "노인의 멈춰있는 엔진을 다시 구동시켜 사회에 유동성을 만든다" 2. 마켓 리서치고령 1인 가구 증가: 65세 이상 1인가구는 빠르게 증가하고 있으며, 2030년에는 전체 고령 인구의 절반 이상을 차지할 전망.독거노인의 우울감 증가: 통계청 발표에 따르면 독거노인의 42%가 고독감을 경험. 고독사가..