싹도 트지 않은 씨앗 개발자

[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..

-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일 것으..

TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null. useContext를 호출한 결과가 null이라서 basename을 가져올 수가 없답니다. 라우터가 provider를 사용하여 컨텍스트를 제공하니 Link 컴포넌트를 제거해보았고, 그것이 곧 정답이었습니다. 상황 react-router-dom의 Link 컴포넌트를 사용한 컴포넌트를 단독으로 렌더링 import { render } from "@testing-library/react"; import { Header } from "shared/ui/header"; test("always true", () => { render()..

문제 상황 우선 로컬에서 프로젝트를 생성하여 작업을 수행하였습니다. Github 상으로 README를 추가하여 원격 저장소를 생성하였고, 곧바로 README를 수정하는 커밋을 남겼습니다. Git remote add 후 git pull을 시도하였으나 실패하였습니다. 원격 저장소를 생성할 때에 독자적으로 README를 추가하고 수정하는 커밋을 남김으로써 로컬 저장소와는 별개의 커밋 이력을 가지게 되었습니다. ※ 두 Initial 커밋은 서로 다른 커밋입니다. 해결 git pull을 사용할 때에 --allow-unrelated-histories 옵션을 사용하여 강제로 커밋을 공유합니다. 해당 옵션을 사용하면 완전히 별개의 커밋 이력을 가진 저장소 간의 커밋을 공유할 수 있게 됩니다. 위의 방법 이외에도 pul..

오류 // TypeError: input.replaceAll is not a function 해결 오류 메시지 중 replaceAll 부분에 눈을 돌렸습니다. 검색하자마자 node 환경에서 replaceAll을 지원하지 않으므로 replace 메서드를 활용하여야 한다는 내용을 접하였습니다. 이전에 Array의 at 메서드 같은 경우 특정 환경에서 사용할 수 없었던 경험이 있어서 빠르게 의심할 수 있었습니다. // before replaceAll(" ", "") // after replace(/\s/g, "") 위와 같이 수정한 후 정상적으로 실행되었습니다.

오류 실전을 멀리 했던 초보 개발자는 Create React App으로 프로젝트를 구성하였다가 위와 같은 실수를 저지르고 맙니다. React App은 이미 HTML body 안에 렌더링되고 있는 것이기 때문에 React 컴포넌트 안에 직접 body 태그를 작성하는 경우, body를 중복해서 사용하는 것이 됩니다. 해결 React 컴포넌트 안에서 사용한 body 태그를 제거하였습니다. 덧 오류 자체는 HTML 요소 간의 부모-자식 관계를 부적절하게 설정하였을 때 발생합니다. 태그 안에 태그가 들어가는 경우 - https://anerim.tistory.com/211 태그 안에 다시 태그가 들어가는 경우 - https://stackoverflow.com/questions/47282998/validatedomn..