2. react :

• react 개념서(구) : https://ko.legacy.reactjs.org/docs/hello-world.html
• react (신) : https://react.dev/reference/react

...

함수(function)란 첫 번째 집합의 임의의 한 원소가 두 번째 집합의 오직 한 원소에만 대응하는 관계를 의미합니다. x와 y 사이에서 x의 값이 정해지면 거기에 따라 y의 값이 정해지는 관계를 가질 때 y는 x의 함수라고 부릅니다.

프로그래밍에서 함수란

프로그래밍에서 함수란 특정 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합으로 정의할 수 있다.

왜 함수를 사용하는가?

1. 반복적인 프로그래밍을 피할 수 있기 때문이다.
2. 프로그램을 여러 개의 함수로 나누어 작성하면, 모듈화로 인해 전체적인 코드의 가독성이 좋아진다.
3. 프로그램에 문제가 발생하거나 기능의 변경이 필요할 때에도 손쉽게 유지보수를 할 수 있다.

여기서 중요한 키워드는 '특정 목적'과 '독립적'인 것 같다. 그리고 이러한 결에 잘어울리는 변수명을 지어주는게 중요한 것 같다. 예를 들어, 함수의 이름이 getDeviceList인데 실제 함수의 기능이 기기 리스트를 가져오는 것과 다른 기능이 덕지덕지 붙어있다면, 코드의 전반적인 흐름을 읽어나갈 때, 읽는 속도도 안날 뿐더러 두번다시 보는게 고역일 것이다.

다른 예로, 다른 함수와 독립적이지 못한다면 이 함수를 읽어나가다가 저 함수랑 연관되어있어서 저 함수 읽었다가 또 다른 함수 읽었다가... 이거 뭐지? 그래서 어디서 문제가 발생한건데? 싶은 순간이 많을 것으로 판단이 된다.

나의코드

const solution = (s) => {
    let stack = [];
    for (let i = 0; i < s.length; i++) {
        if(s[i] === '(') {
            stack.push(s[i]);
        }else {
            if(stack[stack.length -1] === '(') {
                stack.pop();
            }else {
                stack.push(s[i]);
            }
        }
    }
    return stack.length === 0 ? true : false;
}

로직흐름

스택 관련 문제이다.

• stack을 만든다.
• s를 순회한다.
• 현재 요소가 (라면 stack에 추가한다.
• 현재 요소가 )이면서 stack의 마지막 요소가 (라면 stack에서 마지막 요소를 제거한다.
• 현재 요소가 )이면서 stack의 마지막 요소가 )라면 stack에 )를 추가한다.
• 반복을 마치고, stack의 크기가 0이면 true, 아니라면 false를 반환한다.

나의코드

const solution = (arr) => {
    let answer = [arr[0]];
    for(let i=1; i< arr.length; i++) {
        const compareItem = answer[answer.length-1];
        if(arr[i] != compareItem) {
            answer.push(arr[i]);
        }
    }
    return answer;
}

로직흐름

전형적인 스택관련 문제이다. 스택 answer를 만들어 가장 마지막 요소와 순회중인 배열 arr의 요소를 비교하고, 이 값이 다르면 스택 answer에 현재의 arr요소를 추가한다.

나의코드

const solution = (array, commands) => {
    let result = [];
    for(let command of commands) {
        result.push(array.slice(command[0]-1, command[1]).sort((x, y) => x - y)[command[2]-1]);
    }
    return result;
}

로직흐름

n번째 숫자의 인덱스는 n-1이다. 따라서 array의 n번째 숫자부터 m번째 숫자까지 자르기 위해 slice을 이용한다면 array.slice(n-1, m)이다.

commands를 순회한다. 순회중인 요소가 command라면, array.slice(command[0]-1, command[1])해서 array중 잘라내고 이것을 sort로 오름차순 정렬한뒤, command[2]-1인덱스를 추출해서 최종적으로 반환할 배열에 추가한다.

순회를 마치고 배열을 반환한다.

나의코드

const solution = (a, b) => {
    const howManyDays = [31,29,31,30,31,30,31,31,30,31,30,31];
    const daysOfweek = ['THU','FRI','SAT','SUN','MON','TUE','WED'];
    const totalDays = howManyDays.slice(0, a-1).reduce((prev, curr) => prev+curr, 0) + b;
    return daysOfweek[totalDays % 7];
}

로직흐름

howManyDays : 1월부터 12월까지 일수가 들어있는 배열 daysOfweek: 목, 금, 토, 일... 반환해야 하는 요일이 들어있는 배열. 단, 1번째 인덱스를 금요일로 뒀다. 그 이유는 총 일수를 7로 나누었을 때의 인덱스를 이용해서 곧바로 값을 반환하기 위해서이다.

예) 1월 8일일 때 1월부터 총 8일이므로, 8 & 7 === 1 즉, daysOfweek[1]은 금요일이다. 2월 26일 일 때 1월부터 총 32 + 26 = 58일 이므로, 58 % 7 === 2 즉, daysOfweek[2]은 토요일이다.

totalDays : 1월부터 현재 날짜까지의 총 일수이다. 이를 구하기 위해 howManyDays의 0부터 a-2인덱스까지를 뽑아내고 이를 모두 더한뒤 + b를 한 값이다.

예) 5월 8일 이라면 1,2,3,4월의 일수를 모두 더한뒤 8을 더해준 값이 총 수가 된다.

총 일수 % 7이 찾고자하는 daysOfweek의 인덱스 값이고, daysOfweek에서 이 인덱스에 해당하는 요일을 반환하면된다.

나의코드

const solution = (k, score) => {
    let lowHonor = [];
    let arrayOfHonor = [];
    for(let i = 0; i < score.length; i++) {
        if (arrayOfHonor.length < k) {
            arrayOfHonor.push(score[i]);
            lowHonor.push(Math.min(...arrayOfHonor));
            continue;
        } else {
            let minValueOfHonor = Math.min(...arrayOfHonor);
            if(minValueOfHonor < score[i]) {
                arrayOfHonor.sort((x, y) => y - x).pop();
                arrayOfHonor.push(score[i]);   
            }
            lowHonor.push(arrayOfHonor.sort((x, y) => x - y)[0]);
        }
    }
    return lowHonor;
}

로직흐름

• lowHonor : 명예의 전당에서 가장 작은 점수가 들어있는 배열
• arrayOfHonor : 명예의 전당

1. 0번째 인덱스부터 score.length -1인덱스까지 반복한다.

2. 만약 명예의 전당의 배열길이가 k(= 명예의 전당 요소의 개수)보다 작다면, -- arrayOfHonor에 현재 점수를 추가한다. -- arrayOfHonor에서 가장 작은 수를 lowHonor에 추가하고 다음 인덱스로 넘어간다.

3. 만약 명예의 전당의 배열길이가 k라면, 명예의 전당에 꽉차 있다는 의미이다. -- 명예의 전당에서 가장 작은 점수를 구한다. -- 만약 이 점수보다 현재 score가 더 크다면, arrayOfHonor를 내림차순으로 정렬한뒤, 가장 작은 값을 빼버리고 현재 점수를 추가한다. -- 만약 현재 점수가 더 작다면 명예의 전당에 추가하지 않는다. -- 현재 점수가 명예의 전당에서 가장 작은 점수보다 크든 작든, lowHonor에 현재 명예의 전당에서 가장 작은 수를 추가한다.

   4. 순회를 마치고 lowHonor를 반환한다.

나의코드

const solution = (name, yearning, photo) => {
    const nameYearningMap = new Map();
    for(let i = 0; i < name.length; i++) {
        let value = 0;
        if(i < yearning.length) {
            value = yearning[i];
        }
        nameYearningMap.set(name[i], value);
    }

    return photo.map((x, i) => {
       return x.reduce((prev, curr) => {
           if(!nameYearningMap.has(curr)) return prev;
           else return prev + nameYearningMap.get(curr);
       }, 0);
    })
}

로직흐름

1. name의 각 그리움 점수를 Map object에 저장한다.
2. 1.에서 Map object에 저장할 때, 만약 name과 yearning의 배열의 길이가 다르다면, yearning이 없는 값은 0을 저장한다.
3. photo에 map메소드를 사용해서 각각의 요소의 그리움 합을 구한 것으로 값을 변경한다. 그리움 합을 구할 땐 reduce를 사용했다. 만약 Map Object의 key값이 없는 요소가 있다면 해당 값은 0이라고 간주했다.
4. 3.에서 요소가 바뀐 배열을 반환한다.

나의코드

const solution = (food) => {
    let leftResult = '';
    food.forEach((x, i) => {
        if(i >= 1) {
         leftResult += `${i}`.repeat(Math.floor(x/2));
        }
    });
   let rightResult = [...leftResult].reverse().join('');
   return leftResult + '0' + rightResult;
}

로직흐름

반환값은 0을 기준으로 뒤집은 모습이다. 따라서, 0을 기준으로 왼쪽 문자열을 leftResult로 놓는다. food의 1번째 인덱스부터 인덱스를 i라 놓고 끝인덱스까지 순회한다. i가 몇번 반복되냐면, Math.floor(food[i]/2)번 반복된다. 따라서 i를 문자열로 만들고 repeat 메소드를 이용해서 Math.floor(food[i]/2)번 반복한뒤 leftResult에 놓는다. 이렇게 순회를 마치면 0바로 직전까지의 leftResult가 만들어진다. 이것을 배열로 바꾸고 reverse메소드, join메소드를 사용해서 뒤집은 다음 문자열로 바꾼 값을 rightResult로 놓는다. leftResult + '0' + rightResult을 반환한다.

나의코드

const solution = (s) => {
    let result = [];
    for(let i = 0; i < s.length; i++) {
        let findIndex = s.slice(0, i).lastIndexOf(s[i]);
        if(findIndex !== -1){
            findIndex = i - findIndex;
        }
        result.push(findIndex);
    }
    return result;
}

로직흐름

0인덱스부터 s.length-1까지 순회를 한다. s에서 가장 첫번째 요소부터 현재 인덱스 바로 직전까지 뽑아 낸 뒤, 여기서 해당 요소를 찾는다. 여기서 가장 마지막 인덱스를 반환한다. 만약 없으면 -1을 반환한다. 만약 찾은 인덱스 값이 -1이라면 바로 result배열에 추가를 하고, -1이 아니라면 현재 순회중인 인덱스에서 찾은 인덱스 값의 차를 result배열에 추가한다. 순회를 마친 뒤, result배열을 반환한다.

나의코드

const solution = (numbers) => {

    let sumList = [];
    for(let i = 0; i< numbers.length -1; i++) {
        for(let j = i+1; j < numbers.length; j++) {
            sumList.push(numbers[i] + numbers[j]);
        }
    }

    const uniqueSumListSet = new Set(sumList);
    return [...uniqueSumListSet].sort((x, y) => x - y);
}

로직흐름

numbers에서 두개의 요소를 선택하고 이것의 합을 배열에 저장해나간다. 이 배열을 Set Object를 이용해서 동일 요소를 제거한뒤, sort를 이용해서 오름차순으로 정렬한다.

나의코드

const solution = (strings, n) => {
    return strings.sort((x, y) => {
        if(x[n] > y[n]) return 1;
        else if(x[n] < y[n]) return -1;
        else {
            if(x > y) return 1;
            else if(x < y) return -1;
        }
    })
}

로직흐름

n번째 인덱스로 오름차순 정렬을 한다. 만약 n번째 인덱스의 값이 같다면, 문자열을 비교해서 사전순으로 정렬을 한다.

나의코드

const solution = (n, arr1, arr2) => {
    // 암호화된 숫자를 해독해야 한다.
    // 하나라도 '#'(1)벽이면 그 자리는 1이다. 
    // 둘다 ' '공백(0)이면 그 자리는 0이다.
    let newArr1 = arr1.map((x) => {
        let newX = x.toString(2);
        if(newX.length < n) {
          newX = '0'.repeat(n-newX.length) + newX;
        }
        return newX;
    });

    let newArr2 = arr2.map((x) => {
        let newX = x.toString(2);
        if(newX.length < n) {
          newX = '0'.repeat(n-newX.length) + newX;
        }
        return newX;
    });

    return newArr1.map((x, i) => {
        let newX = '';
        for(let indexOfStr = 0; indexOfStr < n; indexOfStr++) {
            Number(x[indexOfStr]) || Number(newArr2[i][indexOfStr]) ? newX += '#' : newX += ' ';
        }
        return newX;
    })
}

로직흐름

arr1 각각의 요소를 2진수로 바꾼 배열 newArr1을 만든다. 단, newArr1의 모든 요소는 n의 자리인 2진수여야 한다. 바꾼 2진수의 길이가 n개보다 작다면 부족한만큼 앞에 0을 붙인다.

마찬가지로 arr2에서도 위와 동일한 방법으로 newArr2를 만든다.

newArr1와 newArr2의 요소를 순회하면서 해당 요소를 또 다시한번 순회해서 이루고 있는 0,1 이 두가지로 구성된 요소 안 요소를 뜯어본다. 만약 0 || 0 -> 0 1 || 0 -> 1 0 || 1 -> 1 1 || 1 -> 1 위의 상황중 어떤 상황인지 확인하고 1이라면 '#', 0이라면 공백(' ')으로 요소 안 요소를 하나씩 바꿔나간다.

가장 바깥 순회까지 모두 마친 뒤, 새로 만들어진 배열을 반환한다.

나의코드

const solution = (nums) => {
    let count = 0;
    for(let leftIndex = 0; leftIndex <= nums.length-3; leftIndex++) {
        for(let centerIndex = leftIndex+1; centerIndex <= nums.length -2; centerIndex++) {
            let rightIndex = centerIndex+1;
            while(rightIndex !== nums.length) {
                let sum = nums[leftIndex] + nums[centerIndex] + nums[rightIndex];
                for(let i = sum -1; i > 1; i--) {
                    if(sum % i === 0) {
                        break;
                    }

                    if(i === 2) count++;
                }
                rightIndex++;
            }
        }
    }
    return count;
}

로직흐름

leftIndex, centerIndex, rightIndex를 정한다. leftIndex하나를 고정으로 두고 그 안에서 centerIndex를 고정으로 두고 rightIndex를 움직이는 반복을 끝까지 한다. 해당 인덱스들의 합이 소수라면 카운트한다. 모든 순회를 마치고 소수를 카운트 한 값을 반환한다.

나의코드

const solution = (s) => {
    const matchingObj = {
        'zero': 0,
        'one': 1,
        'two': 2,
        'three': 3,
        'four': 4,
        'five': 5,
        'six': 6,
        'seven': 7,
        'eight': 8,
        'nine': 9
    }
    Object.keys(matchingObj).forEach((x, i) => {
       s = s.replaceAll(x, matchingObj[x]);
    })
    return Number(s);
}

로직흐름

matchingObj : 문자열 숫자를 키로 두고, 숫자를 값으로 두어진 obj이다.

matchingObj의 key들을 순회하면서 s에서 현재 순회중인 key를 모두 숫자로 바꾸면서 s를 업데이트한다.

순회를 마치고 변경된 s를 반환한다.

나의코드

const solution = (s,n) => {
    const lowerCase = 'abcdefghijklmnopqrstuvwxyz';
    const upperCase = lowerCase.toUpperCase();
    return [...s].map((x) => {
        if(x === ' ') return x;
        let isUpper = lowerCase.indexOf(x) === -1;
        let index = isUpper ? upperCase.indexOf(x) : lowerCase.indexOf(x);
        let newIndex = (index + n) % 26;
        return isUpper ? upperCase[newIndex] : lowerCase[newIndex];
    }).join('');
}

로직흐름

lowerCase : 소문자 az upperCase : 대문자 AZ s를 배열로 만들어서 순회를 한다. 만약 현재 요소가 공백이라면 요소를 바꾸지 않는다. 현재 요소가 대문자인지 소문자인지 파악한다. 대문자라면 upperCase에서 소문자라면 lowerCase에서 해당 요소가 몇번째 있는지 찾는다. 그 인덱스에 n을 더하고 이 값을 알파벳 개수인 26으로 나눈 뒤, 그 나머지를 새로운 인덱스로 잡는다. 대문자라면 upperCase에서, 소문자라면 lowerCase에서 바로 위에서 구한 새로운 인덱스 값으로 현재 요소를 바꿔준다. 순회를 마치고 배열을 문자열로 바꾼뒤 반환한다.

나의코드

로직흐름

나의코드

const solution = (t, p) => {
    // 뽑아내는 수의 마지막인덱스 : p.length -1 ~ 끝까지
    // 각각의 수의 첫번째 인덱스 : 마지막인덱스 - (p.length - 1)
    let result = 0;
    for(let selectNumberLastIndex = p.length -1; selectNumberLastIndex < t.length; selectNumberLastIndex++) {
        let selectNumberFirstIndex = selectNumberLastIndex - (p.length -1);
        if(Number(t.slice(selectNumberFirstIndex, selectNumberLastIndex+1)) <= Number(p)) result+=1;
    }
    return result;
}

로직흐름

• 뽑아내는 수의 마지막인덱스는 p.length -1 부터 t.length-1까지이다.
• 뽑아내는 수의 첫번째 인덱스는 : 해당 수의 마지막인덱스 - (p.length -1)이다.

• 마지막인덱스를 기준으로 반복문을 돌려서
• 수를 뽑아낸다. 이 수와 p를 비교해서 이 수가 p보다 작거나 같으면 최종적으로 반환해줄 변수의 값을 +1하면서 개수를 센다.