싹도 트지 않은 씨앗 개발자

인쇄(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: ..

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

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

문제 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 타입..

프로젝트 디렉토리에 git 연결이 되지 않아요. VS Code 실행 후에도 잘만 작동하던 CLI는 VS Code가 닫힐 때까지 커서만 깜빡이고 조작할 수가 없어요. WSL 확장 프로그램을 설치합니다.

상황 nvm install 옵션 중 lts 옵션을 사용해 보고자 nvm -ls로 확인된 lts 버전 중 lts/Gallium(v16.20.1)을 아래의 명령어로 설치 # 잘못된 명령어입니다. Gallium -> gallium nvm install --lts=Gallium 설치 후 lts 중 Gallium은 없다는 식의 오류가 발생하였으나 대수롭지 않게 넘기고 직접 v16.20.1 버전을 명시하여 다시 설치하였습니다. 하지만 처음 입력된 lts/Gallium이라는 버전이 default로 이미 지정되었고, 터미널을 다시 실행할 때마다 이것을 기본으로 실행하였습니다. 원인 대문자로 시작하는 Gallium이 아니라 gallium으로 입력했어야 옳습니다. 해결 nvm alias default default 버전을..

문제 상황 로직 자체는 간결하게 작성한 것 같으나 제출한 코드가 시간 초과로 통과되지 않았습니다. 글 읽기 - [node.js] 10828번 - 스택 / 시간초과 댓글을 작성하려면 로그인해야 합니다. www.acmicpc.net console.log를 호출하는 횟수가 늘어날 수록 프로그램 실행 시간이 급격하게 늘어납니다. 따라서, 배열에 모든 결과를 저장해 두었다가 배열을 join하여 하나의 문자열로 만든 뒤, console.log를 한 번만 호출하여 해결하는 것이 핵심입니다. const result = []; // ... result.push()로 결과 저장 console.log(result.join('\n')); console.log 호출 횟수에 따라 실행 시간에 큰 차이가 발생한다는 사실만 보면 되..