Algorithm Cinema

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 요청이 여러 곳에서 직접 사용됨 → 중복 코드 증가 (이 ..

상태변경함수와 prev 매개변수 쓰는거 이거 뭔소리인지 모르겠는데요?  상태를 변경할때 원본에 있는걸 새로 옮기지 않습니까 ? 이때 원본을 해치지 않은 불변성을 유지하는 것이 최근 트렌드그래서 나온 방식이 prev 매개변수와 스프레드 연산자를 활용하는 것 ( 자바스크립트 ) prev 장점이전 상태를 활용하고 그 이전 상태의 값을 유지하며 일부 값만 변경 할 수있음  객체에서 Prev 사용법 (특정 속성만 바꿀래요)set함수((prev) => {...prev, name :'kim'} )const [user, setUser] = useState({ name: "Alice", age: 25 });// ✅ 이전 상태를 유지하면서 특정 속성만 업데이트const updateUserName = (newName) =>..

제목을 아래 처럼 지을까 고민도 했었습니다만.. 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. ..

🔹 문제: 개별 페이지마다 인증을 적용하면?React 애플리케이션에서 로그인 후 특정 페이지에만 접근할 수 있도록 보호하는 방법은 여러 가지가 있습니다. 하지만 잘못된 방식으로 구현하면 불필요한 연산이 발생하고, 코드의 유지보수성이 떨어질 수 있습니다.일반적으로 인증을 적용하는 방법 중 하나는 각 페이지마다 개별적으로 인증 로직을 감싸는 것입니다.❌ 개별 페이지마다 인증을 적용하는 방식} />} />} />➡ 문제점:각 페이지마다 AuthenticatedComponent가 실행됨 → 불필요한 연산 증가 ❌모든 페이지에서 인증 로직이 중복됨 → 유지보수 어려움 ❌공통 UI(Navbar, Sidebar)도 불필요하게 리렌더링될 가능성 ❌🔹 해결책: Layout을 감싸 인증을 최적화하기대신, Layout ..