[TIL] 240527 (React 가계부 과제 제출 / Context API, Redux 리팩터링 과제)

솔·2024년 5월 27일

TIL

목록 보기

54/268

🥞 오늘 한 일

리액트 숙련 개인과제
- 필요 없는 코드 정리 및 주석 정리
- 제출 완료
알고리즘 코드카타
- practice1~3 풀이 완료
스탠다드반 수업
- 과제 완료 (Context API 리팩터링, Redux 리팩터링)

이번 스탠다드반 과제로 주어진 코드를 Context API, Redux로 리팩터링하는 과제가 있었다. 간단한 코드였기 때문에, 더 복잡한 구조를 가지고 있었던 이번 가계부 과제의 리팩터링을 이미 진행한 뒤라 그런지 다행히 쉽게 느껴졌다.

🍽️ 문제 해결

알고리즘 코드카타

practice1-1

주어진 두 문자열에서 첫 번째 문자열이 두 번째 문자열에 포함되는지 여부를 확인하시오. 포함된다면 true, 포함되지 않는다면 false를 반환하시오.
단, 'include' 함수는 사용하지 마시오.

function isSubstring(s1, s2) {
  if (s1.length > s2.length) return false;
  for (let i = 0; i <= s2.length - s1.length; i++) {
    if (s1 === s2.slice(i, i + s1.length)) {
      return true;
    }
  }
  return false;
}

s1의 길이가 s2의 길이보다 길다면 애초에 s2에 포함될 수 없기에 false를 return한다.
아닐 경우 반복문을 통해, i번째 s2부터 s1의 길이만큼 잘라내어 s1과 같은지 확인한다. 같을 시 s1이 s2에 포함되는 것이기 때문에, true를 return 한다.
반복문을 전부 돌아도 s1과 같은 문자를 찾지 못할 경우 s1이 포함되지 않는다는 의미이기 때문에 false를 return한다.

practice1-2

주어진 문자열에서 가장 긴 반복되는 부분 문자열을 찾으시오. 반복되는 부분 문자열이 없다면 빈 문자열을 반환하시오.

function longestRepeatingSubstring(s) {
  let result = "";
  for (let i = 0; i < s.length - 1; i++) {
    for (let j = i + 1; j < s.length; j++) {
      if (s[i] !== s[j]) {
        continue;
      } else {
        let repeatingSubstring = "";
        let k = 0;
        while (s[i + k] === s[j + k]) {
          repeatingSubstring += s[i + k];
          k++;
        }
        if (repeatingSubstring.length > result.length) {
          result = repeatingSubstring;
        }
      }
    }
  }
  return result;
}

우선 반복문으로 문자열의 마지막 문자를 제외하고 문자를 반복해준다. (마지막 문자는 뒤에 아무 문자가 없기 때문에 반복되는 문자를 찾을 수 없기 떄문.)
반복문 안에 반복문으로, i번째 문자 뒤의 문자열을 한 문자씩 비교한다.
만약 i,j번째 문자가 다를 경우 비교할 이유가 없으므로 continue해준다.
i,j번째 문자가 같을 경우, 또 반복문을 통해 i,j의 뒤에 있는 문자들을 다른 문자가 나올 때까지 비교하여, 겹치는 문자를 새로운 변수에 넣어준다.
해당 문자가 result의 길이보다 길 경우, result는 해당 문자가 된다.
반복문을 다 돌았다면 result는 가장 긴 반복되는 부분 문자열이기 때문에 result를 return 해준다.

practice2

주어진 문자열에서 각 단어를 반전시키시오. 단어의 순서는 그대로 유지되어야 합니다.

function reverseEachWord(s) {
  return s
    .split(" ")
    .map((word) => {
      return [...word].reverse().join("");
    })
    .join(" ");
}

각 단어별로 나눠주기 위해 split 메서드를 사용해 배열로 만든다.
map을 사용해 각 단어 역시 배열로 만들어 reverse로 반전시킨 후, join을 통해 다시 문자열로 만든다.
해당 배열을 join하여 다시 문자열로 변환시키고, 해당 문자열을 바로 return한다.

practice3-1

주어진 문자열을 반전시키시오. 문자열의 각 단어는 그대로 두고 단어의 순서만 반전시키시오.
단, reverse 함수를 사용하면 안된다.

function reverseWords(s) {
  const result = [];
  s.split(" ").forEach((word) => {
    result.unshift(word);
  });
  return result.join(" ");
}

정답을 넣어줄 빈 배열을 만든다.
s를 각 단어가 요소인 배열로 만들어준 후, 새로 만든 빈 배열에 하나씩 앞에 넣어준다.
해당 배열을 다시 문자열로 만들어 return한다.

practice3-2

주어진 문자열이 팰린드롬인지 확인하라. 팰린드롬이란 앞에서부터 읽었을 때와 뒤에서부터 읽었을 때가 같은 문자열을 의미한다. 가능하다면 true, 아니라면 false를 반환하라.
단, reverse 함수를 사용하면 안된다.

function isPalindrome(s) {
  s = s.toLowerCase().replace(/[^a-z]/g, "");
  for (let i = 0; i < Math.round(s.length / 2); i++) {
    if (s[i] !== s[s.length - (i + 1)]) {
      return false;
    }
  }
  return true;
}

대소문자를 구분하지 않기 때문에 모든 문자를 소문자로 만들어주고, 정규 표현식을 사용해 알파벳만 남긴다. (공백 및 특수문자 제거를 위함)
반복문을 통해 맨 앞과 맨 뒤에서부터 한 번씩 절반까지 비교한다.
만약 같지 않은 문자가 있을 경우 팰린드롬이 아니기 때문에 false를 return한다.
반복문이 전부 돌았을 경우 모든 문자가 같다는 의미이기 때문에 팰린드롬이다. 때문에 true를 return한다.

🍪 배운 것

스탠다드반 수업

Context API 로 전역상태 관리하기
Context API 자주 사용되는 코딩 패턴
Context API 가 있는데 Redux를 사용하는 이유
Redux 개념 다시보기
Redux-Toolkit (RTK) 특징
Store 자체를 구독하는 걸 지양해야하는 이유

🍴 돌아보기

수요일 제출인 과제를 오늘 마무리하여 제출하고, 일주일 간 하루에 하나씩 풀라고 주어지는 알고리즘 코드카타 문제를 다 풀고, 스탠다드반 수업을 듣고 내일까지인 과제를 진행했다. 주어진 과제들 중 내가 할 수 있는 것은 다 하고 간다는 생각이 들어서 다행이라고는 생각한다. 3일이나 빠지면서 공부가 잠깐 멈추는 것은 아쉽지만, 캠프의 하루하루에 대한 소중함을 느끼고(?), 돌아왔을 때 밀린 걸 빠르게 해내고 팀 프로젝트를 더욱 열심히 하는 계기로 만들어야겠다!