본문 바로가기
728x90

Todo78

맥 터미널에서 code .입력해서 vscode 실행하기 1. VS Code 실행2. Command + Shift + p 눌러서 명령 팔레트(command palette)(=아래와 같은 창) 나오게하기command palette\는 사용자 설정 할 수 있는 곳3. command palette에 shell 입력하기4. enter~~ 누르기end. 설정 완료! 2024. 4. 25.
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.
728x90

티스토리툴바