Tip4 [TypeScript] keyof/typeof 팁 keyof 연산자 keyof 연산자는 객체 타입의 모든 키를 문자열 또는 숫자 리터럴 유니온으로 반환합니다. interface Person { name: string; age: number; } type PersonKeys = keyof Person; // 'name' | 'age' typeof 연산자 typeof 연산자를 사용하여 변수 또는 객체의 타입을 추출할 수 있습니다. const person = { name: 'Alice', age: 25 }; type PersonType = typeof person; // { name: string; age: number; } const numbers = [1, 2, 3]; type NumbersType = typeo.. 2024. 2. 21. [css] 아래에서 위로 올라오는 애니메이션(?) .contaienr { @keyframes fadeIn { 0% { opacity: 0; transform: translateY(30%); } 100% { opacity: 1; transform: none; } } animation: fadeIn 0.5s ease-in-out; } 2022. 8. 23. [Tip] next.js에서 i18n 을 세팅해보자 i18n 이란? i18n(국제화)이란 응용 프로그램을 다양한 지역에 맞게 조정하는 시스템이다. 여기서는 한국어, 영어 정도의 번역만 다룬다. 기본 동작 원리 next-i18next.config.js 파일을 통해 next-i18next에 대한 구성 환경을 제공한다. 환경 세팅 후 appWithTranslation을 useTranslation 훅에 있는 메서드(?)인 t를 통해서 해당 url에 맞는 번역 기능을 제공한다. next-i18next 설치 npm i next-i18next // yarn add next-i18next 기본 셋업 // next-i18next.config.js module.exports = { i18n: { defaultLocale: "ko", locales: ["en", "ko"],.. 2022. 5. 30. next.js 에서 _middleware.ts의 역할과 최근 활용 예시 프로젝트를 진행하면서 특정 페이지에 접근을 했을 때, 예를들어 로그인을 하지 않았을 때 리다이렉트를 해야하는 경우 next.js 에서는 _app.tsx 파일에서 useEffect를 통해서 토큰과 pathname을 기준으로 리다이렉트를 시키곤 했다. 이때 문제는 접근 안 되는 페이지에 url을 입력했을 때 해당 페이지가 잠깐 노출이 되고 리다이렉트를 시키는 문제가 있었는데, _middleware에 설정을 하면 페이지 전환 없이 바로 원하는 페이지로 리다이렉트를 할 수 있었다. (쿠키에는 접근이 가능한데 localStorage에는 접근이 안 되서 헤멘적이 있다) middleware API 란? request를 기반으로 response를 조작하고 구성하는 방법을 더 잘 제어할 수 있게 제공 되는 API 쉽게 .. 2022. 5. 22. 이전 1 다음
