치춘짱베리굿나이스
[프리온보딩] 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
스크린샷이나 영상 찍어서 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
타입으로 변환하는 과정을 거쳐야 한다
- 0.3 + 0.4를 수행한다면 소수점 첫째 자리까지만 필요하므로
- 두 번째 해결책으론
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에 명시된 기대값을 토대로 예상한 대로 잘 돌아가는지 테스트를 돌려준다
'프로젝트 > 원티드 프리온보딩' 카테고리의 다른 글
[프리온보딩] 220517 강의 메모 02 (코드 예시) (0) | 2022.05.23 |
---|---|
[프리온보딩] 220521 그룹과제 #2 종료 + 그룹과제 #3 (0) | 2022.05.23 |
[프리온보딩] 220521 그룹과제 #2 (0) | 2022.05.22 |
[프리온보딩] 220520 그룹과제 #2 (0) | 2022.05.21 |
[프리온보딩] 220519 그룹과제 #2 (0) | 2022.05.20 |
Comments