남남이루의 고군분투 🌳

이 글은 최근에 접한 새로운 JS 문법에 대한 아카이빙입니다. structuredCloneJavaScript의 객체는 별도 변수에 복사할 때 참조된 메모리 주소를 복사하기 때문에 객체 전이(Mutation)가 일어난다. 객체 전이는 쉽게 말하자면 복사해서 만든 객체의 값을 변경했을 때 원본 객체에도 영향을 주는 것을 말합니다.그러다보니 원본 객체에 영향을 주지 않는 복사(deep copy)를 위해서 JSON.parse, JSON.stringify를 활용하거나 lodash라이브러리를 사용하는 등의 방법이 있었습니다. 이번에 객체 복사를 위해 ECMA에 추가된 메서드가 있어서 소개합니다. - 기본 문법structuredClone(value)structuredClone(value, options) - 사용co..

DebounceDebounce란, 입력이 연달아 들어올 때 여러 입력을 그룹으로 묶어서 처리하는 것이다. 예를 들어 1ms 단위로 10번 들어오고 10초 쉬었다가 1ms 단위로 100번 들어왔다면 각각을 단 두번의 입력으로 그룹지어서 처리한다.검색창 input 입력시 매 입력 이벤트마다 조회 요청을 하는 것이 아니라, input 단위를 시간(interval)을 기준으로 그룹지어서 조회 요청을 줄일 수 있다.핵심debounce의 핵심은 "마지막 호출로부터 일정 시간이 지난 후 실행" 구현 (PR)setTimeoutsetTimeout으로 함수 호출할 때 시간 지연을 걸어두고, 시간 지연이 진행중일 때는 함수 호출을 취소한다. (clearTimeout)시간지연이 끝난 요청에 대해서만 함수가 실행된다.this반..

| 실무에서 일하면서 느꼈던 헷갈리기 쉬운 기초를 모아보는 시리즈 포스팅 대상 독자 and 연산자, or 연산자를 사용할 때 결과를 별도로 찍어본다 조건에 따른 컴포넌트 분기 처리할 때 if문만 사용한다 도대체 falsy, nullish가 뭐야 요구사항 예시 Case 1 : 데이터가 있을 때는 데이터를 화면에 표시해주고 OR 데이터가 없을 때는 'no data'를 표시해줘요. Case 2 : 객체의 속성을 화면에 표시하고 싶은데 해당 속성이 없을 때 예외처리를 하지 않으면 에러가 나요. Intro 조건에 따라 다른 컴포넌트를 표시하는 일은 프론트에서 자주 겪는 문제입니다. 이 때 실무에서는 주로 && || 또는 삼항 연산자를 사용하는데요, 조건에 들어가는 데이터가 0인지, undefined인지에 따라 연..

성능측정 : time, timeEnd 함수의 호출 전후에 console.time('id');, console.timeEnd('id') 입력하면 id: --ms 형식으로 걸린 시간이 출력 됨. console.time("for loop"); for (let i = 0; i < 10; i++) { i++; } console.timeEnd("for loop"); 호출 횟수 출력 : count 함수 내부에 console.count('x count'); 삽입하면, 함수가 호출될 때마다 x count : 횟수 형식으로 출력됨. 호출 경로, 디버깅에 용이 : trace 호출된 코드를 감싸는 함수를 기점으로 상위 코드를 줄줄이 출력해줌 그 외 console.table(Object) console.info(msg) con..

1. 목표 : 키보드에 글자가 입력될 때마다, 입력값을 검증하여 사용자가 보다 편리하게 사용할 수 있게 가이드를 해주고 싶다. 그렇지 않으면 제출버튼을 눌러서야 이메일 형식이 틀렸음을 알게되는 것! 번거로움! 2. 문제점 : 입력과 동시에 결과를 표시해줘야하는데 한박자 느리게 검증해서 혼란스러움.. let passWordInput = document.querySelector("#dialog_input"); passWordInput.addEventListener("keydown", (e)=> {validationCheck(e)}); function validationCheck() { // ... 생략 } 3. 원인 : 한글, 한자, 일본어 등 아시아권의 문자들은 한 글자를 입력하기 위해 조합이 필요하다. ..