Algorithm Cinema

Wallet Guardians에 대하여우리는 백엔드 개발자 3명, 프론트 개발자 2명으로 이루어진 팀이었다.  개발은 정확히 2025년 1월 1일 부터 하였고, 같은 학교의 동아리 원들끼리 팀을 꾸려 하나의 프로젝트를 만들어보고자 팀을 만들었다. 필자는 팀장의 역할을 맡았고, 경험이 많지 않은 우리 모두였기에 모든 것이 서툴렀다. 팀장이라지만 나도 여러므로 경험이 부족하였고 학습 프로젝트지만 부담이 상당했던건 사실이다. 디자이너와 PM이 사실상 없었기에, 누군가는 했어야했고 우린 그것에 대한 해결책으로 단편영화감독 경험이 있던 내가 PM을 맡고, 디자이너는 프론트쪽에서 어떻게든 해보자 라는 선택을했다. 기획서과 유저시나리오 작성개인적으로 기획서를 정말 잘썼다고 생각한다.  내가 기획서 쓸때는 무조건 모든..

개인적 고뇌이 글을 쓰는 시점은 사실 프로젝트를 완성하고 쓰는 글이다.프론트엔드 개발을 진행하며, 다양한 기술적 선택과 과정 속에서 수많은 고민을 했다. 단순히 트렌드를 따르는 것이 아니라, 프로젝트의 특성과 개발 환경을 고려하여 최적의 방안을 모색하려 했던 나의 여정을 정리해 본다. 이 시점은 정확히 개발하고나고 나서 1달정도 가량 됐을때의 내가 내 노션에 스스로의 고뇌를 정리해놨던 글이다.디자이너는 단독 그러나..본 프로젝트에서 디자이너는 단독으로 참여하고 있다, 디자인 작업에 AI 도구를 적극 활용하지 않았다.ex)https://ui.shadcn.com/디자인과 개발 간의 원활한 협업을 위해 수작업으로 조정하는 과정이 필수적이었다.→ 인라인 스타일링 조절이 많았음 (아쉬움)팀원들의 적극적인 도움과 ..

https://github.com/wallet-guardians wallet-guardianswallet-guardians has 2 repositories available. Follow their code on GitHub.github.com   👥 팀 소개3명의 백엔드 개발자와 2명의 프론트 개발자가 협업을 했던 소규모 프로젝트였다.팀장인 내가 PM을 맡았고, 디자이너가 없어 평소에 해보고 싶은 디자인이 있던 내가 디자이너도 맡았다.. 그러나 디자인은 팀원들이 많이 아이디어도 주셔서 어찌보면 다같이 디자인을 했다고 하고싶다. 첫 협업 프로젝트이니 만큼, 욕심이 생겨 PM, 디자이너, 프론트개발 세개를 모두 다했더니 정말 피곤하긴 했었다.🧑🏻‍💻 Project Manager최원빈https://..

배경대부분의 자취를 하는 학생 및 직장인들은 예상치 못한 지출로 인해 과소비하는 경향이 있다.20대인 내 주위에 대학생들은 체감 물가가 정말 비싼데도, 자신의 지출이 너무 많고 돈이 없다는 얘기를 정말 많이 들었었다. 그렇다면 가계부를 쓰면 되지 않는가? 일단 가계부를 작성한다는 사람을 거의 보지 못했으며, 쓰더라도 자신의 지출을 넘기기 일수였다.그 이유를 한번 생각해보면, 토스 , 카카오뱅크같은 좋은 기업의 가계부 시스템은 사용자의 편리함을 위해 자동적으로 지출을 추가하고 저장해준다. 즉, 사용자가 굳이 직접 추가하지 않아도 알아서 추가해준다는 것이다. 따라서 우리 팀은 사용자가 귀찮음을 감수하더라도 직접 지출을 입력하는 능동적인 재정관리 시스템을 만들기로 했다.  또한 가계부 시스템에 경쟁과 성취감 ..

노션에다 틈틈히 정리했던 내용을 포스팅한다. 1️⃣ 프론트엔드 개발 과정에서의 고민📌 디자인과 개발 간의 협업디자인 설계 → AI 도구 활용 없이 수작업 조정이 많았음사용자가 봤을때 이쁜것 집중협업의 효율성을 위해 UI 표준화와 재사용성 향상을 고민📌 미디어 쿼리와 Sidebar (Navbar) 설계Context API를 활용하여 Sidebar 상태 관리브라우저를 과도하게 줄였을때 겹쳐진다거나 어색한 부분을 최대한 배제했음.📌 백엔드와 프론트엔드 간의 진도 차이 해결백엔드 API 완성 전에 프론트엔드를 개발해야 하는 문제 발생해결책: JSON Server를 활용한 Mock API 구축 → 백엔드 없이도 개발 가능📌 공통 레이아웃과 보안 처리 (Navbar, Footer, Header, Friend..

프론트엔드 개발자로서 협업을 하다보면 겪는 현상인 "중구난방"API 통신 관련 로직 또한 협업을 하다보면 중구난방이 됩니다.특히 api를 기능별로 나눈다면, 예를들어 AuthApi (로그인 및 회원가입  등), FriendApi(친구추가 및 삭제 기능등)으로 역할을 분배했을때, 개발자별로 스타일이 다르기때문에 매개변수가 다를수도 있고, 이 함수를 쓰는 핸들러의 위치와 로직이 달라질 가능성이 많습니다. 이를 명확하게 하기 위해선 어떤것의 최선의 방식인지 동료와 상의를 해야하고 설득을 해야합니다. 설득을 해야할 당신을 위해 이 글을 바칩니다.1. 문제 상황 및 개요✅ 기존 문제점:API 호출 로직이 중구난방으로 섞여 있어 유지보수가 어려움 axios 요청이 여러 곳에서 직접 사용됨 → 중복 코드 증가 (이 ..

제목을 아래 처럼 지을까 고민도 했었습니다만.. API 에러 처리를 통해 Context와 연결하여 해결하는 과정 각설하고, 1. 문제 상황처음 회원가입한 사용자가 getBudget() API를 호출했을 때, 서버에서 409 Conflict 오류가 발생하여 예산 데이터가 없을 경우 앱이 정상적으로 작동하지 않는 문제가 발생했습니다.이 문제를 해결하기 위해:이때 API 함수 내부에서 에러를 처리해야하는지, 아니면 컴포넌트 핸들러에서 처리해야하는지 고민하다 글을 씁니다. 제가 생각한 아이디어는API 함수 내부에서 409 에러를 처리하여 null을 반환하도록 수정하고,Context에서 API 데이터를 불러올 때 null을 안전하게 처리하여 UI가 깨지지 않도록 개선했습니다.사실 2번에 방식에서 null을 안전하..

🔹 1. 문제 상황 및 개요 📌 문제: 서버에서 데이터를 가져올 때 UI가 깜빡이는 현상 발생React에서 API 호출을 통해 데이터를 가져올 때, 데이터가 도착하기 전까지 UI가 올바르게 렌더링되지 않을 수 있음예를 들어, goalAmount가 초기에는 null이지만, 서버 응답 후 100000으로 변경될 경우, 화면이 갑자기 변하면서 깜빡이는 현상이 발생할 수 있음이러한 UI 깜빡임(Flash of Unstyled Content, FOUC)은 사용자 경험(UX)을 저하시킬 수 있음 참고로FOUC (깜빡임)이 발생하는 조건1. 비동기 요청의 응답이 지연되었을때 (await 없이 비동기 요청이 실행됬을때) 2. 상태 값이 비동기 응답 이후 변경될때 • useState()로 관리하는 값(goalAmou..

🔹 1. 문제 상황 및 개요📌 문제: 로그인 후 예산 데이터를 확인하기 전에 페이지가 먼저 이동하는 문제사용자가 로그인하면 기존 예산 데이터를 확인한 후 페이지를 이동해야 함하지만 비동기 요청(fetchBudget())이 완료되기 전에 페이지 이동 코드가 실행됨결과적으로, 예산이 있는 경우에도 /goal-setting으로 이동하거나 잘못된 데이터를 표시하는 문제 발생🛠 해결 목표✅ 로그인 성공 후, 기존 예산 데이터를 가져온 후 페이지 이동✅ 비동기 요청(fetchBudget())이 끝날 때까지 goalAmount 값을 기다린 후 페이지 전환✅ UI 깜빡임을 방지하고 자연스러운 화면 전환 제공🔹 2. 비동기 요청과 await의 개념📌 비동기 요청이란?비동기(asynchronous) 요청은 백엔드..

🚀 개요 및 문제상황사용자가 처음 회원가입 후 로그인을 하면, 매달 자신의 첫 가계부에 필요한 예산을 설정합니다. 저는 이 예산을 전역 상태 관리로 하였습니다. -> goalContext.jsx 그러나, 분명 로그인 로직에는 goalAmount가 있으면 -> mainPage.jsx, 없으면 -> goal-setting.jsx로 가게끔 설계를 했는데제 코드의 의도와는 다르게 계속 오류가 났습니다. 심지어, 이미 로그인을 하여 예산 설정을 한 사용자도 다시 goal-setting으로 가는 문제상황이 발생했습니다. -> 서버(백엔드 개발자)는 한 달에 딱 한번 예산을 설정할수 있게 설계를 했는데 이 땜에 두 번 예산 설정을 하면 오류가 나는 최악의 상황이었습니다. 정리하면1. 의도치않은 리다이렉션 불가2. ..