[TIL/8월 1주] 21.08.02 ~ 21.08.08

1

TIL

목록 보기
16/17
post-thumbnail
post-custom-banner

21.08.02.월

👩‍💻오늘 한 일 / 배운 일

  • 타입스크립트 공부(제네릭, 지시어, 타입 상속)
  • 알고리즘 3문제(투 포인터 알고리즘)
  • 프로젝트 회의(코드 컨벤션 추가, 타입, 상태 관리 전략 등 논의, 추가 업무 배분)
  • 리팩터링 책 아주 조금

😎 Good

  • 저번 주 보다 집중 잘 한듯 만족도 80%인 하루였다.
  • 30분 일찍 일어남..

🤢 Bad

  • 하지만 여전히 늦게 일어남
  • 알고리즘 안 풀리면 딴 생각 너무 많이함. 밀도 있게 공부하자

🏃‍♀️생각

  • 이번 주 부터 주차별 학습/활동 키워드를 간단히 정하고 데일리 플랜을 짜기 시작했다. 또 시간 대별(완전 러프하게)로 할 일을 정해봤는데 그 시간내에 끝내자는 생각으로 집중해서 할 수 있어 괜찮은 방법인 것 같다. 하지만 못 끝냈다! 해내는 횟수를 차츰 늘려가야지! 월요일 치곤 잘 했다 내일도 화이탱~

21.08.03.화

👩‍💻오늘 한 일 / 배운 일

  • 타입스크립트 스터디
  • 프로젝트 마크업, 스타일
  • Lazy Loading 공부
  • 알고리즘 2문제

😎 Good

  • 어제보다 집중 잘 함

🤢 Bad

  • 9시 45분에 일어남..ㅋ

🏃‍♀️생각

  • lazy loading을 구현하려고 공부를 했는데 리액트에 도입하려면 lazy loading이 적용된 공통 이미지 컴포넌트를 둬야하나?? 고민이다! 내일 더 해볼 예정
  • 지난 주 회고 때 오톰의 시간 관리법을 접하고 이번 주 부터는 시간 대 별로 계획을 짜기 시작 했는데 효과가 좋다! 그 시간 안에 해야 한다는 생각 때문일까 더 집중이 잘 되는 것 같다.
  • 알고리즘 3문제 풀려고 했는데 정리까지 하려면 좀 시간이 부족한 것 같기도 하다..개념을 정확히 알고 넘어가는 쪽으로 하자.

21.08.04.수

👩‍💻오늘 한 일 / 배운 일

  • 알고리즘 2문제
  • 프로젝트 미팅
  • lazy loading 학습 및 구현

😎 Good

  • lazy loading 삽질

🤢 Bad

  • lazy loading 삽질을 생각보다 너무 오래함..
  • 다음부턴 새로운 기법 도입하기 전에 code sand box에서 테스트 하고 실제 코드에 적용시켜야겠다.

🏃‍♀️생각

  • 전체 상품을 보여주는 페이지를 만들고 있는데, 상품 이미지 렌더링으로 인한 딜레이를 막기 위해 lazy loading 기법을 도입하였다.
  • 사실 이 기능은 재사용 가능하게 만들어 놓기만 하면 다른 UI에도 적용할 수 있는 터라(리뷰 이미지 등) 재사용 가능한 방법을 고민하느라 너무 힘들었다.. 처음 생각했던 건 고차 컴포넌트를 만들어서 Lazy loading 기능을 하는 컴포넌트에 이미지 컴포넌트를 주입받아 lazy loading이 가능한 컴포넌트를 리턴하면 되지 않을까? 생각했는데.. 과연 될까? 싶었고, intersection observer를 만들고 적용시키는 건 함수에서 처리하고 처리된 결과(observe 중인 요소, 로딩된 img url)만 리턴해주는 방식도 괜찮을 것 같았다.. 그래서 custom hook으로 구현해보기로 결정했는데,
    무슨 이유에서인지 이상하게 적용돼서 오랜 시간 삽질을 했다.. (정해진 비율만 큼 view point가 도달하지 않았는데 모든 이미지가 로딩됨, 스크롤을 끝까지 내려야 이미지가 로딩됨 등등..ㅠㅠ)..흑흑..그만..
  • 내일 다시 한번 살펴봐야겠다.. 근데 HOC로 하는 법은 없을까?? 생각해 보자..!
  • 어찌어찌해서 구현은 했는데, 이 기법이 과연 최적화에 진짜 도움이 될까?라는 생각이 들었다.. 무한 스크롤로 엄청나게 많은 이미지를 불러오는 것도 아니고, 한 페이지에 들어갈 상품도 생각보다 많지 않기 때문이다. 컬리나 다른 이커머스 서비스를 살펴보니 lazy loading으로 구현된 페이지가 얼마 없어 보였다. 내가 알아채지 못한 걸까 .. 흠 .. 그래서 퍼포먼스 측정을 해봤는데 적용 후가 1점 더 높았고, largest Contentful Paint 부분도 0.1s 빨라졌다.. 근데 딱히.. 모르겠다. API 붙이면 차이가 더 나려나?
  • 어쨌든 lazy load 한다는 것 자체가 유저한테 로딩 중인 상황을 노출한다는 건데 그걸 노출할 만큼 lazy load가 퍼포먼스 향상에 도움이 되는지는 지켜봐야 할 것 같다.

21.08.08.일

👩‍💻오늘 한 일 / 배운 일

  • 프로젝트 기능 구현
  • 프로젝트 미팅
  • 블로그 글쓰기

😎 Good

  • 오랜만에 블로그에 글 씀

🤢 Bad

  • 없다!! 이틀 동안 잘 놀았다!!!

🏃‍♀️생각

  • 사실 어쩌다보니 금, 토 자체 휴강을 했다!!
  • 이틀 동안 쉬니까 넘 좋았다!! 다시 달릴 수 있을 것 같다!!
  • 역시 휴식이 중요하다.
post-custom-banner

2개의 댓글

comment-user-thumbnail
2021년 8월 3일

데이지 진짜 꾸준하네요. 대단합니다! 파이팅!!

1개의 답글