Zod?💡스키마 선언 및 유효성 검사 라이브러리 🤔 Zod가 필요한 이유는 무엇일까TypeScript의 한계 때문이다.TypeScript는 컴파일 시점에서만 타입에러를 잡아낼 수 있다.➡️ 즉, 런타임 단계에서의 타입 에러는 잡을 수가 없다.또한 TypeScript는 문자열이나 원하는 숫자 범위를 강제하거나 number타입을 더욱 구체적으로 정수나 실수로의 구분이 불가능하다.설치pnpm add zod # pnpmTypeScript 4.5 이상가능tsconfig.json 에 "strict": true 설정이 되어있어야 한다.사용 //문자열만 허용 const Schema1 = z.string(); // 문자열이 있으면 4~20까지 허용, optional일 경우 undefined도 허용 ..
cookies비동기 함수로 Server Component로부터 http 수신 요청 쿠키를 읽어들일 수 있다.Server Action이나 Router Handler안에서는 요청에 포함될 쿠키를 읽거나 쓸 수 있다. async/await 나 React의 use와 함께 사용해야한다.import { cookies } from 'next/headers' export default async function Page() { const cookieStore = await cookies() const theme = cookieStore.get('theme') //만약 이름을 찾을 수 없다면 undefined를 반환 return '...'} cookies() 읽기Server Componentasync/await 필..
📌 CSR (Client Side Rendering)리액트로만 개발했을 때 CSR로 동작한다. Client에서 JS를 실행하여 화면에 처리한다. ➡️ 즉 렌더링을 하는 주체가 클라이언트이다서버에서 만든 html을 전달 받는 것이 아닌 서버로 부터 html, js, css등을 받아서 클라이언트가 DOM을 조작하여 내용을 출력한다. 그래서 초기에는 빈 html을 서버로부터 받게된다. CSR의 장점한번 로딩이 되면 그 이후에는 빠르다. 왜냐하면 따로 서버로부터 html을 받아오는 것이 아니기 때문이다. 그렇기에 서버의 부하가 적다는 장점이 있다. CSR의 단점페이지 로딩 시간이 길다. 서버로부터 HTML, CSS, JS를 받고 난뒤 렌더링을 하기 때문에 구동SEO가 좋지 않다. 초기에 빈 html만을 받..
✅ useDeferredValueuseDeferredValue 훅은 의도적으로 특정 UI 업데이트를 지연시키고 싶을 때 사용할 수 있는 훅이다. 상태 업데이트를 지연하는 useTransition과 다르게 값의 업데이트 우선순위를 지정하는 것 상태값 변화에 따른 무거운 연산이 발생하는 경우 값 업데이트를 지연시켜 백그라운드에서 리렌더링을 수행하게 해서 급한 렌더링을 먼저 처리하는 것이다. 예를 들어 입력 필드 타이핑은 즉시 반영하지만, 리스트와 같은 것은 나중에 반영시키는 것이다. 참고: 나중에 나오는 useOptimistic 는 이와는 반대의 개념이다. 서버의 응답을 기다리지 않고 UI를 먼저 업데이트를 해준다. (예를 들어 좋아요기능)import { memo } from 'react';const Sl..
html 에서 사용하던 for inputstr React에서 사용할 경우react는 JSX를 사용하기 때문에 자바스크립트의 for예약어와 겹친다. 그래서 htmlFor를 사용한다. label과 input을 연결해야 할 때 htmlFor을 사용하여 연결한다. ➡️ 연결시, label을 클릭했을 경우 input에 자동적으로 focus를 해준다. label에서는 htmlFor을, Input에서는 id를 동일하게 부여하면 끝userId접근성 속성에 전달할 수 있는 고유한 Id를 생성하기 위한 훅같은 컴포넌트를 여러개 사용시, Dom 의 id가 중복이 되는 문제가 생겨난다. 그래서 useId는 컴포넌트의 고유한 ID를 생성하여 고유 ID를 생성해주어 해당 문제를 해결해준다. 컴포넌트 최상단에 호출해주기import..
HookReact의 상태 및 생명주기 관리를 위한 함수이다. 사용자의 이벤트를 리액트가 가로채서 처리하는 것을 의미한다. 이를 통해 컴포넌트의 상태 변화, 렌더링 주기를 제어한다. UI 제어와 어떻게 갱신할지(리소스 관리, 비동기 처리) 등을 한다. Hook의 원칙1. 컴포넌트의 영역 안에서만 작동한다. 리액트 함수 컴포넌트에서만 Hook 을 호출하자.2. 기능을 여러 훅으로 나누면 좋다.나누어 있어도 컴포넌트에서 한번에 순차 호출한다. 함수형 컴포넌트 ➡️ 함수 ➡️ 기능 단위 분리 ➡️ 가독성 ➡️ 테스트 및 유지보수에 유리3. 컴포넌트의 최상위 레이어(스코프)에서만 호출해야 한다. 블록 내부에서는 호출할 수 없다. React Hook 상태관리 HooksuseStateuseContextuseReduc..
간단히 브라우저의 렌더링 과정은 이렇다. DOM TreeRender tree 생성LayoutPainting📌 Virtual DOM을 사용하는 이유Virtual DOM을 알아보기 전 어떻게 하여 사용하게 되었는지 알아보자 ! 초기의 브라우저는 주로 정적인 페이지(많은 변화가 없음)를 보여주었기에 SSR(Server Side Rendering) 방식을 사용했다. SSR이란 ?웹 페이지의 렌더링을 서버에 먼저 처리하여 완성된 HTML 파일을 브라우저로 전송하는 방식이다. 단점 : 서버에서 렌더링하여 전달해주기 때문에 일부분의 데이터만을 업데이트 할 수 없다는 것이다. SPA랑 CSR 방식이 등장하면서 돔 업데이트가 많아지고 복잡해지는 것이 많아졌다. 여기서 CSR(Client Side Rendering) ..
📌 Index Scan VS Table Scan(Full Table Search)Index Scan인덱스를 이용하여 필요한 데이터만 조회 ➡️ 인덱스 ➡️ 데이터Table Scan (Full Table Scan)테이블의 모든 데이터를 처음부터 끝까지 훑음 인덱스 없이 전체 검색 ➡️ Index Scan이 일반적으로 더 빠르다, 하지만 인덱스가 없거나 조건에 맞는 데이터가 많으면 Full Table Scan이 발생할 수 있다.📌 Clustered Indext VS Non -Clustered(Secondary) Index Clustered IndexNon-Clustered Index데이터 저장 방식데이터 자체가 인덱스의 순서에 맞게 물리적으로 저장인덱스 별도의 구조에 저장데이터 위치를 참조인덱스와 데이터..
CTE: Common Table Expression테이블을 표현하는 공통적인 방법이며, 기존의 View, Table로 사용하던 것들을 대신할 수 있다.서브쿼리를 마치 뷰처럼 사용하므로 더 편리하고, 복잡한 쿼리가 더 간결하고 간편하게 사용가능하다.➡️ 계속해서 조인을 걸던 방식보다 이렇게 하면 한눈에 보기 편하다 !WITH 절with절은 AS를 통해 서브쿼리에이름을 붙여줄 수 있다. CTE를 표현하기 위한 구문이다.임시테이블을 만드는 점에서 View와 유사하다. 하지만 View는 만들어놓으면 여러 쿼리에서 쓸 수 있지만, With절은 한번 실행할 쿼리문 내에서만 사용할 수 있다.!자주 사용하는 테이블이다 ! ➡️ View이때만 사용한다 ➡️ With, 서브쿼리WITH cte1 AS (SELECT a,..
문제https://github.com/type-challenges/type-challenges/blob/main/questions/00003-medium-omit/README.md type-challenges/questions/00003-medium-omit/README.md at main · type-challenges/type-challengesCollection of TypeScript type challenges with online judge - type-challenges/type-challengesgithub.com✅ 내 풀이type MyOmit = { [P in keyof T as P extends K ? never : P]: T[P];};K는 T의 하위니깐 타입 좁히고, Exclude를..
