221218 알고리즘 : 코드 리팩토링

🎆 오늘 한 것

🙄 오늘 하려고 했는데 못한 것

• 수업 정리 및 복습
• deep dive 27장 배열(전부 말고 일부만)
• 알고리즘 강의 다중 포인터까지
• 리액트 강의(라우터 부분 볼 수 있을 만큼)
• 백준 1문제 풀이

✨ 알고리즘 : 코드 리팩토링 해보기

간단한 문제여도 여러가지의 해결방식이 있다.
처음엔 일단 풀어본(if나 for 덕지덕지 써가며) 후에 한 줄 한 줄 가독성과 성능을 고려한 코드로 바꿔보는 연습을 해보면 좋음.

🎇 예제

📌 Q. 주어진 문자열의 글자/숫자 개수(?)를 대소문자와 상관없이 객체로 반환하기

👇 예시

// 입력값 : "Hello!! Hi there!! 1234"
// 출력값
AnswerObj = {'1': 1,'2': 1,'3': 1,'4': 1, h: 3,
 e: 3, l: 2, o: 1, i: 1, t: 1, r: 1,};

📌 A1. 첫번째 풀이

const charCount = (str) => {
  let obj = {};

  for (let char of str) {
    char = char.toLowerCase();
    // 만약 char가 문자나 숫자라면(공백, 특수문자 제외해주는 것)
    if (/[a-z0-9]/.test(char)) {
      // char 라는 키의 밸류가0 이상이면
      if (obj[char] > 0) {
        // 밸류를 1씩 더해주고
        obj[char]++;
      } else {
        // char의 밸류가 0이면 1로 설정
        // 그리고 순회를 돌면서 같은 문자를 다시 만나면 위의 ++ 작업을 해주게 됨
        obj[char] = 1;
      }
    }
  }
  return obj;
};

📌 A2. if 개수 줄이기

const charCount = (str) => {
  let obj = {};

  for (let char of str) {
    char = char.toLowerCase();
    // 만약 char가 문자나 숫자라면(공백, 특수문자 제외해주는 것)
    if (/[a-z0-9]/.test(char)) {
      // obj[char] 가 참이라면 obj[char]를 더해주고
      // 거짓이라면 1로 설정
      obj[char] = ++obj[char] || 1;
    }
  }
  return obj;
};

📌 A3. 정규표현식을 쓰는 것이 성능적으로 좋은가?

아스키코드를 사용해서 푸는 게 성능면에서 우수

charCodeAt()을 사용해서 ASCII 코드로 문제 풀이

아스키 코드 확인 ( ascii-code.com )

const isAlphaNumeric = (char) => {
  const code = char.charCodeAt(0);

  if (
    !(code > 47 && code < 58) && // numeric (0~9)
    !(code > 64 && code < 91) && // upper alpha (A~Z)
    !(code > 96 && code < 123) // lower alpha (a~z)
  ) {
    // 문자나, 숫자가 아니기 때문에 false 리턴
    return false;
  }
  // 숫자나 문자이기 때문에 true 리턴
  return true;
};

const charCount = (str) => {
  let obj = {};

  for (let char of str) {
    if (isAlphaNumeric(char)) {
      // 소문자화도 굳이 처음부터 해줄 필요가 없다
      // char가 숫자나 문자인지 확인 후에 바꿔주면 됨
      char = char.toLowerCase();
      obj[char] = ++obj[char] || 1;
    }
  }
  return obj;
};

console.log(charCount("Hello!! Hi there!! 1234"));

오히려 코드는 길어진 것 같은데;

하지만 가독성과 성능을 끌어올렸으니 good, better 솔루션😏

🎇 알고리즘 문제 접근 방법

1. 문제를 명확히 이해
2. 입력값과 출력값을 이해,예외 처리 조건 이해
3. 구현해야 될 코드에 대한 계획을 몇 가지 단계로 세분화해보기(무작정 코드부터 쳐보는 건 🙅‍♀️)
4. 문제를 완전히 해결할 수 없다면, 해결할 수 있는 부분부터 먼저 처리하기. 문제를 단순화하기
5. 더 나은 해결 방법이 있는지 되돌아보고 리팩토링하기.

🎆 내일 할 것

• 수업 정리 및 복습
• deep dive 27장 배열(전부 말고 일부만)
• 알고리즘 강의 다중 포인터까지
• 리액트 강의(라우터 부분 볼 수 있을 만큼)
• 백준 1문제 풀이

📌 언젠가 해야되는 todo

• preload / modulepreload / prefetch 공부... 언제하지?
• deep dive 19장 프로토 타입
• deep dive 25장 클래스
• 테일윈드 다크모드 공부

📚 이번 주 개인 목표

아...잘못 저장해서 다 날림...ㅠㅠ 그래도 어느 정도 다 했어

📝 오늘의 일기

오늘 백준 js로 풀기를 처음으로 성공했다... 이걸로 시간 엄청 잡아먹었네... 노드는 왜케 불편한 거야 백준ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ