Algorithm Cinema

웹 애플리케이션에서 로그인 상태를 유지하는 것은 중요한 UX 요소 중 하나라고 생각합니다. 특히 새로고침 시에도 로그인 상태를 유지하려면 LocalStorage와 SessionStorage를 적절히 활용해야 합니다. 또한, 사용자 경험을 개선하기 위해 로딩 컴포넌트를 활용하는 것도 효과적입니다.  이번 포스트에서는 제가 프로젝트를 진행하며 로그인 상태를 저장하고, 새로고침 시에도 유지되도록 설정하는 방법과 로딩 컴포넌트를 추가하여 UI를 더욱 부드럽게 효율적으로 만드는 방식을 포스팅하겠습니다.로그인 상태를 저장하는 방법React에서 로그인 상태를 유지하기 위해 LocalStorage와 SessionStorage를 조합하여 사용할 수 있습니다.LocalStorage: UUID(사용자 식별자)와 같은 장기 ..

가장 궁금할 질문 #1 : 가족과 봐도 괜찮나요?15세긴 한데, 므흣한 장면이 많이 나옵니다.가족끼리 보긴 좀 민망할수도가장 궁금한 질문 #2 : 어렵나요? SF던데전혀 어렵지 않습니다. 예고편 보면 아 약간 철학철학철학 이런 느낌아닌가철학철학의 느낌이 있긴한데 아주 쉽게 잘 푼 느낌입니다.영화 자체가 그냥 술술 풀리고 술술 쉬움.그러나.. 철학적인 메세지가 매우 많아서누군 생각이 많아질거고누군 킬링타임의 느낌이지 않을까가장 궁금한 질문 #3 : 재밌나요?SF를 좋아했다 → 재밌을겁니다괴물을 좋아했다 → 재밌을겁니다설국열차를 좋아했다 → 정말 재밌을겁니다.기생충 너무 재밌게봤어요 → 이럼 잘 모르겠습니다.옥자 좋아했다 → 이럼 좋아할수도갠적으로 대중픽에 속하는 느낌입니다.설국열차와 비슷하다는데요설국열차를..

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

상태변경함수와 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을 안전하..