Algorithm Cinema

.env를 모르고 올렸을때의 대처 : Git Filter-Repo 이후 충돌 해결 및 복구 시나리오

큰일난 상황우리 팀은 .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 등의 옵션을 타입으로 분리해 ..

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

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

서비스 "할매야 놀자"슬로건노인의 멈춰있는 엔진을 가동시켜, 사회에 사회적 유동성을 부여한다.함께하는 동행, 이어지는 마음.동행으로 이어지는 세대 간 연결 플랫폼서비스 개요지역사회에 고립된 어르신들의 활동을 활성화시키고, 청년들과의 연결을 통해 사회적, 경제적 유동성을 만들어내는 플랫폼서비스 핵심 기능빙고 챌린지 기반 활동 플랫폼3x3 빙고판에 어르신 맞춤형 활동 과제를 제공 (예: 전화로 안부 인사, 산책하기 등)활동 완료 시 사진 업로드를 통해 인증줄을 완성하면 뱃지 제공, 세 줄 이상 완성 시 봉사 시간 신청 가능UI/UX 구성각 빙고칸은 활동 명과 함께 직관적인 아이콘 이미지 제공사진 업로드 후 1초 딜레이와 함께 성공 처리 및 빙고 모달 표시빙고 줄이 완성되면 초록색으로 표시 및 line-th..

해커톤 빌드업을 하면서 가장 고민되는 것 중 하나는 폴더 구조와 컴포넌트 분리 기준이었다.우리도 마찬가지로, 페이지와 컴포넌트를 어떻게 나누고 어떤 기준으로 디렉토리를 구성해야할까나 했다가 막상 하나씩 정리해 나가다 보니, 꽤 자연스럽게 구조가 잡히기 시작했다. 폴더 기본 구조src/├── app/│ ├── Input/│ │ └── page.tsx│ ├── login/│ │ └── page.tsx│ ├── main/│ │ └── page.tsx│ ├── globals.css│ ├── layout.tsx│ └── page.tsx├── assets/├── auth/├── components/│ ├── Button/│ ├── Icon/│ ├── Input/..

Tailwind CSS v4는 기존 버전과 비교해 글로벌 테마 설정과 컬러 시스템 적용이 매우 간결해졌습니다. 이 글에서는 디자이너와 협업하여 색상 시스템을 구축하고, 이를 Tailwind v4에서 얼마나 간단하게 반영할 수 있는지 소개합니다.개발환경은 next.js에서 진행합니다,핵심 포인트: @theme 블록만 신경 쓰면 된다v4에서는 테마 컬러를 global.css한 곳에서 정의합니다. v3에서는 tailwind.config.js를 다 깔아줘야했기에 정말 불편했습니다.그러나 v4부터는 global.css 내부에 디자이너님이 정해주신 색깔들을 주입만 하고, 실제 컴포넌트의 색깔에 그대로 적용만 시키면 끝입니다.@theme { --color-gray-50: #f9fafb; --color-gray..

1. 초벌 분리의 시작: 하나의 거대한 컴포넌트처음에는 TodoPage.tsx 내부에 상태 관리, 탭 UI, 입력 폼, 리스트 렌더링까지 모두 들어있는 구조였다. 작성 당시에는 직관적으로 빠르게 구현할 수 있었지만, 다음과 같은 문제점들이 눈에 띄었다.한 파일에 너무 많은 책임이 집중되어 있었다.컴포넌트 재사용이 어려웠다.테스트 및 유지보수가 어려워질 조짐이 보였다.따라서 다음과 같은 기준을 두고 리팩토링을 시작했다.2. 단계적 분리 전략2-1. Atomic 컴포넌트 분리공통적으로 쓰일 수 있는 Input과 Button을 components/atomic/ 디렉토리로 분리했다.components/ atomic/ Input.tsx Button.tsx이는 UI 재사용성과 일관된 스타일 적용을 위한..

자바스크립트는 단일 스레드 기반 언어지만, 웹 API와 이벤트 루프를 통해 비동기 처리를 지원합니다. 이 글에서는 Promise.then(), async/await, setTimeout() 등이 함께 혼재될 때의 실행 순서와 내부 구조를 이해하기 쉽게 정리합니다.1. JavaScript의 실행 환경 : 이벤트 루프 구조자바스크립트는 다음과 같은 실행 큐를 기반으로 동작합니다:Call Stack: 현재 실행 중인 코드Microtask Queue: 우선순위 높은 비동기 작업 → Promise.then(), await, queueMicrotask() 등Macrotask Queue: 일반적인 비동기 → setTimeout(), setInterval() 등실행 순서:동기 코드 (call stack) 먼저 실행Mi..