싹도 트지 않은 씨앗 개발자

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)에 대한 참조 방식 메서드가 배열의 빈 슬롯을 참조하는 방식은 다음의 두 가지로 나뉘며, 일관적이지 않습니다. 빈..

문제 문자열로부터 정규표현식에 해당하는 부분을 제거하려 하였으나, undefined가 삽입되는 현상이 발생하였습니다. replace 함수의 두 번째 인자가 생략되었기 때문입니다. // 반복문 내부 코드 // 탐색 대상 letter 정규표현식 생성 const regexp = new RegExp(letter, 'g'); // 발견된 문자열의 개수를 결과에 더하기(옵셔널 체이닝 ?, null 병합 연산자 ?? 사용) result += input.match(regexp)?.length ?? 0; // input으로부터 검사 완료된 문자열을 전부 제거 input = input.replace(regexp); // ddz=z= // dundefinedz= // dundefinedundefined 해결 replace ..

문제 상황 내 애플리케이션의 기본 주소에 어떻게 접근할 수 있을까? 당신... 이제는 브라우저의 주소창도 확인할 줄 모르게 된 것이오? 라고 생각하실 수 있지만 로컬 환경에서 루트 디렉토리로써 http://localhost:3000/와 같이 주소를 작성하여 테스트를 통과한다 한들 테스트 환경이 달라지면 해당 주소는 무용지물이 되어버리고 맙니다. 그래서 현재 실행중인 환경의 주소에 접근할 수 있는 방법이 필요했습니다. 해결 window.location.origin origin으로 접근하면 프로토콜과 호스트로 구성된 문자열을 반환합니다. origin은 출처를 의미하며, 프로토콜://호스트:포트번호로 구성되지만 http 프로토콜은 80번, https 프로토콜은 443번 포트를 사용하는 경우 포트 번호가 생략되..

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()..

문제 상황 :root에 css 변수를 등록 var()를 사용하여 버튼의 배경색으로 활용 시도 배경색이 투명하게 표시되는 현상 발생 원인 및 해결 색상 변수에 큰 따옴표 사용 큰 따옴표 사용이 원인이었음에도 불구하고 개발자 도구 상으로는 마치 정상적으로 색상을 지정한 것처럼 색상 아이콘이 표시되었습니다. 큰 따옴표를 제거하니 배경색이 제대로 적용되었습니다. 덧 content 속성에는 따옴표를 붙여주어야 합니다.

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

문제 React를 사용하면서 API 요청을 처리하는 훅을 정의하였습니다. 요청 함수로부터 얻은 데이터를 두 개의 state로 분리하여 배열 형태로 반환하고자 하였습니다. 함수 내부에서는 타입이 변수별로 정상적으로 추론되었지만, 실제 사용하고자 할 때 유니온 타입으로 추론되었습니다. 해결 함수 반환 타입을 명시하였습니다. // const 함수명 = (인자): 반환 타입 => {...} export const useGetPerformances = (...): [pageInfo: PageInfo | undefined, data: PerformanceType[]] => { const [pageInfo, setPageInfo] = useState(); // undefined로 할당됩니다. const [data, ..

상황 카카오 지도 API를 활용함에 있어 우선 JavaScript 코드로 작성하여 구현하였습니다. 다음에서 제공하는 주소 검색 서비스와 카카오 지도 서비스 모두 동일하게 daum이라는 네임스페이스를 사용하여 서비스를 이용하고 있었고, 타입을 선언하기 곤란했습니다. '24. 02. 05. - 당장 타입이 필요하신 분은 이쪽으로 https://github.com/JaeSeoKim/kakao.maps.d.ts 변경 - any의 사용 kakao, daum 분리 지도 API를 활용할 때, kakao를 네임스페이스로 하여 타입을 선언한 글을 발견하여 any를 사용해서라도 타입을 정의하고 TypeScript 파일로 변환하고자 했습니다. 빠르게 기능을 완성해야 하는 현실과 타협하여 외부 라이브러리에 대하여 any 타입..

문제 원인 분명 CRA 초기 구성할 때 index.html에 manifest.json으로 링크되는데 어떤 이유에서인지 스스로 manifest.webmanifest로 바꾸어 프로젝트 초기 설정을 해버렸습니다. 확장자가 잘못되었으니 파일이 정상적으로 불러와질 리가 없습니다. 해결 저의 경우, 처음 프로젝트를 세팅할 때 어떤 글을 보고 확장자를 바꾼지는 모르겠습니다만 일단 프로젝트 public 폴더에 작성된 manifest 파일의 확장자를 확인하여 다시 올바르게 작성합니다. 저의 경우엔 json을 그대로 사용하니 webmanifest 확장자 대신 json 확장자로 변경하였습니다. 이제 잘 됩니다. 아플 땐 무리하지 말고 쉽시다.