[TIL] 20210629 - 항해 23일차

infinite scroll 구현에 하루를 보냈다😣

오늘 공부한 것

React 기본 과제

1. styled-components를 이용한 반응형 적용

SCSS를 사용할 때는 반응형 mixin을 만들어서 손쉽게 사용했다.

근데 styled-component로는 어떻게 하지...🤔

Styled Component로 반응형 구축하기

위 글을 참고해서 theme으로 반응형 문구를 작성해주었다.

const device = {
  tablet: `@media screen and (min-width: 768px)`,
  desktop: `@media screen and (min-width: 1024px)`,
};

......

const theme = {
  device,
  colors,
  fontSizes,
};

아래처럼 사용할 수 있다.

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  margin: 50px auto;

  ${({ theme }) => theme.device.tablet} {
    margin: 80px auto;
  }
`;

2. IntersectionObserver를 이용한 무한 스크롤 구현

리액트를 공부하면서 항상 무한 스크롤은 마음의 짐이었다.

반드시 해야하는데 막상 하자니 어렵고 공부에 시간도 많이 걸릴 것 같으니 미루게 되는 그런 존재였다.

이번 리액트 과제에 무한 스크롤이 필수는 아니지만 선택 사항 + 내 의지로 꼭 구현하고 싶었다.

그렇게 시작된 같은 마음의 크루 분과의 야밤까지의 스터디... 😂

무한 스크롤 커밋 링크

어찌어찌 구현하긴 했다.

그런데 구현하고 나니 문제점이 몇 가지 보였다.

1. 중간에 추가되는 단어들은 어떻게 또 DB에서 가져오지 않을 수 있을까?
2. 지금은 임시로 num이라는 값을 주었는데, 시간 순으로 정렬하기 위해서 어떤 방법을 쓰면 좋을까?

아마 더 많은 문제가 있을 것 같다🙄
오늘은 구현에 온 힘을 쏟았다면 내일은 온갖 버그를 고치는데 시간을 다 쓸 것 같다.

3. 배포
AWS S3에 빌드한 파일들을 업로드 하고 Route 53에서 도메인을 연결했다.

연결한 시간이 2시 반인데 지금까지도 해당 도메인이 내 단어장을 보여주지 않는다면 분명 문제가 있는거겠지....

파이어베이스로도 배포가 가능하다던데, 내일은 그 방법으로 시도해야 할 것 같다.

오늘 아쉬운 점

무한 스크롤에 집중한다고 계획했던 아티클, 알고리즘을 수행하지 못했다.
내일은 어제의 계획을 수행할 예정이다.

계획을 항상 100%로 지키긴 어렵지만 최대한 실현 가능한 계획을 세우고, 지키기 위해 스케줄을 조정하는 노력이 필요해 보인다🙂