리액트 템플릿을 이용하여 페이지 이동 중 url에 #(해시)가 붙어 있는 것을 발견했다. 리액트에서 url 에 #(해시)가 붙는 경우는 단일 페이지 애플리케이션(SPA, Single Page Application)을 이용할 경우 발견할 수 있다. 하나의 HTML 페이지 안에서 모든 기능이 동작하는 것을 SPA라고 한다. 모든 기능이 하나의 HTML 페이지 안에서 동작하기 때문에, 페이지 로딩 속도가 빠른것이 장점이라고 할 수 있다. SPA 화면에서 #(해시)가 붙는 이유는 주로 웹 브라우저의 페이지 이동을 감지하고 해당 url을 분석해서 해당 페이지의 컴포넌트를 빠르게 렌더링하기 위해서이다. #(해시)가 없으면 웹 브라우저는 실제로 서버에 새로운 페이지를 요청할 수 있다. 본인은 템플릿 페이지를 커스텀하..
some() some 함수는 배열의 각 요소에 대해 제공된 함수의 조건을 최소한 하나의 요소가 만족하면 true를 반환하고, 모든 요소가 조건을 만족하지 않으면 false를 반환한다. 기본 문법은 아래와 같다. array.some(function(currentValue, index, array), thisValue) currentValue : 현재 처리 중인 요소의 값 index : 현재 처리 중인 요소의 인덱스 array : some을 호출한 배열 thisValue (옵션) : 함수 내에서 사용할 this 값 아래는 예시 코드이다. const array = [1, 2, 3, 4, 5]; // 배열의 요소 중 하나라도 3보다 큰지 확인 const result = array.some(function(e..
padStart() padStart 함수는 문자열의 앞부분을 특정 길이로 채우는 역할을 한다. 기본 문법은 아래와 같다. str.padStart(targetLength[, padString]) str : 원본 문자열 targetLength : 목표로 하는 문자열 길이를 나타낸다. 이 길이에 맞게 문자열이 채워질 수 있다. padString (옵션) : 필요한 경우 채우기에 사용할 문자열이다. 기본값은 공백 문자열(' ')이다. 아래는 예시 코드이다. const str = "123"; const paddedStr1 = str.padStart(7, "0"); console.log(paddedStr1); // 출력 : "0000123" const paddedStr2 = str.padStart(10); cons..
2진수 → 10진수 변환 parseInt() 함수는 문자열을 정수로 변환하는 내장 함수로, 두 개의 매개변수를 받을 수 있다. parseInt(String, Number) 1. 문자열(String) : 변환하고자 하는 숫자의 문자열 2. 진수(Number) / (optional) : 문자열이 포현된 진수를 나타내는 숫자. 선택적으로 사용된다. 만약 진수를 지정하지 않으면 문자열이 기본적으로 10진수로 간주된다. const binary = "10101"; const result = parseInt(binary, 2); console.log(result); // 출력 : 21 const binary = "1120"; const result = parseInt(binary, 3); console.log(res..
자바스크립트에서 Map 객체는 키와 값의 쌍을 저장하는 데이터 구조이다. Map은 키와 값을 연결하여 데이터를 보관하고, 각각의 키는 유일해야 한다. 얼핏보면 그냥 객체와 비슷해보이지만 Map과는 차이점이 존재한다. Map 객체 Map 객체 생성 Map 객체를 생성하기 위해서는 new 키워드와 함께 Map 생성자를 호출해야 한다. let map = new Map(); 위 코드처럼 Map을 선언하면 Map 객체를 만들 수 있다. 또는 초기값을 넣어 키와 값의 배열을 전달해 Map 객체를 생성할 수도 있다. let player = new Map([ ["Kevin", 10], ["Haaland", 20], ["Messi", 30] ]); Map 데이터 추가 Map 객체에 데이터를 추가하기 위해서는 set() ..
자바스크립트에서 map()과 flatMap()은 주어진 배열의 요소를 사용해서 새로운 배열로 변환하는 작업을 수행하는 함수들이다. 둘 다 배열의 요소를 사용하고 새로운 배열로 바꿔준다는 공통점은 있지만 몇 가지 차이점이 존재한다. Map() 주어진 배열의 각 요소에 대해 작성된 콜백 함수를 실행하고, 그 콜백 함수의 리턴값으로 이뤄진 새로운 배열을 생성하는 함수이다. 기존 원본 배열과 동일한 길이의 새로운 배열이 리턴된다. 이때, 기존의 원본 배열을 수정하지 않는다. 기본 문법은 아래와 같다. arr.map(callback[, thisArg]) arr : 원본 배열 callback (필수) : 원본 배열의 각 요소에 대해 실행할 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받는다. thisArg (선..
자바스크립트에서 slice와 splice는 둘 다 배열에서 요소를 추출하거나 배열을 변경하는 데 사용된다. 하지만 두 함수는 목적이나 사용법에 따라 다르게 사용할 수 있다. Slice() 배열의 일부분을 추출하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. 기본 문법은 아래와 같다. array.slice(start, end) 1. start (필수) - 추출을 시작할 인덱스 번호 - 이 시작 인덱스를 포함한 뒤 추출이 시작됨 - 음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산 - 만약 생략되면 start 값은 0으로 간주됨 2. end (선택) - 추출을 종료할 인덱스 번호 - 이 종료 인덱스는 추출에 포함되지 않으며, 추출은 end 번호 바로 앞의 인덱스까지 수행함 - 음수 값을 사용하..
Set을 이용한 중복 제거 const array = [1, 2, 3, 3, 4, 4, 5]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // 출력 결과: [1, 2, 3, 4, 5] Set을 이용한 방법이 가장 간단하고 직관적이다. Set은 중복값을 허용하지 않는 특성이 있으므로, Set에 배열을 전달해서 중복값을 제거한 후 다시 배열로 변환할 수 있다. filter() 함수를 이용한 중복 제거 const array = [1, 2, 3, 3, 4, 4, 5]; const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index); consol..
자바스크립트의 reduce 함수는 배열의 요소를 하나로 줄이는(reduce) 작업을 수행하는 함수이다. reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다. 기본 문법 reduce 함수는 다음과 같은 형태를 가지고 있다. array.reduce(callback[, initialValue]) array : recude를 적용할 배열 callback : 배열의 각 요소에 대해 실행할 콜백 함수. 콜백 함수는 다음 매개변수를 가진다. accumulator : 콜백 함수의 반환 값 또는 이전 순회에서의 최종 결과값. 초기 값(initialValue)이 제공된 경우 첫 번째 순회에서는 initialValue로 설정된다. currentValue : 현재 순회 중인 배열..