티스토리

공부하는 개발자

검색하기

블로그 홈

공부하는 개발자

sootech-story.tistory.com/m

<어제보다 더 나은 오늘을 위해>

구독자: 0

방명록 방문하기

주요 글 목록

[Javascript] 배열 고차 함수 reduce()에 대해 들어가며reduce() 함수를 사실 보면 코드가 읽히는데 사용할 순간이 쉽게 떠오르지 않아서 개념 및 원리를 정리하려 합니다. reduce()배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 즉, 쉽게 말하면 배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과값을 반환한다. reduce 메서드의 콜백 함수 4개의 인수초기값 또는 콜백 함수의 이전 반환값reduce 메서드를 호출한 배열의 요소값reduce 메서드를 호출한 배열의 인덱스reduce 메서드를 호출한 배열 자체, 즉 thisconst arr = [1, 2, 3, 4, 5];/*previousValue : 이전 콜백의 반환값currentValue .. 공감수 0 댓글수 1 2024. 6. 19.
[Javascript] Map 객체 자바스크립트에서 Map 객체는 키와 값의 쌍을 저장하는 데이터 구조이다. Map은 키와 값을 연결하여 데이터를 보관하고, 각각의 키는 유일해야 한다. 얼핏보면 그냥 객체와 비슷해보이지만 Map과는 차이점이 존재한다. Map 객체 장점 1. 유연한 자료형 사용 Map 객체는 다양한 타입의 키를 허용한다. 문자열, 숫자, 객체 등 어떤 타입이든 키로 사용할 수 있다. 한편 일반 객체는 키는 문자열 또는 심볼(symbol)형태여야 한다. 일반 객체는 문자열, 객체, 심볼 등을 키로 사용해 출력하는데 문제가 없지만, 숫자 키 값을 사용해 출력하면 숫자키가 자동으로 숫자 문자열로 변환된다. 2. 순서 보장 Map 객체는 데이터가 추가된 순서대로 요소의 순서를 보장한다. 즉, 요소를 추가한 순서대로 반복문이나 순회.. 공감수 0 댓글수 0 2024. 4. 3.
[Web, React] 마우스 휠 가로 스크롤 작동 구현하기 Weather Forecast 프로젝트를 만들면서 만났던 이슈에 대해 포스팅해보고자 한다. 📍 문제 발생 Weather Forecast 프로젝트에서 오늘의 날씨를 보여주는 섹션 중 하단에 현재 시간 이후 24시간 동안 날씨와 기온을 나타내 보여주는 섹션이 있다. 이 부분을 보기 위해서 노트북 키패드로 작동 시에는 그냥 옆으로 넘기면서 작동하면 됐지만, 마우스를 이용할 때에는 하단에 스크롤 바를 눌러 움직이는 방식으로 이동해야 했다. 즉 마우스 휠을 했을 때 가로 스크롤이 작동이 되지 않았던 것이었다. 사용자 경험을 바탕으로 사용자가 이용하는데 불편함을 느낄 것이라 생각하여 개선하고자 하였다. 📍 고민 및 해결 과정 처음 접근했던 방식은 시간마다 날씨 및 기온 정보 li들을 감싸는 ul와 li를 css t.. 공감수 0 댓글수 0 2024. 3. 29.
[Javascript] 문자열 양쪽 끝 공백 제거하는 trim() 백준 문제를 풀다보면 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 ! 위.. 공감수 0 댓글수 0 2024. 3. 20.
[비동기 HTTP 통신] Ajax, Axios, Fetch에 대해 안녕하세요! 브라우저와 서버의 통신으로 데이터를 취득할 때 많이 쓰이는 것이 비동기 HTTP 통신이라고 생각하는데요. 저도 토이 프로젝트를 하면서 자주 만났던 비동기 HTTP 통신으로 쓰이는 Ajax, Axios, Fetch에 대해 간단하게 비교하여 정리하려고 합니다. Ajax란 Ajax란 Ascynchronous JavaScript and XML의 약자이며 비동기적인 웹 애플리케이션의 제작을 위해 사용됩니다. Javascript를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신이며, XMLHttpRequest객체를 이용하여 전체 페이지를 새로고침 하지 않고도 필요한 데이터만을 불러올 수 있습니다. 즉, Javascript를 통해 서버에 데이터를 요청하는 것입니다. ✔️ 동작 원리.. 공감수 1 댓글수 1 2024. 3. 13.

문의안내

티스토리
로그인
고객센터

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