Language

[Javascript] this 바인딩 규칙

이 글은 You Don't Know JS - this와 객체 프로토타입, 비동기와 성능 책을 읽고 정리한 내용입니다. 0. 서론 this는 기본적으로 호출부(함수가 어떻게 호출됐는가?)에서 함수를 호출할 때 바인딩 된다. 즉, 함수 호출이 이뤄지는 부분을 확인해야 '현재 context에서 this가 가리키는 것'이 무엇인지 확실하게 알 수 있는 것이다. 단순히 '함수를 호출한 지점'으로 돌아가면 호출부를 확인할 수 있다고 생각할 수 있지만, 코드의 복잡도에 따라 '진짜' 호출부를 찾는 것은 모호할 때가 많다. 따라서, 중요한 것은 호출 스택(현재 실행 지점에 오기까지 호출된 함수의 스택)을 생각해보는 것이다. 이 중 호출부는 현재 실행 중인 함수 '직전'의 호출 코드 '내부'에 있다. function f..

[Javascript] KeyboardEvent.key / 키보드 이벤트

☑️keyboardEvent.key KeyboardEvent는 Shift와 같은 수정자 키 상태 및 키보드 로케일 및 레이아웃을 고려하여 사용자가 누른 키의 값을 반환 key values: 눌린 키가 보여줄 수 있는 값을 가지고 있다면, Unicode character string을 반환한다.(ex. A, b, c, d, ㅇ, ㄷ…) 눌린 키가 컨트롤이나 스페셜한 캐릭터라면, pre-define된 키 값을 반환한다.(ex. Ctrl, alt, shift…) Dead 키가 입력되었다면, Dead라고 나타난다. 값을 알 수 없는 키라면, Unidentified 발생 keyboardEvent sequence: 키 입력시 keydown 이벤트 발생, 반복 입력시 keyboardEvent.repeat = true..

[Javascript] 자바스크립트 문자열 뒤집기

자바스크립트는 문자열을 뒤집는 내장함수가 존재하지 않고, 배열을 뒤집는 함수만 존재한다. 따라서, 문자열을 배열로 나눈 뒤 이것을 뒤집고, 다시 문자열로 합치는 것으로 해결할 수 있다. const str = "abcdefg" const reversed_str = str.split("").reverse().join(""); console.log("원래 문자열: "str); console.log("뒤집어진 문자열:" reversed_str); // 원래 문자열: abcdefg // 뒤집어진 문자열: gfedcba 다만 여기서 주의해야할 점은, join 함수를 사용하는데 있어서 다른 언어처럼 join의 매개변수를 비워놓고 사용하면 안된다는 것이다. join의 매개변수를 비워놓게 되면, 자동으로 ","가 중간에..

[Javascript] 디바운싱과 쓰로틀링 / 연속 이벤트 제어

디바운싱과 쓰로틀링은 모두 웹 페이지에서 발생하는 반복적인 이벤트를 제어해주는 방법이다. 반복적인 이벤트를 제어한다는 것은, 스크롤을 내리는 등의 수많은 반복 이벤트의 횟수를 현저하게 줄여주는 것을 의미한다. 1. 디바운싱: 맨 마지막에 발생한 이벤트만 처리! 2. 쓰로틀링: 이벤트가 한번 발생하면 일정 시간 락다운! 스크롤 이벤트를 예로 들어 디바운싱과 쓰로틀링 이벤트를 간단하게 구현할 수 있다. document.addEventListener("scroll", () => { const scrollValue = document.documentElement.scrollTop; console.log(scrollValue); }) 위의 코드는 기본적인 스크롤 이벤트를 발생시키는 코드이고, 사진은 그 결과이다...

[Javascript] Map 사용법

자바스크립트에서 map은 두 가지이다. 1. Array.prototype.map() : 특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 이 결과를 모아 새로운 배열 반환 2. Map: Java의 HashMap, Python의 dictionary와 같은 {key:value}로 이루어진 자료구조 이번 게시글에서는 2번 Map에 대하여 다룬다. 1. Map이란? Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다. - MDN Web Docs - 맵은 쉽게 말해서 Java의 HashMap, Python의 Dictionary와 같은 자료구조이다. key: value의 형식으로 저장되며, key값을 사용하여 해당 k..

[Javascript] 일반 함수 vs 익명 함수

자바스크립트는 유연한 언어이다. 따라서 다른 일반적인 언어(Java, C)와 다르게, 함수를 선언하고 사용하는데 있어 굉장한 자유로움이 주어진다. 이는 능숙한 사람에게는 굉장한 이점으로 주어질 수 있지만, 미숙한 사람에게는 넘어야 할 허들이 되기도 한다. 자바스크립트에서 함수 선언 방식은 기본적으로 일반 함수와 익명 함수로 나눌 수 있다. 1. 일반 함수 일반적으로 다른 언어에서 사용하는 함수와 동일하다. 사용방식 또한 동일하며, 코드를 조금이라도 읽을 수 있는 사람이라면 매우 쉽게 이해할 수 있는 함수이다. 일반 함수는 다른 말로 함수 선언식이라고도 할 수 있다. function 함수명(){ 함수 로직 } // 예시 function SayHello(){ console.log("hello!"); } Sa..

[Javascript] for 반복문 종류 ( for / for-in / for-of )

1. for: 기본 반복문 2. for-in: 배열의 인덱스를 기준으로 반복 3. for-of: 배열의 요소를 기준으로 반복 1. for 반복문 const arr = ['a','b','c','d','e','f']; for(let i = 0; i < arr.length; i++){ console.log(" "+arr[i]); } // // a b c d e f 가장 기본적인 반복문의 형태로, 타 언어들의 반복문과 동일하다. 내부에 변수를 선언하여 사용하며, 원하는 만큼 반복횟수를 지정하여 반복한다. 2. for-in 반복문 const arr = ['a','b','c','d','e','f']; for(const i in arr){ console.log(" "+i); } // // 0 1 2 3 4 5 어떤 ..

[Java] ArrayList, LinkedList 차이

#1 ArrayList와 LinkedList Java에서 기본형(int, boolean, String, char) 또는 인스턴스를 리스트로 저장하는데는 보통 배열을 사용한다. 하지만 배열은 선언시에 크기를 정해줘야하므로, 동적으로 요소의 추가나 삭제 등이 불가능하다는데 그 단점이 있다. 만약 배열의 원소를 추가하거나 삭제하려면, 직접 새로운 배열을 선언해주어서 카피하는 식으로 사용해야한다. 지속적으로 데이터를 변경해야되는 알고리즘 문제나, 어떤 프로그램의 구현에서 이는 꽤나 큰 불편함으로 다가온다. 이러한 불편함을 해소시켜주는 것이 List 인터페이스를 상속하여 구현된 ArrayList와 LinkedList 클래스이다. 이 둘은 모두 Collections 객체의 일종이다. 이 두 가지 리스트는 동적으로 ..

[CSS] reset.css / css 리셋

웹을 개발하다보면 설정한 css가 제대로 적용되지 않는 경우가 있다. 이는 각 웹브라우저(크롬, 파폭, 엣지 등)가 기본으로 설정된 css위에 자신의 css가 덧씌워지기 때문에 그렇다. 이를 위해 기본적으로 css는 리셋해주는 것이 좋고, 이는 다음과 같은 방법으로 해결할 수 있다. 의 사이에 태그를 넣어준다. 이를 이용하면 설정한 css가 정상적으로 적용됨을 확인할 수 있다. 다만, 자신의 css보다 무조건 윗줄에 두어야 자신의 css가 씹히는 것을 방지할 수 있다.

[CSS] 박스 원형으로 만들기

박스 요소를 원형으로 만들고 싶을때가 있다. paint 앱을 만드는 과정에서 다음과 같은 상황이 나타났다. 이걸 원형으로 만들고 싶다면, 공식은 간단하다. width/2의 값으로 border-radius 값을 지정해주면 된다.