FrontEnd5 [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. 브라우저 렌더링 제 velog에 썼던 글을 티스토리에 옮겼습니다. 브라우저 렌더링에 대해서 꽤 예전에 학습을 했었는데 다시금 볼 기회가 생겨서 좋았습니다. 브라우저의 렌더링 과정 요약 1. DOM, CSSOM 생성 HTML CSS 파일은 각각 DOM Tree와 CSSOM 으로 만들어집니다. 파일을 연산과 관리에 유리하도록 Object Model로 만들게 됩니다.2. Running JavaScript (옵션?) JavaScript를 통해서 DOM Tree와 Render Tree를 수정할 수 있습니다.3. Redner Tree 생성 DOM Tree와 CSSOM Tree로 Render Tree를 생성합니다. 순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Redner Tree에는 스타일 정보가 설정되어 있으.. 2022. 7. 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 다음
