[TIL] 2022-05-08

이말감·2022년 5월 8일
0

TIL

목록 보기
6/21

프리온보딩 6일차


팀, 개인 과제

netlify

  • 사전 과제를 리팩토링하면서 배포를 진행해보았다.
  • 배포를 진행하면서 빌드가 Failed 한 문제가 있었다.
    • 로그를 읽어보니 코드 내에 세미콜론이 없다고 한다.
    • 예시 프로젝트는 세미콜론을 사용하지 않는 설정이었고, 내 설정은 세미콜론을 사용하는 설정이라 그 부분을 바꿔주지 않아 발생했다.
  • 로그의 문제대로 해결하니 빌드가 완료되었고, 배포를 할 수 있었다.

참고


이메일 유효성

  • 기존의 이메일 유효성 정규식은 맨 뒤 도메인이 1~3 자리만 된다는 문제가 있었다.
  • 새로 찾고, 수정하여 정규식
    /^\w+([\\.-]?\w+)*@\w+([\\.-]?\w+)*(?:\.[a-zA-Z0-9-]+)+$/ 을 만들 수 있었다.
    • 다행히 잘 작동했다!

참고


TodoList 팀 과제 피드백

reduce()

  • 배열의 각 요소에 대한 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

예시

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

localStorage

  • store.js 라는 라이브러리를 이용하면 편하게 쓸 수 있다.

입력/검색 기능 + enter

  • form 태그와 onSubmit을 하거나 type='submit'을 한다.
  • 반드시 이렇게 해야함 !!!!!

drag to scroll

참고


click outside



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 () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

참고


setTimeout 걸고 clearTimeout도 해주기!


화요일 수업

검색, 질문 잘 하기

  • 검색 잘 하는 방법

    • 검색은 꼭 구글에
    • 영어로 검색해야 검색 결과가 더 많이 나온다.
    • 에러로그 잘 살펴보기
      • 에러로그가 안나오는 것보단 나오는 게 해결하기 쉽다.
    • 오픈소스의 경우, 깃허브의 이슈 부분에서 해결방법을 찾을 수 있다.
  • 질문 잘 하는 방법

    • 커뮤니케이션은 최대한 줄일 수록 좋다.
    • 최대한 한 번에 자기가 원하는 내용으로, 부연 설명 없이, 단답으로 끝낼 수 있도록
      • ~~ 빌드는 하는데, ~~~ 에러가 나서 안된다.
      • 내가 원하는 상황은 ~ 인데 ~~ 되었다.
      • (+화면 캡쳐, 콘솔 정보 캡쳐)

이미지 최적화 기법

  • 디자이너들은 이미지 최적화까지 신경써주지 않는다.
  • Squoosh 를 통해 최적화하기.
  • WebP는 사파리의 모든 버전에서 지원되지 않는다.(최신 버전만 가능)
  • 그냥 JPEG로 하기
    • JPEG : 색상 수가 많을 때
    • PNG : 색상 수가 적을 때
    • gif가 png보다 용량이 크므로 사용하지 말기.
  • svg 파일 내부에 png가 있으면 잘못되었음. 다시 해달라하기

하루 후기

지금하루후기쓸때가아님과제해

!!!!!!!!!!!!!!

profile
전 척척학사지만 말하는 감자에요

0개의 댓글