스페이스 루미

쿼리 스트링의 키-값 쌍을 추가하고, 제거하고, 문자열을 직접 생성할 수 있는 생성자.const params = new URLSearchParams(); append() 메서드와 set() 메서드의 차이append()는 키-값 쌍을 계속 추가하고const params = new URLSearchParams();params.append('qs', 'test1');params.append('qs', 'test2');console.log(params.toString());// qs=test1&qs=test2 set()은 교체한다.const params = new URLSearchParams();params.set('qs', 'test1');params.set('qs', 'test2');console.log(p..

네트워크에서 데이터를 가져오자마자 콘솔을 찍었는데, 내려주지않는 데이터를 가지고 있길래방황하던 중, 새로운 사실을 알게됐다.빨강이 콘솔로그 실행 시점의 값 파랑이 개발자 도구에서 삼각형 펼쳤을 때 변수에 담긴 값그렇기 때문에, console.log(a) 를 찍었을때 모두 할당된 값이 브라우저 콘솔창에는 표기되지만, 실제 콘솔을 출력하는 시점에는 값이 없으므로, 값을 꺼내려고 하면 undefiend가 발생한다.

image url은 알고있는데, 이것을 다운로드 하고싶다면 어떻게 해야 할까? 일단 돔을 그린다. // 파일명과 파일 url을 파라미터로 넘긴다. handleImageDownload(file.filename, file.url)} 파일명을 보내주는 이유는, 파일명을 api response에서 꺼내려면 헤더에서 꺼내야 하기때문이다 (백엔드 설정이 제대로 되어있어야 한다)버튼을 클릭했을때 handleImageDownload가 동작하도록 작업을 하자. const handleImageDownload = async (filename: string, url: string) => { try { // 데이터를 blobType으로 받는다. const response = await axios.get(url, { respon..

concatenates 는 연결하다라는 뜻이다. 사슬처럼 잇는 것을 의미한다. concat 메서드는, 호출한 배열뒤에 배열을 이어붙여 만들어진 새로운 배열을 리턴한다. (원본 배열을 수정하지 않는다) 인자를 생략하면 얕은 복사본을 반환한다. array.concat([arr1],[arr2],...[,arrN]); const array1 = ['a']; const array2 = ['b']; const array3 = [1, true] const obj = {key1:'123', key2:'test obj'} const result = array1.concat(array2,array3,'test string', obj); console.log(result); // Array ["a", "b", 1, true..

오름/내림 차순으로 배열을 정렬 해보자. sort 메서드를 사용하면 된다. sort는 구분하다 / 정리하다라는 뜻을가진 동사다. arr.sort((비교대상1, 비교대상2) => {} ) 파라미터가 없으면 문자열로 인식하여 유니코드 순으로 내뱉는다. sort 메서드는 원본을 수정하기때문에 복사를 해서 사용하도록 한다. const arr = [1,22,13,32,19] arr.sort(); console.log(arr); // [1,13,19,22,32] 정렬 기준은 리턴값이 양수냐 음수냐 0이냐에 따라 바뀐다. 음수값이 나오면 a가 b보다 앞에 위치하도록 정렬한다. 양수값이 나오면 b가 a보다 앞에 위치하도록 정렬한다. 결과값이 0이면 위치를 바꾸지 않는다. const arr = [1,22,13,32,19..

include 말그대로 포함한다. 배열에 특정 값을 가지고 있는지 확인할때 사용한다. 그럼 객체에 키값이 있는지 확인해보도록 하자. Array.includes(찾는값, 시작 인덱스) 시작 인덱스는 옵션이고 default가 0이다 const data = { company: { id: 1, name: "rumi space", type: "private", no: "001-25-103-12", ceo: "ray", condition: "R & D", address: "pangyo 12", lastModifyDate: "2022-08-09T04:00:34.356761Z", }, }); console.log("company에 type 존재하니?", Object.keys(data.company).includes("..

some 하나라도 만족하는지 알아보자. 하나라도 true면 true 98보다 큰게 있냐? 네! const newArray = [1,2,3,4,5,6,7,8,9,99]; const isCorrect = newArray.some(item => item > 98); console.log(isCorrect); // true every 모든 조건이 만족하는지 알아보자. 하나라도 false면 false 모두 100보다 작냐? 네! const originArray = [1,2,3,4,5,6,7,8,9,99]; const isCorrect = originArray.every(item => item < 100); console.log(isCorrect); // true

!! 느낌표 두개는 JS에서 어떻게 사용될까? !!undefined //false !!"" // false !!null // false !!0 // false // 그 외 true !는 부정이고, !!부정의 부정은 긍정이다. 확실한 boolean 결과를 얻기위해 사용한다.

find callback함수가 참을 반환할때까지 실행하고, 참을 만나면 첫번째 요소를 반환한다. 조건에 만족하는 요소를 찾지 못하면 undefined를 반환한다. 원본 배열을 변경시키지 않는다. array.find((item, index, array) => 조건) const originArray = [{ name:'rumi', phone:'android', state:true },{ name:'ray', phone:'ios', },{ name:'pink', phone:'LG', state:true }] const result = originArray.find(item => item.state); // 요소에 state값이 있는 것 찾기 console.table(originArray) // 원본 배열을 m..

적재적소에 필요한 메서드를 떠올리고 응용법을 생각해내기 위해 Javascript 메서드를 한번씩 정리하면서 몰랐던 부분까지 한번씩 체크해보도록 하자. 쉽게 기억할수있도록 어원과 뜻을 정확히 알고 넘어가자. ( 메서드명이 너무 명확해서 어원이랄게 있나?싶긴하다.) 한번씩 정리하고 링크걸기. Array [Javascript] for, forEach, for in, for of, map으로 반복 수행하기 for 단순 반복실행 요소와 index 값을 사용하여, 증가 혹은 감소하면서 순차적 실행한다. 원하는 결과가 나오면 break; 로 중단할수 있다. const forArray = [1, 3, 5, 7]; const forNewArray = []; for (let i =.. space-rumi.tistory.c..

map map 메서드는 반복을 통해 item을 하나씩 매핑한다. 매핑(mapping)은 하나의 값을 다른값과 1:1 대응시키는것이다.(해당 값이 다른값을 가리키도록 하는것이다.) 배열의 아이템을 1:1로 대응시키지만, 원본을 변경시키지 않고 새로운 배열을 리턴한다. array.map((item,index,array)=>{return item}) const originArray = [1,2,3,4]; const newArray = originArray.map((item)=> item + 1) console.log('originArray::', originArray); // [1,2,3,4] console.log('newArray::', newArray); // [2,3,4,5] reduce 배열의 각 요소..

JS 데이터에는 원시자료형(primitive type), 참조 자료형(reference type) 타입이 있다. 변수에는 하나의 값이나 주소만 저장할수있다. 원시 자료형 (primitive type) 원시 자료형이 할당될 때, 변수에 할당할 때 값(value)을 저장하며, 하나의 데이터를 담는다. number, string, boolean, undefined, null(엄밀하게는 객체다), symbol 등이 있다. const stringA = 'a'; const number123 = 123; const boolSample = true; 참조 자료형 (reference type) 원시 자료형이 아닌 모든 타입. 원시 자료형 데이터들의 집합이며, 변수에 할당할때 메모리 주소를 저장한다. 배열, 객체, 함수 ..

[정의] Nullish coalescing operator -ish 접미사는 '~와 같은 성질을 지닌', '~같은' 이라는 뜻이다. Null-ish니깐 Null과같은 성질을 가진~~~ 쯤으로 해석해면 되겠다. Nullish : 확실히 null이거나 undefined 이거나 coalescing : 통합과 집약, ~를 병합한다. null, undefined 여부를 체크하여 맞다면 (??) 오른쪽에 있는 값을 리턴한다. const testObj = { key1: null, key2: undefined, key3: "rumi", key4: true, key5: false, } console.log(testObj.key1 ?? '-') // return '-' console.log(testObj.key2 ?? '..

for 단순 반복실행 요소와 index 값을 사용하여, 증가 혹은 감소하면서 순차적 실행한다. 원하는 결과가 나오면 break; 로 중단할수 있다. const forArray = [1, 3, 5, 7]; const forNewArray = []; for (let i = 0; i < forArray.length; i++) { forNewArray.push(forArray[i]); } console.log({ forNewArray }); forEach 순회 실행 forEach함수에서는 index와 크기정보를 사용하지않으며 순회한다. 완료할때까지 중단할 수 없다. 배열의 각 요소마다 callback을 실행한다. const forEachArray = [1, 2, 3, 4]; const forNewEachArra..

let array1 = ["num1", "num2"]; let array2 = ["num3", "num4"]; let sumLetArr = [...array1, ...array2]; let obj1 = { key1: "value1", key2: "value2" }; let obj2 = { key2: "newValue2", key3: "value3" }; let sumAssignObj = Object.assign({}, array1, array2); let sumSpreadObj = { ...obj1, ...obj2 }; let testObjectAssign = Object.assign({}, 합칠것1, 합칠것2) 앞에 {}를 적어주지않으면 새로운 object를 생성하는게 아닌, 원본 합칠거1을 바꿔버린다..