개발 일지

클라이언트 전용 애플리케이션으로 작업하는 데 익숙하다면 서버에서 localStorage에 액세스할 수 없다는 사실이 의외로 느껴질 수도 있다. 이는 localStorage가 window 객체에 정의되어 있지 않고 Next.js가 클라이언트 렌더링 전에 서버 렌더링을 수행하기 때문에 발생하는 이슈이다. 즉, 클라이언트에서 페이지가 로드되고 window 객체가 정의될 때까지 localStorage에 액세스할 수 없다는 의미이다. 따라서 window가 브라우저에 마운트 되었을때만 웹스토리지를 세팅하도록 코드를 변경하면 된다. view(string) 에 따라서 화면에 보여지는 UI가 달라진다. (list kanban) export const useViewName = () => { const view = useR..

React.memo를 사용하면 컴포넌트의 props가 변경되지 않았을 때 리렌더링을 건너뛸 수 있다. = 컴포넌트의 props가 바뀔 때만 리렌더링 한다. (항상 보장되지 않는다.) const MemoizedComponent = memo(SomeComponent, arePropsEqual?) memo로 감싸져 있는 컴포넌트는 메모화된 버전의 컴포넌트를 만들 수 있다. 메모화된 버전의 컴포넌트는 일반적으로 props가 변경되지 않는다면, 부모 컴포넌트가 리렌더링 될 때 같이 리렌더링 되지 않는다. memoization이 성능을 최적화하지만, 항상 보장되는 것이 아니므로, React는 여전히 컴포넌트를 렌더링 할 수도 있다. 예시: import { memo } from 'react'; const SomeCo..

1. 타입스크립트가 객체 타입 리터럴의 타입을 해석하는 방법 기존 객체에서 타입을 추론하게 하는 것도 좋지만, 가끔 명시적으로 객체 타입을 선언하고 싶을 때가 있을 것이다. 객체 타입은 객체 리터럴과 유사하지만, 필드 값 대신 타입을 사용해 설명한다는 특징이 있다. 1) 별칭 객체 타입 [덕 타이핑 참고하기 좋은 글] https://velog.io/@thms200/Typescript-Duck-Typing-%EB%8D%95%ED%83%80%EC%9D%B4%ED%95%91 Typescript Duck Typing (덕타이핑) 타입스크립트의 인터페이스에 대한 글을 읽다가 Duck Typing에 대해 알게되었다. 먼저 코드로 개념을 이해해보자. (위의 코드는 [Typesrcipt playground](https..

유니언(Union): 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(Narrowing): 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁혀가는 것 1. 유니언 타입으로 두 개 이상의 타입 중 하나일 수 있는 값을 나타내는 방법 let math = Math.random() > 0.5 ? undefined : "math" //math type: string | undefined 이거 혹은 저거인 타입을 유니언 타입이라고 함 ` | (수직선 연산자)`를 이용해서 표시한다. 2. 타입 어노테이션으로 유니언 타입을 명시적으로 표시하는 방법 변수에 대한 명시적 타입 어노테이션을 제공하는 것이 유용할 때 사용하며, 사용자가 잠재적으로 다른 타입이 될 수 있음을 알고 있을 때 타입..

1. '타입' 정의 - 타입(Type) : 자바스크립트에서 다루는 값의 형태 (값의 속성/메서드/내장되어 있는 type of 연산자) - 타입스크립트가 인식하는 원시 타입 (7가지) string number bigint boolean symbol null undefined - 타입스크립트는 구문에서 변수나 함수의 타입을 유추할 만큼 충분히 똑똑하다. 2. 타입 시스템 - 타입스크립트의 타입 시스템이 코드를 이해하는 방법 코드를 읽고 존재하는 모든 타입과 값을 이해한다. 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다. 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다. 타입 추론 과정을 살펴보자. 다음은 속성을 잘..

vite는 기본적으로 프로덕션 모드에서 Strict Mode를 true로 설정한다. 프로덕션에서 Strict Mode가 켜져있는 이유는 안정성과 성능을 향상시키기 위해서 인데, 'Strict Mode'를 설정함으로써 자바스크립트의 잠재적 오류를 탐지하고 경고 메세지를 출력하는 기능을 제공한다. 프로덕션 환경에서 잠재적인 버그를 발견하는 것은 어플리케이션의 안정성을 향상시키는데 기여한다. 실제로 rollup 옵션 Docs를 보게 되면, 특별한 이유 없이 이 'Strict Mode'를 해제하지 말라고 나온다. (참고 : https://rollupjs.org/configuration-options/#output-strict ) # Javascript에서 'Strict Mode'는 여러 기능들을 제공한다. 암묵..

함수형 컴포넌트에서는 앞서 공부한 라이프 사이클 메서드를 사용할 수 없다. React v16.8부터는 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 유사한 기능을 할 수 있는 기능들을 제공한다. 1. useState 가장 기본적인 hook. 가변적인 상태를 지닐 수 있다. (1) 사용 예 state를 컴포넌트에 추가할 때 이전 state에서 상태값 업데이트가 필요할 때 배열이나 객체 state를 업데이트 할 때 초기값을 재생성하는 것을 막고 싶을 때 key와 함께 state를 초기화 시키고 싶을 때 이전 렌더링 정보를 저장하고 싶을 때 (2) useState(initialState) 컴포넌트 최상단에 state 변수를 할당하며, 컨벤션은 일반적으로 [이름, set이름] 이런식으로 배열 ..

Redirects 유저가 보는 URL의 path를 리다이렉트 시켜서 다른 path로 이동시킨다. next.config.js 에서 redirect를 설정할 수 있다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ]; }, }; 리다이렉션은 동기(async)함수로 source, destination, permanent 프로퍼티를 가지고 있는 매핑된 배열 객체를 반환한다. source : 유입되는 요청 경로 패턴 destination : 라우팅하려는 경로 permanent : true / false true : 클라이언트/검색 엔진에 리다이렉션을 영원히 캐싱하는 경우..

* 23년 5월 5일 Next.js 13.4.0 버전 에서 App Router(stable) 버전이 릴리즈 되었습니다. ** Next.js 12 이하 버전까지는 Page Directory를, 13 버전 이후부터는 App Router를 권장합니다. (방식에 차이가 있으므로 주의) (대표적으로 App Router에서는 Custom App 이 없습니다.) Next에서는 App 컴포넌트를 사용하여 페이지를 초기화한다. 즉, Next는 기본적으로 가장 먼저 App Component를 확인하고 index.js의 컨텐츠들을 확인하기 때문에 모든 페이지들이 통과하는 관문이라고 볼 수 있다. 어떤 컴포넌트가 어느 페이지에 있어야 하는지, 모든 페이지들을 한 눈에 볼 수 있는 청사진 역할을 한다. App 컴포넌트를 사용해..

1. CSS Modules Next.js에서는 module.css 확장자로 CSS모듈을 기본적으로 지원한다. CSS Modules는 유니크한 클래스네임(className)을 생성하여 css의 범위를 한정시켜 독립적으로 사용할 수 있다. 이는 같은 클래스네임을 여러 파일에서 사용해도 충돌이 나지 않게 해주는 장점이 있다. (사용예시) Nav.tsx import { useRouter } from "next/router"; import Link from "next/link"; import styles from ".//Nav.module.css"; export default function Nav() { const router = useRouter(); return ( Home Detail ); } Nav.mo..