TIL_230121_Project, JS 공부

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. 프로그래머스 JS

Lv0. 배열 원소의 길이

• 풀이 순서

1. for문으로 배열 원소마다 slice("")하기
2. 각 원소의 문자 개수 구하기
3. 빈 배열에 넣기

function solution(strlist) {
    var answer = [];
    for(let i=0; i<strlist.length; i++){
        let b = strlist[i].slice("")
        answer.push(b.length)       
    }
    return answer;
}

• 다른 사람 풀이
  • return strlist.map((el) => el.length)
    -> map..!! map은 배열을 반환한다...

---

2. JS study - modernJS tutorial

optional chaining / programmers

알게 된 것

• join() 메소드

  • arr.join([separator])
  • 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
  • seperator를 생략하면 배열이 모두 ,(쉼표)로 구분

• 스터디가 1시간 만에 끝나서 면접 팁 등 정보 공유 위주로 대화를 많이 했다.

---

3. 프로젝트

UI 완성 및 회의

• Main UI

  • ✅ 검색창 Enter 눌렀을 때 실행 및 버튼 추가
  • ✅ 캐러셀 슬라이드 오류 수정

• Youtube API

  • ✅ fetch로 mockData 가져와보기
  • ✅ useQuery로 getData 해보기

• ✅ colors.js 생성

• ✅ api.js 파일 생성 및 KEY 파일 분리

  ---

문제

• 어제 캐러셀 오류
  import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css';

  • 공식문서대로 저 두개를 import 안 해서 그랬음
  • style component와 같이 쓸 땐 ~slick에서 물결을 지우고 import 해야 함

• 문제는 카테고리 사이의 간격

  • width 지정한 것과 상관없이 모든 카테고리가 간격이 없이 다 붙어 있음

  시도 및 해결

• 공식문서대로 각각의 content를 div(categories)로만 묶으니 간격은 벌어졌는데 화살표가 사라짐....
  
  

  • 공식문서의 커스텀슬라이드를 하면 같은 content가 두 개씩 생김..
  • 공식문서를 좀 더 자세히 봤는데 'Swipe to Slide'라는 게 있었음 셋팅을 그대로 적용하니 성공....!

  ⭐ 공식문서를 꼼꼼히 보자..

  ---

• color.js 파일 만들고 style component에서 쓸 때

  • ${color.navy}
    

• 팀원들과 코드리뷰하면서 코드 수정 및 UI 병합 완료!

알게된 것

• 특정 브랜치 clone 받기(ex. dev)
  • git clone -b dev 클론주소(http)
  • 단점은 이렇게 하면 부모 브랜치가 dev여도 이미 존재하는 브랜치로 이동하지 못한다. 아예 브랜치가 없다고 나옴.
  • 결국 협업 시에는 main clone해서 브랜치를 이동한 후 dev를 pull하는 게 제일 나은 방법 같다.

---

4. React query Udemy 강의

문제 및 해결

• yarn start에서 계속 오류가 났다.

  • 오류 msg -ERR_OSSL_EVP_UNSUPPORTED
  • 사용중인 모듈 중 하나 혹은 일부가 17.x부터 적용된 OpenSSL 3버전의 규격에 맞지 않을 경우 발생할 수 있다.
  • npm audit fix --force로 업그레이드하니 해결!

• 쿼리 설정 잘 하기

  • start해서 열렸는데 아무것도 안 불러와짐
  • 오류 Cannot set properties of undefined (setting 'queryCache')
  • const queryClient = new QueryClient();
  • new를 빼 먹어서 오류!!

  ---

알게 된 것

• isFetching / isLoading
  • isLoading: isFetching의 하위 개념으로 isFetching상태이자 cached 데이터도 없는 상태