junior developer :)/JS_JavaScript19 [JS]onBlur onClick onfocus onMouseDown(이벤트 동작 순서) 문제 상황 : 모달 창에서 검색을 진행한 후, 검색결과 중 하나의 옵션을 선택하려고 했을 때 선택이 되지 않고 모달창이 닫히는 현상 이번에 구현하고자 했던 건 검색창이 들어있는 검색 모달 창이다. 이렇게 재사용할 수 있는 컴포넌트를 새로 만들어 같은 기능을 하는 모달 창에는 다 해당 컴포넌트를 가져다가 사용하고 있었는데 문제가 생겼다. 각 요소를 클릭 하면 선택이 되어야 하는데.. 저렇게 하얀 모달 창 밖에 있는 요소들을 눌렀을 때 요소가 선택되는 것이 아니라 모달창이 아예 꺼져버린다. 혹시 몰라 onclick 이벤트에 콘솔을 입력해봤지만 아예 콘솔이 안뜨는걸 보니 onclick 이벤트가 아예 실행되지 않는 듯 했다. setOpened(true)} onBlur={() => setOpened(false)}.. 2024. 2. 14. 조건문 체크하기_삼항연산자 , 논리연산자(??, !, !!, &&) 이전에 개발을 하면서 조건문을 사용해야할 때 내가 선호하는 방식은 삼항연산자 활용 방식이였다. 내가 어떤 조건을 거는지 한 눈에 파악하기 쉽다는 이유가 가장 컸다 하지만 그렇게 작성한 코드가 프로젝트에 배포 후 문제가 생길 수 있다는 것을 알았다. 삼항연산자의 장점이라고 생각했던 '조건을 코드로 명확히 볼 수 있다'는 장점이 적어두지 않은 조건에 대해서 예외처리를 해줘야 한다는 단점이 되어 배포 후 문제가 발생했기 때문... 예를 들면 {data?.content?.length !== 0 ? {data} : 결과가 없습니다 위 코드의 경우 data의 길이가 0일 때만 확인 할 수 있고 나머지의 예외상황에 대해서는 걸러내지 못한다는 것이다. data가 null이라면? undefined라면..? 저 코드에서 .. 2023. 12. 29. [js]식 문 값(표현식, 명령문) 원티드 강의를 듣다가 듣게된 식, 문, 값 각각의 정의에 대해 설명해달라고 하면 제대로 설명할 수 있을까? 라는 생각이 들었다 특히 식과 문의 차이는 정확히 설명하지 못할 것 같다. 그래서 오늘은 값, 식, 문에 대해서 다시한번 인지하고 정리해보고자 한다 값(value) 이 세가지 개념 중에서 가장 간단하고 기본이 되는 단위이다. 프로그램이 조작하고 저장하는 정보를 말하며 문자열, 배열, 객체 등 다양한 형태를 가지고 있다. undefined null boolean Number String ... 이처럼 많은 것들이 '값'이 될 수 있다 식(expression) 식은 값을 가지며 값을 반환한다. 표현식이라고도 불리는 식은 어떤 값이든지 계산하고 결과를 반환하는 코드를 표현한다 let result = x .. 2023. 11. 28. [JS]즉시실행함수 iife(특징, 장/단점) 원티드 강의를 듣다가 처음 접하게 된 즉시 실행 함수 , IIFE(Immediately Invoked Function Expression) IIFE는 즉시 실행되는 함수 표현식의 약자이다. let fun = function() { console.log('실행 됨') }; fun(); 이렇게 정의된 함수는 호출해주지 않으면 실행되지 않는 함수이다. 이와 다르게 즉시 실행함수는 아래와 같이 입력하면 바로 실행이 된다. (function write() { console.log('즉시 실행') }()); 보통 함수와의 차이점이라고 하면 함수 리터럴()로 감싼 형태라는 것이다. 소괄호로 감싸지 않는다면 함수 선언문으로 인지된다. 함수 리터럴은 function 키워드, 함수 이름, 함수 본문, 파라미터 리스트로 구.. 2023. 11. 14. 이전 1 2 3 4 5 다음 728x90 반응형
