TIL 2021-12-28 SSR 구현,RTK-Query, 프그머 추석 트래픽

SSR 구현

Styled component 적용

import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(sheet.collectStyles(<YourApp />))
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}

Styled-component의 공식 문서에 작성되어있는 코드다.

 

loadable-component의 ChunkExtractor로 얻은 getStyledTags()가 제대로 html에 적용되지 않는 문제가 발생했다.

 

이를 Styled-Component의 ServerStyleSheet()를 통해 얻은 StyleTag를 적용하였더니 html에 스타일이 제대로 적용되었다.

https://styled-components.com/docs/advanced

styled-components: Advanced Usage

 

RTK-Query

 

provideTags는 React-query의 query key와 동일하게 invalidate할때 사용된다.

 

Mutation의 invalidatesTags를 통해 Tag를 invalidate해줄수 있다.

 

재밌는건 id의 'LIST'타입인데,

 

id:'LIST 타입은 id:라는 값이 할당된 어떠한 tag가 invalidate할떄 같이 invalidate한다.

 

*와 비슷한 느낌인데, 조금 다른 것은

 

[{id:'LIST'}]를 invalidate할떄 [id:1]은 invalidate하지 않고

반대로 [id:1]을 invalidate하면 [id:'LIST']는 invalidate한다.

 

https://redux-toolkit.js.org/rtk-query/usage/automated-refetching#tag-invalidation-behavior

Automated Re-fetching | Redux Toolkit

 

 

프로그래머스 추석 트래픽

function solution(lines) {
    var answer = 0;
    
    let temp = lines[0].split(' ');
    let start  = [];
    let end = [];
    for(let i =0 ;  i< lines.length ; i++){
        let [a0,a1,a2] = lines[i].split(' ');
        let [b,a] = getTimes(a1, a2);
        start.push(a);
        end.push(b);
    }
    let arr = [...end, ...start];
    let time = [...arr].filter((item,index)=>[...arr].indexOf(item)===index).sort();
    let max = 0;
    for(let i =0 ; i < time.length ; i++){
        let cnt = 0;
        let cur = time[i];
        let na = cur+1;
        for(let j = 0; j<start.length; j++){
            if((start[j]>=cur&& start[j]<na) || (end[j]>=cur&& end[j]<na) || (start[j]<=cur&&end[j]>=na)){
                cnt++;
            }
        }
        max  = max>cnt ? max : cnt;
    }
    return max;
}

function timeConverter(a){
    let [h,m,s] = a.split(':');
    return Number(h) * 60*60 + Number(m * 60) + Number(s);
}
function getTimes(a,sec){
    let s = Number(sec.replace('s',''));
    return [timeConverter(a), Number(timeConverter(a))-s+0.001];
}

 

 

깨달은 것

1. 시간을 계산할떄는 초로 변환하여 계산하는 것이 편하다. 60이 넘어가면 위의 자리를 올려주는 식으로 구현하였더니 너무 불필요하게 복잡하고 생각해야되는 부분이 많았다.
2. 문제를 제대로 읽자. 그냥 임의로 1초의 구간을 잡았을때 가장 처리량이 많은 부분을 구하는 문제였는데 1초의 간격이란게 57~58, 58~59초 같은 규격화된 구간인줄 알고 문제를 풀어서 많은 시간을 쓸데없이 소요하였다.
3. sort함수를 위한 compare함수는 return이 양수면 두 개를 바꾼다. 음수인 경우에는 위치를 유지한다. 두 값을 빼는 경우는 그래서 오름차순(1-2=-1)
4. 중복된 값을 빼고 싶으면 filter와 indexOf를 사용하자
5. 동일 값을 가진 새로운 배열을 만들고 싶으면 비구조화 할당을 사용하자
6. 이렇게 처리시간을 다루는 문제는 시작시간과 끝시간을 잘 사용하자
7. 뒷 문자열을 자르고 싶으면 slice(0,-n)을 사용하자(뒤 n개의 문자 제거)
8. shift는 왼쪽으로 배열 미루기, unshift는 오른쪽으로 배열 미루기

 

PS 재활을 시작하자