[TIL] 20211208

hwiyu25·2021년 12월 8일
0

습관들이기

목록 보기
1/1

다시 시작하는 Today I Learned

매일 출근을 하게 되면서 공부를 하는 것보다 공부하는 기록을 남기는 것이 백 배는 어렵다고 느끼게 되었다.
1일 1커밋도 마찬가지.
1월부터 거의 매일 차 있던 잔디가 아주 텅 비었다.
공부를 안 한 것도 아닌데 억울해서 다시 기록을 시작하기로 했다.

Algorithm

Programmers - 로또의 최고 순위와 최저 순위

function solution(lottos, win_nums) {
    let zero = 0;
    let min = 0;
    
    lottos.forEach((lottoNum) => {
        if (lottoNum === 0) return zero++;
        if (win_nums.indexOf(lottoNum) !== -1) return min++;
    })
    
    const getRank = (num) => 7 - num >= 6 ? 6 : 7 - num;

    return [getRank(zero + min), getRank(min)];
}

얄코 라디오

DOM은 뭐고 가상 DOM은 뭔가요? (+ Svelte와 React의 차이)
https://youtu.be/1ojA5mLWts8

Svelte는 컴파일 시에 이미 DOM이 어떻게 변할지를 정해놓기 때문에 가상 DOM이 필요 없는 것이다:)

graphQL

차근차근 GraphQL 시작하기
https://youtu.be/-qtPfRSxwXA

  • 정해진 문법을 통해 엔드포인트 수정 없이 원하는 정보만 가져올 수 있다.
  • N+1 쿼리 문제 해결
  • documentation이 간편해짐
  • 커뮤니케이션 비용 감소

거창한(내 기준) 이름 대비 심플하고 알기 쉬운 개념이었다.
지난 프로젝트에 대한 피드백으로 왜 GraphQL을 쓰지 않았냐는 이야기를 많이 들어서 간단한 프로젝트로 사용해보려고 한다.
간단하게 쓰기에는 더 필요없을 수도 있지만 어떤 점에서 더 편리한지, 지난 프로젝트에 어떻게 적용할 수 있었을 지 생각해보고 싶다.

article

FE 성능

프론트엔드는 성능 개선을 위해 무엇을 해야 할까
https://velog.io/@wooogie/프론트엔드는-성능-개선을-위해-무엇을-해야-할까
CSS 애니메이션의 성능 아는 만큼 좋아져요!
https://wit.nts-corp.com/2020/06/05/6134

실제 서비스를 만지다보니 확실히 로딩 속도나 조금의 버벅임에 더 예민하게 생각하게 된다.
단순히 구현하는데에서 그치지 않도록 코드를 점검하고 성능에 대해 확인할 필요가 있어서 찾아 읽고 있다.
아주 가깝게는 CSS 성능 이슈가 있다.
얼마 전 DnD 작업을 할 때 transition을 줘야 했는데, 이게 transform: translateX(-30px) 로는 왜인지 먹히질 않아서 울며 겨자먹기로 left를 이용했다. 그걸 사용하기 전 날에 CSS 성능을 위해서는 레이아웃 요소보다는 transform을 이용하라고 봤기 때문에 어떻게든 해보려했으나.. 실패...
그래도 모르고 있었을 때는 아무거나 일단 동작해라 하고 넣었겠지만, 뭐라도 읽었다고 갖은 삽질을 다 해봤다.
이걸 시작으로 성능에 더 관심을 갖고 더 좋은 사용자 경험을 주기위해 노력하자:)


상태관리

Store에서 비동기 통신 분리하기 (feat. React Query)
https://techblog.woowahan.com/6339/

요즘 일하면서 하는 고민 중 60%는 store와 관련되어 있는 듯 하다.
정확히 말하면 data fetching과 store.
대체 언제, 어디서(어느 컴포넌트에서) 데이터를 가져오는 로직을 사용할 것이며, 그 데이터를 store에서 얼마나 가지고 있고, 어디까지 사용해줘야 하는지 고민이다.
필요할 때마다 계속 불러댄다면 불러온 데이터를 store에 보관하는 의미가 없을뿐더러 사용자 경험에도 좋지 않다.
그리고 위 글에도 나와있는 것처럼 store가 비동기 통신 범벅이 되어있어 보기도 어렵고 반복되는 코드도 많다.
이 친구들을 어떻게 해야 보기좋고 효율적이며, 데이터가 꼬이지 않은 프로젝트가 될 수 있을지 많은 고민이 필요해보인다.
다행히도 당장 급하게 해야할 일들이 몰려있진 않기 때문에 계속 고민하고 시도해 볼 시간이 있을 것 같다.
제발 개선하고 싶다. 스토어만 보면 아득해지는 내 정신.
더불어 NEXT.js도 더 잘 사용할 방법을 찾을 수 있을 것 같다.


하루 정리

작년 이맘때쯤 본격적으로 개발 공부를 하겠다며 사람도 안만나고 하루 10시간 이상 책상에 앉아있었다.
그걸 9개월을 했는데 3개월만에 그걸 어떻게 했나 싶다. 그래도 9개월을 그렇게 살고 3개월을 적당히 살았다면 꽤 괜찮은 한 해였던 것 같다.
새로운 일 년도 9개월 열심히 살고 3개월 적당히 사는 것을 목표로 한다. 일단은 열심히 :)

profile
Don't dream it, be it.

0개의 댓글