본문 바로가기

💐 Dev. 채영47

typescript 1 why not javascript 왜 타입스크립트를 쓸까? 첫번째 이유는 안정성, 타입의 안전성 때문에 타입스크립트의 장점을 얻게된다. 런타임 에러, 생산성 향상 등등 타입스크립트가 타입을 제공한다는 점이 가장 큰 장점! 자바스크립트와 타입스크립트의 차이는 자바스크립트는 개발자가 실수를 하더라도 추론해서 맞는 에러가 나지 않는 코드로 출력하려한다. 타입스크립트는 그런 점에서 엄격하게 타입시스템으로 에러를 보내, 코드를 조금 더 분명하게 짤 수 있도록 도와준다. [1,2,3,4] + false; // 1,2,3,4false functino divide(a,b) { return a / b }; divide(2, 3); // o.666666666 /** 인수를 두개 보내야하는데 하나만 보내도 에러나 예외처리없.. 2024. 4. 9.
하위 컴포넌트에서 상위 컴포넌트의 상태를 변경하려할때 React 상위 컴포넌트에서 상태를 선언한 경우 꼭 setState나 useRecoilState 등도 함께 받아와주자. // 상위 컴포넌트 // Todolist.component export default function TodoList({ onDelete, onChangeDone, onUpdateTodoText }) { const todos = useRecoilValue(todoListState); const doneItems = useRecoilValue(doneListState); return ( To Do List {todos.map(todo => { return ( ); })} Done List {doneItems.map(doneItem => { return {doneItem.text}; })}.. 2024. 3. 21.
한글 입력시 두번 이벤트 발생되는 현상 - onKeyPress, onKeyDown, onKeyup 🔍 문제 input 태그에 onKeyDown을 사용했을 때 영어는 이벤트가 한번 들어가는데 한글을 입력하면 두번 이벤트가 발생하는 현상이 있었다. 🔍 원인 KeyboardEvent.isComposing라는 객체가 입력된 값이 조합문자인지 아닌지 확인하는데 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자로 인지되고 영어는 조합문자가 아닌 것으로 입력된다. 한글이 입력될때는 KeyboardEvent.isComposing가 true, 영어일 때 KeyboardEvent.isComposing가 false로 입력되면서 한글은 onKeydown이벤트가 들어갔을때 조합문자인 상태로 한번, 해지된 상태에서 또 한번으로 이벤트가 두번 들어가게된다. KeyboardEvent.isComposing가 fa.. 2024. 3. 17.
이벤트 리스너 | 렌더링시 display 속성 가져오지 못하는 문제 이벤트리스너 사용방법 적용시킬 HTML 속성을 가져온다. 적용시킬 이벤트함수를 만든다 가져온 HTML 속성을 담은 변수에 어떤 이벤트를 했을 때, 함수를 실행할 지 정한다. 클릭 const button = document.querySelector("button"); function handler (e) { console.log("클릭되었습니다"); } button.addEventListener("click", handler); 주의 처음 HTML요소 중 style프로퍼티의 경우 HTML 요소에 인라인 스타일로 직접 설정된 속성만을 반환합니다. 초기 설정이 ""로 세팅이 되어있다는 점을 기억합시다. 아래 코드 기준으로 생각했을 때 js에서 handler함수를 실행해도 바로 css가 적용되는게 아닙니다. 초.. 2024. 2. 28.
구조분해할당 구조분해할당 구조분해할당이란? 말 그대로 구조를 분해해서 할당한다. 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 const obj = { a: 10, b: 20 } function sum ({a: hello, b:world}) { console.log(hello+ world); } sum(obj); // 30 구조분해할당으로 변수값 교환을 할 수 있다. 구조분해할당 없이 변수값 교환하는 방법 let a = 10; let b = 20; const temp = a; a = b; b = temp; console.log(a, b); // 20 10 구조분해할당으로 변수값 교환하기 let a = 123; let b = 456; [ a, b ] = [ .. 2024. 2. 28.
코딩테스트 합격자되기 3,4,5장 [with 묘공단] 3 알고리즘의 효율분석 3-1 시간 복잡도란? 입력값과 연산 횟수의 상관관계에 따라 성능을 측정하는 것 알고리즘의 성능을 나타내느 지표, 낮으면 낮을 수록 좋다. 1차원 배열 검색하기 값을 가장 빨리 찾는 경우는 찾고자하는 값이 배열 1번째 위치해 있을 경우 값을 가장 늦게 찾는 경우는 찾고자하는 값이 없거나 배열 맨 마지막에 위치하는 경우 알고리즘 수행 시간을 측정하는 방법 절대 시간 츶정하는 방법, 시간 복잡도로 측정하는 방법 절대 시간을 측정하는 방법 말 그대로 시간을 측정하는 방식 시간 복잡도를 측정하는 방법 연산 횟수와 관련있음 시간 복잡도를 측정한 결과는 최선, 보통, 최악으로 나눔 점근적 표기법이란 ? 입력 크기를 N으로 일반화하여 연산 횟수의 추이를 나타내는 방식으로 입력 크기에 따른 연산.. 2024. 1. 21.

티스토리툴바