\(@^0^@)/

브라우저는 HTML을 읽다가 내부, 외부 script 태그를 만나면 스크립트를 먼저 실행해야 하므로 내부의 DOM 작동을 멈추고, 외부는 스크립트를 다운받은 후 남은 페이지를 처리 함. 그래서, 이러한 동작 방식의 단점은 1. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근 할 수 없으므로, DOM요소에 핸들러를 추가하는 등의 행위가 불가능 해짐. 2. 페이지 위쪽에 용량이 큰 스크립트가 있을 경우, 그 큰 스크립트를 다운받고 실행될 때 까지 스크립트 아래쪽을 볼 수 없음. 이러한 문제의 해결방안은 1. body 태그의 맨밑에 script 태그를 놓으면, 스크립트 위에 있는 요소들에 접근이 가능해짐. 하지만, HTML 문서 자체 용량이 클 경우, 브라우저가 HTML문서 전체를 다운로드 한 다음에 ..

Number와 parseInt를 구별하지 않고 사용했었다. 하지만 알고리즘 문제를 풀다 보니까 parseInt는 사용이 가능하지만, Number를 사용하면 계속 틀린 결과를 받아오더라.. 그래서, 이 둘의 차이점이 궁금해져서 한번 정리하고 넘어가면 좋을 것 같다는 생각을 하였다. 아래의 코드는 내가 그 둘의 차이에 의문을 들게 한 백준 10869번 임. // 두 자연수 A와 B가 주어진다. (1 ≤ A, B ≤ 10,000) // 첫째 줄에 A+B, 둘째 줄에 A-B, 셋째 줄에 A*B, 넷째 줄에 A/B, 다섯째 줄에 A%B를 출력한다. // 예제 입력 : 7 3 // 예제 출력 : 10, 4, 21, 2, 1 let fs = require('fs'); let input = fs.readFileSync..

🤔 다른 언어와의 차이점? console.log('a'); setTimeout(function(){console.log('b')}, 1000); console.log('c'); JS를 제외한 보통의 다른 언어들은 위에서부터 아래로 한 줄 한 줄 실행을 하여 위와 같은 코드를 작동시킨다고 하면, a -> (1초 쉬고) b -> c 이런식으로 작동이 된다. 하지만, JS는 다르다. setTimeout 함수를 사용하는 경우 다른 코드들을 다 실행시킨 후, setTimeout 함수에 관한 코드만 1초(혹은 그 이상) 뒤에 작동이 된다. 왜 이렇게 동작하는지 알아보자! ✨ JS 동작원리 1. 코드를 작성하면 STACK이라는 곳에서 위에서부터 아래로 순서대로 실행되는데, 2. Ajax 요청 코드, 이벤트 리스너, ..

jQuery를 몇 달 전에 한번 정도 배운 것도 아니고 사용해본 적? 이 있는 것 같은데, 오늘 코딩애플 JS 유튜브 보다가 살짝 맛만 본 것을 대충 정리하고 넘어가 보자! 🧐 jQuery란? 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 🧐 jQuery 설치방법 jQuery 직접 설치 jQuery 홈페이지 접속 Download jQuery를 클릭 다운로드(Download the comporessed...) 다운로드한 파일을 사이에 불러오기 // 사용예시 jQuery CDN 설치 구글에 jQuery cdn 검색 http://code.jquery.com/ 여러 버전들 중 하나를 복붙 해서, body 태그 끝나기 전에 코드를 넣..

✨ DocumentFragment 노드를 생성해서 사용하면 라이브 DOM 트리 외부에 경량화된 문서 DOM를 만들 수 있음. 프래그먼트에 대한 변경 사항은 문서에 영향을 미치지 않거나, (리플로우 시 에도) 변경 시 성능에 영향을 주지 않음. 정리하면, 라이브 DOM 트리처럼 작동하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면 됨. DOM 트리의 일부가 아닌 DOM 객체 일반적인 사용 사례 문서를 만들고 문서에 요소를 추가한 다음 DOM 트리에 문서 조각을 추가하는 것. DOM 트리에서 문서 조각은 모든 자식으로 대체됩니다. 문서 조각이 메모리에 있고 기본 DOM 트리의 일부가 아니므로 여기에 자식을 추가해도 페이지가 발생하지 않는다. ✨ Document.createDocumentFragmen..

🐱‍👓 옵셔널 체이닝을 배우기 전, 알아야 할 falsey 값 ✨ 옵셔널 체이닝 (Optional Chaining) 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝은 옵셔널 내부의 내부의 내부로 옵셔널이 연결되어 있을 때 유용하게 활용할 수 있다. 🤔 옵셔널 체이닝을 쓰지 않아서 발생한 문제의 예시들 ( 옵셔널 체이닝이 필요한 이유 ) 1. 사용자가 여러 명 있는데, 그중 몇 명은 이메일 정보가 없음. => 그럴 경우, 이메일을 등록하지 않은 유저의 이메일 정보에 접근하면 에러가 발생 2. JS를 사용하여 페이지에 존재하지 않는 요소에 접근해, 요소의 정보를 가져오려 할 때 (옵셔널 체이닝이 나오기 전에는 && 연산자를 사용했지만, 코드가 아주 길어진다는 단점이 있음) l..

해당 데이터를 토대로 깊은 복사와 얕은 복사에 대해 알아보자! ✨ 참조 ✨ 얕은 복사 const a = []; const b = 'hi'; const c = {}; const arr = [a, b, c] // 껍데기 [ 부분은 복사되지만, 배열 안의 a, b, c는 참조 // 문자열, 숫자형, boolean, null, undifined 같은 원시값(객체가 아닌 값)들은 // 애초에 참조가 없기 때문에 복사가 된다. // 정리하자면, 얕은복사는 b 는 원시값이기에 복사가 되지만, // a의 [], c의 {}는 객체이기때문에 복사가 되지 않는다. ✨ 깊은 복사 객체 안에 객체가 들어있을 경우, 깊은 복사를 이용한다. 간단한 객체는 JSON.parse(JSON.stringify(객체))를 사용해도 크게 문제..

MDN이 보기 쉽고, 잘 나와있는 것 같아서 대부분 캡처해서 가져옴. 🧐 2021년 1월 10일과 2021년 3월 1일은 며칠 차이가 날까? 미래의 날짜 (2021년 3월 1일)에서 과거의 날짜 (2021년 1월 10일)을 빼야 함. 두 날짜의 차이를 구해 1000 밀리초, 60초, 60분, 24 시간으로 나누면 결과 값이 나온다. 디데이 계산 할 때 참고 : https://mo-world.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%82%A0%EC%A7%9C-%EC%8B%9C%EA%B0%84-%EB%8D%94%ED%95%98%EA%B8%B0-%EB%B9%BC%EA%B8%B0-%EB%B0%A9%EB%B2%95-j..

setTimeout과 setInterval은 비슷한 효과를 내지만 setTimeout이 한 번만 실행된다 하면, setInterval은 지정한 시간마다 주기적으로 지정한 함수를 실행한다. setInterval(() => { // 내용 }, 밀리세컨); setInterval은 clearInterval이라는 함수로 취소할 수 있다. (setTimeout은 clearTimeout 함수로 취소) 다만, clearTimeout은 setTimeout에 지정한 함수가 아직 실행되지 않았을 때만 취소할 수 있음. let 변수 = setInterval(함수, 밀리세컨); clearInterval(변수); let 변수 = setTimeout(함수, 밀리세컨); clearTimeout(변수); ⚡ 간결한 코드 Tip : |..

✨ slice : 1. 기존의 배열이 변하지 않음. (splice 는 기존의 배열 수정) 2. 배열을 자르기만 할 수 있고, 다른 건 하지 못함 (splice는 배열 안에 새로운 값 추가 가능) ✨ sort : return 값에 따라 어떻게 정렬 할 것인지 나타냄. 기존의 배열을 변화시킴. ✨ sort를 사용하지만, 기존의 배열을 유지하고 싶을 경우 ( slice + sort ) ※ 참고 : ZeroCho Tv - ES2021 자바스크립트 강좌 ※ MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array ※ 더 알아보기 : http://tcpschool.com/javascript/js_standard_..