[원티드 프리온보딩] TIL - (6)
5월 8일
Todolist 팀 과제 리뷰
코드는 되도록이면 150줄이 넘지 않도록 한다.
코드가 너무 길어지면 가독성이 떨어지게 된다. 코드가 너무 길어지는 것 같으면 컴포넌트화 할 수 있는 부분은 컴포넌트화 하고, 반복 되는 부분은 변수나 함수로 처리하도록 한다.
프로젝트 예상 진행 기간
프로젝트 진행 중에 어떠한 불가피한 일이 일어날 지 모르므로 어느 정도 여유를 잡고 진행을 해야 한다. 또한 완성 후 테스트 과정에서 버그가 발견되는 경우도 많기 때문에 마감 전전날 ~ 전날은 테스트 기간으로 잡도록 한다.
린터 오류는 되도록이면 주석처리 하지 말고 직접 해결하도록 한다.
린터는 커뮤니티에서 자주 사용되는 컨벤션을 지키게 해주는 것은 물론 코드 작동 과정에서 발생할 수 있는 오류들을 미연에 방지해주는 역할을 한다. 그렇기 때문에 만약 린터 오류가 발생한다면 주석처리를 하는 한이 있더라도 원인은 확실하게 파악하는 것이 좋다.
store.js
localStorage에 쓰기 좋은 라이브러리이다. 원래라면 로컬스토리지 저장하고 불러올 때 JSON.stringify()나 JSON.parse() 등을 사용해야 하는 등 복잡한 과정을 거쳐야 하지만 store.js를 사용하면 이러한 수고를 덜어준다.
input이 enter로 submit되게 하려면?
버튼에 type=’submit’을 주거나 form을 활용한다.
html에서 제공하는 alert는 되도록이면 사용하지 않는다.
브라우저마다 나타나는 모양이나 기능도 조금씩 다르다.
Slick
Carousel을 구현할 때 유용한 라이브러리이다.
if문 내부를 길게 채우기 보단 밖으로 뺄 수 있다면 뺀다.
const itemElement = () => {
if (array) {
array.map((item) => {
const key = `array-item-${key}`;
return (
<div key={key}>
<span>{item.name}</span>
<span>{item.category}</span>
</div>
);
});
}
return null;
};
이렇게 if문 내부를 길게 작성하기 보단
const itemElement = () => {
if (!array) return null;
array.map((item) => {
const key = `array-item-${key}`;
return (
<div key={key}>
<span>{item.name}</span>
<span>{item.category}</span>
</div>
);
});
};
이런 식으로 작성하는 것이 더 직관적이고 좋다.
setTimeout은 항상 clearTimeout과 묶어써야 한다.
clearTimeout을 묶어서 사용하지 않으면 setTimeout이 진행 중일 때 페이지가 넘어가거나 다른 상호 작용이 발생하면 오류가 발생할 수 있다.
localStorage에는 initialState를 넣어줌으로써 시작시 오류를 방지할수있다.
localStorage에 있는 데이터를 가져올 때 만약 스토리지가 비어있다면 오류가 발생하기 떄문에 조건문으로 처리해줘야 하는 경우가 있다.
이럴 때 조건문으로 처리하기 보단 initialState를 활용하여 기본 정보를 넣어주면 더 깔끔하게 처리할 수 있다.
?? 연산자
const value = e.target.value ? e.target.value : 0;
와 같은 코드를
const value = e.target.value ?? 0;
로 작성할 수 있다.
Can I Use
Can I Use는 브라우저에 따른 호환성을 확인할 수 있는 사이트이다.
이미지 크기 최적화는 로딩 속도 향상에 필수
사이트에 렌더되는 이미지가 불필요하게 크면 로딩 속도 저하를 피할 수 없다. 그렇기 때문에 이미지를 삽입 하기 전에 여러 가지 조정을 해줘야 한다.
색이 많다면 jpeg로, 적으면 png로 해주는 것이 좋으며 svg의 경우 벡터로 처리가 제대로 되어 있어야 한다.
이를 쉽게 할 수 있도록 도와주는 사이트로는 Squoosh가 있다.
Date Picker
달력을 활용할 때 도움이 되는 라이브러리는 다양하게 존재한다.
예시로 React Date Picker가 있다.
JSON to TS
JSON 형식을 간단하게 TypeScript 타입 형식으로 변환해주는 extension이다.