TIL 17일차

무한 스크롤

구현방식

1. window의 scroll이벤트를 통해 스크롤링이 일어날 때마다 스크롤 위치가 화면 끝인지 확인하여 컨텐츠를 불러오는 방식
2. intersection observer 방식

구현 순서

1. DUMMY_DATA를 사용해서 5장의 사진을 불러오기
2. API를 연동해서 5장의 사진을 불러오기
3. 불러오기 버튼을 만들어 사진을 불러오는 기능 구현하기
   • 처음에는 다른 페이지에 있는 사진들 불러오기
   • 현재 있는 사진에 다른 페이지에 있는 사진 이어 붙이기
4. 버튼 대신 스크롤바이벤트는 만들어 사진을 불러오기 기능 구현

코딩테스트 스터디

실패한 나의 코드

1
2
3
4
5
6
7
8
9
10
11
12
13

function solution1(s) {
  s = s.toLowerCase();
  const splitedCase = s.split(" ");
  const answer = splitedCase.reduce((pre, string) => {
    if (string === "") return pre + " ";

    const res = string[0].toUpperCase() + string.slice(1);

    return (pre += `${res} `);
  }, "");

  return answer;
}

고친 나의 코드

1
2
3
4
5
6
7
8
9
10

const jadenCase = (string) => {
  if (string === "") return "";

  const res = string[0].toUpperCase() + string.slice(1);
  return res;
};

function solution(s) {
  return s.toLowerCase().split(" ").map(jadenCase).join(" ");
}

팀원분의 즉각적인 피드백과 갑자기 떠오른 함수형 프로그래밍의 콜라보레이션으로 깔끔해진 나의 코드!!

🚑느낀점

구현 강의를 들을 때 강의를 모두 외우는 것 보다 어떻게 구현하는지 접근하는 법을 위주로 공부하기로 시도했다. 오늘 처음이지만 앞으로 흐름을 파악 위주로 공부해보려고 한다. 그러면 무조건 보고 따라하기 보다는 머리속에 잘 남을 것이라 생각한다.

코딩테스트 스터디를 하면서 팀원이 준 피드백을 곰곰이 생각하고 고쳤다. 고치다 보니 갑자기 2주차 함수형프로그래밍이 따악! 스쳐지나가더니 나의 solution함수가 매우 깔끔해졌다… 만족..