JavaScript (28) 썸네일형 리스트형 [typescript] d.ts 파일을 js 프로젝트에서 사용할 수 있을까? .d.ts 파일을 js 프로젝트에서 사용할 수 있을까요? js 개발자의 타입 안전성을 보장하면서 말입니다. 아래 페이지의 스크립트를 이용하여 js 파일의 대략적인 타입을 .d.ts 파일로 추출한뒤, .d.ts의 타입을 좀 더 상세하게 작성했습니다. https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html Documentation - Creating .d.ts Files from .js files How to add d.ts generation to JavaScript projects www.typescriptlang.org npx -p typescript tsc src/**/*.js --declaration --allo.. CSS 애니메이션 : Transition Tansform으로 변환을 했다면, Transition으로 이전과 이후를 이어줍니다. 전환은 고도로 구성할 수 있지만 두 가지 값만 필요합니다. 애니메이션을 적용하려는 속성의 이름 애니메이션의 지속 시간 여러 속성에 애니메이션을 적용하려는 경우 쉼표로 구분된 목록을 전달할 수 있습니다. all도 가능하지만... 애니메이션은 소금과 같습니다. 너무 많으면 요리가 망합니다. .btn { transition: transform 250ms, opacity 400ms; } .btn:hover { transform: scale(1.2); opacity: 0; } Timing functions 웹에서 "모션"에 대해 이야기할 때 실제로는 시뮬레이션된 동작에 대해 이야기하고 있습니다. 픽셀 자체는 디스플레이에서 움직이.. 리액트 라우터 v6(React Router v6) 딥 다이브 https://reactrouter.com/docs/en/v6/getting-started/concepts#main-concepts React Router | Main Concepts Declarative routing for React apps at any scale reactrouter.com 요즘은 대부분의 회사들이 CRA 대신 next.js를 디폴트로 사용하는것 같지만, 클라이언트 사이드 렌더링 기반 프로젝트를 제로부터 구축해야 하는 경우, 라우팅은 필수다. 직접 구축할 수도 있지만, (useEffect로 간단하게 할 수 있음... 과연 간단할까? 좀비 차일드 문제를 검색해보자) 대부분 리액트 라우터를 사용한다. 리액트 라우터는 6 버전부터, 이라는 컴포넌트와 함께, 컴포넌트 트리의 레이아웃에 직.. 프론트엔드 지식 : Javascript Critical Rendering Path 원문 링크 정의에 따르면 Critical Rendering Path는 브라우저가 HTML 페이지를 가져오는 시간과 사용자가 시각화할 수 있는 웹 페이지 구축을 시작하는 시간 사이에 경로를 만드는 단계의 모음일 뿐입니다. 이 과정에서 브라우저가 수행하는 단계를 최적화해야 합니다. 크리티컬 렌더링 패스 최적화란, css, javascript, html을 적게 가져오고, 파싱 및 실행하여, 사용자의 인터랙션까지의 시간을 단축시키는 것을 의미한다. The Document Object Model 모든 웹 페이지에는 Document Object Model 또는 DOM이 있습니다. 이것은 구문 분석(parsed)된 상태에 있는 전체 HTML 페이지의 객체 표현입니다. HTML이 구문 분석되면 DOM 트리가 생성됩니.. 함수형 자바스크립트 : Frisby 교수의 Composable Functional JavaScript https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript Professor Frisby Introduces Composable Functional JavaScript This course teaches the ubiquitous abstractions for modeling pure functional programs. Functional languages have adopted these algebraic constructs across the board as a way to compose applications in a principled way. We can do the same in JavaScri.. reveal.js - 웹 기술로 PPT(발표자료)를 만들어보자! https://revealjs.com/ The HTML presentation framework | reveal.js Documentation and demos for the open source reveal.js HTML presentation framework. revealjs.com 개발자에게 ppt(발표자료) 제작 프로그램 (키노트, 파워포인트)로 발표자료를 만드는 작업은 여간 고된 일이 아닙니다. 만약 발표자료를 css와 html, 때때로 js를 활용하여 만든다면 어떨까요? 특히 개발자들이 문서 작성 시애용하는 markdown을 이용하면, 더 쉽게 문서를 만들 수 있을 것입니다. reveal.js를 이용해 웹 기술로 간단한 발표자료를 만들어 보겠습니다. 기본 설정하기 해당 튜토리얼은 코드 샌드.. 브라우저에서 ESModule 사용하기 Super Simple Start to ESModules in the Browser (kentcdodds.com) Super Simple Start to ESModules in the Browser All major browsers support ESModules now. Here's how to get started using them. kentcdodds.com 위 포스트의 요약본이다. 1. 인라인 스크립트로 사용하기 2. import해서 사용하기 // script-src.js import {appendDiv} from './append-div.js' appendDiv('Hello from external script') 중요 : .js 확장자 적어주기 (url에서 가져오는 경우 상관없음.) 비동기 .. [Epic React] Dom Api로 비동기 렌더링 Get Really Good at React | Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev 해당 클래스를 내돈내산으로 공부하며 작성하는 짤막글이다. 바닐라 자바스크립트의 dom api를 사용해서 functional하게 dom을 조작해 보려니 뭔가 생각했던 대로 동작하지 않는다. 그래서 심심해서 dom을 비동기적으로 조작하는 짤막한 코드를 작성해 보았다. root() .then($root => document.body.append($root) || $root) .then($root => Promise.all([$root, div()])) .then(([r, d]) => r.append(d)) async function di.. 이전 1 2 3 4 다음
