TIL_230127_ 프로젝트 기능 개발_3, JS 공부

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

---

📒 오늘의 공부

1. 프로그래머스 Js

Lv1. 나머지가 1이 되는 수 찾기

• 풀이
  1. n을 x로 나눴을 때 1이 나오는 수의 배열 구하기
  2. 배열의 가장 작은 수 구하기

function solution(n) {
    var answer = [];
    for(let x=1; x<n; x++){
        if(n%x === 1)
            answer.push(x)
        if(answer.length===1){
            return  answer[0]
        }else{answer[answer.length-1]}

    }
    return answer;
}

• 다른 풀이

  	function solution(n, x = 1) {    
    while (x++) {
        if (n % x === 1) {
            return x;
       	 }
    	}    
  	}

  • 이렇게만 해도 됐는데..!!

    const solution = function(n) {
      for (let i=0; i<n; i++){
          if (n%i == 1){
              return i
          }
      }
    }

---

2. 프로젝트 기능 개발_3

• Intersection Observer API

  ---

  시도

• id값으로 타겟 대상 지정하고 appendChild로 리스트 아래에 계속 붙이기

  • <div>안녕</div>은 스크롤이 타겟 위치에 왔을 때 계속 추가 됨
    

• chatGPT 참고해서 코드 추가 수정

  • api key가 모두 할당량 초과돼서 mockData로 계속 불러올 수 있는지 테스트했는데 성공!
    

  • 추가로 불러온 data 렌더링하는 부분
    

  • 코드 수정

  • useQuery로 불러온 data활용

  • 이 부분이 경고로 useEffect안에 들어가야 한다고 나오는데 무시해도 잘 실행됨. 안에 넣으면 오히려 오류.
    

문제 및 해결

• 데이터 잘 불러와지는데 카테고리, 검색어 기능을 이용하려고 하면 화면이 하얗게 되고 오류
  Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'
  • observerRef의 위치를 옮기니 해결..!
    

    ---

문제 및 해결

• Typescript 적용
  • useRef 오류
    const observerRef = useRef<HTMLDivElement>(null);
<div ref={observerRef}></div>
  • 이 둘은 오류가 안 나는데 useEffect안에서 observerRef가 사용되는 부분에서 오류가 났다.
    
  • 튜터님 도움으로 해결
  • observer는 null값을 받지 않는데 observer.current가 null값일 수도 있어서 아래처럼 예외 처리를 해주니 오류 해결..!!
  • 
  • ref가 아니라 observer와 관련된 문제였다!!

  ---

문제

• 캐러셀 슬라이드 typescript로 변경
  • 화살표 컴포넌트에서 props로 onClick을 받아왔으니 categorySlide에서 쓸 때도 넘겨줘야 하는 기본을 까먹음..!!
  • js 할 때는 이렇게 안 해도 잘 됐는데 ts로 바꾸니 오류가 생겨서 변경!
  • onClick을 원래처럼 nextArrow에 주고 싶지 않으면 Props interface에서 옵션 처리해주기
  • 

  ---

알게 된 것

• Call Signature
  • typescript type 지정할 때 함수 자체 type을 지정해서 쓰는 것
    type Form = (a: number, b: number) => number
const add: Form = (a, b) => a+b

---

3. JS 스터디 사전 공부

Modern JS Tutorial - 나머지 매개변수와 스프레드 문법