ayeongjin 님의 블로그

📚 자바스크립트의 Map과 Object알고리즘 문제를 풀이하다 Map과 Object의 차이에 대해 궁금해져서 둘을 비교하고, 언제 어떤 걸 써야 할지 정리해봤다. ✅ 1. 키(Key)의 타입 구분ObjectMap허용되는 키 타입문자열(String), 심볼(Symbol)모든 값 (숫자, 객체, 함수 등 포함) const map = new Map();map.set(1, "number");map.set("1", "string");console.log(map.get(1)); // "number"console.log(map.get("1")); // "string"const obj = {};obj[1] = "number";obj["1"] = "string";console.log(obj[1]); //..

🌐 CSR, SSR, SSG, ISR의 렌더링 방식과 SEO, Hydration의 관계SEO 최적화를 고민하다가 CSR/SSR뿐만 아니라 SSG, ISR 그리고 SEO, Hydration에 대한 개념을 정리하고 실제 사용 시 어떤 조합이 적절한지 고민해보게 되었다. ✅ Hydration이란?Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 React가 연결하여 실제로 동작하게 만드는 과정이다. SSR, SSG, ISR 모두 hydration이 필요하다HTML만으로는 상호작용이 불가능하며, React의 이벤트 바인딩이 완료되어야 비로소 인터랙션이 가능해진다Hydration 동안에는 버튼 클릭, 입력 등이 잠시 비활성화될 수 있어 사용자 경험에 영향을 줄 수 있다 예를들어,서버가 만들어준 ..

🤔 useState는 const인데 왜 값이 변할까?React를 사용할 때 가장 기본적으로 만나게 되는 훅이 useState이다.아래와 같은 코드는 익숙하게 보이지만, 자바스크립트을 더 자세히 공부하면서 의문이 생겼다. const [count, setCount] = useState(0); 분명히 const는 상수인데, 어떻게 count의 값이 계속 바뀔 수 있는 걸까?이 글에서는 이 궁금증을 React 상태 관리의 흐름과 JavaScript의 const 개념을 중심으로 풀어봤다. ✅ let, const, var의 기본적인 차이우선 자바스크립트에서 let, const, var의 차이를 간단히 정리해보면var함수 스코프(function-scoped)이며, 호이스팅되고 중복 선언이 가능하다. ..

1. Redux의 핵심 구조 ✅ Store 내부 (Redux의 핵심 요소)애플리케이션 상태(state)를 저장하고 관리하는 역할입니다.state: 애플리케이션의 현재 상태 (객체 형태)reducer: 상태(state)를 변경하는 순수 함수getState(): 현재 상태를 반환하는 함수dispatch(action): 액션을 전달하여 상태 변경 요청subscribe(): 상태 변경을 감지하고 실행할 함수를 등록 ✅ Store 외부 (Redux를 사용하는 요소)Redux는 단독으로 동작하는 게 아니라 UI와 함께 사용됩니다.UI → Action → Store → Render UIAdmin (Redux DevTools): 상태 변화를 추적하고 디버깅하는 도구Render (React/Next.js UI..

이미지 최적화웹페이지에서 가장 많은 용량을 차지하는 파일은 이미지 파일입니다. Next.js의 Image 내장 컴포넌트를 사용하면 쉽게 최적화할 수 있습니다. 1. 이미지 최적화 전의 문제점비효율적인 파일 포맷 사용: jpeg 파일을 렌더링하면 용량이 크므로, webp 또는 avif 같은 더 경량화된 포맷을 사용하면 성능이 향상됩니다.불필요한 이미지 로딩: 현재 화면에 렌더링할 필요가 없는 모든 이미지가 동시에 로드됩니다.과도한 이미지 크기: 화면에서 필요로 하는 크기보다 훨씬 큰 이미지가 불러와져 성능 저하가 발생합니다. 2) 이미지 컴포넌트로 변경외부 서버에서 이미지를 불러올 경우 Next.js의 보안 정책에 의해 차단될 수 있으므로 next.config.mjs에서 도메인을 허용해야 합니다.// ne..

패럴렐 라우트(Parallel Route)란?병렬 라우트: 하나의 화면 안에서 여러 개의 페이지 컴포넌트를 병렬로 렌더링할 수 있는 패턴 소셜 미디어 서비스나 관리자 대시보드처럼 복잡한 페이지 구조를 렌더링하는 데 적합합니다. 1) 슬롯패럴렐 폴더 안에 @폴더 이름으로 생성 가능병렬로 렌더링될 페이지 컴포넌트를 보관하는 폴더app/parallel/@슬롯/page.tsx : 해당 경로 안의 페이지 컴포넌트는 자신의 부모 레이아웃 컴포넌트에서 props로 전달됩니다.@슬롯 : URL 주소에는 영향을 주지 않음. 따라서 parallel/@sidebar로 접속해도 페이지가 렌더링되지 않습니다.// src/app/parallel/layout.tsximport Link from "next/link";import {..

서버 액션이란?Next.js의 서버 액션(Server Actions) 은 브라우저에서 호출할 수 있지만, 서버에서 실행되는 비동기 함수입니다. 이를 통해 API 엔드포인트를 따로 만들지 않고도 브라우저와 서버 간 데이터 통신을 손쉽게 구현할 수 있습니다.기존에는 브라우저에서 서버로 데이터를 보내려면 API 라우트를 따로 구현해야 했습니다.하지만 서버 액션을 사용하면 일반 함수처럼 서버에서 실행되는 코드를 작성할 수 있습니다.즉, 기존 API 라우트를 대체하는 더 간편한 방식 1) 서버 액션 vs 기존 API 라우트 비교구분기존 API 라우트 방식서버 액션 방식사용 방식pages/api 또는 app/api에 API 엔드포인트 작성use server를 명시하여 함수 정의호출 방식브라우저 → API 라우트 →..

스트리밍이란?데이터가 너무 커서 빠르게 전송하기 어려울 때, 데이터를 작은 단위로 나누어 전송하는 방식 1) Next.js에서 제공하는 HTML 스트리밍사용자가 페이지에 접속하면 먼저 렌더링이 빠른 단순한 컴포넌트를 표시데이터 페칭 등 렌더링이 오래 걸릴 것으로 예상되는 컴포넌트는 대체 UI를 표시했다가 나중에 렌더링장점:사용자가 빠르게 콘텐츠를 볼 수 있도록 UX 개선로딩 바 등 대체 UI를 보여줄 수 있어 더 좋은 환경에서 대기 가능✅ Next.js의 스트리밍은 Dynamic Page에서 주로 사용된다.  스트리밍 적용하기1) 페이지 - 자동 스트리밍loading.tsx 파일을 생성하면 자동으로 스트리밍 적용됨// src/app/(with-searchbar)/search/loading.tsxexpor..

풀 라우트 캐시Next.js 서버에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능입니다. 이 기능을 활용하면 정적 페이지의 로딩 속도를 향상시킬 수 있습니다. 1) Dynamic Page로 설정되는 기준특정 페이지가 접속 요청을 받을 때마다 변화가 생기거나, 데이터가 매번 달라지는 경우 자동으로 Dynamic Page로 분류됩니다. (1) 캐시되지 않는 Data Fetching을 사용할 경우cache: "no-store" 설정 시 Dynamic Page로 분류됨서버 컴포넌트에서만 해당됨 (클라이언트 컴포넌트는 영향 없음) (2) 동적 함수 (쿠키, 헤더, 쿼리스트링)를 사용하는 경우cookies(), headers(), useSearchParams() 등의 함수가 포함되면 자동으로 Dynami..

데이터 페칭 1) Next.js에서 데이터 페칭서버 컴포넌트에서의 데이터 페칭// 서버 컴포넌트에서 비동기 함수 사용 가능export async function Page(props){ const data = await fetch('...'); // 기존의 getServerSideProps, getStaticProps 대체 return ...}클라이언트 컴포넌트에서는 async 키워드 사용 불가 (브라우저에서 문제 발생 가능)Next.js 공식 문서에서는 데이터는 필요한 곳에서 직접 불러오는 것이 최적의 방식이라고 권장 2) 서버 컴포넌트에서 데이터 불러오기 예제서버 컴포넌트는 async 함수로 정의 가능데이터 요청 실패 시 오류 메시지 출력// 컴포넌트 자체가 async function이 될 수 있음//..