Dony :)

FE로 성장 중 🌱

TIL 🧐

삽질기

이번 주도 역시 삽질과 고뇌의 시간을 가졌다.

JSX

import해온 함수 컴포넌트를 변수에 저장하여 return문 안에서 태그로 만들어 사용하려고 했으나 에러가 떴다 ^_ㅠ

// .tsx
import PeriodModal from '@components/Modal/PeriodModal';
import PriceModal from '@components/Modal/PriceModal';

function SearchBar() {
  const getSelectedModal = () => {
    switch (selectedModalName) {
      case 'checkin':
        setSelectedModal(PeriodModal);
        break;
      case 'checkout':
        setSelectedModal(PeriodModal);
        break;
      ...
    }
  };

  ...

  return (
    ...
      {<selectedModal />} // Error!
    ...
  );
}

switch 문에서 태그로 바꾸어 저장하여 return 문 안에서 변수를 호출하니 사용이 되었다.

import PeriodModal from '@components/Modal/PeriodModal';
import PriceModal from '@components/Modal/PriceModal';

function SearchBar() {
  const getSelectedModal = () => {
    switch (selectedModalName) {
      case 'checkin':
        setSelectedModal(<PeriodModal />);
        break;
      case 'checkout':
        setSelectedModal(<PeriodModal />);
        break;
      ...
    }
  };

  ...

  return (
    ...
      {selectedModal}
    ...
  );
}

아직 JSX의 동작 방식을 제대로 이해못한거 같다 ㅠ_ㅠ
기록해놓고 주말에 공부 리스트 추가..

옵셔널 체이닝

처음에 canvas.getContext 속성을 사용했는데 타입스크립트 오류가 떴다.
context가 null 일수도 있다고 경고하고 있었다.

const drawStickChartAboutPrice = () => {
  const context = canvas.getContext("2d");
  context.strokeStyle = COLOR.BLACK; // Object is possibly 'null'.
  ...
  heightOfSticks.reduce(({ x, width }, height) => {
    context.fillRect(x, 100 - height, width, height); // Object is possibly 'null'.
    return { x: x + width + 1, width };
  }, initialValue);
};

그래서 구글링을 하니 옵셔널 체이닝, 타입 단언 사용, if문으로 null 처리 등 여러가지 방법이 있었다.
그 중 옵셔널 체이닝이 가장 코드상 깔끔해보여서 옵셔널 체이닝으로 수정했다.

const drawStickChartAboutPrice = () => {
  const context = canvas.getContext("2d");
  context?.strokeStyle = COLOR.BLACK; // The left-hand side of an assignment expression may not be an optional property access.
  ...
  heightOfSticks.reduce(({ x, width }, height) => {
    context?.fillRect(x, 100 - height, width, height); // 에러 해결
    return { x: x + width + 1, width };
  }, initialValue);
};

그랬더니 또 다른 에러가 나왔다.
저 에러가 무슨 말인지 이해가 잘 안가서 (한글로 알려줄 순 없겠니? 😬) 스택오버 플로우에 찾아보니 옵셔널 체이닝은 왼쪽에 값을 할당하는 식에서는 사용할 수 없다고 한다 ^_ㅠ
결국 늘 하던대로 if문으로 처리 끗..

const drawStickChartAboutPrice = () => {
  const context = canvas.getContext("2d");
  if(!context) return; // 에러 해결
  context?.strokeStyle = COLOR.BLACK;
  ...
  heightOfSticks.reduce(({ x, width }, height) => {
    context?.fillRect(x, 100 - height, width, height); // 에러 해결
    return { x: x + width + 1, width };
  }, initialValue);
};

아쉬워요 🙁

이번 주에 옐로우가 사정이 있으셔서 혼자 할 일이 좀 있다보니 진도가 잘 안나갔다.
이상하게 코쿼 초반에는 진도 차이 크게 신경쓰지 않았는데 오히려 요즘 진도 차이가 나면 조급해진거 같기도 하다.
피어세션 시간이 얻는게 많아 알차기도 하지만 비교도 하게 되는.. 피어세션의 유일한 단점이랄까..?_?
타입스크립트는 전 주에 비해서는 에러 해결을 하고 있지만.. 이해하지 못하고 쓰는 경우도 있는거 같다.
주말 스터디때 좀 더 열심히 해야겠다.

잘했어요 🙂

혼자하는 시간이 지치기도 했지만 그래도 PR 안놓치고 주말에라도 보낸 점은 칭찬해주고 싶다.
코쿼하면서 PR 못보낸 적이 딱 한 번이다. 늦더라도 항상 보내려고 노력한 덕 분이랄까..?? (물론 제 시간에 내면 더 좋겠지만 ^_ㅠ)
그래도 포기하지 않고 끝까지 낸거니까 잘한거겠지?_?
하지만 덕분에 오랜만에 몸이 안좋다..@_@
요 근래 계속 5시 넘어서 잤는데 주말에 PR마저 보내고, 주말에 스터디가 2개가 되버리니 쉬지 못해서 그런거 같다..ㅠㅠ
잠자는 시간 좀 늘려야 하는데.. 코쿼 끝나면 생활패턴 다시 돌려야겠다 꼭..!ㅠ

참고