Algorithm Cinema

Props를 단순히 부모 - 자식 관계로만 치부할지말자.

중복된 여러 코드가 보기 싫다에서 탄생된 것이 props다.회원가입 form을 예시로, 아이디, 비밀번호, 뭐 등등 입력하는 칸거의 완전 똑같이 생겼는데 이걸 굳이 3줄 겹치는 내용을 적어야한다면 그것은 비효율적이겠다.import React, { useState } from 'react';export default function SignupForm() { const [id, setId] = useState(''); const [pw, setPw] = useState(''); return ( 아이디 setId(e.target.value)} className="border p-2 rounded" /> ..

React 상태 관리 제대로 이해하기React를 사용하다 보면 자주 마주치는 개념 중 하나가 상태(state)입니다. 하지만 상태의 작동 방식은 자칫 오해할 수 있는 비동기적 특성과 렌더링 사이클 덕분에 헷갈렸어서 시험기간 전 시간이 좀 남을때 글을 정리했습니다.1. 상태는 비동기적 특성을 지닌다.React에서 상태를 setState()로 변경하더라도, 즉시 반영되지 않습니다. 이는 React가 여러 상태 업데이트를 모아서 한 번에 처리하는 Batching 기법 때문입니다. 이 과정은 특정 렌더링 사이클 타이밍에 맞춰 일괄 처리됩니다. 따라서 변경되는 양상이 비동기적으로 보여서 상태는 정확히 비동기다. 라고도 오해할 수 있지만 그렇지는 않다고 합니다. 상태가 변경됨으로써, 리렌더링이 한번 이루어지고 나고..

Vite와 React로 프로젝트를 구성할 때, 라우팅 구조를 어떻게 설계하느냐는 유지보수성과 가독성에 큰 영향을 미친다고 생각한다. 이 글에서는 React Router v6 기준으로, router.tsx 파일을 별도로 구성하여 라우팅 책임을 명확히 분리하는 구조를 소개한다.기존 내가 했던 방식 (Vite)…App.tsx에 라우팅 책임을 맡겼다.import { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from './pages/Home';import NotFound from './pages/NotFound';function App() { return ( } /> } /> );}Ap..

회원가입 페이지 (SignUpPage.jsx)에서의 로직이 과도하게 많아 가독성이 정말 좋지 않았다.따라서 로직을 분리는 해야겠고, 컴포넌트를 분리하는 것이 아닌, 로직을 분리할때의 가장 적절하고 권장되는 방식을 공부하였다. 커스텀 훅이란?React 컴포넌트에서 사용하는 상태 로직( useState, useEffect) 등을 재사용하기 위한 함수. 쉽게말하면, 특정 컴포넌트의 JSX를 제외한, 로직/상태/이벤트 핸들링을 분리하는 방식이다.설계한 컴포넌트가 과도하게 무겁다면 여러가지 원인이 있겠는데,1. 상태를 정의하거나2. 유효성 검사를 하거나3. 입력 처리 핸들러가 들어있거나4. 조건부 렌더링 플래그가 있거나. 위 4가지는 사실 일반적인 컴포넌트에 필요한 로직이고 컴포넌트를 설계할때 늘 저 4가지 케이..

기본 이해부터  : 비동기 함수 (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의 역할 (..