데브로드 과제나 수업이 좀 밀려있는 상황이었다. 노트도 정리 못한 부분이 있어서 어제 오늘, 지난 수업까지 훑어보고 노트도 추가해보았다. 이번주 과제를 해보고 있는데, 테스트코드 연습 및 여태까지 배운 내용을 정리하기 딱 좋은 것 같다. 아주 좋아. 시간이 좀 걸리더라도, 데브로드가 끝나고 나서라도 혼자 다 해봐야겠다.

퇴근 후 공부 보다는 회사를 한두시간 일찍 출근해서 수업을 듣는 편인데, 내일은 모각코 출석을 해야할 것 같아서.. 오늘은 여기까지하구 내일부터는 더 열심히 달려야. 회사 서비스 오픈도 이제 3주차니까, 이제 숨 좀 쉴 수 있으려나?..ㅎ;

앞으로의 방향

수업이 늘 생각할 거리를 많이 만들어주어서, 회사 프로젝트에서도 적용해 보고 싶지만 사실상 도입이 어려운 부분이 있다. 해서 늘 아쉬운 마음이 크기도 하고, 끝나고 혼자 뭐라도 만들어봐야지 했는데! 마침 백엔드하는 친구가 이직을 준비한다는 얘기를 듣게 되어서 곧 친구 이직용 포폴을 도와줄 겸, 작은 프로젝트 하나를 만들 볼 예정이다. 배운 내용을 토대로 진행하면서, 리액트 쿼리를 한번 도입해보면 어떨까 싶다.

그런데 뭔가 아직 체계가 안잡혀서 너무 혼란스럽다.. 하는 일은 같은데, 값은 공유하지 않는 UI가 같은 컴포넌트를 독립적으로 만들 경우에는 그냥 useState로 관리를 하면 되는건가 ㅠㅠ 그러면 공통 컴포넌트로 만들기가 너무 힘들지 않나.. 아

좀 답답하기는 한데.. 일단은 이번주차의 키워드라도 최대한 습득 해보고 있다. 과제도 제출하기는 했는데.. 안보고 혼자 제대로 만들어 봐야겠음..

이번주 수업을 듣고 useEffect와 state에 대해 많은 생각을 했다. 아직도 와닿지 않는 것들이 많다. 리액트 외부에서의 일을 처리한다는 건 무슨 소린지는 아직 잘 모르겠다. 명시적인 함수 호출, 상태를 잘 골라내는 법, 등에 대해 많이 찾아보고 읽어봤는데 막상 노트에 정리하려면 어디서부터 어떻게 적어야 할지를 모르겠다. 이것 또한 아직 내 것이 아니어서 그렇겠지. 머릿 속에 둥둥 떠다니는 지식의 조각들을 잘 조합해보고 싶은데 쉽지 않다.

과제는 지금의 나에게는 조금 어려웠다. 장바구니에 담긴 아이템들을, 삭제할 때 id값으로 받아와서 중복인 것들 모두가 지워지는 현상과, 영수증부터 조금 해매서 풀이를 봤는데 배울 게 많았다ㅎ 일단 컴포넌트를 재사용하지 않고 있었는데 그 부분부터.. cart로직 아이템을 삭제할 때, id가 아닌 index를 사용하면 되는거구나ㅎ... 정말 갈 길이 멀다.

1. 회사에서는 계속 웹소켓을 써서, http통신을 너무 오랜만에 했더니 fetchAPI를 어떻게 썼더라? 하면서 머리가 하얘지기도 했다..

2. useLocalStorage는 지금 프로젝트에서도 적용해서 유용하게 쓸 수 있을 것 같은 생각이 든다. 아주 편하고 좋아..

3. children을 받을때, type에 추가하지 않고 기존 타입에서 확장해서 쓰면 유용하다는 것을 배웠다. 늘

   type Test = {
    test: string
    children: React.ReactNode
   }
   

이렇게만 썼는데,

```typescript 
type Test = {
  test: string
} & HTMLAttributes<Element>;

이런 방법이 있다니.

4. 카트 로직과 영수증 로직은, 올라온 과제풀이를 다시보고 내일 아침에 체크 할 생각이다. 지금 나에게 부족한 점을 매꿔줄 것 같앙. 재밌는 과제였당

일을 시작한지 오늘로 딱 5개월..! 그동안 일하면서 컴포넌트 설계에 대해 고민이 많았었는데, 이번 강의를 듣고 현재 나에게 부족한 부분이 어떤건지 조금 더 분명하게 알게 된 것 같다. 컴포넌트를 구성하고, 분리하는 작업과 상태에 대한 이해도가 부족하다고 늘 생각했는데, 그 체계가 조금 더 뚜렷하게 잡힐 수 있었다. 물론 아직 부족한 게 많지만; 와닿지 않는 것도 많고..

공부가 더 필요하다고 느낀 부분은 SSOT SRP DRY 원칙 그리고 아직 상태에 대한 이해도 ㅠㅠ

과제 진행도 재밌게 했다. 다시 보니 보완했으면 좋겠는 부분은 있지만.. 맘먹고 아주 잘게 잘게 나눠봐야지 했는데, 너무 불필요하게 많이 나눈 것 같기도하고 ㅎㅎ; 중간점을 잘 찾아봐야겠다.

다 해놓고 보니 과제풀이가 올라와있어서 비교해보며 보완할 점을 찾아야겠다 ㅎ

내일은 회사를 더 일찍가야겠당.. 출근하면서, 위에 대한 레퍼런스들 읽어보고 도착해서 노트 정리를 해야지! 오늘 과제에 대한 테스트 코드도 작성 해보고 싶은데, 이건 내일 퇴근하고 진행하구! 화요일부터 다음주 강의 올라온 걸 들어야겠다!

jsx가 리액트에서만 쓰는 문법인 줄로만 알고 있었다. 공부하면서 브라우저 랜더링에 관해서부터 한번 더 살펴보았다.

브라우저는 DOM을 통해 어플리케이션을 렌더링하고, html을 파싱해서 만든 엘리먼트를 사용한다. 엘리먼트는 문서를 구성하는 기본 요소가 되고, document.createElement()함수로 만들 수 있다.

리액트를 이루는 최소단위는 리액트 엘리먼트이고, 이것은 브라우저 DOM 엘리먼트와 달리 일반 객체이다.

React.createElement()를 써서, 리액트 엘리먼트 트리를 갱신하는데 쓸 수 있다. JSX를 사용하면 React.createElement() 호출을 반복해야 하는 불편을 해소해준다. 필수적이지는 않지만 리액트에 잘 어울린다. 즉, JSX는 createElement 함수에 대한 문법적 설탕(Syntactic sugar)일뿐이다.

이렇게 매번 작은 React Element 트리, VDOM 트리를 만든다. VDOM은 브라우저 API위에 있는 자바스크립트 라이브러리에서 구현되는 개념으로 메모리상에 있는 가상적인 DOM이다. VDOM을 쓰는 이유는, 빨라서라기 보다는 충분히 빠르기도 하지만 유지보수를 가능하게 하기 때문에 사용한다.

리액트 엘리먼트를 가상 돔으로 만들어 실제 돔에 반영해주는 역할은 React.DOM이 해주고, 이 과정은 재조정이라고 한다. 개발자는 key prop을 통해 재조정을 조절할 수 있다.

느낀점

기초가 가장 중요하다는 것을 느낀다. 머릿속에 그림이 조금 더 명확하게 그려지는 느낌이다. 이렇게 차곡차곡 쌓아서 지금보다 리액트를 더욱 리액트스럽게 다룰 수 있었으면 좋겠다.

1. 프로젝트 개발 환경 세팅 (TS + React + Jest + ESLint + Parcel)을 이렇게 처음부터 끝까지 해본 적은 처음이었다. README문서 업데이트도 틈틈히 해주어야 겠다.

2. 회사 프로젝트는 이미 lint설정도 다 되어있는 상태라, 별 생각 없이 사용했는데 스스로 설정 해보려니 헷갈리는 부분이 많았다.. 좋은 경험이 된 것 같다.

3. Jest는 처음 접해봤는데, 어렵다기 보다는 테스트를 어떻게 해야할지 감이 잘 안잡힌다고 해야하나.. 조금 더 공부가 필요할 것 같다.

느낀점

github 의 CI 기준을 통과하는데 여자저차 시행착오가 조금 있었다. markdownlint도 처음 알았다.. 오늘 다시 한번 강의를 훑고, 개념 정리 노트를 조금 더 추가 해봐야겠다.

정리

이번주는 gitbook에 시간을 너무 많이 쏟아서 정신이 없었는데.. (아직도 해결 못함.. 개념정리는 우선 사용하고 있던 노션에), 다음주부터는 회사에 조금 더 일찍가서 미리 공부해야지! 퇴근하고 공부보다 아침공부 후 저녁에 일찍 자는 게 나은 것 같다. 화이팅~!

웹 상에서 클라이언트와 서버 간에 요청/응답(request/response)으로 정보를 주고 받을 수 있는 프로토콜로, 주로 HTML문서를 주고받는 데에 쓰인다.

• 프로토콜이란 컴퓨터 내부, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계

HTTPS 프로토콜 (HyperText Transfer Protocol over Secure Socket Layer)

웹 통신 프로토콜인 HTTP의 보안이 강화된 버전의 프로토콜

HTTP vs HTTPS

• 클라이언트인 웹브라우저가 서버에 HTTP를 통해 웹 페이지나, 이미지 정보를 요청하면 서버는 이 요청에 응답하여 요구하는 정보를 제공하게 된다.
• 웹 페이지(HTML)는 텍스트이고, HTTP를 통해 이런 텍스트 정보를 교환하는 것이다.
• 이때 주고받는 텍스트 정보에 주민등록번호나 비밀번호와 같이 민감한 정보가 포함된 상태에서 네트워크 상에서 중간에 제3자가 정보를 가로챈다면 보안상 큰 문제가 발생한다.
• 즉, HTTPS를 사용하면, 서버와 클라이언트 사이의 모든 통신 내용이 암호화 된다는 것.

스타일에 객체를 넣으면 안되는 이유는 무엇일까?

예시코드

      <div style={{ marginTop: 10 }}>
        <Button type="primary" htmlType="submit" loading={false}>
          로그인
        </Button>
        <Link href="/signup">
          <a>
            <Button>회원가입</Button>
          </a>
        </Link>
      </div>

{} === {} 는 false이기 때문이다.

객체끼리 비교하면, 무조건 false가 나온다. 리액트는 vulture dom으로 검사를 하면서 어디가 달라졌는지 찾다가 이전 버전과 현재 버전을 비교해 달라진 부분을 리렌더링 한다. 즉, 변한 것이 없어도 객체끼리 비교하면 늘 false가 나오므로, 다르다고 간주하여 리액트는 리렌더링을 해버린다.

해결방법

styled-components를 쓰거나, useMemo를 쓴다.

useMemo로 해결하는 법

 const styled = useMemo(() => ({ marginTop: 10 }), [])

 return (
   <div style={styled}>
     <Button type="primary" htmlType="submit" loading={false}>
       로그인
      </Button>
      <Link href="/signup"><a><Button>회원가입</Button></a></Link>
   </div>
 )

✔ useCallback : 함수를 캐싱한다 ✔ useMemo : 값을 캐싱한다

useCallback을 쓰는 이유가, 최적화를 위해서라는데 어떨때 써야하는가?

컴포넌트에 props로 넘겨주는 함수는, useCallback을 써준다.

그래야 최적화가 되기 때문이다.

예시코드

const LoginForm = () => {
  const [id, setId] = useState("");

  const onChangeId = useCallback((e) => {
    setId(e.target.value);
  }, []);

  return (
    <Form>
      <div>
        <label htmlFor="user-id">아이디</label>
        <br />
        <Input
          name="user-id"
          type="e-mail"
          value={id}
          onChange={onChangeId}
          required
        />
      </div>
    </Form>
  );
};

오늘 공부 한 파일 중 일부인 todo.js 파일이다.

// todo.js
const Todo = ({ todo: { id, title, state }}) => {
  return (
    <div className={`list-item ${state}`}>
      <label className="checkbox">
        <input
          type="checkbox"
        />
        <span className="checkbox-custom" />
      </label>

      <div className="title">
        <input
          type="text"
          value={title}
          readOnly={true}
          placeholder="Input title"
        />
      </div>

      <div className="actions" onClick={(event) => event.stopPropagation()}>
        {state !== "TODO_CHECKED" && (
          <a>
            <span className={`icon-star`}
            />
          </a>
        )}
      </div>
    </div>
  );
};

export default Todo;

todo.stories.js를 생성한다. export default를 생성해서, 스토리북에게 우리의 컴포넌트가 무엇인지 알려주어야 한다.

// todo.stories.js
import Todo from "./Todo";

export default {
  component: Todo, // 스토리북아~! 참조해야 할 컴포넌트가 이거야
  title: "Todo", //  Storybook 앱의 사이드바에 나타날 컴포넌트 이름
};

1. 스토리는 주어진 state안에서 렌더링된 요소를 리던하는 함수다. 하나의 Template 변수를 만들어서, 확장 해 나가는 식이다.
2. 확장할때에는 bind함수를 사용한다
3. 인수(arguments) 또는 간단히 줄여서 args를 사용하여 컴포넌트를 수정한다. args의 값이 변하면 컴포넌트도 함께 변합니다.

Template 생성하기

// todo.stories.js
export default {
  component: Todo, 
  title: "Todo", 
};

const Template = (args) => <Todo {...args} />;

bind 함수를 이용해서 확장하기!

export default {
  component: Todo, 
  title: "Todo", 
};

const Template = (args) => <Todo {...args} />;

// 디폴트 먼저 생성
export const Default = Template.bind({});
Default.args = {
  todo: {
    id: "1",
    title: "Test Todo",
    state: "TODO_INBOX",
    updateAt: new Date(2022, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  todo: {
    ...Default.args.todo,
    state: "TODO_PINNED",
  },
};

export const Checked = Template.bind({});
Checked.args = {
  todo: {
    ...Default.args.todo,
    state: "TODO_CHECKED",
  },
};

1. 로그인 & 회원가입 로직 리팩토링

기존에 AuthForm이라는 컴포넌트에서 fetch API를 활용해서 초기 로직을 구현했었는데, 일단 작동만 하게 코드를 짰더니, 너무 코드가 길어져서 리팩토링을 해야겠다고 생각했습니다. store폴더에는 authStore라는 파일을 만들었고, 그 안에서 인증에 관한 상태관리를 하도록 만들었습니다. 기존 fetch로 작성된 코드는, api폴더에 auth.ts라는 파일을 생성해서, firebase 인증 API만 불러오는 파일을 만들었고, 브라우저에 내장된 fatch함수에서 HTTP 비동기 통신 라이브러리인 axios로 바꿔주었습니다.

2. 로그아웃 로직 구현

로그아웃시 바뀌어야 할 값은 하나, 우리의 상태 즉, 토근을 비우면 됩니다. 그리고 authStore에서 만들어둔 isLoggedIn이라는 boolean 타입 변수을, false로 업데이트해주면 끝!

3. 인증 상태에 따른 라우터 설정

profile 페이지는 로그인 사용자만 보여야 하는 페이지이기 때문에, 로그인하지 않은 사용자는 접근이 불가능하게 만들어야 합니다. 방법은? 라우터를 사용합니다. 1.사용자의 현재 인증 상태를 특정 라우트의 조건으로 삼고! 2.사용자 미인증 시에는 profile 라우트 설정을 아예 렌더링 하지 않게 합니다. 3.그러면 미인증 사용자는 프로필 페이지에 방문할 수 없게된다.

App 컴포넌트에서, AuthStore를 불러옵니다. AuthStore안에 있는 isLoggedIn 변수를 이용해서,

// App.tsx
const AuthStroe = useContext(AuthStore);

{!AuthStroe.isLoggedIn && (
  <Route path="/auth" element={<AuthPage />} />
)}

{AuthStroe.isLoggedIn && (
  <Route path="/profile" element={<Profile />} />
)}
  </Route>
<Route path="/*" element={<NotFound />} />

export default observer(App);

이렇게 해주면 끝! 사용자가 '접근 하지 말아야 할' 페이지에 '접근' 했다면, NotFound 페이지를 보여주게끔 추가도 해봤습니다.

느낀점

1. mobX를 아직 미숙하게 다루는 것 같아서, 한번 공식 문서를 다시 읽어봐야겠다고 생각했습니다.
2. mobX로 작성된, store를 불러올때는 해당 컴포넌트에 observer를 써주는 걸 잊지 말아야 겠다고 생각했습니다.
3. axios 사용시, body값을 넣고 싶다면 axios.post(url,{ // something }) 이렇게 써주면 됩니다.

할 일

1. localStorage를 활용해서, 사용자 인증 state 유지하기
2. 프로젝트 디자인 수정
   • font: pretendard
   • 포인트 color : #E67800 고려중..
   • 디자인 시스템 : black: #222, gray: #737373
   • 메인 페이지 디자인 수정
3. React Hook Form 추가하기
4. campDetail fawardRef를 적용해서 해결해보기
5. 로딩 스피너 구현

개체가 'null'인 것 같습니다.

문제 코드

interface IProps {
  targetCamp: ICampDetail;
}

const ContentsSection = ({ targetCamp }: IProps) => {
  const containerRef = useRef<HTMLElement>(null);
  const imgRef = useRef<HTMLElement>(null);
  const [height, setHeight] = useState<number>(0);

  const onloadImages = useCallback(() => {
    const imgs = imgRef.current.querySelectorAll('img');
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].onload = () => {
        if (i === imgs.length - 1) getHeight();
      };
    }
  }, []);

  const getHeight = () => {
    setHeight(containerRef.current.clientHeight);
  };

  useEffect(() => {
    targetCamp && onloadImages();
  }, [onloadImages, targetCamp]);

  return (
    <Container ref={containerRef}>
      {targetCamp && (
       <ImageBox ref={imgRef}>
          {targetCamp.images.map((img, index) => (
            <img key={index} src={img} art="상세페이지 이미지" />
          ))} 
       </ImageBox>
      )}
    </Container>
  );

코드 설명

ContentsSection 컴포넌트 안에서, ContentsSection의 clientHeight값과, ImageBox안의 이미지들을 구하고 싶습니다. Container와 ImageBox 컴포넌트를 useRef로 받습니다. containerRef와 imgRef 모두 DOM을 참조하기 위함입니다.

containerRef.current
imgRef.current

이 부분에서, 개체가 null인 것 같다는 오류가 뜹니다.

문제 해결 후 코드

interface IProps {
  targetCamp: ICampDetail;
}

const ContentsSection = ({ targetCamp }: IProps) => {
  const containerRef = useRef<HTMLElement>(null);
  const imgRef = useRef<HTMLElement>(null);
  const [height, setHeight] = useState<number>(0);

  const onloadImages = useCallback(() => {
    if (imgRef.current) { // if문 추가
      const imgs = imgRef.current.querySelectorAll('img');
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].onload = () => {
          if (i === imgs.length - 1) getHeight();
        };
      }
    }
  }, []);

  const getHeight = () => {
    containerRef.current && // AND연산자 추가
      setHeight(containerRef.current.clientHeight);
  };

  useEffect(() => {
    targetCamp && onloadImages();
  }, [onloadImages, targetCamp]);

  return (
    <Container ref={containerRef}>
      {targetCamp && (
       <ImageBox ref={imgRef}>
          {targetCamp.images.map((img, index) => (
            <img key={index} src={img} art="상세페이지 이미지" />
          ))} 
       </ImageBox>
      )}
    </Container>
  );

if문과 AND연산자를 이용했습니다. 초기값이 null이어서, null이 반환되면 안되니 조건을 추가해서 에러를 해결했습니다.

useRef 정의

useRef를 사용하다보면, 심심찮게 에러를 뿜어내고는 하는데 이 참에, useRef 대해 이 문서를 보고 자세히 공부를 해봐야 겠다고 생각하여, https://driip.me/7126d5d5-1937-44a8-98ed-f9065a7c35b5 이 문서를 보고 공부를 해보았습니다.

useRef의 반환타입은 2가지

interface MutableRefObject<T> {
    current: T;
}

interface RefObject<T> {
    readonly current: T | null;
}

useRef의 반환타입에는 2가지가 있고, 그저 함수 초깃값을 .current에 저장할 뿐입니다.

useRef의 정의는 3가지

useRef<T>(initialValue: T): MutableRefObject<T>; // 1
useRef<T>(initialValue: T|null): RefObject<T>; // 2
useRef<T = undefined>(): MutableRefObject<T | undefined>; // 3

1. 인자의 타입과, 제네릭 타입이 T로 일치하는 경우, MutableRefObject<T>를 반환
2. 인자의 타입이 null을 허용하는 경우, RefObject<T>를 반환
3. 제네릭의 타입이 undefined인 경우(타입을 제공하지 않은 경우), MutableRefObject<T | undefined>를 반환

상황별 useRef의 사용

1. useRef로 로컬변수 사용하기

• 타입 과 인자가 "서로 같은 타입"인 경우, MutableRefObject<T> 반환
• current 프로퍼티 그 자체를 직접 변경할 수 있습니다.

  const localValRef = useRef<number>(숫자)

  [예시코드] : 버튼을 클릭할 경우 localVarRef.current의 값이 1씩 증가하는 코드 입니다.

  import React, { useRef } from "react";
  

const App = () => { const localVarRef = useRef(0);

const handleButtonClick = () => { if (localVarRef.current) { localVarRef.current += 1; console.log(localVarRef.current); } };

return (

export default App;

2. useRef로 HTML엘리먼트 객체를 참조하기
- 인자에 null을 허용하는 타입(T|null)을 할당할 경우, `RefObject<T>` 반환
- current 프로퍼티를 직접 수정할 수 없습니다. 

```typescript
const containerRef = useRef<HTMLElement>(null)

나의 코드에서는 어떤 타입을 반환하는가?

내 코드에서는 DOM을 참조하고 싶은거니까, RefObject<T>를 반환합니다.

RefObject<T>는 값을 수정할 수 없다고 하는데, 왜 정상적으로 작동할까?

정의 상 current 프로퍼티만 읽기 전용으로, current 프로퍼티의 하위 프로퍼티는 여전히 수정 가능하다. 이는 readonly가 shallow(얕은객체복사)이기 때문입니다.

Ref 타입설정?

const containerRef = useRef() as React.MutableRefObject<HTMLElement>;
const imgRef = useRef() as React.MutableRefObject<HTMLElement>;

useRef의 타입을 이렇게 설정하면, MutableRefObject<T>를 반환하는 것을 확인하였습니다. 이 경우, onloadImages 와 getHeight에 각각 if문이나, AND연산자를 걸지 않아도 동작합니다.

  const onloadImages = useCallback(() => {
    const imgs = imgRef.current.querySelectorAll('img');
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].onload = () => {
        if (i === imgs.length - 1) getHeight();
      };
    }
  }, []);

  const getHeight = () => {
   setHeight(containerRef.current.clientHeight);
  };

정리

정리하면 다음과 같습니다.

const localVarRef = useRef<여기>(저기);

로컬 변수 용도로 useRef를 사용하는 경우, MutableRefObject<T>를 사용해야 하므로
제네릭 타입과 같은 타입의 초깃값을 넣어주자. (여기와 저기를 같게)

const inputRef = useRef<HTMLInputElement>(null);

DOM을 직접 조작하기 위해 프로퍼티로 useRef 객체를 사용할 경우,
RefObject<T>를 사용해야 하므로 초깃값으로 null을 넣어주자.

useRef() as React.MutableRefObject<T>

MutableRefObject<T>를 반환한다!

이미지가 다 로드되고 나면, 이미지를 감싸고 있는 컴포넌트의 높이를 구해야 했다.
구한 높이값은 다른 컴포넌트(Sidebar)에 props로 넘겨준다.

리팩토링 전 코드

interface IProps {
  targetCamp: ICampDetail;
}

const ContentsSection = ({ targetCamp }: IProps) => {
  const containerRef = useRef() as React.MutableRefObject<HTMLElement>;
  const imgRef = useRef() as React.MutableRefObject<HTMLElement>;
  const [height, setHeight] = useState<number>(0);

  // 문제 함수
  const onloadImages = useCallback(() => {
      const imgs = imgRef.current.querySelectorAll('img');
    const len: number = imgs.length;
    let count: number = 0;

    for(let img of imgs) {
     img.onload = () => {
       count++;
       if(count === len) getHeight();
      }
    }
  }, []);

  const getHeight = () => {
    const newHeight = containerRef.current.clientHeight;
    setHeight(newHeight);
  };

  useEffect(() => {
    targetCamp && onloadImages();
    window.addEventListener('resize', getHeight);
    return () => {
      window.removeEventListener('resize', getHeight);
    };
  }, [onloadImages, targetCamp]);

  return (
      <Container ref={containerRef}>
        {targetCamp.images.map((img, index) => (
              <img key={index} src={img} />
        ))}
        <Sidebar height={height}/>
    </Container>
  )
};
export default ContentsSection;

이 코드에서,

Function declared in a loop contains unsafe references to variable(s) 'count', 'count'.

라는 ESLint 오류가 떴는데, 루프 안에서 count 변수가 안전하지 않다는 내용이었다. ESLint 공식문서를 찾아보니, 예상대로 작동하지 않을 수 있는 코드 부분을 강조하기 위해 발생하며 언어 작동 방식에 대한 오해를 나타낼 수 있다고 한다. 즉, 루프 내에서 함수를 작성하면 코드가 문제 없이 실행될 수는 있지만 일부 상황에서는 예기치 않게 작동할 수 있으므로 주의를 준 것 같다.

리팩토링 후 코드

const ContentsSection = ({ targetCamp }: IProps) => {
  const containerRef = useRef() as React.MutableRefObject<HTMLElement>;
  const imgRef = useRef() as React.MutableRefObject<HTMLElement>;
  const [height, setHeight] = useState<number>(0);

  // 리팩토링 후
  const onloadImages = useCallback(() => {
    const imgs = imgRef.current.querySelectorAll('img');
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].onload = () => {
        if (i === imgs.length - 1) getHeight();
      };
    }
  }, []);

  const getHeight = () => {
    const newHeight = containerRef.current.clientHeight;
    setHeight(newHeight);
  };

  useEffect(() => {
    targetCamp && onloadImages();
    window.addEventListener('resize', getHeight);
    return () => {
      window.removeEventListener('resize', getHeight);
    };
  }, [onloadImages, targetCamp]);

  return (      
    <Container ref={containerRef}>
        {targetCamp.images.map((img, index) => (
              <img key={index} src={img} />
        ))}
        <Sidebar height={height}/>
    </Container>

  );
};

export default ContentsSection;

for of문을 for문으로 바꿔서, 리팩토링을 진행했다. index가 필요한 상황이어서, 굳이 for of를 써서 count변수를 만들지 않아도 되기 때문이었다. 대신 index는 0부터 시작하기 때문에, 총 길이에서 하나를 빼준 값과 index 값이 같으면, getHeight 함수를 실행하도록 했다.