본문 바로가기
반응형

언어/Javascript, Typescript39

[js] 2차원 이상 객체의 복사 (얕은 복사 vs 깊은 복사) 1차원 객체일 때는 깊은 복사가 되는 방법들이 2차원 이상부터 내부객체에 대하여 깊은복사가 이루어지지 않을 때 해결하는 방법 얕은 복사 (Shallow copy)란? - 주소 값을 복사하기 때문에 참조하고 있는 실제 값이 같아 원본과 복사본이 서로 영향을 받는다. 깊은 복사 (Deep copy)란? - 실제 값을 독립적인 새로운 메모리 공간에 복사, 참조를 공유하지 않아 원본과 복사본이 서로 영향을 받지 않는다. 2023.02.16 - [개발 용어 정리] - [개발용어] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) [개발용어] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) A = 원본 B = .. 2023. 6. 28.
[js, ts] number타입 전화번호 배열 string타입으로 바꾸기(' - '삽입) JavaScript에서 number타입 전화번호 string타입 배열 전화번호로 바꾸기 - map과 정규식을 사용하여 변환한다. 코드 const holidays = [ 20230101, 20230121, 20230122, 20230123, 20230124, 20230301, 20230505, 20230527, 20230529, 20230606, 20230815, 20230928, 20230929, 20230930, 20231003, 20231009, 20231225, ]; const transformHolidays = (number: Number[]) => { let newArray: string[] = []; number.map((e, i) => { newArray[i] = e .toString() ... 2023. 5. 2.
[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.
[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.
[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.
[js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) [js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) 1. 반응형 웹을 사용할 때, css의 @media screen을 통해 PC와 모바일 화면을 다르게 설정한다. 2. 독자적인 모바일 기기용 UI를 구현할 경우, 홈페이지에 접속하는 기기가 모바일 기기 여부 또는 안드로이드 인지 아이폰인지 종류를 확인을 해야하는 경우가 생긴다. 3. 모바일 화면에선 일부 css나 자바스크립트를 로드하지 않게 하여 성능 최적화를 노릴때도 모바일 기기 감지가 필수적이다. 모바일 / PC 구분하기 ​자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent 라는 객체를 사용하여 아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를 반환하는 방식으로 간편하.. 2023. 4. 6.
반응형

티스토리툴바