남남이루의 고군분투 🌳

| 실무에서 일하면서 느꼈던 헷갈리기 쉬운 기초를 모아보는 시리즈 포스팅 대상 독자 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. 원인 : 한글, 한자, 일본어 등 아시아권의 문자들은 한 글자를 입력하기 위해 조합이 필요하다. ..