Algorithm Cinema

튜토리얼 모달를 개발했는데, 생각보다 공부할게 많아 좀 더 상세히 분석을 했습니다.  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의 역할 (..