전체 글 (60) 썸네일형 리스트형 [vue3] radar chart를 제작한 공통 컴포넌트 표시되지 않는 문 (feat:chart.js 이용) 문제 발생details 태그를 이용하여 radar 차트가 그려지는 공통 컴포넌트를 제작하였다. 처음에 표시되는 컴포넌트를 클릭하면 제대로 차트가 표시되는 데, 그 이후에 두번째로 오는 컴포넌트를 클릭하면 아무 차트도 안 그려지는 문제가 발생하였다. 문제 해결이유를 분석해보다가 살펴보니 id 이름을 통해서 canvas를 조작하고 있었기 때문이었다. 공통컴포넌트다 보니 아무래도 처음 id만 찾을 수 있었기 때문에 나머지 id를 확인을 못하고 있었다. 그리고 애초에 id는 중복으로 적용이 불가능하기 때문에 발생되는 문제였다.const ctx = document.getElementById('chart') as HTMLCanvasElement;그래서 이 문제를 해결하고자, id를 고정이 아닌 매번 새로운 id를 .. [JavaScript, Vue]details/summary 태그 toggle 기능 막기 문제점보통 details와 summary 태그를 이용하게 되면, A를 클릭하든, B를 클릭하든 toggle 이벤트가 발생하여 숨겨져있는 내용이 나오게 됩니다. 하지만, A만 클릭했을 때는 다른 이벤트가 발생하고 B를 클릭해야지 toggle 이벤트가 발생되게 하고 싶었기 때문에 각자 영역에 다른 이벤트를 만들었지만 여전히 toggle 이벤트가 발생하였습니다.그 이유는 이미 해당 태그 내에는 기본동작으로 toggle이 숨겨져있었기 때문입니다. 해결방법click.prevent를 이용하여 details의 태그의 기본 동작을 실행하지 않게 하여 A클릭 시에도, toggle기능이 활성화되지 않게 하였습니다. click.prevent는 Event.preventDefault()인데, 이 메서드는 어떤 이벤트를 명시적으.. [vue3+TypeScript] Swiper의 type을 지정해주자. (swiperRef = swiper)"@slideChangeTransitionEnd="slideChange">여기서 swiper의 타입을 명시 해줘야하는데, 아무리 찾아도 이와관련한 내용이 없다가 한 블로그 글을 보게되었다.아래처럼 import해서 타입을 지정해주니 바로 해결 되었다.import { Swiper as SwiperCore } from 'swiper';const slideChange = (e: SwiperCore) => { currentSlide.value = e.realIndex + 1;}; 참고 { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Sli" dat.. DHCP는 무엇일까? DHCP란? Dynamic Host Configuration Protocol(동적 호스트 구성 프로토콜)의 약자로, IP 네트워트에 사용되는 네트워크 프로토콜입니다. IP주소 및 기타 통신 매개변수를 네트워크에 연결된 장치에 자동으로 할당해주는 역할을 합니다. 즉, 클라이언트에게 일정 기간 임대를 하는 동적 주소 할당 프로토콜입니다. 만약 수동으로 IP주소를 할당한다면 비효율적이고 시간이 지나치게 많이 소요되며 오류가 발생할 가능성이 높습니다. DHCP는 몇 계층 프로토콜인가요? 7계층으로 application layer 프로토콜입니다. DHCP는 어떻게 동작하나요? 총 동작 과정 1. Client가 네트워크에 접속 시도 DHCP 서버에게 IP 주소 정보 요청하는 메시지를 보낸다(DHCP Discover.. 타입스크립트에서 type과 interface는 언제 사용해야하지? type과 interface의 차이점interface객체 상속을 지원하며 캐싱의 장점이 있다.인덱스 시그니처를 암무적으로 가진다.type모든 유형의 타입을 정의할 수 있고, 중복 정의 문제가 발생하지 않는다.인덱스 시그니처를 가지지 않는다.재선언 불가(const 키워드의 역할)객체 상속을 사용할 때는 interface를 활용하자interface를 이용하여 객체 상속이름을 기반으로 정보를 내부 레지스트리에 캐싱할 수 있어, extends를 사용할 때는 캐싱의 장점을 활용할 수 있다.interface WithId { id: string}interface User extends WithId { name: string}const user: User = { id: '0623', name: 'chanmin'.. [우타스 스터디] 2장 타입 타입이란 자료형으로서의 타입 개발자는 타입을 사용해서 값의 종류를 명시할 수 있고 메모리를 더욱 효율적으로 사용할 수 있다. 값의 크기를 명시하면 컴퓨터가 값을 참조할 때 한 번에 읽을 메모리 크기를 알 수 있어 값을 훼손하지 않고 가져올 수 있다. 집합으로서의 타입 컴파일러는 값이 어떤 일을 할 수 있고, 어떤 일을 할 수 없는지 사전에 알 수 있다. 유효한 값의 범위를 제한해서 런타임에서 발생할 수 있는 유효하지 않는 값에 대한 에러를 방지한다. 정적타입과 동적 타입 정적 타입 동적 타입 실행 시점 컴파일 타임 런타임 개발자 타입 명시 O X 에러 발견 시점 컴파일 타임 타입 에러 발견 프로그램 실행 시 타입 에러 발견 이점 안정성 보장 개발 과정에서 에러 발생 없음 더보기 - 컴파일타임이란? 기계(.. [React] 중복 클릭 방지 구현하기 문제 발생컴퓨터로 웹을 실행하게 되면 기록 및 피드를 등록할때 빠르게 등록이 되지만 모바일 같이 느린 데이터를 사용하는 기기는 지금 등록중인지 아닌지를 확인하기가 어려워서 사용자가 중복으로 클릭한다는 문제점이 발생하였다. 해결우선 react-query를 사용하고 있기때문에, react- query의 isLoading을 사용하기로 했다. 등록 중일 때(Loading)는 유저가 화면을 누를 수 없도록 dimmed처리를 하고, Spinner를 보여주며, 등록 버튼도 비활성화되게 설정하였다.export const NewFeed = () => { const { mutate, isLoading } = useNewFeedMutation(); return ( ... .. [JS 알고리즘] 특정 범위에 해당하는 원소 개수 구하기(lowerBound,upperBound) lowerBound(arr,x) 정렬된 순서를 유지하면서 배열 arr에 x를 넣을 가장 왼쪽 인덱스를 반환 upperBound(arr,x) 정렬된 순서를 유지하면서 배열 arr에 x를 넣을 가장 오른쪽 인덱스를 반환 const lowerBound = (arr, target, start, end) => { while (start = target) end = mid; else start = mid + 1; } return end; }; const upperBound = (arr, target, start, end) => { while (start < end) { let mid = parseInt((.. 이전 1 2 3 4 5 ··· 8 다음
