티스토리

개발 학습 기록

검색하기

블로그 홈

개발 학습 기록

spring92.tistory.com/m

spring92 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[JavaScript] scroll 관련 메서드로 원하는만큼, 원하는 위치로 스크롤하기 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( .. 공감수 0 댓글수 0 2021. 9. 1.
[JavaScript] console.time으로 자바스크립트 코드 성능 측정하기 코드를 짜다보면 어떤 방식이 더 빠를지 궁금해진다. 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; .. 공감수 0 댓글수 0 2021. 8. 18.
[JavaScript] 형변환 시 String() 과 toString()의 차이점 숫자를 문자열로 형변환 시 사용하는 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을 형변.. 공감수 0 댓글수 0 2021. 8. 18.
[JavaScript] 매개변수(parameter)와 전달인자(argument) 매개변수: 함수의 정의 부분에 나열되어 있는 변수(variable) 전달인자: 함수를 호출할 때 전달되는 값(value) function sum(a, b) { ... } sum(1, 2); 위의 함수 sum에서 a와 b는 매개변수(parameter)이고, 함수 sum을 호출할 때 전달되는 1과 2가 전달인자(argument)이다. 공감수 0 댓글수 0 2021. 8. 18.
[JavaScript] 객체 비구조화(구조 분해) 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.. 공감수 1 댓글수 0 2021. 8. 16.
[JavaScript] 함수의 매개변수에 들어올 기본값 설정하기 아래의 경우처럼 함수에 인자가 안 들어올 때를 대비해, 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 공감수 0 댓글수 0 2021. 8. 15.
[JavaScript] script 태그의 위치와 async, defer 브라우저는 html 파일을 위에서부터 차례로 읽어 내려가며 parsing(분석)한다. parsing 도중에 script 태그를 만나면 해당 script를 다운로드 받기 시작하는데, 만나게 되는 script 태그의 위치에 따른 장단점을 살펴보겠다. 1. ... 브라우저가 html 파일을 위에서부터 차례로 읽어내려가다가 이 위치에 작성하면 HTML parsing이 완료된 다음 js 파일 다운로드를 시작하므로 사용자가 HTML 콘텐츠를 빨리 볼 수 있다는 장점이 있지만, 콘텐츠가 js에 의존하고 있다면 의미 있는 콘텐츠를 보기까지 js의 다운로드와 실행을 기다려야 한다는 단점이 있다. 3. async ... script 태그에 aync를 작성하고 head 태그에 넣는 방법도 있다. async는 boolean .. 공감수 0 댓글수 0 2021. 5. 27.
[JavaScript] Uncaught TypeError: Cannot read property 'addEventListener' of null 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에게는 '.. 공감수 0 댓글수 0 2021. 5. 24.
[JavaScript] input enter로 이벤트 발생 keycode deprecated input 태그에 입력을 한 뒤에 따로 submit 버튼을 클릭하는 게 아니라 enter키로 이벤트를 실행하기 위해 아래와 같은 코드를 사용했었다. const inputBox = document.getElementById("inputBox"); inputBox.addEventListener("keydown", (e) => { if (e.keyCode == 13) { console.log("엔터 눌렀을 때만 실행"); } }); 키보드의 각 key마다 숫자로 된 keyCode가 있는데 엔터키의 경우 그게 13이라서 누른 키의 keyCode가 13이면 실행하도록 하는 코드이다. 키보드 이벤트의 종류에는 keypress, keydown, keyup이 있는데 차이점은 아래와 같다. keypress: charat.. 공감수 0 댓글수 0 2021. 5. 20.
[JavaScript] Spread Operator 펼침연산자 펼침연산자는 ...로 표기하며 말 그대로 객체나 배열 내부의 값을 펼쳐주는 연산자이다. 1. 배열에서의 펼침연산자 const weekday = ["Mon", "Tue", "Wed", "Thu", "Fri"]; const weekday2 = [...weekday]; console.log(weekday); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ] console.log(weekday2); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ] console.log(weekday === weekdays); // false weekday와 weekday2를 콘솔에 출력하면 출력값이 같지만, weekday2는 weekday를 똑같이 복사했을뿐 다른 메모리 공간에 만.. 공감수 0 댓글수 0 2021. 5. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.