싹도 트지 않은 씨앗 개발자

[aws-sdk] Module not found: @aws-sdk/credential-provider-ini tried to access @aws-sdk/client-sts (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

개요yarn add @aws-sdk/client-s3Next.js 프로젝트에 aws-sdk(v3) 설치하여 클라이언트에서 S3 관련 작업을 수행하는 경우, peer dependency에 해당하는 모듈을 참조할 수 없습니다.패키지 매니저: yarn 4.4.1 (3.7.0 정도의 버전을 사용하였을 때에도 동일한 오류 발생)Next.js: 13https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html원인(추정)node.js(서버) 환경에서 동작하는 것을 목표로 개발된 sdk이기 때문에 브라우저에서 사용 시 코드가 온전히 실행되지 않거나,Next.js 13 사용 시 common js, es module ..

개요기존에 clip-path: rect로 작성된 코드가 일부 브라우저에서 제대로 동작하지 않습니다.주어진 인자에 따라 사각형의 형태로 영역이 잘려야 하나, 예상과 달리 전부 잘려서 아무것도 보이지 않는 상태가 됩니다.2024년 9월 18일 현재 구글 크롬 브라우저, 마이크로소프트 엣지 브라우저로 아래의 링크 접속 시 rect 예제가 제대로 보이지 않습니다. 반면, 파이어폭스 브라우저에서는 이미지가 보입니다.아래는 MDN clip-path 문서입니다. clip-path - CSS: Cascading Style Sheets | MDNThe clip-path CSS property creates a clipping region that sets what part of an element should be sh..

문제프레임 단위로 export된 이미지가 보이는 대로 저장되지 않고 여백을 함께 출력합니다.해결drop-shadow, blur 등 프레임 외부 영역에 표시되는 옵션을 내보내기 대상 프레임으로부터 숨김 또는 제거하여 보이지 않는 상태로 내려받습니다.이미지 내보내기 시 프레임에 적용된 효과까지 함께 계산되어 저장되므로, 프레임의 콘텐츠만 깔끔하게 저장하고 싶다면 위의 효과들을 제거한 상태로 내보내기를 실행해야 합니다.가령 그림자 효과를 css로 구현할 예정인 경우에는 그림자 효과가 적용된 이미지를 저장해야 할 이유가 전혀 없습니다. 따라서 디자인 상으로 그림자가 표현되어 있다면, 실제로 사용하기 위해 내려받을 때에는 해당 효과를 숨긴 상태로 내려받아야 합니다.덧프로그램은 잘못이 없었습니다. 참고좌표값이 정수..

문제 MathJax를 사용하여 Latex 수식의 변환을 시도하였으나 일부 수식이 제대로 변환되지 않습니다. 원인 변환되지 않는 수식을 개발자 도구로 검사한 결과, 한 줄로 입력한 내용이 서로 다른 span 요소 또는 텍스트 노드로 사분오열되어 입력되어 있는 것을 발견하였습니다. 이러한 요소의 분리는 스타일이 적용되는 경우에 일어납니다. 텍스트 에디터로부터 비롯된 문제로 볼 수 있습니다. 해결 글쓰기 옵션 중 가장 우측에서 HTML 모드로 접근합니다. 수식의 중간에 중첩된 태그가 사용되지 않도록 제거합니다. 또는, 수식 전체를 다시 입력합니다. 제 경우, 수식에 인용문을 지정했다가 해제하는 과정에서 해당 부분에 스타일이 추가되었고, 작성된 식의 일부분을 복사하여 활용함에 따라 스타일을 유지한 채 새로운 태..

인쇄(ctrl + p) HTML 페이지의 background-color 속성이 인쇄 미리보기에 적용되지 않는 현상을 확인하였습니다. 아래는 전체 문서를 검게 칠하여 극단적으로 표현한 예시입니다. 인쇄 미리보기 시 배경색이 전부 사라져 모든 글씨가 보입니다. print-color-adjust 미디어 쿼리를 이용하여 print에 해당할 때, print-color-adjust 속성을 exact로 지정합니다. @media print { body { print-color-adjust: exact; -webkit-print-color-adjust: exact; } } print-color-adjust는 economy와 exact 둘 중 하나를 지정해야 합니다. 기본값은 economy이며, user agent에 의해..

요약 한 번에 여러 단계를 연속적으로 인덱싱하는 부분에 대하여 단계적으로 접근할 수 있도록 변경합니다. type Obj = { a: number, b?: number[] } const arr: Obj[] = [{a: 1, b: [1]}, {a: 2}, {a: 3}]; // before for (let i = 0; i < arr.length; i++){ if (arr[i].b !== undefined){ arr[i].b ; // undefined일 수 있다는 경고 출력 } } // after for (let i = 0; i < arr.length; i++){ const obj = arr[i]; if (obj.b !== undefined){ obj.b; // 경고 미출력 } } 타입스크립트 플레이그라운드 위..

요약 MySQL 연결에 어려움을 겪는 경우 해볼 수 있는 갖가지 방법 적용 socat을 사용하여 소켓 통신을 시도하였으나 배경지식 부족으로 인하여 실패 socat을 통하여 ubuntu localhost:3306 - pc ip 주소:3306 연결 sql 요청 host로 pc ip 주소를 직접 입력하여 socat을 거치는 불필요한 단계 제거 상황 MySQL 서버를 윈도우에서 실행중 동일한 기기의 WSL2 ubuntu 환경에서 node.js(mysql2)를 활용하여 데이터베이스 접근 시도(localhost:3306) -111: ECONNREFUSED 오류 발생 code: 'ECONNREFUSED', errno: -111, sql: undefined, sqlState: undefined, sqlMessage: ..

-111: ECONNREFUSED 윈도우 환경에서 실행중인 MySQL 서버와 동일한 디바이스의 ubuntu 환경에서 실행중인 node.js를 연결합니다. 두 환경 모두 로컬 환경입니다. 준비물 네트워크 연결 요약 두 환경 모두 로컬이지만 서로 분리되어 있으므로 로컬호스트 주소가 아닌 컴퓨터의 ip 주소를 통해 접근해야 했습니다. 외부 데이터베이스 서버에 접근하는 것처럼요. 해결 1. 서버 호스트 변경 요청 대상 호스트 주소를 MySQL이 실행중인 PC의 ip 주소로 변경합니다. const pool = mysql.createPool( { host: 'localhost', // 이 부분을 '172.xxx.xxx.xxx'로 변경하였습니다. user: 'user', database: 'db', password:..

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Filters'. No index signature with a parameter of type 'string' was found on type 'Filters'. 객체의 값에 접근하기 위해 사용한 key가 인터페이스, 타입 정의에 사용된 key의 범위를 벗어나기 때문에 발생하는 오류 문제 Object.keys 메서드를 통해 얻은 key 배열에 대하여 forEach 메서드로 순회 시도 forEach문의 인자로 개별 key에 대한 접근 시도 이 때, forEach문 내부의 값은 무조건 객체가 가지는 key일 것으..

문제 특정 길이를 가지는 새로운 배열을 생성한 후 fill 메서드를 사용하지 않으면 map으로 배열을 순회하더라도 배열의 인덱스에 접근할 수 없습니다. Array 생성 직후 map 호출 new Array(3).map(v => new Array(3).fill(0)); // [ ] fill 메서드 호출 후 map 호출 new Array(3).fill().map(v => new Array(3).fill(0)); // -> [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ] 이러한 차이는 배열의 빈 슬롯에 대한 참조 방식이 달라서 발생함을 알게 되었습니다. 빈 슬롯(empty)에 대한 참조 방식 메서드가 배열의 빈 슬롯을 참조하는 방식은 다음의 두 가지로 나뉘며, 일관적이지 않습니다. 빈..