프리온보딩 6일차
팀, 개인 과제
netlify
- 사전 과제를 리팩토링하면서 배포를 진행해보았다.
- 배포를 진행하면서 빌드가 Failed 한 문제가 있었다.
- 로그를 읽어보니 코드 내에 세미콜론이 없다고 한다.
- 예시 프로젝트는 세미콜론을 사용하지 않는 설정이었고, 내 설정은 세미콜론을 사용하는 설정이라 그 부분을 바꿔주지 않아 발생했다.
- 로그의 문제대로 해결하니 빌드가 완료되었고, 배포를 할 수 있었다.
참고
이메일 유효성
- 기존의 이메일 유효성 정규식은 맨 뒤 도메인이 1~3 자리만 된다는 문제가 있었다.
- 새로 찾고, 수정하여 정규식
/^\w+([\\.-]?\w+)*@\w+([\\.-]?\w+)*(?:\.[a-zA-Z0-9-]+)+$/
을 만들 수 있었다.
참고
TodoList 팀 과제 피드백
reduce()
- 배열의 각 요소에 대한 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
예시
const array1 = [1, 2, 3, 4];
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
localStorage
- store.js 라는 라이브러리를 이용하면 편하게 쓸 수 있다.
입력/검색 기능 + enter
form
태그와 onSubmit
을 하거나 type='submit'
을 한다.
- 반드시 이렇게 해야함 !!!!!
참고
click outside
carousel
useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
참고
useCallback
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
참고
useEffect
- 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
});
참고
setTimeout 걸고 clearTimeout도 해주기!
화요일 수업
검색, 질문 잘 하기
-
검색 잘 하는 방법
- 검색은 꼭 구글에
- 영어로 검색해야 검색 결과가 더 많이 나온다.
- 에러로그 잘 살펴보기
- 에러로그가 안나오는 것보단 나오는 게 해결하기 쉽다.
- 오픈소스의 경우, 깃허브의 이슈 부분에서 해결방법을 찾을 수 있다.
-
질문 잘 하는 방법
- 커뮤니케이션은 최대한 줄일 수록 좋다.
- 최대한 한 번에 자기가 원하는 내용으로, 부연 설명 없이, 단답으로 끝낼 수 있도록
- ~~ 빌드는 하는데, ~~~ 에러가 나서 안된다.
- 내가 원하는 상황은
~ 인데 ~~ 되었다.
- (+화면 캡쳐, 콘솔 정보 캡쳐)
이미지 최적화 기법
- 디자이너들은 이미지 최적화까지 신경써주지 않는다.
- Squoosh 를 통해 최적화하기.
- WebP는 사파리의 모든 버전에서 지원되지 않는다.(최신 버전만 가능)
- 그냥 JPEG로 하기
- JPEG : 색상 수가 많을 때
- PNG : 색상 수가 적을 때
- gif가 png보다 용량이 크므로 사용하지 말기.
- svg 파일 내부에 png가 있으면 잘못되었음. 다시 해달라하기
하루 후기
지금하루후기쓸때가아님과제해
화
이
팅
!!!!!!!!!!!!!!