728x90 분류 전체보기71 The left-hand side of an assignment expression may not be an optional property access 오류 해결 이 오류는 JavaScript 및 TypeScript에서 발생하는데, 객체의 선택적 프로퍼티에 값을 할당하려고 할 때 발생합니다. 선택적 프로퍼티 접근은 ?. 연산자를 사용하여 수행되며, 객체가 undefined 또는 null인 경우 프로퍼티 접근을 방지하고 undefined를 반환합니다. 예를 들어, 다음 코드에서 오류가 발생합니다. const obj = { nested: { property: "value", }, }; obj.nested?.property = "newValue"; 이 경우, 선택적 프로퍼티 접근을 사용하지 않고 객체 프로퍼티에 값을 할당하려면 다음과 같이 코드를 변경해야 합니다 if (obj.nested) { obj.nested.property = "newValue"; } 또는 더 간.. 2023. 4. 12. Partial<T> 를 활용한 객체 초기화 Partial 타입을 사용하여 필수 프로퍼티를 선택적으로 할당할 수 있습니다. Partial는 인터페이스 T의 모든 프로퍼티를 선택적으로 만드는 유틸리티 타입입니다. 예를 들어 다음과 같이 Partial을 사용하여 빈 객체를 생성할 수 있습니다 interface Person { name: string; age: number; job: string; address?: { street: string; city: string; country: string; }; } const person: Partial = {}; 이렇게 Partial 타입을 사용하면, 빈 객체를 생성할 때 모든 필수 프로퍼티를 명시적으로 작성하지 않아도 됩니다. 2023. 4. 12. [Error] Hydration failed because the initial UI does not match what was rendered on the server, Text content does not match server-rendered HTML - hydration 비활성화 위 에러는 일반적으로 서버 렌더링과 클라이언트 렌더링이 다르게 동작할 때 발생합니다. Hydration이란? 더보기 Hydration은 React에서 클라이언트 사이드 렌더링 시 초기 렌더링된 HTML과 클라이언트 측에서 생성된 HTML이 동일한지 비교하는 과정을 의미합니다 React는 클라이언트 사이드 렌더링 시 이전에 서버 측에서 렌더링된 HTML과 일치하는지 확인하여, 일치하지 않으면 해당 부분을 재생성합니다. React에서 hydration을 사용하면, 서버에서 렌더링된 HTML을 기반으로 클라이언트 측에서 생성된 HTML을 업데이트하므로, 초기 렌더링 시간을 단축시킬 수 있습니다. 또한, 사용자가 페이지를 로드할 때 초기 HTML을 보여줌으로써 사용자 경험을 향상시킬 수 있습니다. 하지만, Re.. 2023. 4. 7. Builder 패턴을 적용한 JS 객체 배열 (with typescript) Enum과 string 으로 구성된 객체가 있을때 interface 를 다음과 같이 정의할 수 있다. enum Fruit { APPLE = 'APPLE', BANANA = 'BANANA', } interface MyInterface { A: string; B: string; fruit: Fruit; } 아래와 같은 방식으로 객체를 선언할 수 있다. import { MyInterface, Fruit } from './MyInterface'; const myObject: MyInterface = { A: 'Hello', B: 'World', fruit: Fruit.APPLE, }; console.log(myObject); Builder 패턴을 적용하여 MyInterface 객체 배열을 생성하려면 아래와 같이.. 2023. 4. 6. 이전 1 ··· 14 15 16 17 18 다음 728x90