JS' 공부흔적

1차원 배열 내에서 중복된 원소를 제거하고 싶다면 Set을 사용하여 쉽게 구현할 수 있었다. const arr = [1, 1, 2]; const set = new Set(arr); const uniqueArr = [...set]; console.log(uniqueArr); // [1, 2] 그러나 2차원 배열에 적용해 본 결과, 의도한 대로 동작하지 않았다. const arr = [ [1, 2, 3], [1, 2, 3], [1, 3, 4], ]; const set = new Set(arr); const uniqueArr = [...set]; console.log(uniqueArr); // [ [ 1, 2, 3 ], [ 1, 2, 3 ], [ 1, 3, 4 ] ] -> 중복 제거 X 이때는 아래와 같이 배..

같은 버튼을 클릭해도 마우스로 클릭할 때와 키보드로 클릭할 때 다르게 동작하도록 구현할 필요가 생겼다. 원래는 키보드를 눌렀을 때 useState()를 통해 boolean state로 관리하려고 했지만, 의도한 대로 동작하지 않았다. 이를 event 객체의 detail을 사용하여 해결했다. event.detail이란? event.detail은 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타낸다. 버튼이 한 번 눌렸다면 1, 더블 클릭을 했다면 2, 그 이상 다중 클릭을 했다면 해당 숫자만큼 표시된다. 아래 각 경우에 해당하는 예시를 보자. 위에서 언급했듯이 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타내기 때문에, 만약 키보드 동작으로 버튼을 클릭한다면 event.detail 값은 0이 나온..

forEach()와 map() 메서드는 둘다 배열 전체를 탐색한다는 공통점이 있다. 둘의 명백한 차이는 아래와 같다. let arr = [1, 2, 3]; let forEachArr = arr.forEach((d) => { return d * 2; }); let mapArr = arr.map((d) => d * 2); console.log(forEachArr); // undefined console.log(mapArr); // [2, 4, 6] 위처럼 가장 큰 차이는 forEach()는 배열을 단순히 탐색하기만 하고, map()은 배열을 탐색하여 새로운 배열을 반환한다는 것이다. 몇 가지 차이와 함께 더 알아보자. forEach() VS map() 반환 값 forEach()는 단순히 배열의 각 요소에 대..

백준 문제를 풀던 중, 2차원 문자 배열에서 특정 문자가 포함되어 있는지 판별해야 했다. 그러나 2차원 배열에서 includes를 사용하게 되면 아래와 같은 문제가 발생한다. const arr = [ ["a", "b", "c"], ["d", "e", "f"], ["g", "h", "i"], ]; console.log(arr.includes("a")); // false 이는 includes 메서드에서 "a"와 2차원 배열 내의 각 row와 비교하기 때문이다. "a"와 ["a", "b", "c"]와 같은 1차원 배열은 당연히 같지 않으므로 false가 출력되게 된다. 이를 해결하기 위해서는 배열의 flat() 메서드를 사용하면 된다. flat()은 다차원 배열의 원소를 1차원 배열로 만들어주는 기능을 한다...

class Node { constructor(d) { this.data = d; this.next = null; this.prev = null; } } class Deque { constructor() { this.head = null; this.tail = null; this.size = 0; } push_front(d) { const node = new Node(d); if (this.empty()) { this.tail = node; } else { node.next = this.head; this.head.prev = node; } this.head = node; this.size++; } push_back(d) { const node = new Node(d); if (this.empty()) {..

함수 선언문 function a() {} // 함수 호출 시 a(); 함수 이름 지정 필수 호이스팅 되므로 함수 선언 전에 호출 가능 함수 선언문의 경우, 함수를 호출할 때 함수명을 사용하는 것처럼 보인다. 그러나 함수 이름은 함수 몸체 내에서만 참조할 수 있다. 그러면 어떻게 함수 이름을 사용하여 호출할 수 있을까? 사실은 함수 이름을 사용하여 호출하는 것이 아니다. 함수는 함수 이름으로 호출하는 것이 아닌, 함수 객체를 가리키는 식별자로 호출한다. 함수 선언문을 사용하면 자바스크립트 엔진이 암묵적으로 함수명과 동일한 이름의 식별자를 생성하고, 여기에 함수 객체를 할당한다. 따라서 위의 코드에서는 함수명 a로 함수를 호출하는 것이 아니라 a라는 식별자로 함수를 호출하는 것이다. 함수 표현식 var te..

자바스크립트를 사용하다 보면 예상한 대로 동작하지 않는 경우가 있다. 아래의 경우도 그렇다. 변수에 숫자를 저장한 후에 문자열로 변환하면 정상적으로 동작하지만, 숫자 자체를 문자열로 변환하면 에러가 발생한다. 이는 코드를 실행할 때 "123." 이라는 것이 나오게 되면 숫자 뒤의 점을 소수점으로 인식하여 그 뒤에 숫자가 나올 것으로 예상하기 때문이다. 숫자가 나와야 하는데 toString()이 나오게 되니까 에러가 발생하는 것이다. 이를 해결하기 위해서는 다음과 같은 방법이 있다. 우선 괄호를 사용하는 방법이다. 괄호로 숫자를 감싸주면 그 안에 있는 것만 숫자로 인식하므로 뒤의 점이 소수점으로 인식되지 않는다. 또다른 방법으로는 점을 2개 붙여주는 것이다. 아래의 예시를 보자. 위의 예시에서 3.은 그냥..

지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) => { console.error(e); }); }; 또다른 방법으로는 인스턴스를 생성하여 사용하는 방법이 있는데, 이를 사용하면 사용자 정의 구성을 사용할 수 있다. 또한, axios를 모듈화함으로써 재사용성을 높일 수 있다. 이때 재사용성을 높이기 위해 커스텀 훅을 만들어 사용하겠다. // useAxios.js export const useAxios = () => { const..

1차원 배열의 경우는 스프레드 연산자를 통해서 아래와 같이 배열을 새로 복사할 수 있었다. let arr=[1,2,3]; let arr2=[...arr]; arr2.push(4); arr2[1]=10; // 두 배열이 다르게 출력됨 console.log(arr); // [ 1, 2, 3 ] console.log(arr2); // [ 1, 10, 3, 4 ] 스프레드 연산자를 통한 복사는 사실 얕은 복사이다. 얕은 복사는 한 단계까지만 복사한다. 항상 배열이나 객체가 생성이 되기 때문에 그 자체는 다른 것으로 평가되지만, 그 내부에 중첩되어있는 요소들은 같은 것으로 평가된다. 따라서 2차원 배열의 경우에는 의도한 대로 복사되지 않는 것을 확인할 수 있다. 2차원 배열을 깊은 복사하고 싶다면 아래와 같이 각..

2023년의 첫 번째 글 !! 프로그래머스의 경우, 입출력을 상관하지 않고 함수만 작성해주면 되었지만 백준에서는 입출력을 직접 해줘야한다. 프론트엔드 직군을 준비하면서 자바스크립트로 코딩테스트를 준비한다면 백준에서 node.js를 선택해야하는데, 이때 입력값을 받는 과정이 꽤 복잡하다. 2가지 방법이 있는데 fs 모듈을 사용하는 방법과 readline을 사용하는 방법이다. readline은 시간초과가 날 때가 있다고 하니 이 글에서는 fs 모듈을 사용하는 방법에 대해 작성한다. 우선, 예제 입력으로는 아래 입력을 사용하겠다. 참고로 백준 1260번 문제이다. https://www.acmicpc.net/problem/1260 example.txt 파일을 생성하여 아래 입력값을 붙여준다. 4 5 1 1 2 ..