본문 바로가기
반응형

전체 글281

[js] e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation() JavaScript에서 Event의 중지 관련 e.preventDefault() VS e.stopPropagation() VS e.stopImmediatePropagation() Event.preventDefault() 1. Event 인터페이스의 preventDefault()메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 2. preventDefault()를 호출한 이벤트도 preventDefault이벤트를 받는 요소 중 하나에서 stopPropagation() 또는 stopImmediatePropagation()을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파된다. 3. cancelable: true 없이 Event.. 2023. 4. 28.
[js, Next.js] <input> 한글 입력 후 엔터 시 중복 이벤트 발생 문제 JavaScript, Next.js에서 한글 입력 후 엔터 시 중복 이벤트 발생 문제가 생기는 이유 js혹은 Next.js의 태그에서 숫자 혹은 알파벳 입력 후 엔터 시 이벤트 발생 순서 (onKeyDown, onKeyPress, onKeyUp) - 숫자 혹은 알파벳 입력시 발생 순서: keydown => keypress => keyup - 엔터 입력시 이벤트 발생 순서: keydown => keypress => keyup * 한글 입력시 한글 입력시 발생 순서: keydown => keyup 엔터 입력시 이벤트 발생 순서: keydown => keyup => keydown => keypress => keyup 빨간색 글씨 keyup과 keydown에서 isComposing속성이 true(keyCode .. 2023. 4. 27.
[js] JSON관련 메소드(JSON.stringify(), JSON.parse()) JSON - 메소드 네트워크를 통해 객체를 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 한다. 전환된 문자열엔 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 한다. 아래는 메소드를 구현해 객체를 문자열로 전환하는 코드이다. let user = { name: "John", age: 30, toString() { return `{name: "${this.name}", age: ${this.age}}`; } }; alert(user.toString()); // {name: "John", age: 30} 1. 개발 과정에서 프로퍼티가 추가되거나 삭제, 수정될 수 있다. 2. 삭제, 수정이 될때마다 위에서 구현한 toString()을 매번 수정해야 하는데 이는 매우 비효.. 2023. 4. 26.
[js] 배열 합치기(concat(), spread 연산자, push()) Javascript에서 2개 이상의 배열을 하나의 배열로 만드는 3가지 방법 1. concat()을 이용한 배열 합치기 2. spread 연산자를 이용한 배열 합치기 3. push()를 이용한 배열 합치기 1. concat()을 이용한 배열 합치기 const arr1 = ['a', 'b', 'c']; const arr2 = ['d', 'e', 'f']; const arr3 = arr1.concat(arr2); console.log(arr3); 출력값 ['a', 'b', 'c', 'd', 'e', 'f'] 2. Spread 연산자를 이용한 배열 합치기 const arr1 = ['a', 'b', 'c']; const arr2 = ['d', 'e', 'f']; const arr4 = [...arr1, ...a.. 2023. 4. 25.
[js] 소수점 특정 자리수까지 표시하기 js에서 소수를 소수점 특정 자리수까지 잘라서 표시하는 2가지 방법 1. toFixed() 사용하기 const number1 = 1.234567; const result1 = number1.toFixed(1); const number2 = 98.76543; const result2 = number2.toFixed(2); const number3 = -5.23456; const result3 = (number3).toFixed(3); console.log("result1 =", result1, "result2 =", result2, "result3 =", result3); 출력값 result1 = 1.2, result2 = 98.77, result3 = -5.235 1. toFixed()로 원하는 소수점 .. 2023. 4. 24.
[SW 용어] 브룩스의 법칙(Brooks' law) 브룩스의 법칙(Brooks' law)은 프레더릭 브룩스가 자신의 1975년 저서 《맨먼스 미신》 (The Mythical Man-Month)에서 "지체되는 소프트웨어 개발 프로젝트에 인력을 더하는 것은 개발을 늦출 뿐이다"라고 주장한 법칙이다. * 지체되는 소프트웨어 개발 프로젝트에 인력을 더해서(인력 = 먹을 것) 배가 더 브룩(부룩)하다. 2023. 4. 20.
[Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns, [js] SyntaxError: Invalid shorthand property initializer [Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns 에러 [js] SyntaxError: Invalid shorthand property initializer 에러 아래와 같이 객체 안에서 c = 3으로 선언하였을 경우의 코드가 존재하였을 경우 x = { a:1, b:2, c=3 } console.log(x) [Next.js]에서의 에러창 ./src/main.tsx Module parse failed: Shorthand property assignments are valid only in destructuring patterns (62:34) File was processe.. 2023. 4. 19.
[js] 옵셔널 체이닝(optional chaining)_'?.' 옵셔널 체이닝(optional chaining)이란? 옵셔널 체이닝 "?."을 사용하면 속성이 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 진행한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); 출력값 TypeError: Cannot read property 'street' of undefined 위와 같이 에러가 발생한다. ?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용했었다. let user = {}; // 주소 정보가 없는 사용자 alert( user && user.. 2023. 4. 18.
[Next.js] undefined, null strict모드 해제 tsconfig.json의 compilerOptions내부의 strictNullChecks를 false로 설정해주면 된다. "compilerOptions": { ... "strictNullChecks": false, ... } 2023. 4. 14.
[js, ts] 정규식을 이용하여 공백, 전화번호에서의 -, 특수문자 제거 함수 [js, ts] 정규식을 이용하여 공백, 전화번호에서의 -, 특수문자 제거 함수등 export const trimAll = (str: string) => { const trimStr = str.replace(/\s/g, ""); return trimStr; }; 공백을 제거하는 함수이다. export const trimHpNumber = (str: string) => { const trimStr = str.replaceAll("-", ""); return trimStr; }; 전화번호 ( - ) 제거하는 함수이다. const EX_MARK: /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/gi, // 특수문자가 들어가 있는가? export const CHAR_DEL =.. 2023. 4. 7.
반응형

티스토리툴바