본문 바로가기

분류 전체보기37

[이펙티브TS] DOM 계층구조 이해하기 (아이템 55) 브라우저 타입 오류 function handleDrag(eDown: Event) { const targetEl = eDown.currentTarget; targetEl.classList.add("dragging"); // ~~~~~~~ Object is possibly 'null'. // ~~~~~~~~~ Property 'classList' does not exist on type 'EventTarget' const dragStart = [eDown.clientX, eDown.clientY]; // ~~~~~~~ Property 'clientX' does not exist on 'Event' // ~~~~~~~ Property 'clientY' does not exist on 'Event' const .. 2023. 8. 14.
[TS] 타입 좁히기 타입 좁히기( 타입스크립트 핸드북 ) 원본 보기 function padLeft(padding: number | string, input: string) { return " ".repeat(padding) + input; // Argument of type 'string | number' is not assignable to parameter of type 'number'. Type 'string' is not assignable to type 'number'. 이 코드는 string|number 타입을 repeat의 인자로 넘기려고 해서 문제가 발생한다. repeat는 number 타입만 받을 수 있다. typeof narrowing function padLeft(padding: number | stri.. 2023. 8. 13.
'rm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. $ rm -rf dist && node ./scripts/build.js 'rm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. package.json에서 scripts를 작성하고 실행시키니 이런 오류가 문구 출력됨. rm은 윈도우에서 동작하지 않는 명령어이다. 윈도우 환경에서는 rmdir로 변경해 주어야 한다. 또한 -rf도 rm의 명령어이기 때문에 /s 로 변경해 준다. -rf와 /s 둘다 재귀적으로 지정한 디렉토리 내부를 삭제하라는 뜻이다. /s의 경우 실행 전에 실행하겠냐고 묻는 메시지가 나타나기 때문에 이 과정을 생략하려면 /q 명령어도 추가해준다. // 고친 스크립트 "build": "rmdir /s /q dist && node ./scripts/buil.. 2023. 8. 13.
[이펙티브TS] 오버로딩보다 조건부 타입 사용하기(아이템 50) function double(x) { return x + x; } double 함수에는 string이나 number가 들어올 수 있다. function double(x: number | string): number | string; function double(x: any) { return x + x; } const num = double(12); // number|string const str = double("x"); // number|string 이런 결과 나옴. 타입이 아직 포괄적이다... 제네릭을 사용하면? function double(x: T): T; function double(x: any) { return x + x; } const num = double(12); // 12 const st.. 2023. 8. 12.
[프로그래머스] n^2 배열 자르기 https://school.programmers.co.kr/learn/courses/30/lessons/87390 문제 설명 정수 n, left, right가 주어집니다. 다음 과정을 거쳐서 1차원 배열을 만들고자 합니다. n행 n열 크기의 비어있는 2차원 배열을 만듭니다. i = 1, 2, 3, ..., n에 대해서, 다음 과정을 반복합니다. 1행 1열부터 i행 i열까지의 영역 내의 모든 빈 칸을 숫자 i로 채웁니다. 1행, 2행, ..., n행을 잘라내어 모두 이어붙인 새로운 1차원 배열을 만듭니다. 새로운 1차원 배열을 arr이라 할 때, arr[left], arr[left+1], ..., arr[right]만 남기고 나머지는 지웁니다. 정수 n, left, right가 매개변수로 주어집니다. 주어.. 2023. 7. 21.
[프로그래머스] 기능개발 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자.. 2023. 7. 14.
[프로그래머스] 오픈채팅방 문제 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. "[닉네임]님이 들어왔습니다." 채팅방에서 누군가 나가면 다음 메시지가 출력된다. "[닉네임]님이 나갔습니다." 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다. 예를 들어, 채팅방에 ".. 2023. 7. 12.
[jest/rtl] 강의 기록(msw, 비동기) MSW(Mock Service Worker) 왜 사용하나? 서버, 네트워크 상태에 의존하지 않고 안정적인 테스트 가능, 실제 서버를 거치지 않아 빠른 피드백, 가짜 응답을 통해 다양한 시나리오에 대응 가능 (그냥 더 용이하다는 뜻...) 설치(REST API) npm install msw // 폴더 생성 src/mocks // 파일 생성 src/mocks/handlers.js 핸들러 세팅하기 // handlers.js import { rest } from 'msw' rest.get("url", (req,res,ctx) => { 원하는 내용 작성 }) 통합(Integrate) // 파일 생성 src/mocks/server.js 핸들러 연결하기 //server.js import { setupServer } .. 2023. 7. 10.

티스토리툴바