코린이[코딩 어린이]

Axios 파일 다운로드 만들기

Axios 파일 다운로드 요청하기

import axios from "axios";

axios({
    url: "http://localhost:4000/filename.jpg", // 파일을 다운로드할 URL
    method: "GET", // GET or POST
    responseType: "blob" // 응답 데이터 타입
})
.then(res => {
    // 서버에서 받아온 데이터( 바이너리 데이터 )를 blob으로 변환시켜줍니다.
    // 특정 타입을 정의해야 할 경우 MIME Type을 설정할 수 있습니다. { type: "text/plain" } / { type: "image/*" } } 등등
    const blob = new Blob([res.data]);
    
    // 객체 URL을 생성해줍니다.
    const fileUrl = URL.createObjectURL(blob);
    
    // URL을 설정할 a 링크를 만들어줍니다.
    const link = document.createElement("a");
    link.href = fileUrl;
    
    // 파일의 이름을 지정해줍니다.
    link.download = "파일의 이름";
    
    // 링크를 body에 추가시키고, click Event를 발생시켜서 다운로드를 실행해줍니다.
    link.click();
    link.remove();

    // 다운로드 종료 후, 기존 객체 URL을 해제시켜줍니다.
    URL.revokeObjectURL(fileUrl);
)
.catch(err => console.log(err));

Axios를 사용하면 위 코드처럼 서버에 요청을 하게됩니다. 

위 코드에서 가장 중요한 부분은 responseType부분입니다. 서버에서 전달받은 데이터 유형을 의미하는 값으로서 파일 다운로드 기능을 구현 할 경우 "blob"으로 설정되어야 합니다.

a Link를 사용해서 이동하기

<a href="이미지 주소" target="_blank">이미지 새창 띄우기</a>

window.open을 사용해서 이동하기

<button onClick={() => window.open(`이미지 주소`, '_blank')}>이미지 새창 띄우기</button>

현재 창에 띄우려면 _blank 대신 _self를 넣어줍니다.

fill() 메서드

fill() 메서드는 배열의 시작 index부터 끝 index의 이전까지 정적인 값 하나로 채웁니다.

구문

arr.fill(value[, start[, end]]);

매개변수

• value: 배열을 채울 값
• start: 시작 index, 기본 값 = 0
• end: 끝 index, 기본 값은 this.length

반환 값

변형한 배열

예제

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

console.log(arr.fill(9)); // [9, 9, 9, 9, 9, 9, 9, 9, 9, 9];

arr의 모든 value를 9로 채워줍니다.

console.log(arr.fill(9, 1)); // [1, 9, 9, 9, 9, 9, 9, 9, 9, 9]

두번째 value부터 마지막 value까지 9로 채워줍니다.

console.log(arr.fill(0, 2, 4)); // [1, 2, 0, 0, 5, 6, 7, 8, 9, 0]

세번째 value부터 다섯번째 이전 value까지 0으로 채워줍니다.

console.log(arr.fill(9, 1, 2)); // [1, 9, 3, 4, 5, 6, 7, 8, 9, 0]

두번째 value부터 세번째 이전까지 9로 채워줍니다.

console.log(arr.fill(9, 3, 5)); // [1, 2, 3, 9, 9, 6, 7, 8, 9, 0]

네번째 value부터 여섯번째 이전까지 9로 채워줍니다.

console.log(arr.fill(9, -4, -3)); // [1, 2, 3, 4, 5, 6, 9, 8, 9, 0]

start와 end에 음수가 들어가면 뒤에서부터 계산됩니다.

뒤에서 네번째 value부터 뒤에서 3번째 이전까지 9로 채워줍니다.

console.log(Array(5).fill(4)); // [4, 4, 4, 4, 4]

const arr1 = Array(3).fill({}); // [{}, {}, {}]

3개의 객체를 생성합니다.

객체 참조

    const arr1 = Array(3).fill({});
    console.log(arr1); // [{hello: '안녕하세요.'}, {hello: '안녕하세요.'}, {hello: '안녕하세요.'}]
    console.log(arr1[0].hello = "안녕하세요."); // 안녕하세요.

    const arr1 = Array(3).fill({});
    console.log(arr1); // [{hello: '안녕하세요.', new: '바이바이.'}, {hello: '안녕하세요.', new: '바이바이.'}, {hello: '안녕하세요.', new: '바이바이.'}]
    console.log(arr1[0].hello = "안녕하세요."); // 안녕하세요.
    console.log(arr1[1].new = "바이바이."); // 바이바이.

every() 메서드

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트 합니다.

모두 통과하면 True, 하나라도 통과하지 못하면 false를 return합니다.

Array.every(callbackFunc(currentValue, index, array), thisArg);

매개변수

• callbackFunc: 각 요소를 시험할 함수. 아래 세 가지 인수를 받습니다.
• index: 처리할 현재 요소의 인덱스
• array: every를 호출한 배열
• thisArg: callbackFunc을 실행할 때 this로 사용하는 값

반환 값

callbackFunc이 모든 배열 요소에 대해 참인 값을 반환하는 경우 true, 그 이외에는 false를 반환합니다.

const arr = [1, 10, 50, 49, 72, 11, 42];
const everyTest = (currentValue) => currentValue < 100;

console.log(arr.every(everyTest)); // true

every() 메서드로 검사를 하게되면 boolean값을 반환합니다. 배열에 100보다 큰 값이 없기 때문에 true를 반환합니다.

every()와 forEach 비교하기

const arr = [11, 1, 50, 49, 72, 11, 42];

arr.forEach((value) => {
  if (value > 10) {
    console.log(value, "크다");
    return true;
  } else {
    console.log(value, "작다");
    return false;
  }
});
/*
    11 '크다'
    1 '작다'
    50 '크다'
    49 '크다'
    72 '크다'
    11 '크다'
    42 '크다'
*/

arr.every((value) => {
  if (value > 10) {
    console.log(value, "크다");
    return true;
  } else {
    console.log(value, "작다");
    return false;
  }
})
/*
    11 '크다'
    1 '작다'
*/

forEach 반복문은 배열이 끝날때까지 반복을 하고, every() 메서드는 false를 반환하는 순간 멈추게 됩니다.

arr의 배열이 arr1, arr2 배열의 부분 집합인지 비교하기

const arr = [1, 2, 3, 4, 5, 6, 7];
const arr1 = [5, 7, 6];
const arr2 = [5, 8, 7];

const isSubset = (array1, array2) => array2.every((element) => array1.includes(element));
console.log(isSubset(arr, arr1)); // true
console.log(isSubset(arr, arr2)); // false

Array.prototype.every() 바로가기

entries() 메서드

entries() 메서드는 배열의 각 index에 대한 key / value 쌍을 가지는 새로운 Array Iterator객체를 반환합니다.

const arr = ["a", "b", "c", "d", "e", "f"];

console.log(Object.entries(arr));

/*
0: (2) ['0', 'a']
1: (2) ['1', 'b']
2: (2) ['2', 'c']
3: (2) ['3', 'd']
4: (2) ['4', 'e']
*/

entries() 메서드로 배열을 반환하게 되면 위처럼 키와 값을 한쌍을 가지는 객체를 반환해줍니다.

entries() 메서드는 [ [ key: value] , ...]처럼 반환되기 때문에 for...of, forEach등과 함께 사용하면 됩니다.

단 Object.entries()로 반환된 배열은 object가 정의된 순서와 상관이 없이 나오기 때문에 순서대로 사용할 경우에는 sort() 메서드를 함께 사용해 주어야합니다.

for...of와 함께 사용하기

index와 element 

const arr = ["a", "b", "c", "d", "e", "f"];

for(const [index, ele] of arr.entries()) {
  console.log(index, ele);
  /*
    0 'a'
    1 'b'
    2 'c'
    3 'd'
    4 'e'
    5 'f'
  */
}

for...of loop

const arr = ["a", "b", "c", "d", "e", "f"];

const arrEntries = arr.entries();

for(const ele of arrEntries) {
  console.log(ele);
  /*
    [0, 'a']
    [1, 'b']
    [2, 'c']
    [3, 'd']
    [4, 'e']
    [5, 'f']
  */
}

sparse arrays

for (const element of [, "a"].entries()) {
  console.log(element);
}
/*
    [0, undefined]
    [1, 'a']
*/

sparse arrays와 함께 사용하면 entries() 메서드가 빈 슬롯을 undefined가 있는 것처럼 순회합니다.

+ object.keys와 object.values

const arr = ["a", "b", "c", "d", "e", "f"];

console.log(Object.keys(arr)); // ['0', '1', '2', '3', '4', '5']

key만 받아오고 싶을 때

const arr = ["a", "b", "c", "d", "e", "f"];

console.log(Object.values(arr)); // ['a', 'b', 'c', 'd', 'e', 'f']

value만 받아오고 싶을 때

copyWithin() 메서드

copyWithin() 메서드는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환합니다.

이 때, 크기( 배열의 길이 )를 수정하지 않고 반환합니다.

arr.copyWithin(target[, start,[, end]]);

매개변수

• target : 복사한 값을 넣을 위치를 가리키는 index. 음수를 지정하면 index를 배열의 뒤에서부터 계산합니다.
  target이 arr.length보다 크거나 같으면 아무것도 복사하지 않습니다. target이 start 이후라면 복사한 값을 arr.length에 맞춰서 잘라줍니다.
• start : 복사를 시작할 위치를 가리키는 index. 음수를 지정하면 index를 배열의 뒤에서부터 계산합니다.
  기본값은 0으로, start를 지정하지 않으면 배열의 처음부터 복사를 시작합니다.
• end : 복사를 끝낼 위치를 가리키는 index. copyWithin은 end index 이전까지 복사하므로, end index가 가리키는 요소는 제외됩니다. 음수를 지정하면 index를 배열의 뒤에서부터 계산합니다.
  기본값은 arr.length로, end를 지정하지 않으면 배열의 끝까지 복사합니다.

const arr = ["안", "녕", "하", "세", "요"];

console.log(arr.copyWithin(2)); // ["안", "녕", "안", "녕", "하"]

2번째 요소부터 0 ~ n번의 요소를 복사합니다. ( 배열의 길이를 초과하는 부분은 무시가 됩니다. )

:: 안녕 + 안녕하세요 ( '세요' 부분은 배열의 길이를 초과하기 때문에 무시가 됩니다. )

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(2, 1)); // ['안', '녕', '녕', '하', '십', '니', '까']

2번째 요소부터 1번째 요소의 값으로 시작합니다.

:: 안녕 + 녕하십니까요 ( 1번째 요소부터 복사를 했기 때문에 '녕하십니까'가 복사됩니다. '요' 부분은 배열의 길이를 초과하기 때문에 무시됩니다. )

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(2, 1, 3)); // ['안', '녕', '녕', '하', '니', '까', '요']

2번째 요소부터 1번째 요소의 값으로 시작하고, 3번째 요소까지만 복사한 값을 넣습니다.

:: 안녕 + 녕하 + 니까요 ( 2번째 요소부터 1번째 요소의 값으로 시작하고 3번째요소까지만 복사하기 때문에 4번째 요소부터는 원래 값이 들어오게 됩니다.

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(0, 3, 3)); // ['안', '녕', '하', '십', '니', '까', '요']

end값이 start값과 같거나 작으면 동작을 하지 않습니다.

const arr = ["안", "녕", "하", "십", "니", "까", "요"];

console.log(arr.copyWithin(-2, -3, -2)); // ['안', '녕', '하', '십', '니', '니', '요']

index가 음수인 경우 뒤에서부터 계산합니다.

배열을 앞에서부터 계산할 때 [ 0, 1, 2, 3, 4, 5, 6 ]

배열을 뒤에서부터 계산할 때 [ -7, -6, -5, -4, -3, -2, -1 ]

arr.copyWithin(-2, -3, -2) === arr.copyWithin(5, 4, 5)와 같습니다.

반환 값

수정한 배열

concat() 메서드

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새로운 배열을 반환합니다.

• 기존배열이 변경되지 않습니다.
• 추가된 새로운 배열을 반환합니다.

const array1 = ['안녕', '하세요', '저는'];
const array2 = ['junhyeok', '입니다.', '잘부탁드려요!'];
const array3 = array1.concat(array2);

console.log(array3); // ['안녕', '하세요', '저는', 'junhyeok', '입니다.', '잘부탁드려요!']

array.concat([value1[, value2], ...[, valueN]]);

매개변수

• 배열 또는 값
• 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사를 반환.

반환값

새로운 Array 객체.

여러가지 예제

배열 두 개 이어붙이기

const a = ['a', 'b', 'c'];
const b = [1, 2, 3];

console.log(a.concat(b)); // ['a', 'b', 'c', 1, 2, 3]

배열 세 개 이어붙이기

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];

console.log(a.concat(b, c)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

배열에 값 이어붙이기

const a = ['a', 'b', 'c'];

console.log(a.concat(1, [2, 3])); // ['a', 'b', 'c', 1, 2, 3]

Array.prototype.concat() 바로가기

at() 메서드

at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스 요소를 반환합니다.

양수, 음수 모두 지정할 수 있고, 음수의 경우 배열의 뒤에서부터 인덱스를 셉니다.

at() 메서드는 배열의 마지막 요소를 가져올 때, 사용하게 되면 array[array.length - 1]에서 array.at(-1)처럼 짧게 사용할 수 있습니다.

const array = [12, 34, 56, 78, 90];

let arrIndex = 2;

console.log(array.at(arrIndex)); // 56

index = -2;

console.log(array.at(arrIndex)); // 78

첫번째 console은 앞에서부터 3번째인 56을 불러옵니다. ( 배열은 0부터 시작하기 때문에 3번째인 56을 가져옵니다. )

두번째 console은 뒤에서부터 2번째인 78을 불러옵니다.

at(index)

매개변수 ( index )

배열에서 반환할 요소의 index입니다. 음수 값을 지정할 경우 배열의 마지막을 기준으로 index를 찾아옵니다.

반환 값

주어진 index에 위치한 배열 요소입니다. 주어진 index가 배열에 없으면 undefined를 반환합니다.

여러가지 방법 비교

Array의 뒤에서 두 분째 요소를 가져오는 방법들을 비교했습니다. 모든 방법들이 유효하지만 at() 메서드의 간결성과 가독성을 확인할 수 있습니다.

const colors = ['빨강', '초록', '파랑'];

// length 속성을 사용한 방법
const leng = colors[colors.length - 2];
console.log(leng); // 초록

// slice() 메서드를 사용한 방법
const sliceWay = colors.slice(-2, -1);
console.log(sliceWay[0]); // 초록

// at() 메서드를 사용한 방법
const atWay = colors.at(-2);
console.log(atWay); // 초록

Array.prototype.at() 바로가기

다음에 올 숫자

문제 설명

첫번째 사용했던 방법

function solution(common) {
    var answer = 0;

    let cnt1 = 1;
    let cnt2 = 2;


    for (let i = 0; i < common.length; i++) {
        if (cnt1 === common[i]) {
            cnt1++;
            if (cnt1 !== common[i + 1]) {
              return answer = cnt1;
            }
            continue;
        }

        if (cnt2 === common[i]) {
            cnt2 = 2 * cnt2
            if (cnt2 !== common[i + 1]) {
              return answer = cnt2;
            }
            continue;
        }
    }

    return answer;
}

console.log(solution([1, 2, 3, 4]));
console.log(solution([2, 4, 8]));

실패... ( 25%... )

두번째 사용했던 방법

function solution(common) {
    var answer = 0;

    const cnt1 = common[1] - common[0] === common[2] - common[1];
    const cnt2 = common[0] * common[0] === common[1];

    if (cnt1) {
        return common[common.length - 1] + common[1] - common[0];
    }
    if (cnt2) {
        return common[common.length - 1] * (common[1] / common[0]);
    }

    return answer;
}

console.log(solution([1, 2, 3, 4]));
console.log(solution([2, 4, 8]));

실패... ( 75%... )

세번째 사용했던 방법

function solution(common) {
    var answer = 0;

    const sequence = common[1] - common[0] === common[2] - common[1];

    if(sequence) {
        return common[common.length - 1] + common[1] - common[0]
    } else {
        return common[common.length - 1] * (common[1] / common[0])
    }

    return answer;
}

console.log(solution([1, 2, 3, 4]));
console.log(solution([2, 4, 8]));

성공

sequence가 등차수열일때

common[common.length - 1] : 4 ( 마지막 숫자 )

common[1] : 2 ( 두번째 숫자 )

common[0] : 1 ( 첫번째 숫자 )

4 + 2 - 1 = 5가 나옵니다.

sequence가 등비수열일때

common[common.length - 1] : 8 ( 마지막 숫자 )

common[1] : 4 ( 두번째 숫자 )

common[0] : 2 ( 첫번째 숫자 )

8 * ( 4 / 2 ) = 16이 나옵니다.

등차수열 공식

등비수열 공식

문자열 나누기

문제 설명

function solution(s) {
    var answer = 0;
    let sol = "";
    let cnt1 = 0;
    let cnt2 = 0;
    
    for (let i = 0; i < s.length; i++) {
        // 첫번째 문자열을 비교하기 위해 첫번째 문자열을 sol에 추가해줍니다.
        if (sol === "") sol = s[i];
        
        // 만약에 첫번째 들어온 문자와 s[i]번째 들어온 문자가 같으면 cnt1에 1추가, 다르면 cnt2에 1을 추가합니다.
        if (sol === s[i]) cnt1++;
        else if (sol !== s[i]) cnt2++;
        
        // cnt1과 cnt2가 같으면 answer에 1을 추가하고, 나머지를 초기화합니다.
        if (cnt1 === cnt2) {
            answer++;
            cnt1 = 0;
            cnt2 = 0;
            sol = "";
        }
    }
    
    // 2번은은 마지막에 a가 혼자 남으면서 cnt1과 cnt2가 같은 상황으로 끝나지 않았기 때문에 초기화되지 않은 sol이 있다면 answer를 추가해줍니다.
    if (sol) answer++;
    
    return answer;
}