유틸리티 타입 (+MappedType)
1. Record모든 키를 지정된 타입으로 매핑 (맵드타입이다)그러므로 home이나 about둘중에 하나가 빠져도 안된다type Page = "home" | "about"; type PageInfo = { title: string }; const nav: Rec
K extends keyof T / keyof typeof 사용예제
프로젝트를 진행하면서 한 번 본 적이 있지만 귀찮아서 제대로 확인하지 않았던 부분을 조사했습니다. 초보적인 내용이 많아 조금 부끄럽지만, 다음에 볼 때 잊지 않기 위한 메모로 남겨둡니다! (아래 예시가 궁금하신 분은 읽어보셔도 좋습니다!)1 . K extends key
판별가능한 Union타입
하나의 타입을 사용하지만 이 타입이 어느 경우에는 A로 사용되고 어느 경우에는 B로 사용되는 경우가 있었다각 경우에 따라 타입을 만들게 되면 넘기게되는 파라미터가 많아지게 되기때문에 굉장히 불편하다그래서 마지막에 사용하는 컴포넌트에서 해당 타입을 union타입을 확인후
Vue 프로젝트에서 동일 이미지 URL로 인한 캐싱 문제 해결 방법
Vue 프로젝트에서 API를 호출해 이미지를 변경할 때, 동일한 이미지 URL을 사용하는 경우가 있습니다 이러한 경우 이전 이미지가 캐시되어 남아있는 문제가 발생할 수 있습니다. 예를들어 과거 프로젝트에서는 /img/[userId] 형식의 URL을 사용하였습니다. 이
자바스크립트에서 객체는 값의 순서를 보장하는가?
(예제 소스코드의 출력결과)정답은 객체는 값의 순서를 보장하지 않는다 그렇기때문에 순서를 보장해야하는 경우 배열을 사용해야한다예를 들어서 아래의 예제에서 obj의 순서는 보장이 되지않는다<body> <button onclick="showObjectOrder()
npx란 무엇인가 (npm과 npx의 차이)
npx를 실행후 npm 패키지가 비어있는것이 확인가능하다tailwindcss의 설치중 아래와 같은 cmd가 있었고 npx는 무엇인가 궁금했기에 조사하였다npm install -D tailwindcss npx tailwindcss initnpx와 npm의 차이 요약한줄
Tailwindcss의 Grid와 Order을 사용해서 순서 변경하기
( ↑ SP화면)( ↑ PC화면)아래와 같은 기능을 구현하는데 Grid와 Order를 사용하였다PC화면에선 1 , 2 , 3 요소가 한줄로 표시된다SP화면에선 1 , 3이 첫번째 줄로 표시되며2가 두번째 줄로 표시된다Grid와 Order을 사용하면 위와 같은 기능을
Form태그
(예제1의 실행화면)개인적으로 서버에 데이터 전송시에 Form태그를 사용하지 않았다그러나 HTML에서 제공하는 강력한 기능들이 많이 준비되어 있어서 사용하는 편이 여러므로 좋다는걸 프로젝트를 진행하며 느꼈다1. Form태그HTML에서 form 태그는 사용자로부터 입력을
시맨틱 레이아웃 ( Semantic layout )
시맨틱 (semantic)은 '의미론적'이란 뜻을 가지고있다각 태그가 어떤 의미로 쓰이는지 태그만 보고 알수있다 ( 이미지 참조 )구글의 웹크롤러가 해당 페이지를 조금 더 쉽게 이해할수있으므로 SEO에 이점이 있다<header>, <nav>, <article>, <se
구글 api 인증방법 3가지에 대해서
크게 API키를 이용한 방법 , OAuth 2.0 클라이언트 ID , 서비스 계정이 있다해당 인증방법들에 대한 특징과 차이점을 정리했다API 키설명: 사용자가 로그인하지 않아도 접근할 수 있는 공개 데이터를 사용할 때 주로 사용됩니다. API 키는 단순한 접근 권한을
가주어/진주어와 강조구문(it~that~)
1.가주어/진주어주어의 명사부분이 길어져서 주어부분(진주어)을 뒤로 보내고 주어가 it(가주어)으로 대체된것임 ( 영어는 서두가 긴것을 좋아하지 않기때문에 )원래 주어 부분의 to/that(명사절)/동명사 를 뒤로 보내고 그 자리에 가주어 it으로 표기한다To live
버퍼와 스트림에 대해서
버퍼와 스트림버퍼는 데이터를 메모리에 임시로 저장하는 공간을 의미한다스트림을 버퍼에 저장된 데이터를 사용하는 방식을 의미한다 ( 지속적으로 전달하는 방식 )버퍼버퍼는 동영상등의 데이터가 프로그래밍으로 핸들링 될수있도록 메모리에 저장하는것이다 100mb의 동영상을 재생하