개발 학습 기록

scrollBy 지정한 픽셀만큼 스크롤하는 메서드 용법 1. window.scrollBy( x값, y값 ); 실행 시 지정한 값만큼 스크롤하며 최극단에 닿아 더이상 스크롤 불가할 때까지 반복 가능. 값의 단위는 px(픽셀)이므로 단위없이 숫자만 입력. 용법 2. 객체 형식으로 옵션값을 전달 window.scrollBy({ left: x값, top: y값, behavior: "smooth" }); left 왼쪽에서부터 얼마나 이동할지 정하는 값 top 위에서부터 얼마나 이동할지 정하는 값 behavior 스크롤 시의 트랜지션을 정하는 옵션 "auto": 탁! 이동. 기본값 "smooth": 스르륵 이동 scroll, scrollTo 지정한 좌표로 스크롤하는 메서드 용법 1. window.scrollTo( ..

JavaScript 2021. 9. 1. 22:42

코드를 짜다보면 어떤 방식이 더 빠를지 궁금해진다. Date를 활용해서 코드의 시작과 끝의 시간 차를 이용하는 방법도 있지만, console.time을 사용하는 게 상대적으로 간단하고 유용한 방법으로 보인다. 시작지점에 console.time(), 종료지점에 console.timeEnd()를 작성해서 테스트하려는 코드를 감싼다. 괄호 안에는 문자열을 작성해서 여러 코드를 테스트하려는 경우 구분해주는 라벨 역할을 하며, 아무 것도 작성하지 않으면 "default: 소요시간ms"의 형식으로 출력한다. const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.time("for 사용"); let result = 0; for (let i = 0; i < arr.length; ..

JavaScript 2021. 8. 18. 20:11

숫자를 문자열로 형변환 시 사용하는 String()과 toString()의 차이점 // 숫자를 형변환 const number = 10 String(number) // 10 number.toString() // 10 number.toString(2) // 1010, 괄호 안에 2~36사이의 정수가 들어가며 해당 진법으로 바꿔준다. 예시는 2진법. // 객체를 형변환 const obj = { name: "charlie" } String(obj) // [object Object] obj.toString() // [object Object] // 배열을 형변환 const arr = [1, 2, 3, 4] String(arr) // 1,2,3,4 arr.toString() // 1,2,3,4 // null을 형변..

JavaScript 2021. 8. 18. 19:23

매개변수: 함수의 정의 부분에 나열되어 있는 변수(variable) 전달인자: 함수를 호출할 때 전달되는 값(value) function sum(a, b) { ... } sum(1, 2); 위의 함수 sum에서 a와 b는 매개변수(parameter)이고, 함수 sum을 호출할 때 전달되는 1과 2가 전달인자(argument)이다.

JavaScript 2021. 8. 18. 03:12

person이라는 객체가 있다. const person = { firstName: "John", lastName: "Watson", }; 이 객체의 firstName과 lastName을 콘솔에 출력하려면 이렇게 하면 된다. const person = { firstName: "John", lastName: "Watson", }; const firstName = person.firstName; const lastName = person.lastName; console.log(firstName, lastName); // John Watson 하지만 이 방식은 person.을 반복하고 있기 때문에 비효율적이다. 비구조화 할당을 사용하면 반복을 피하고 코드의 양을 줄일 수 있다. const person = { f..

JavaScript 2021. 8. 16. 17:54

아래의 경우처럼 함수에 인자가 안 들어올 때를 대비해, default로 사용할 값을 설정할 수 있다. const greet = name => "Hello, " + name; const result = greet(); console.log(result); // Hello, undefined 화살표 함수로 작성할 때, 인자가 하나라면 소괄호를 생략해도 되지만 기본값을 설정해준다면 소괄호를 작성해줘야 한다. const greet = (name = "Ted") => "Hello, " + name; const result = greet(); console.log(result); // Hello, Ted

JavaScript 2021. 8. 15. 23:59

브라우저는 html 파일을 위에서부터 차례로 읽어 내려가며 parsing(분석)한다. parsing 도중에 script 태그를 만나면 해당 script를 다운로드 받기 시작하는데, 만나게 되는 script 태그의 위치에 따른 장단점을 살펴보겠다. 1. ... 브라우저가 html 파일을 위에서부터 차례로 읽어내려가다가 이 위치에 작성하면 HTML parsing이 완료된 다음 js 파일 다운로드를 시작하므로 사용자가 HTML 콘텐츠를 빨리 볼 수 있다는 장점이 있지만, 콘텐츠가 js에 의존하고 있다면 의미 있는 콘텐츠를 보기까지 js의 다운로드와 실행을 기다려야 한다는 단점이 있다. 3. async ... script 태그에 aync를 작성하고 head 태그에 넣는 방법도 있다. async는 boolean ..

JavaScript 2021. 5. 27. 22:15

index.js const inputBox = document.getElementById("inputBox"); inputBox.addEventListener("keypress", (e) => { console.log(e); } }); 위와 같은 코드를 작성하자 "Uncaught TypeError: Cannot read property 'addEventListener' of null" 에러가 발생했다. 직역하자면, null의 프로퍼티인 'addEventListner'를 읽을 수 없음?이 될 거 같다. 나는 변수 inputBox의 프로퍼티인 'addEventListener'를 사용하도록 코드를 작성했는데 왜 null의 프로퍼티라고 할까? 왜냐하면 변수 inputBox에 null이 담겼고, null에게는 '..

JavaScript 2021. 5. 24. 00:01