Project Records 49

<2025 DND HACKERTON> 후기

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

<2025 DND 해커톤> Overview

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

<2025 DND 해커톤> 12시간 동안의 기획, 기능, 요약 그리고 근거

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

<2025 DND 해커톤> SETTING

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

Next.js X Tailwind CSS v4에서는 글로벌 CSS 설정이 얼마나 쉬워졌을까?

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

TODOMVC : 완성 후의 리팩토링

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

STT 라우팅과 비동기 처리 분리하기: 실전 리팩토링 사례

"2025년 5월 4일, 라우팅 흐름부터 API 처리까지, 실전 개발 중 맞닥뜨린 문제들과 그 해결 과정" ✨ 문제의 시작: 비동기 처리와 라우팅이 엉킨다처음엔 단순한 흐름이라고 생각했다. 기획자와 논의한 유저 플로우:사용자가 수업 영상 파일을 업로드하고 "다음" 버튼을 누른다.노트를 생성한다 (createNote).STT 변환을 시작한다 (createSTT).STT가 끝나면 다음 페이지로 router.push() 한다.다음 페이지에서 STT 결과를 기반으로 요약문을 생성한다.⚠️ 기존 코드 구조 (문제 있는 구조)const handleNoteNextBtn = async () => { const createdNote = await createNote(folderId, { title: noteName }..

타입스크립트(자바스크립트) 배열 반복(iteration) 메서드 정리

프론트엔드 개발에서 배열을 다룰 때 자주 사용하는 반복(iteration) 메서드들에 대해 정리해봅니다. map, filter, forEach, find, reduce 등은 모두 배열의 각 요소를 순회하며 무언가를 처리하는 함수형 도구입니다.✅ 1. map()배열의 각 요소를 **변형(transform)**하여 새로운 배열을 생성✅ 리턴값 필요: 각 요소를 어떻게 바꿀지 return 필수const numbers = [1, 2, 3];const doubled = numbers.map((n) => n * 2); // [2, 4, 6]원본 배열 유지됨JSX에서도 아주 자주 쓰임{todoList.map((todo) => ( {todo.text}))}✅ 2. filter()조건에 맞는 요소만 걸러내서 새 배열 ..

TypeScript의 객체 타입 지정에 편리한 내장 Record 유틸리티 타입

TypeScript에서는 객체의 타입을 명시할 때 보통 아래처럼 key-value 형태로 정의합니다:const user: { name: string; age: number } = { name: 'Alice', age: 30,};하지만 더 유연하고 깔끔하게 작성할 수 있는 유틸리티 타입이 있습니다. 그중 대표적인 것이 바로 **Record**입니다.Record란?"키가 K 타입이고, 값이 V 타입인 객체를 정의한다"는 의미입니다.Record 문자열 키와 문자열 값const colorMap: Record = { primary: 'blue', danger: 'red', success: 'green',}; 위는 아래와 동일한 의미를 가집니다.const colorMap: { [key: string]: s..

Tailwind 기반 버튼 컴포넌트 재활용하기

재활용을 왜하는가?React 프로젝트를 진행하다 보면 버튼과 같은 컴포넌트들을 반복해서 만들게 됩니다. 그때마다 className을 복붙하고 색깔을 바꾸다 보면 코드가 지저분해지고, 유지보수도 힘들어집니다. 이번 글에서는 Tailwind CSS + TypeScript 조합으로 깔끔하고 재사용 가능한 버튼 컴포넌트를 만들어보는 방법을 공유합니다.1. 기본 Button 컴포넌트 만들기먼저 가장 기본이 되는 버튼 컴포넌트를 Button.tsx로 만들겠습니다.import { ButtonHTMLAttributes } from 'react';interface ButtonProps extends ButtonHTMLAttributes { variant?: 'primary' | 'danger' | 'black'; f..