JavaScript34 DOM Script DOM을 사용하는 경우는 React를 사용하면서 많이 줄어들었다. 하지만 특정 애니메이션 등을 작업하기 위해서 State 등을 사용할 수 있겠지만 Ref를 사용해서 DOM을 변경하는 것도하나의 방법이다. 즉, React를 사용하면서 Ref를 사용한 DOM 스크립트를 사용할 수 있는데, 사용하는 경우가 적다보니 자주 사용하는 명령어 외엔 어떤게 있는지 모르는 경우가 있어 정리를 해보자 DOM 선택하기 const el = document.querySelector(".element2") 가운데에 있는 요소를 가지고 오기 위해서는 querySelector를 사용하면 간단하게 가지고 올 수 있다. document.getElementById 같은 방식으로 가지고 오는 것이 더 익숙한 사람도 있겠지만.. 2024. 5. 15. [JavaScript] && 과 ? 차이 자바스크립트에서 객체를 사용할 때 data && data.list.map 과 data?.list.map 을 사용하는 경우가 있다. 둘다 작동되는 것은 동일한데 어떤 경우에 뭘 사용하는게 좋을까? data && data.list.map && 는 data가 truthy한 값 ( null, undefined, false, 0, NaN, "" [ 빈문자열 ]이 아닌 값 )일 때 data.list.map을 실행한다. 여기서 data는 truthy한 값을 가지고 있지만 data.list가 없으면 data.list.map은 오류를 발생시킨다. data?.list.map ? 는 data가 null 또는 undefined가 아닌 경우에만 data.list.map을 실행시킨다. 만약 data는 존재하지만 data.list.. 2023. 11. 26. [JavaScript] 자꾸 까먹는 e.preventDefault & e.stopPropagation 자바스크립트에서 이벤트는 아주 많이 사용되는 녀석이다. 사용된다고 말할 수준이 아닌 뺄 수 었는 녀석이다. 이때 JavaScript의 이벤트는 자식에서 부모로 전파가 된다. 이것을 버블링이라고 하는데, 조금 더 자세하게 설명하면 요소에 이벤트가 발생하면 제일 상단의 요소를 만날 때 까지 모든 이벤트를 전파시킨다. 또는 a 태그는 클릭하면 페이지를 이동시키고, form 태그는 내부 입력값을 전송한다. 이것은 자식 요소를 클릭해도 동일한 기능을 한다. 이러한 이벤트 전파를 막아버리는 것이 바로 e.preventDefault와 e.stopPropagation이다. e.preventDefault 앞서 이야기 했지만 form 태그나 a 태그는 각각 특수한 기능을 하고 있다. form은 form 안에 있는 입력 요.. 2023. 11. 11. [JavaScript] ?, ! 자바스크립트에서 객체의 값을 사용할 때 객체가 존재하는지 확인하는 경우가 있다. const data = axios.get(~); const list = data && data.list; async await을 사용하는 방법도 분명 존재하지만 React Query를 사용하는 경우 isSuccess 가 되기 전까지 data는 null이 된다. React Query를 갑자기 꺼냈는데, 간단하게 async await을 사용하지 않는 경우를 말한 것이다. &&를 쓰는 행위 자체가 문제가 되지 않지만 이것을 더 간단하게 처리해줄 수 있다. ? 옵셔널 체이닝 옵셔널 체이닝은 중첩된 객체의 속성이 존재하는가에 대한 조건을 간단하게 처리할 수 있다. const data = axios.get(~); const list =.. 2023. 10. 7. [JavaScript] Array at 함수 Array에서는 at이라는 메서드를 사용할 수 있다. 정수값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용할 수 있다. 우리가 일반적으로 배열의 특정 인덱스 값을 조회하기 위해서는 index를 사용한다. const array = ["first", "second", "third"]; const first = array[0]; 순차적으로 조회를 하는 경우 등에는 전혀 문제가 없다. 하지만 마지막 요소를 조회하는 경우 우리는 어떤 방식을 사용할까? const array = ["first", "second", "third"]; const last = array[array.length - 1]; array.length를 구한 다음 -1을 통해서 마지막 값을 가져온다. 해당 방법이 문제는 아니지만.. 2023. 9. 12. [JavaScript] localeCompare sort 로 문자열을 정렬하는 작업을 쉽게해주는 것을 알아냈다. 일반적으로 sort로 문자열을 정렬할 때는 function solution(strings, n) { return strings.sort((a, b) => { if(a[n] b[n]) { return 1; } else if (a < b) { return -1; } else { return 1 } }); } 이런식으로 계산했다. 숫자의 경우 a - b 같은 방식으로 정렬을 쉽게하였는데, 문자열에선 이런 방법이 불가능하다. 이것을 쉽게해주는 것이 localeCompare이다. string.localeCompare(compareString) 사용 방법이 아주 간단한데, string.. 2023. 4. 22. [JavaScript] 공백 표시가 안되는 경우 html에서 는 공백을 나타낸다. 하지만 자바스크립트에서 똑같이 를 넣으면 문자열로 출력된다. 알아보니 자바스크립트에서 공백을 넣어야하는 경우에는 유니코드 문자열을 사용해야 한다고 한다. 유니코드에서 공백은 \u00A0 이다. React에서도 변수에 \u00A0을 넣고 컴포넌트에서 출력하면 공백으로 나오니 자바스크립트에서 공백이 필요한 경우 유니코드를 사용하자! 2023. 4. 14. [JavaScript] Date 함수 시간을 한국 시간으로 변경 JavaScript로 개발하다보면 Date 함수에서 사소한 불편함을 느끼는 경우가 있다. 바로 시간이다. new Date를 사용해서 현재 시간을 가져와서 확인한다면 바로 알 수 있다. // 현재 시간 : 2023-04-13 09:00:00 const curr = new Date(); console.log(curr); // 2023-04-13 00:00:00 Date의 기준이 영국시간으로 9시간 전이기 때문이다. 크게 보면 문제가 없을 수 있다. 모든 시간을 Date를 기준으로 사용한다면? 하지만 어떤 경우에는 9시간 차이로 인해서 13일이라면 12일로 나오는 경우도 있다. 프론트엔드에서 이런 차이가 얼마나 크겠냐 싶지만 크리티컬한 문제를 발생시킬 수 있는 부분이기도 하다. 그럼 이것을 한국 시간으로 어떻.. 2023. 4. 12. [JavaScript] ??와 || 의 차이 JavaScript로 개발하다보면 값의 결정을 내려야 하는 경우가 있다. const getValue = () => { return value ? value : "" } 다음과 같이 value의 값이 있을 때 value 없을 때 다른 값을 넘기는 경우이다. 이때 예시와 같이 삼항 연산자를 사용할 수 있다. 하지만 다른 방법으로는 제목처럼 || 또는 ?? 를 사용할 수 있다. 지금까지는 그냥 손이 가는데로 사용했지만 이 둘의 차이가 뭘까? || 연산자 먼저 || 연산자는 논리 OR 연산자이다. 왼쪽의 피연산자가 truthy인 경우 왼쪽 피연산자를 반환하고 아니라면 오른쪽 피연산자를 반환한다. truthy라는 것은 뭘까? 이것은 조건식에서 true로 간주되는 모든 값을 의미한다. 대표적인 truthy 값으론 .. 2023. 4. 9. 이전 1 2 3 4 다음 반응형
