[프리온보딩] 220522 강의 메모 (코드리뷰 및 코드 예시)

코드리뷰 + 코드예시

react-query

• useInfiniteQuery: 무한스크롤 구현할 때 좋음

useQuery 등의 식별자에 함수 넣지 않기

useQuery([foo, bar], ...);

• 웹팩으로 빌드되는 과정에서 함수명이 그대로 남아있는 게 아니라 a, b 등의 간결하고 짧은 함수명으로 바뀌어버린다
• 예상치도 못한 이상한 함수가 저 자리에 들어가버릴 지도 모른다…
• useQuery에서는 [’식별자', 변수1, 변수2…] 가 가장 정석적인 사용법이다

redux

useAppSelector 주의사항

export const getTheme = (state: RootState) => state.theme;
...
const theme = useAppSelector(state => state.theme); // X
const theme = useAppSelector(getTheme); // O

• useAppSelector 사용할 때 안에 (state ⇒ state.testState) 이런식으로 바로 불러오지 않기
  • state 정의 시 getState 같은 이름으로 함수를 정의해놓고 가져다가 쓰자
• 아래처럼 불러와야 캐싱이 잘 된다

redux reset state 구현하기

const INITIAL_STATE: ITodoState = {
    todoList: INIT_TODO,
};

const systemSlice = createSlice({
    ...
    reducers: {
        setTodoList: ...
        resetTodoList: () => INITIAL_STATE,
    },
});

• 상태값의 reset을 수행하는 dispatch를 만들면 이 함수를 호출하는 것으로 상태값 리셋을 할 수 있다
• (recoil의 useResetRecoilState와 비슷)
• 복잡하고 귀찮은 연산을 수행해서 상태값을 정의해줘야 한다면 미리 dispatch로 만들어두는게 편하다

CSS 팁

• css 스타일링이 적용이 안 된다면 우선순위 고려 및 important를 이용하기
• css에서의 all 속성: 요소의 모든 속성을 초기화하거나 부모 태그로부터 상속받을 수 있다
• 검색어 하이라이트 등에는 mark 태그 사용하기
• 강조하고 싶은 부분에는 strong 태그 사용하기

inline 속성, block 속성 주의사항

<a href="/">
    <div>아아</div>
</a>

• span 태그로 mark 태그 감싸지 말자
• 인라인 속성 (a, span) 안에 블록 속성 (p, div) 을 넣지 말자
• a 태그로 li 감싸는 등의 행위도 지양 (li 태그는 무조건 ul 바로 아래에)
• 그냥 왠만하면 span 같은 inline 태그로 다른 태그를 감싸지 말자
• 기능이 동작하더라도 HTML 태그를 엉망으로 적었는지 여부도 중요하다

기타 팁

• scss 파일은 꼭 소문자로 시작하기 (개발자도구에서 열었을 때 이뻐보인다)
• 함수명이나 변수명 별다줄 금지
• 반응형 브라우저 ⇒ 반응형 웹이 맞는 용어
• 스타일 작업은 작은 것 (모바일, 탭) 부터 작업하고 큰 사이즈 (모니터 등) 로 포팅하기
• react-router-dom 사용중이라면 windows.location.href 대신 useNavigate() 사용

isComposing

const handleInputChange = (e = KeyboardEvent) => {
    if (e.nativeEvent.isComposing) return;
    setState(prevState => !prevState);
}

• composition은 한국어 등 여러 글자를 조합해서 새 글자를 만드는 형식의 문자의 경우 문자가 조합되고 있는 중임을 나타낸다
• compositionstart 와 compositionend 사이에 이벤트가 발생할 경우 isComposing이 true가 된다
• 위처럼 isComposing을 사용하면 한국어 등 입력 시 키 입력 이벤트가 연속으로 두번 일어나는 현상을 방지할 수 있다

Kap

https://getkap.co/

스크린샷이나 영상 찍어서 gif로 만들기 쉬운 툴

Victory.js

• 차트 라이브러리들은 보통 D3.js를 코어로 사용하고 래핑해서 사용한다 (리덕스 + 리덕스 툴킷처럼)
• 빅토리 JS도 그중 하나이며, 완성도가 상당히 높고 공식 문서가 상세하게 잘 되어 있어 사용하기 편리하다

Swagger

• 백엔드 개발자들이 보통 프론트엔드 개발자들에게 API 명세를 넘겨줄 때 주로 Swagger로 넘겨준다
• Swagger에 API를 어떤 방식으로 사용해야 하는지 명시되어 있다
  • 요청에 어떤 인자를 넣어 보내야 하는지 등을 Swagger 문서를 보고 알 수 있다
  • GET, PUT, POST, DELETE 및 API 종류별로 잘 나눠져 있기 때문에 비교적 보기 편하다
• 실제 코드와 명세가 다른 경우도 가끔 있어서 이건 백엔드 개발자를 괴롭혀서 제대로 된 명세 또는 코드를 뱉어내게끔 해야 한다

Postman

• API 요청 및 응답 테스트를 할 수 있는 앱
• Params에 Key와 Value를 넣고, HTTP Method를 정의하고, 엔드포인트를 입력하면 응답의 body, header, 쿠키 등을 볼 수 있다
  • body는 코드에 색을 입혀 예쁘게 보거나, Raw한 상태 그대로 보거나, Preview를 통해 예쁘게 보거나 비주얼라이즈까지 가능하다
• CORS 이슈가 발생하지 않기 때문에 프론트엔드에서 CORS 이슈로 API 요청 동작이 잘 되지 않더라도 미리 테스트해볼 수 있어서 매우 편리하고 자주 사용하는 툴이다

thank you for inventing javascript

• 미친언어가 아닐 수 없다

부동소수점 문제

• 부동소수 등은 컴퓨터가 숫자를 이진법으로 변환하여 읽어들이는데, 이 과정에서 특정 소수들은 무한소수가 되어버리는 불상사가 발생한다
• 진짜 무한소수가 되면 메모리가 터져버릴 것이므로 컴퓨터는 적당히 잘라서 유한소수로 만드는데, 컴퓨터가 데이터를 임의로 자르는 과정에서 미세한 오차가 발생할 수 있다
  • 0.1이 0.000110011001… 로 변환되고, 데이터를 자르는 과정에서 0.0001100110 만 남아 결국 0.10000038이라는 뜬금없는 수가 되어버리는 것이다
• 첫 번째 해결책으론 toFixed() 메서드를 사용하여 고정소수로 반올림하는 방법이 있다
  • 0.3 + 0.4를 수행한다면 소수점 첫째 자리까지만 필요하므로 (0.3 + 0.4).toFixed(1) 이렇게 메서드를 사용하면 0.7만 남는다
  • 다만 불필요하게 String으로 변환되므로, 다시 number 타입으로 변환하는 과정을 거쳐야 한다
• 두 번째 해결책으론 Math.round() 메서드를 사용하여 반올림하는 방법이 있다
  • toFixed()와 다르게 숫자를 반환해주긴 하지만, 소수점 이하를 전부 반올림하여 가장 가까운 정수값을 반환하므로 10을 자리수만큼 곱하고 나누는 과정이 필요하다
  • Math.round((0.3 + 0.4) * 10) / 10 이런 방식으로 사용하면 된다
• 마지막으로 이런 문제점을 다 해결해주는 만능 맥가이버칼 라이브러리를 쓰면 된다
  • Big.js, BigNumber.js (유명함), Decimal.js, mathjs 등이 있다
  • 수를 정확히 다뤄야 하는 회사에 들어가면 이런 문제에 반드시 대비해야 할 것
  • 코인이나 주식 거래소 같은 곳..
• 출처: https://joooing.tistory.com/entry/Javascript-소수점floating-point-계산-오류

테스트코드 작성하기

"test": "react-scripts test",

• 렌더링 말고 로직 부분의 함수가 정상적인 반환값을 뱉는지 시험해보자
• package.json 내의 scripts에 정의된 test 커맨드를 이용해서 유닛테스트를 진행할 수 있다

it('getPlus', () => {
    expect(getPlus(2, 3)).toBe(5);
    expect(getPlus(5, 6)).toBe(11);
});

• num.spec.ts 파일
• 테스트하고자 하는 함수를 expect 메서드의 인자로 함수 인자와 함께 넣고, 예상되는 모범답안을 toBe 메서드에 인자로 넣는다
• npm test 를 실행하면 num.spec.ts에 명시된 기대값을 토대로 예상한 대로 잘 돌아가는지 테스트를 돌려준다