분류 전체보기 (361) 썸네일형 리스트형 어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션 이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인duklook.tistory.com결과물 미리보기단지 HTML 과 CSS 몇 스푼만 던져주면 구현해볼 수 있는 마키 UI, 같이 구현해 봅시다.여러 줄기로 꼬아보았는데, 실제 결과물은 2개 로 줄었습니다. 이번에 구현해볼 친구는?오늘 인프런의 INFCON 을 소개하는 렌딩 페이지에서 아래와 같이 무한으로 흐르는 UI 를 볼 수 있었습니다. 왠지 구현해보면 재밌을 것 같아서, 이 친구가 동작.. [깃허브 액션 빌드 에러] Error: node_modules/vite/dist/node/index.d.ts(5,41): error TS2307: Cannot find module 'rollup/parseAst' or its corresponding type declarations. 문제상황이 때 까지 아무런 문제가 없다가 오늘 갑자기 깃허브 액션을 통해 빌드를 수행하던 중 현 문제가 발생하였습니다. 에러 전문을 보면 node_modules/vite/dist/node/index.d.ts(5,41): 오류 TS2307: 'rollup/parseAst' 모듈 또는 해당 유형 선언을 찾을 수 없습니다. 라고 표기되고 있습니다. 문제원인이 메시지는 TypeScript 컴파일러가 모듈 해석 방식과 관련하여 경고하는 내용입니다. 주요 원인 아래와 같습니다. - TypeScript의 모듈 해석 설정이 최신 Node.js 버전이나 번들러와 호환되지 않는 옛 방식으로 설정되어 있는 경우- 프로젝트가 사용하는 일부 패키지(여기서는 rollup)가 최신 모듈 시스템을 사용하고 있어, 현재 설정으로는 .. [빌드 에러] node_modules/@testing-library/jest-dom/types/jest.d.ts: - error TS2304: Cannot find name 'expect'. ReturnType<typeof expect.stringContaining> 문제상황vite+ vitest + react 환경에서 npm run build 시 build 가 실패하는 문제가 발생했었습니다. 해당 에러 전문은 아래와 같이 jest 에 대한 참조와 expect 를 찾을 수 없다는 것이 문제였습니다. node_modules/@testing-library/jest-dom/types/jest.d.ts:1:23 - error TS2688: Cannot find type definition file for 'jest'.1 /// ~~~~node_modules/@testing-library/jest-dom/types/jest.d.ts:9:27 - error TS2304: Cannot find name 'expect'. 9 .. 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지 이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을duklook.tistory.com 들어가기 전 | 포스트 작성 방식 변경 합니다.오늘 부터 UI 디자인 애니메이션 연구소 라는 카테고리 타이틀에 맞게 포스트를 작성하는 방식을 바꿔볼까 합니다. Codepen 을 이용해서 여러 가지를 시도하다보니, 나중에 포스트에 작성할 때는 작성한 코드를 일일이 설명하는 방식이 되었고, 게시글의 목적과는 다른 방향으로 적어왔던 것 같습니다. 그래서 2024.06.25 부터는 새로운 방식으.. 자바스크립트로 구현하는 이진 힙 보호되어 있는 글입니다. 사이트맵 색인은 꾸준히 증가하는데, 색인이 실패하는 건 수도 증가? [들어가는 말] 사이트맵 색인도 증가, 실패도 증가명언 웹 사이트를 만들고, 구글 셔치 콘솔을 통해 색인 생성을 신청한지 약 3달이 되어 가는 시점입니다. 원래 이렇게 색인이 늦게 증가하는게 맞는가 싶지만, 시간이 흐를 수록 정상적인 색인 수치의 70% 이상을 육박하여 좋게 보고 있었습니다. 그러던 중, 구글 이메일로 색인이 생성되지 않은 건수가 있다는 메일 받았습니다. 왜 색인을 실패하였을까?상황 파악단 몇 건도 아니고 거의 1/6 가량의 페이지 색인이 실패했습니다. 사이트의 검색 순위를 높이기 위해서는 꼭 해결해야 하는 문제이므로 해당 문제가 발생한 원인을 찾아 보았습니다. 다행히 친절하게 어떤 이유로 색인 생성이 실패되었는지 이유가 모두 나와있었고, 그 중에서 사용자가 선택한 표준이 없는 중복.. 리액트에서 변동 가능성이 없는 변수의 위치는? 함수 내부 VS 함수 외부 함수 내부 인가, 함수 외부인가리액트에서 함수 컴포넌트를 사용하다보면 한 가지 의문이 들 때가 있습니다. 변수는 함수 외부에 두는 것이 좋을까? 아니면 내부에 그대로 두는 것이 좋을까? 에 관해서 입니다. 예를 들어, 다음과 같은 변수가 컴포넌트 내부에 선언되어 있다고 가정해 봅시다.import React from 'react';const MyComponent = () => { const value = 42; return ( The value is: {value} );}; 여기서, value 은 MyComponent 내부에 선언되어 있습니다. 컴포넌트는 함수이므로 상태가 업데이트 될 때 마다 변수는 매번 메모리에 재할당이 됩니다. 그럼 한 가지 생각해볼 수 있습니다. val.. JS/TS/HTML/CSS /... 등 관련 개념 및 활용 예제를 모아두는 아카이브 연관 포스트[연관 포스트] IT 용어 모음집 [모음집] IT 용어 모음집오늘의 명언예제 코드가 있다면 자바스크립트/타입스크립트 기준으로 작성되어 있습니다. libuv 라이브러리libuv는 Node.js에서 주로 사용되는 C 라이브러리로, 주로 비동기 이벤트 기반 프duklook.tistory.com[연관 포스트] 자바스크립트 활용 모음집 자바스크립트 활용 모음집해당 포스트는..자바스크립트 활용을 위한 간단한 예제를 정리해두는 모음집입니다. 필요에 따라 추가될 수 있고, 추가되는 경우 해당 날짜를 기준으로 갱신됩니다. 이미지 미리보기 기능을 구duklook.tistory.com[연관 포스트] 리액트 활용 모음집 리액트 활용 모음집해당 포스트는..해당 포스트는 리액트를 사용하면서 알게된 팁이나 주요하다고 판.. 이전 1 2 3 4 ··· 46 다음
