Algorithm Cinema

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(사용자 식별자)와 같은 장기 ..

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