Javascript

들어가며reduce() 함수를 사실 보면 코드가 읽히는데 사용할 순간이 쉽게 떠오르지 않아서 개념 및 원리를 정리하려 합니다. reduce()배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 즉, 쉽게 말하면 배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과값을 반환한다. reduce 메서드의 콜백 함수 4개의 인수초기값 또는 콜백 함수의 이전 반환값reduce 메서드를 호출한 배열의 요소값reduce 메서드를 호출한 배열의 인덱스reduce 메서드를 호출한 배열 자체, 즉 thisconst arr = [1, 2, 3, 4, 5];/*previousValue : 이전 콜백의 반환값currentValue ..

자바스크립트에서 Map 객체는 키와 값의 쌍을 저장하는 데이터 구조이다. Map은 키와 값을 연결하여 데이터를 보관하고, 각각의 키는 유일해야 한다. 얼핏보면 그냥 객체와 비슷해보이지만 Map과는 차이점이 존재한다. Map 객체 장점 1. 유연한 자료형 사용 Map 객체는 다양한 타입의 키를 허용한다. 문자열, 숫자, 객체 등 어떤 타입이든 키로 사용할 수 있다. 한편 일반 객체는 키는 문자열 또는 심볼(symbol)형태여야 한다. 일반 객체는 문자열, 객체, 심볼 등을 키로 사용해 출력하는데 문제가 없지만, 숫자 키 값을 사용해 출력하면 숫자키가 자동으로 숫자 문자열로 변환된다. 2. 순서 보장 Map 객체는 데이터가 추가된 순서대로 요소의 순서를 보장한다. 즉, 요소를 추가한 순서대로 반복문이나 순회..

Weather Forecast 프로젝트를 만들면서 만났던 이슈에 대해 포스팅해보고자 한다. 📍 문제 발생 Weather Forecast 프로젝트에서 오늘의 날씨를 보여주는 섹션 중 하단에 현재 시간 이후 24시간 동안 날씨와 기온을 나타내 보여주는 섹션이 있다. 이 부분을 보기 위해서 노트북 키패드로 작동 시에는 그냥 옆으로 넘기면서 작동하면 됐지만, 마우스를 이용할 때에는 하단에 스크롤 바를 눌러 움직이는 방식으로 이동해야 했다. 즉 마우스 휠을 했을 때 가로 스크롤이 작동이 되지 않았던 것이었다. 사용자 경험을 바탕으로 사용자가 이용하는데 불편함을 느낄 것이라 생각하여 개선하고자 하였다. 📍 고민 및 해결 과정 처음 접근했던 방식은 시간마다 날씨 및 기온 정보 li들을 감싸는 ul와 li를 css t..

백준 문제를 풀다보면 trim() 함수를 입력값 받을 때 많이 사용하는데, 가끔 입력값을 다룰 때 문자열 함수인 trim()을 넣지 않으면 에러가 난다. 왜 에러가 날까? 먼저, trim() 함수의 사용법에 대해 알아보자. trim() : 여러 줄의 입력값을 받을 땐 맨 앞과 맨 뒷 공백만 없애준다. 아래 코드를 보고 trim() 함수를 이해해보자. // 한줄의 경우 const str1 = ' Hello, world! '; console.log(str1.trim()); // Hello, world; // 여러 줄의 경우 const str2 = ` hello, world! i'm sooyeon ! ` console.log(str2.trim()); //hello, world! //i'm sooyeon ! 위..