🥞 오늘 한 일

• 리액트 숙련 강의
  • 1-1~7 수강 완료
• 스탠다드반 수업
  • 리액트 입문 타임어택
    • 더하기/빼기 계산기
    • 투두리스트
  • 3차시 과제 완료
• 알고리즘 코드카타
  • 심화반 첫 수업 수강
  • 탐험반 문제 풀이
    • 문자열 내 각 문자의 개수 반환
    • 문자열에서 가장 많이 등장한 문자 찾기
    • 두 문자열의 교집합 문자 집합 구하기
    • 두 단어가 애너그램인지 확인

🍽️ 문제 해결

알고리즘 코드카타

문자열 내 각 문자의 개수 반환

주어진 문자열에서 각 문자가 몇 번 등장하는지 세어라. 결과는 객체 형태로 반환한다.

function countCharacters(s) {
  let result = {};
  [...s].forEach((item) => {
    if (!result[item]) result[item] = 1;
    else result[item] += 1;
  });
  return result;
}

결과를 담을 객체 result를 만든다.
배열로 바꾼 s를 forEach문을 사용해 반복한다.
문자열에 해당하는 key값이 없을 경우 새로 만들어주고 value로 1을 지정한다.
이미 문자열에 해당하는 key값이 있을 경우 value에 1을 더해준다.
result를 return 한다.

문자열에서 가장 많이 등장한 문자 찾기

주어진 문자열에서 가장 많이 등장하는 문자를 반환하라. 만약 여러 개라면 그 중 아무거나 반환하라.

function mostFrequentChar(s) {
  let str = "";
  for (let i = 0; i < s.length; i++) {
    if (!str.includes(s[i])) str += s[i];
    else return s[i];
  }
}

반복되는 문자를 찾을 수 있도록 빈 문자열 변수 str을 선언한다.
s를 반복문으로 한 문자씩 반복한다.
만약 str 내에 i번째 문자가 없다면 str에 넣어준다.
str 내에 i번째 문자가 있다면 해당 문자가 2개 이상이기 때문에 i번째 문자를 바로 return 해준다.

두 문자열의 교집합 문자 집합 구하기

두 문자열이 주어졌을 때, 두 문자열에 모두 등장하는 문자를 집합으로 반환하라.

function commonCharacters(s1, s2) {
  const arr = [];
  for (let i = 0; i < s1.length; i++) {
    if (s2.includes(s1[i])) {
      arr.push(s1[i]);
    }
  }
  return new Set(arr);
}

교집합 문자를 넣을 빈 배열 arr을 선언한다.
s1을 반복문으로 돌려 i번째 요소가 s2에 있을 경우 교집합 문자이므로 arr에 push한다.
arr에 겹치는 문자가 있을 가능성이 있으므로 해당 문자들을 제거해주는 new Set 메서드를 사용해 return 한다.

두 단어가 애너그램인지 확인

두 단어 A와 B가 주어졌을 때, A의 알파벳 순서를 바꾸어 B를 만들 수 있는지 확인하라. 가능하다면 true, 아니라면 false를 반환하라.

function isAnagram(a, b) {
  const sortA = a.split("").sort();
  const sortB = b.split("").sort();
  for (let i = 0; i < sortA.length; i++) {
    if (sortA[i] !== sortB[i]) {
      return false;
    }
  }
  return true;
}

두 단어를 비교하기 쉽도록 새로운 변수에 각 단어를 배열로 만들어 sort() 메서드를 적용한다.
이 경우 한 단어가 알파벳 순서를 바꾸어 다른 단어를 만들 수 있다면 배열의 요소와 순서가 전부 같다는 점을 이용했다.
반복문을 사용해 sort()가 적용된 배열의 각 요소가 다를 경우 바로 false를 return한다.
false 없이 반복문을 전부 돌았다면 두 배열의 요소가 같다는 말이기 때문에 true를 return한다.

스탠다드반 수업

리액트 입문 타임어택

오늘은 타임어택이 있었다. 기존 투두 리스트만 타임어택이 있는 줄 알았는데, 더하기/빼기 계산기 타임어택도 추가되어, 계산기에 20분, 투두 리스트에 40분으로 총 1시간이 주어지는 타임어택이었다.
투두 리스트같은 경우 별 어려움 없이 연습한대로 잘 해냈고, 예고되지 않아 걱정했던 계산기도 큰 어려움 없이 해냈다. 아래는 계산기 코드이다.

export default function App() {
  const [value, setValue] = useState("");
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>덧셈과 뺄셈이 가능한 앱 만들기</h1>
      <div>
        <input
          type="number"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />{" "}
        만큼을{" "}
        <button
          onClick={() => {
            setCount(count + +value);
          }}
        >
          더할게요
        </button>{" "}
        <button
          onClick={() => {
            setCount(count - +value);
          }}
        >
          뺄게요
        </button>
        <button
          onClick={() => {
            setCount(0);
          }}
        >
          초기화
        </button>
      </div>
      <hr />
      <div>
        <h3>결과</h3>
        <p>{count}</p>
      </div>
    </div>
  );
}

🍪 배운 것

리액트 숙련 강의

• styled-components
• reset css
• useState
• useRef
• useContext
• memoization - memo, useCallback

🍴 돌아보기

• 알고리즘 코드카타 심화반 수업을 들었으나, 개인적으로 내가 원하는 방향이 아닌듯한 느낌이 들어 탐험반으로 틀었다! (반 이동이 자유롭다고 하셨기도 하고, 아직 극초반이기에) 내 필요성에 맞게 잘 선택했다고 생각한다.
• 리액트 숙련 주차가 되고 갑자기 이것저것 휘몰아치면서 할 게 많아졌다. 나에게는 이번 숙련 주차에서 다른 분들보다 시간이 더 부족하기 때문에, 더 시간을 알차게 사용해야만 한다. 힘을 내서 달려보자!

🍳 내일 할 일

• 리액트 숙련 강의 완강
• 리액트 숙련 과제 시작