findUnique -- 단일 조회 (Read)@id 또는 @unique가 설정된 필드로 단 하나의 레코드를 조회데이터가 있으면데이터가 없으면실행중 에러 발생Object (객체)nullError 던짐 (throw)const item = await db.test.findUnique({ where: { id: "clx123..." }, include: { comments: true } // 관계 데이터 포함 가능}); findFirst -- 단일 조회 (Read)- 조건에 맞는 데이터 중 가장 첫 번째 레코드를 조회- 고유값이 아닌 필드(예: display_id, status)로 검색할 때 유용데이터가 있으면데이터가 없으면실행중 에러 발생 Object (객체)nullError 던짐 (throw)조건이 유..

서버 컴포넌트 (Server Components)서버 컴포넌트는 서버에서 렌더링될 때 URL 정보를 props로 직접 전달받음params가 Promise로 제공되므로 await를 사용해 읽는다.해당 페이지 파일 (page.tsx 또는 layout.tsx)의 props를 통해 전달params 자체가 promise이므로 async/await가 필요id를 이용해 서버에서 즉시 DB 접근하거나 API 데이터 페칭을 할 수 있어 속도가 빠름export default async function Page({ params }: { params: Promise }) { const { id } = await params; const data = await fetch(`https://api.example.com/item..

의미 있는 마크업이 좋은 서비스를 만든다.웹의 본질은 정보전달.시맨틱 HTML은 정보를 정확하고 효율적으로 전달하는 방법. 시맨틱(Semantic) HTML란시맨틱 HTML은 의미있는 태그를 사용하므로써, 브라우저, 개발자, 검색엔진이 그 구조를 이해시키는 것 시맨틱하게 작성했을 때의 장정- 검색엔진 최적화 (SEO) HTML을 분석해 페이지의 중요도를 파악- 웹 접근성 스크린 리더는 시맨틱 태그를 기준으로 페이지를 읽음- 개발자경험 DX 태그의 역할로 파악할 수있음 시맨틱 태그서비스 페이지를 만들 때, 사용해야할 태그 모음태그의미 및 권장 사용법페이지, 세션의 도입부. 로고, 검색창, 내비게이션 등을 포함주요 링크 모음. (메뉴바, 탭). 해당 페이지의 독점적인 본문. 문서당 하나만 존재문서의 논리적..

Next.js의 서버 사이드 렌더링(SSR) 환경으로 넘어오면 한 가지 고민이 생깁니다."서버에서 받아온 데이터를 어떻게 클라이언트의 Zustand 스토어에 안전하게 전달할 것인가?"useEffect로 넣기엔 깜빡임(Layout Shift)이 발생하고, 전역 변수로 관리하기엔 서버에서 여러 사용자의 상태가 뒤섞일 위험이 있습니다. 오늘은 이 문제를 해결하는 Hydration 전략을 알아봅니다. ✓ 하이드레이션(Hydration)서버가 보낸 정적인 HTML 위에 자바스크립트가 실행되면서 동적인 기능(이벤트 리스너, 상태 관리 등)이 결합되는 과정- CSR (React) 처음에 빈 화면()만 받음 → 자바스크립트가 다 로드되어야 화면이 그려진다.- SSR (Next.js) 서버가 미리 HTML을 다 그려서 ..

리액트는 단일 페이지 애플리케이션(SPA;Single Page Application)을 구축하기 위한 라이브러리.SPA는 전체를 새로고침하지 않고 필요한 부분만 바꾸는 방식React Router DOM은 브라우저의 주소(URL)와 UI를 동기화 해주는 표준 라이브러리 사용자가 특정 주소로 들어오거나 버튼을 눌러 경로를 바꿀때, 서버에 새로운 HTML을 요청하지 않고 자바스크립트가 동적으로 화면을 그림→ URL에 따라 어떤 컴포넌트를 보여줄지 결정하는 것 ✓ SPA (Single Page Application)단 하나의 HTML 페이지에서 모든 콘텐츠를 로드하고, 사용자의 상호작용에 따라 페이지 전체를 새로고침하지 않고 동적으로 콘텐츠만 변경하여 부드럽고 빠른 사용자 경험을 제공하는 웹 애플리케이션 방식..

Zustand란 무엇인가?Zustand는 발행/구독(Pub/Sub) 모델을 기반으로 하는 작고 빠르며 확장 가능한 상태 관리 라이브러리입니다.Flux 패턴을 따르되, 보일러플레이트(반복되는 코드)를 최소화하여 개발자 경험을 극대화 - 간결함: Redux처럼 복잡한 설정이나 Provider로 감싸는 과정이 필요 없습니다. - 성능: 상태가 변경될 때 리렌더링을 최적화하는 기능이 내장되어 있습니다. - 유연성: 특정 라이브러리에 종속되지 않아 React 없이도 사용할 수 있습니다. ✓ 상태 관리 라이브러리란?프론트엔드 개발에서 상태(State)는 관리해야하는 모든 동적 데이터를 의미한다. (로그인여부, 입력창의 텍스트 등등)상태관리라이브러리는 이런 데이터들을 컴포넌트 사이에 효율적으로 전달하..

React Hooks란?함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 API→ 클래스 컴포넌트의 복잡함을 줄이고,로직 재상용성을 높임 ✓ 클래스컴포넌트 리액트 초기 방식이며, class문법을 사용해다. render()메서지가 필요했으며 this키워드를 사용해 상태나 함수에 접근로직을 재사용하기 어렵고, this 바인딩 문제로 실수가 잦았다고 한다.→ class는 내부적으로 인스턴스를 생성하고, this 바인딩을 관리하며, 수많은 생명주기 메서드들을 메모리상에 유지 즉, 컴포넌트 하나가 생성될 때마다 무거운 객체 인스턴스가 메모리에 할당 ✓ 함수형컴포넌트현재 리액트의 표준이며, 함수를 작성하듯 컴포넌트를 만든다.코드가 훨씬 짧고, 가독성이 높으며 메모리 ..

오랜만에 다시 블로그를 시작하려고 해요. 일상중에서도 일/공부쪽이 될것같아요. 지난 과거가 아쉽고 후회가 많은데, 아무리 후회해도 변하는건 없고..그래서 지금부터라도 바꿔보려고 합니다. 화이팅해보자고 :-)

findUnique -- 단일 조회 (Read)@id 또는 @unique가 설정된 필드로 단 하나의 레코드를 조회데이터가 있으면데이터가 없으면실행중 에러 발생Object (객체)nullError 던짐 (throw)const item = await db.test.findUnique({ where: { id: "clx123..." }, include: { comments: true } // 관계 데이터 포함 가능}); findFirst -- 단일 조회 (Read)- 조건에 맞는 데이터 중 가장 첫 번째 레코드를 조회- 고유값이 아닌 필드(예: display_id, status)로 검색할 때 유용데이터가 있으면데이터가 없으면실행중 에러 발생 Object (객체)nullError 던짐 (throw)조건이 유..

서버 컴포넌트 (Server Components)서버 컴포넌트는 서버에서 렌더링될 때 URL 정보를 props로 직접 전달받음params가 Promise로 제공되므로 await를 사용해 읽는다.해당 페이지 파일 (page.tsx 또는 layout.tsx)의 props를 통해 전달params 자체가 promise이므로 async/await가 필요id를 이용해 서버에서 즉시 DB 접근하거나 API 데이터 페칭을 할 수 있어 속도가 빠름export default async function Page({ params }: { params: Promise }) { const { id } = await params; const data = await fetch(`https://api.example.com/item..

의미 있는 마크업이 좋은 서비스를 만든다.웹의 본질은 정보전달.시맨틱 HTML은 정보를 정확하고 효율적으로 전달하는 방법. 시맨틱(Semantic) HTML란시맨틱 HTML은 의미있는 태그를 사용하므로써, 브라우저, 개발자, 검색엔진이 그 구조를 이해시키는 것 시맨틱하게 작성했을 때의 장정- 검색엔진 최적화 (SEO) HTML을 분석해 페이지의 중요도를 파악- 웹 접근성 스크린 리더는 시맨틱 태그를 기준으로 페이지를 읽음- 개발자경험 DX 태그의 역할로 파악할 수있음 시맨틱 태그서비스 페이지를 만들 때, 사용해야할 태그 모음태그의미 및 권장 사용법페이지, 세션의 도입부. 로고, 검색창, 내비게이션 등을 포함주요 링크 모음. (메뉴바, 탭). 해당 페이지의 독점적인 본문. 문서당 하나만 존재문서의 논리적..

Next.js의 서버 사이드 렌더링(SSR) 환경으로 넘어오면 한 가지 고민이 생깁니다."서버에서 받아온 데이터를 어떻게 클라이언트의 Zustand 스토어에 안전하게 전달할 것인가?"useEffect로 넣기엔 깜빡임(Layout Shift)이 발생하고, 전역 변수로 관리하기엔 서버에서 여러 사용자의 상태가 뒤섞일 위험이 있습니다. 오늘은 이 문제를 해결하는 Hydration 전략을 알아봅니다. ✓ 하이드레이션(Hydration)서버가 보낸 정적인 HTML 위에 자바스크립트가 실행되면서 동적인 기능(이벤트 리스너, 상태 관리 등)이 결합되는 과정- CSR (React) 처음에 빈 화면()만 받음 → 자바스크립트가 다 로드되어야 화면이 그려진다.- SSR (Next.js) 서버가 미리 HTML을 다 그려서 ..

리액트는 단일 페이지 애플리케이션(SPA;Single Page Application)을 구축하기 위한 라이브러리.SPA는 전체를 새로고침하지 않고 필요한 부분만 바꾸는 방식React Router DOM은 브라우저의 주소(URL)와 UI를 동기화 해주는 표준 라이브러리 사용자가 특정 주소로 들어오거나 버튼을 눌러 경로를 바꿀때, 서버에 새로운 HTML을 요청하지 않고 자바스크립트가 동적으로 화면을 그림→ URL에 따라 어떤 컴포넌트를 보여줄지 결정하는 것 ✓ SPA (Single Page Application)단 하나의 HTML 페이지에서 모든 콘텐츠를 로드하고, 사용자의 상호작용에 따라 페이지 전체를 새로고침하지 않고 동적으로 콘텐츠만 변경하여 부드럽고 빠른 사용자 경험을 제공하는 웹 애플리케이션 방식..

Zustand란 무엇인가?Zustand는 발행/구독(Pub/Sub) 모델을 기반으로 하는 작고 빠르며 확장 가능한 상태 관리 라이브러리입니다.Flux 패턴을 따르되, 보일러플레이트(반복되는 코드)를 최소화하여 개발자 경험을 극대화 - 간결함: Redux처럼 복잡한 설정이나 Provider로 감싸는 과정이 필요 없습니다. - 성능: 상태가 변경될 때 리렌더링을 최적화하는 기능이 내장되어 있습니다. - 유연성: 특정 라이브러리에 종속되지 않아 React 없이도 사용할 수 있습니다. ✓ 상태 관리 라이브러리란?프론트엔드 개발에서 상태(State)는 관리해야하는 모든 동적 데이터를 의미한다. (로그인여부, 입력창의 텍스트 등등)상태관리라이브러리는 이런 데이터들을 컴포넌트 사이에 효율적으로 전달하..

React Hooks란?함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 API→ 클래스 컴포넌트의 복잡함을 줄이고,로직 재상용성을 높임 ✓ 클래스컴포넌트 리액트 초기 방식이며, class문법을 사용해다. render()메서지가 필요했으며 this키워드를 사용해 상태나 함수에 접근로직을 재사용하기 어렵고, this 바인딩 문제로 실수가 잦았다고 한다.→ class는 내부적으로 인스턴스를 생성하고, this 바인딩을 관리하며, 수많은 생명주기 메서드들을 메모리상에 유지 즉, 컴포넌트 하나가 생성될 때마다 무거운 객체 인스턴스가 메모리에 할당 ✓ 함수형컴포넌트현재 리액트의 표준이며, 함수를 작성하듯 컴포넌트를 만든다.코드가 훨씬 짧고, 가독성이 높으며 메모리 ..