기술 공유

• 이미지 최적화
  • 같은 이미지파일을 한 html 안에서 여러 개의 img태그로 불러오더라도 모던 브라우저에서는 한 번만 로드되는 최적화처리가 되어있다.
    • 심지어 html 파일에서 link된 css 파일 속 background-image 속성에서 url 함수로 이미지를 가져오는 경우에도 이미 html의 img 태그에서 가져온 경우 새로 로드되지 않고 한 번만 로드한다.
    • 아마도 캐시에 저장된 이미지가 사용되는 것 같다
  • spoonacular API 자체에서 이미지의 크기를 지정해서 받아오게 하는 옵션이 있을 수 있으니 체크해 볼 것 → 이미지 static server에서 사이즈와 타입을 지정할 수 있다는 점을 발견하여 설정했다!
  • react image resize를 통해서 클라이언트 단에서 resize 후 렌더링하는 방법도 있는데, 그런 경우 로딩 속도가 길어질 수 있어서 추천하는 방법은 아님.
  • 이미지가 늦게 뜨는 이유: on-premise 서버인 경우 해외이기 때문에 물리적 거리가 있을 수 있따. 또한 클라우드를 쓴다 해도 region을 Asia 쪽으로 설정해두지 않았으면 멀어서 오래걸릴것이다.
• 모달(다이얼로그) 창과 스크롤 컨트롤
  • 모달창이 열렸을 때 키보드 트래핑 하듯 뒷배경의 스크롤도 막아줘야 한다. 그러지 않으면 스크롤할 때 모달창 뒤가 씽씽 돌아간다.
  • 모달창은 보통 absolute나 fixed이기 때문에 top값을 줘서 위치를 설정하는데, 이 때문에 viewport의 최상단으로 돌아가게 된다. 그러면 모달창을 닫았을 때 맨 위로 스크롤이 올라가있기 때문에 모달창 여는 순간의 스크롤 위치를 기억해주었다가 모달창 닫을 때 scrollTo로 제자리로 돌려주어야만 한다.
  • 그러나 이렇게 하는 경우 제자리로 돌아가면서 스크롤이 잠깐 생겼다가 사라지는데, 야무님이 알려주신대로 overflow-y를 통해 현재 위치에서 넘치는 부분을 아예 보여주지 않도록 스크롤을 막는 방법이 더 좋다.
• dangerouslySetInnerHTML={{ *__html:* summaryText }} summaryText속에 태그들이 속해있다면 해당 태그들이 그대로 나오지 않고 적용한 상태로 나온다.
• module scss 적용하는 법
  • import styles from './Header.module.scss';
  • className={styles.header}
• htmlFor 리액트에서 label과 input을 연결할 때 for대신 htmlFor를 사용해야한다
  • 왜 그런지는 찾아보기
• 리액트 라우터돔의 useNavigate 훅을 호출해서 반환받은 함수(Navigate) 해당 함수에 경로를 넣어서 호출하면 리다이렉션 해준다.
• 리액트 라우터돔의 NavLink 는 현재 내가 머물고있는 링크를 활성클래스를 줄 수 있게 도와준다.
• useLocation으로 현재 페이지 URI를 확인하게 해서 input에서 작성하고 다른 페이지로 이동했을 때 없어지게 한다.
• object-fit
• 리액트 프래그먼트에는 클래스네임 사용할 수 없다.
  • Warning: Invalid prop className supplied to React.Fragment. React.Fragment can only have key and children props
• *import* { ReactComponent *as* DairyFree } *from* './../../assets/icons/dairyFree.svg';
  • cra 를 사용하면 svg를 간단하게 컴포넌트로 만들 수 있다
  • 이때 컴포넌트 이름은 대문자로 시작해야한다
• 에러바운더리는 클래스 컴포넌트로만 만들 수 있다보니 react-router-dom에서 제공하는 useLocation 등의 훅을 쓸 수 없다.
  • 에러바운더리에서 fallback으로 렌더링한 에러페이지에서 홈으로 넘어가는 링크를 제공하는데, state.error가 true이기 때문에 에러페이지를 벗어나지 못한다.
  • Link를 클릭하면 location(url)이 바뀌니까 이게 바뀔 때 setState로 error를 false를 주면 되는데... useLocation을 쓸 수 없다.
  • 이 때 react-router-dom에서 withRouter라는 HOC를 만들어서 감싸서 사용하면 HOC에서 prop으로 location을 제공해줄 수 있으며 이 location값이 바뀔 때 componentDidUpdate에서 setState해주면 된다.

---

1/19

• 파이베이스 하위컬렉션 저장하는법

Cloud Firestore Data model | Firebase Documentation

// Create an initial document to update.
const myRecipesRef = doc(db, 'users', '5TZfszqpkyecYkZfzSwKXb3diuM2', 'my-recipes', '66031');
  await setDoc(myRecipesRef, {
    id: '66031',
    img: 'https://spoonacular.com/recipeImages/660382-556x370.jpg',
    title: 'Smoked Salmon Pasta',
  });

• 파이어베이스 문서 가져오기
  • docSnap.exists() 로 문서가 있는지 없는지 알 수 있다.

https://firebase.google.com/docs/firestore/query-data/get-data#get_a_document

import { doc, getDoc } from "firebase/firestore";

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // doc.data() will be undefined in this case
  console.log("No such document!");
}

• useEffect대신 useAsync 찾아보기

1/20

• useHistory 를 사용해서 모달창을 끌때 주소창을 원래대로 돌려놓으려고했는데 react router 버전6에는 다른것으로 바뀐것같다.

  • useNavigate 로 바꼈다고합니다.

  리액트 라우터 v6 튜토리얼

1/23

• onBlur currentTarget과 relatedTarget

합성 이벤트(SyntheticEvent) - React

1/24

• 파이어베이스에 문서 id가 문자열이라서 오류가 났었다

1/25

• 파이어베이스 호스팅

  1. Firebase CLI 설치 Firebase CLI reference | Firebase Documentation
  2. firebase init hosting
  3. npm run build
  4. firebase deploy --only hosting

• <ol> 태그에 list-style 적용 시 padding-left: 0이면 스타일이 적용되지 않은 것처럼 보임.(<ul>도 마찬가지)