🥞 오늘 한 일

• 개인과제 해설기반 과제 그로스
  • 카드 ul에 이벤트 위임 (ul 클릭 시 이벤트 발생)
  • 검색 기능 keyup 대신 form 태그에서 동일 기능 제작
• 개인과제 튜터 피드백
  • 불필요 변수 제거
  • 불필요 스프레드 문법 제거
• 알고리즘 코드카타
  • 문자열 내림차순으로 배치하기
  • 부족한 금액 계산하기
  • 문자열 다루기 기본
  • 행렬의 덧셈
• promise / async / await 강의 (15:00, 여럿이서 방문, 유진영 튜터님)
• Git 심화 특강 (19:00, 예병수 튜터님)

🍽️ 문제 해결

알고리즘 코드카타

문자열 다루기 기본

문제

문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.

오류

function solution(s) {
    if (s.length === 4 || s.length === 6) {
      return isNaN(s) ? false : true;
    } else {
      return false;
    }
}

완벽해보이지만 딱 한 군데, 11번 테스트 케이스에서 실패한 코드이다.
프로그래머스에서 제공하는 힌트 페이지를 보니, 해당 케이스라면 지수 표기법 때문에 숫자로 판별됐을 수 있다고 한다. 실제로 s를 12e3으로 바꿔주니 true가 나왔다.

해결

그렇다면 e가 포함됐다면 false를 반환하도록 한 번 더 조건을 추가해주면 어떨까? 하는 가설을 세웠다.

function solution(s) {
    if (s.length === 4 || s.length === 6) {
      if (isNaN(s) || s.includes('e')){
          return false;
      } else {
          return true;
      }
    } else {
      return false;
    }
}

includes() 메서드를 사용해서 e가 포함됐다면 false를 반환하도록 코드를 수정했더니 11번 테스트 케이스에서도 성공했다.

🍪 배운 것

• isNaN() : 문자열이 숫자인지 체크하는 함수.

promise / async / await 강의 (유진영 튜터님)

뜻이 맞는 사람들끼리 튜터님께 방문하여 강의를 들었다.

• 비동기 처리
  • setTimeOut() 함수를 사용해 1,2,3을 콘솔로 찍어줄 때 2에 함수를 적용시키면 1,3,2 순서로 나온다. 이러면 비동기 처리가 된 것이다.
  • fetch가 JavaScript 내에서 대표적으로 비동기적으로 작동하는 것 중 하나이다. 비동기적으로만 작동하도록 만들어져있다. (제일 궁금했던 부분)
  • (써보면 좋은 API "JSONPlaceholder")
  • 비동기 함수는 바로 실행이 안 되고, 약속을 돌려주고 바로 다음 줄로 넘어간다.
• promise
  • promise의 상태 3가지
    • pending => 약속을 막 한 상태
    • fulfilled => 약속을 잘 수행한 상태 (약속 지킴)
    • rejected => 약속을 제대로 수행하지 못 한 상태 (약속 못 지킴)
  • new Promise()로 promise를 만들 수 있다.
  • 약속(promise)은 동기적으로 된 것들을 다 수행한 다음에 하는 것이다. 우리가 하고 싶은것은 약속의 결과를 갖고 뭔가를 하고 싶은건데, 아무리 계속 그 결과값을 찍어도 pending 상태가 된다. 따라서 약속이 지켜진 이후 시점의 코드를 쓰는 방법이 필요한데, 두 가지 방법이 있다.
    1. then() 사용
    2. await() 사용
• then()
  • 전역에서 기다리려면 await을 사용하지 못하고 then()을 사용해야한다. (await은 async 내부에서만 동작하기 때문)
• await
  • 내가 영화 검색 사이트를 제작할 때처럼 then() 내부에 모든 코드를 다 집어넣지 않으려고 사용한다.
  • 가능하면 then()보다는 가독성 차원에서 await이 좋다.
  • await을 사용하면 일단 멈추고 먼저 실행한다. (말 그대로 기다리겠다는 의미.)
  • await이 포함되면 fulfilled가 되고, 포함이 안 되면 pending이 된다.
  • async 안에서만 유효하다. async 바깥에서는 쓸 수 없다.
• async
  • async 함수는 비동기 함수가 된다. 때문에 return 값을 넣어도 돌려주지 않고 promise를 돌려준다. 그래서 pending 상태가 된다.

계속 async await이 약간 발목을 잡는 느낌이었는데 튜터님의 강의를 듣고 나니 이제야 좀 감이 잡히는 느낌이 들었다. 이번 영화 검색 사이트에는 then() 내부에 모든 코드를 다 작성하는 방식으로 했는데, async await 방식으로 조금씩은 바꿔봐야겠다.

🥕 개인 과제 튜터 피드백

잘한 점

• 좌측 공간에 영화 이름으로 리스트를 만들어 추가적인 콘텐츠를 제작한 점
• ul, li 태그 사용하여 리스트를 시멘틱하게 작업한 점
• catch 문에 콘솔로 에러를 표시함으로 세심한 부분에 신경쓴 점 (에러 핸들링은 가장 중요한 요소)
• 폴더를 js와 css로 구분한 점, 코딩도 중요하지만 폴더 구조도 중요한데 이런 부분을 고려했다.

아쉬운 점

• 필요없는 console.log 존재
• 초기 렌더링 시 for문을 사용했는데 map이나 forEach 사용을 추천
• clickedList라는 불필요한 변수 선언. 제거 추천
• 스프레드 문법을 사용해 배열을 새로 생성했는데 movieCardList를 직접 사용하는게 더 좋아보인다.
• 검색 기능에서 검색된 내용을 제외한 다른 card들을 display none 처리 대신 아예 리스트에서 제거하는 방식 추천.
  현재는 리스트에 출력되는 영화 개수가 제한되어 있지만 나중에 많은 개수의 영화를 출력할 때에는 문제가 될 수 있다.
• keyup 이벤트는 버그를 발생시킬 수 있다. form 태그를 이용해서 동일한 기능을 만들 수 있다.
• stopPropagation은 이벤트의 버블링을 막는데에 주로 사용된다. preventDefault와의 차이점을 공부해보면 좋을 것 같다.
• Callback 함수에 화살표 함수와 선언식이 혼재되어 있다. 화살표 함수로 작성하는 것을 추천한다.
• Git 사용에 있어 여러번 나눠 커밋한 방법은 좋으나 커밋 메시지에 소홀한 모습이 보인다.
  커밋 메시지는 추후에 커밋을 되돌려야 되거나 해당 커밋에 어떤 내용이 들어있는지 확인할 수 있는 지표로 사용된다. 필요한 내용을 요약해서 한 번에 이해할 수 있도록 작성하는 것을 연습해 보길 추천

압도적으로 많은 아쉬운 점... 사실 몇가지 부분은 개인과제 해설기반 과제 그로스 때 어느 정도 수정한 상태이긴 하다. 남은 부분도 반드시! 수정할 것이다.

🍴 느낀 점

• 튜터 전수면담을 제외하고 처음으로 튜터님께 가서 질문을 드린 날이었다. 일단 혼자서 안 될때까지 해보고 튜터님들을 찾아가라는 말을 들었어서, 웬만하면 튜터님을 찾지 않고 있었는데 동기분이 같이 가보자고 해주셔서 여럿이서 가서 들으니 확실히 훨씬 쉽게 이해가 잘 되었다. 혼자서 공부하는게 아님을 다시 상기할 수 있었다. 혼자 해결하는 것도 좋지만, 도움도 많이 받고, 주자.
• 개인 과제 튜터 피드백을 받고 아직 많이 부족한 걸 느꼈다. 조금 늦게 받아서 팀 과제 시작 전에 피드백 부분을 다 해결하기는 조금 어려운 게 아쉽지만 꼭 피드백 받은 부분을 다 개선하고 싶다.

🍳 내일 할 일

• JavaScript 개인 과제 튜터 피드백 반영하기
• 팀 과제 시작
• Git 심화 특강 정리