Algorithm Cinema

기본 이해부터  : 비동기 함수 (async/await)를 왜 사용해야 할까? API 요청을 할 때, 서버에서 응답을 받기까지 시간이 걸리기 때문! 이렇게 말하면 뭐라는지 모를게 뻔하니,API 호출은 뭡니까 -> 네트워크를 통해 외부 데이터를 가져오는 것이 떄 네트워크 요청은 응답이 오기까지 시간이 얼마나 걸릴지 예측이 불가능합니다. 근데 이때 우리가 쓰는 자바스크립트는 동기적으로 작동하는데,네트워크가 느려서 응답을 기다리는 동안 동기적 작동하는 자바스크립트가 딱 막혀버리면전체가 막혀버리겠습니다. (blocking) 이라 하죵흔히 쓰는 크롬 브라우저의 버튼 클릭이랑 화면 조작이 먹통이되는 겁니다.결론적으로 이를 방지하기 위해서 작업이 완료될때까지 기다리지 않고, 다른 작업을 할 수 있도록 하는 것이 목적..

이 글은 또 왜 쓰게 되었는가명지대학교 검색 커뮤니티의 명대신문에서 데이터(신문 데이터)를 Fetching하는 로직을 짜다가 나온 문제이다. API 데이터를 관리할 때, 여러 개의 카테고리 데이터 (Request Paramter로) 를 어떻게 관리할 것인가? 하는 문제를 마주하게 됐다.  이때 각각의 상태를 따로 관리하는 방식과 동적 키를 활용하는 방식을 학습했는데 헷갈릴만한 소지가 있다고 판단하여 글을 남긴다. API 명세서 구조  (Request Param으로 카테고리 별 뉴스 기사 조회)### **📌`GET /api/v1/news?category={}`**- **Description:** RequestParam을 이용하여 특정 카테고리의 기사를 DB에서 가져옵니다.- **HTTP Method:**..

튜토리얼 모달를 개발했는데, 생각보다 공부할게 많아 좀 더 상세히 분석을 했습니다.  1. 컴포넌트 역할 개요 OnBoardingModal.tsx온보딩 화면을 사용자에게 모달 형태로 제공하는 컴포넌트입니다.슬라이드 데이터를 관리하며 슬라이드 변경 상태를 slideIndex로 추적합니다.OnBoardingCarousel.tsx실제 캐러셀 UI를 담당하며, 슬라이드 간 이동을 처리하고 현재 선택된 슬라이드를 모달로 전달합니다.2. Props 구조와 데이터 흐름OnBoardingModal → OnBoardingCarousel 전달 Props는 크게 2가지slides: 슬라이드의 내용(배경 이미지, 제목, 설명)을 담고 있는 객체 배열입니다.-> 이 내용이 UX로 직접 렌더링 되겠습니다.onSlideChange..

첫 task인 튜토리얼 (온보딩) 모달을 개발하며 했던 고민들을 저장했다TypeScript와 Next.js 환경에서의 최적화된 방식은 무엇일까 고민하다가...   요구사항 : 모달을 만들때 요청 받았던건 소개 이미지 + 캐러셀 조합으로 튜토리얼 가이드가 필요하다. 1. 두개의 커다란 덩아리2. 일단 전체적으로 두개의 컴포넌트로 나누면 좋겠다 싶었다  1. 컴포넌트 분리의 필요성  (유지보수와 성능개선)단일 책임 원칙 (SRP: Single Responsibility Principle)컴포넌트가 하나의 역할만 수행하도록 설계해야 유지보수가 쉬워지겠다. 가독성과 재사용성 증가모든 기능을 한 파일에서 처리하면 코드가 복잡해지고 유지보수가 어려워지겠다. 성능 최적화 (Next.js 환경 고려)서버 사이드 렌더링..

Next.js는 클라이언트에서 실행되는 React 기반의 프레임워크지만, 동시에 서버에서도 실행될 수 있는 환경을 제공한답니다.  따라서 window 객체나 localStorage 같은 브라우저 전용 기능을 사용할 때는 서버 환경을 고려해야 합니다. Vite만 쓰던 저에게 가장 어려운 부분이 이거였습니다. 서버의 존재를 계속 고려해야한다는   이번 글에서는 window 객체의 역할과 Next.js에서 localStorage와 같은 브라우저 전용기능을 활용할 때 서버 동작을 어떻게 고려해야하는지 학습한 내용을 정리합니다.window 객체란? 어디서 들어봤는데 이거 window 객체는 브라우저 환경에서만 존재하는 전역 객체입니다. 즉, 클라이언트(브라우저)에서만 접근 가능하고, 서버에서는 존재하지 않습니다...

새로운 프로젝트에 참여하게 되었습니다.내가 좋아했던 조합은 JS + Vite를 활용한 조합이었는데, ts + Next.js 조합을 사용하게 되어 Ts는 공부를 해놨지만, Next는 약간 미숙하여 정리하는 카테고리를 신설했습니다. Next.js를 처음 접하면 폴더 구조와 파일의 역할이 헷갈립니다. 특히, index.ts, page.tsx, .ts와 .tsx의 차이 등을 명확히 이해하는 것이 중요합니다. 사실 별건 아닐지라도, 처음 접하거나 미숙한 사용자에게 도움이 되었으면 합니다. 이번 포스팅에서는 Next.js의 프로젝트 구조와 핵심 개념을 정리해보겠습니다.Next.js의 파일 구조와 역할깃허브에 다른 사람 레포를 보면 아니 왜 폴더마다 index.ts가 있지. 싶을겁니다1.  index.ts의 역할 (..

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

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