분류 전체보기 (399) 썸네일형 리스트형 [빌드 에러] 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 부터는 새로운 방식으.. 자바스크립트로 구현하는 이진 힙 들어가는 말 | 시간복잡도 그래프와 Big 5이번 시간에는 이진 힙에 대해서 정리해봅니다. 이진 힙은 자료구조 중에서 이진 트리의 한 유형이며 그 중에서도 완전 이진 트리로 불립니다. 완전 이진 트리이므로 보다 삭제, 삽입, 정렬 연산이 쉬운 점이 장점이고, 삽입과 삭제 연산 자체가 log n 시간복잡도를 가지기 때문에, 효율적인 연산이기도 합니다. 예를 들어, 입력 크기가 n일 때, 수행 시간은 log n에 비례하여 증가합니다. 즉, 입력 크기가 두 배가 되면 수행 시간은 log(2n) = log n + log 2로 증가합니다. 이는 두 배가 되는 경우에도 증가폭이 매우 작음을 의미합니다. 아래 시간 복잡도 그래프를 보면 상수 시간복잡도인 O(1) 바로 위에 O(log n) 이 있는 것을 볼 수 있.. 사이트맵 색인은 꾸준히 증가하는데, 색인이 실패하는 건 수도 증가? [들어가는 말] 사이트맵 색인도 증가, 실패도 증가명언 웹 사이트를 만들고, 구글 셔치 콘솔을 통해 색인 생성을 신청한지 약 3달이 되어 가는 시점입니다. 원래 이렇게 색인이 늦게 증가하는게 맞는가 싶지만, 시간이 흐를 수록 정상적인 색인 수치의 70% 이상을 육박하여 좋게 보고 있었습니다. 그러던 중, 구글 이메일로 색인이 생성되지 않은 건수가 있다는 메일 받았습니다. 왜 색인을 실패하였을까?상황 파악단 몇 건도 아니고 거의 1/6 가량의 페이지 색인이 실패했습니다. 사이트의 검색 순위를 높이기 위해서는 꼭 해결해야 하는 문제이므로 해당 문제가 발생한 원인을 찾아 보았습니다. 다행히 친절하게 어떤 이유로 색인 생성이 실패되었는지 이유가 모두 나와있었고, 그 중에서 사용자가 선택한 표준이 없는 중복.. 리액트에서 변동 가능성이 없는 변수의 위치는? 함수 내부 VS 함수 외부 함수 내부 인가, 함수 외부인가리액트에서 함수 컴포넌트를 사용하다보면 한 가지 의문이 들 때가 있습니다. 변수는 함수 외부에 두는 것이 좋을까? 아니면 내부에 그대로 두는 것이 좋을까? 에 관해서 입니다. 예를 들어, 다음과 같은 변수가 컴포넌트 내부에 선언되어 있다고 가정해 봅시다.import React from 'react';const MyComponent = () => { const value = 42; return ( The value is: {value} );}; 여기서, value 은 MyComponent 내부에 선언되어 있습니다. 컴포넌트는 함수이므로 상태가 업데이트 될 때 마다 변수는 매번 메모리에 재할당이 됩니다. 그럼 한 가지 생각해볼 수 있습니다. val.. [나만의 명언집] GithubActions 을 통한 CI 와 AWS CodePipeline (CodeDeploy)을 통한 CD 구축 | NextJS 프로젝트를 EC2 인스턴스로 배포하는 과정 들어가기 전아마 두 CI/CD 도구를 혼합해서 사용하는 경우는 많이 없을 것 같긴 합니다(현장마다 어떻게 활용하고 있을지 자세히 모르니, 추측일 뿐입니다). 보통 Github Actions + AWS CodeDeploy 만 같이 사용하거나, 아에 CodePipe 라인으로 빌드, 커밋, 배포 까지 한 방에 처리할 수도 있겠죠. 이 두 방식을 같이 사용하는 이유는 학습 목적도 있지만, AWS CodePipe 라인이 제공하는 로그 추적의 이점이 있기 때문입니다. 실제 인스턴스 터미널에서 CodeDeploy 로그를 확인하기 전에 어떤 부분에서 문제가 발생하였는지 대략적, 시각적으로 확인 가능하고, 버킷 마다 버전관리를 자동으로 해주기 때문에 필요에 따라 문제가 발생하면, 이전 버전으로 롤백하여 배포할 수 있.. HTML, CSS 로 불타는 입력창(Input) 만들기 미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을 위치시켜 줍니다. 또한 input 의 경우 속성으로 required 를 지정해 줍니다. 유효성 검사를 통과하는 경우 input:valid { 속성들 } 로 지정한 속성들이 유지되도록 해주기 위해서 꼭 필요한 속성입니다. 아이디 비밀번호 CSSCSS 초기화해당 부분은 불필요한 기본 CSS 속성을 제거하는 부분입니다. input 의 경우에는 기본 border 의 색상을 gray 로 설정하기 위해 border: 1px s.. WIndow 환경에서 Open SSH 로 접속 및 AWS EC2 인스턴스와 연결하기(+ 번외: SCP 사용해서 EC2 인스턴스로 파일 전송하기) 들어가는 말기존에 Putty 를 사용해서만 AWS EC2 인스턴스 터미널로 접근했습니다. 이는 학습목적으로 OPEN SSH 를 이용해 접근해보는 시간을 가졌고, 이 과정에 대해서 정리한 포스트입니다. WSL 설치하기해당 사이트(https://learn.microsoft.com/ko-kr/windows/wsl/install) 에 접속하여 WSL2 를 설치해줍니다.사실 설치를 하지 않아도 최신 PowerShell 에서는 OpenSSH 설치를 지원해주기 때문에 리눅스 가상환경을 윈도우 환경에서 접속하게 해주는 WSL 이 꼭 필요하지 않을 수 있습니다. 다만 저의 경우에는 문제가 있었기 때문에 해당 WSL2 를 같이 설치해주었습니다. Open SSH 설정window powershell 에서 OpenSSH 서버 .. 이전 1 ··· 4 5 6 7 8 9 10 ··· 50 다음
