와칸다개발자

리스트 예시: 게시물이 존재할 경우 3건을 노출합니다.

• type challange 취준생을 벗어나 어엿한? 직장인이 되어서 양질의 글쓰기를 하려 했으나 쉽지않다. 그냥 되는대로 공부한거 기록하고 포스팅 하겠다. Pick interface Todo { title: string description: string completed: boolean } type TodoPreview = MyPick const todo: TodoPreview = { title: 'Clean room', completed: false, } 타스에서 기본적으로 제공해주는 유틸리티 타입인 Pick이다. 제너릭 타입에서 뽑고싶은 속성만 뽑는다. 답 type MyPick = { [key in K]: T[key]; } K extends keyof T 는 K가 T 제너릭 타입이 가지고 있는 속성들의 서브타입임을 명시해준다.. 2022.11.03
• axios-mock-adapter 인스턴스 제대로 넘기기 axios-mock-adapter 는 react 측에서도 권장하는 mocking 라이브러리이다. react-testing-library 에서는 서버에서 실제로 데이터를 받아와서는 안되고 모킹 데이터를 만들어 테스트 해야 한다. import axios from 'axios'; const mock = new MockAdapter(axios, { delayResponse: 200 }); // 2022.07.14
• CSS pointer-event 속성 ref https://webdir.tistory.com/506 CSS 이벤트 제어(pointer-events ) 속성 흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지 webdir.tistory.com 유저 이벤트를 피하고 싶을 때 display: none 을 한다거나 display: hidden 속성을 주게된다. 하지만 opacity 속성은 여전히 태그가 위치하게 되고 이벤트 또한 동작한다. 속성 위치 점유 이벤트 활성화 opacity: 0 O O visibilty: hidden O X display: none X X pointer-events 이 속성은 HTML .. 2022.07.14
• 비슷하면서 다른 git(1) reset와 revert 차이 git을 사용하면서 되돌려야 하는 경우가 있다. 비슷하지만 다른 reset 과 revert 의 차이를 알아보자. 둘의 기능은 커밋을 되돌린다는점에서 똑같다. reset reset은 과거로 시간여행입니다. reset은 현재 사건을 기억에서 지우고 과거로 돌아가는 것입니다. 다음과 같은 로그가 있습니다. 잘못된 커밋을 되돌려야 합니다. 먼저 reset 에는 옵션이 있습니다. git reset --soft ${커밋 해쉬 아이디} git reset --mixed ${커밋 해쉬 아이디} git reset --hard ${커밋 해쉬 아이디} --soft는 인덱스를 보존합니다. 커밋 메시지 작성 전 상태를 유지합니다. 즉 현재 작업한 내역이 stage area에 있습니다. --mixed는 인덱스를 취소합니다. 현재 .. 2022.06.18
• 브라우저 렌더링 동작 과정, script 태그 위치 ref https://wormwlrm.github.io/2021/03/27/How-browsers-work.html https://hahahoho5915.tistory.com/31 https://d2.naver.com/helloworld/59361 https://web.dev/critical-rendering-path-constructing-the-object-model/ https://web.dev/critical-rendering-path-render-tree-construction/ 위 게시글들을 읽고 나름 정리한 것입니다. 프론트 엔드 개발자 라면 프레임 워크 단에서에 최적화 예를 들자면 (ex. React.memo, useCallback) 등 중요 하지만 브라우저의단 에서의 동작도 필수로 알아야.. 2022.06.15
• 우아한 타입스크립트 실전 코드 작성하기(2) 오버로딩 흉내내기 ts,js에서는 오버로딩을 지원하지 않는다. 오버로딩이란 같은 메소드 명이라도 변수의 타입, 변수 길이에 따라 다르게 구현하는 것 일단 코드를 보자 function shuffle (value: string | any[]): string | any[] { if (typeof value === 'string') { return value .split('') .sort(() => Math.random() - 0.5) .join(''); } return value.sort(() => Math.random() - 0.5); } const a1 = shuffle('hi mart') // string | any[] const a2 = shuffle(['a','b','c','d','e']); // s.. 2022.06.08
• 웹팩 빌드 시 번들사이즈 문제 웹팩 빌드 시 다음과 같이 비정상적으로 js 파일 사이즈가 커지는 경고가 발생하였다. https://stackoverflow.com/questions/49348365/webpack-4-size-exceeds-the-recommended-limit-244-kib Webpack 4 "size exceeds the recommended limit (244 KiB)" I have two files which are combined under 600 bytes (.6kb) as below. So how is it that my app.bundle.js is so large (987kb) and more importantly how does one manage the size of it? src file index.. 2022.06.06
• 우아한 타입스크립트 실전 코드 작성하기(1) https://www.youtube.com/watch?v=ViS8DLd6o-E 위 영상을 보고 공부한 것을 기록하는 포스트입니다. 제너릭에 따라 조건부 타입 설정하기 interface StringContainer { value: string; } interface NumberContainer { value: number; } type Item1 = { id: T; container: T extends string ? StringContainer : NumberContainer; } 제너릭은 함수나 변수를 호출시 타입이 결정되도록 하는 기능 위 코드에서 T extends string은 제너릭 T가 string 타입에 할당 가능한가? 즉 서브타입이냐에 따라 타입이 결정되도록 삼항연산자를 사용하였다. 하지만 .. 2022.05.26
• 여러가지 형태의 타입가드 https://www.youtube.com/watch?v=ViS8DLd6o-E&t=3158s 이 게시글은 위 영상에서 타입가드 부분을 정리하고 기록한 것임. 타입 가드는 타입 추론의 범위를 좁혀주는 것. 1. 원시 객체 타입가드 function getNumber(n: number | string):number { // n 2022.05.09