트러블 슈팅(Trouble Shooting) ‐ 조형민

트러블슈팅

1. Uncaught SyntaxError: Unexpected token '<'에러

문제 해결을 위한 기본 단계

1. 문제 파악

   • Uncaught SyntaxError: Unexpected token '<'에러
   • 브라우저가 jsx문법을 이해하지 못하는 문제

2. 환경 확인 및 시도

   • useModal.js 라는 파일에서 에러가 발생했었다.

import { useState } from 'react';

import { useCloseModal } from './useCloseModal';

const useModal = () => {
  const [Modal, setModal] = useState(null);

  const [ModalInfo, setModalInfo] = useState({
    closeModalCallback: null,
  });

  const { isModalOpen, modalRef, toggleModal } = useCloseModal();

  const closeModal = (closeModalCallback) => {
    toggleModal();

   ...

  /**
   * toggleAndSetModal에서 담은 ModalComponent
   */
  const ModalComponent = (directProps) => {
    const validProps = {};

    Object.keys(ModalInfo).forEach((key) => {
      if (ModalInfo[key]) validProps[key] = ModalInfo[key];
    });

    // directProps override ModalInfo
    if (directProps && typeof directProps === 'object') {
      Object.keys(directProps).forEach((k) => {
        validProps[k] = directProps[k];
      });
    }

    if (!Modal) throw new Error('ModalComponent property should be passed to toggleAndSetModal function');
    
    // 🚨 문제의 부분
    return <Modal modalRef={modalRef} closeModal={() => closeModal(ModalInfo.closeModalCallback)} {...validProps} />;
  };

  return { isModalOpen, toggleAndSetModal, ModalInfo, ModalComponent };
};

export { useModal };

처음에는 문법의 문제인 줄 알고 코드를 다시 살펴봤다.

일반적인 문제와 해결 방법

• 해결: 브라우저가 해당 jsx 문법을 이해하지 못한 것인데, 이 때 파일 확장자명을 js에서 jsx로 변경시켜서 리액트 컴포넌트 문법이라는 것을 인식시켜서 해결할 수 있었다.

---

2. 파일 대소문자, 폴더 대소문자 변경 시 생기는 배포 문제

문제 해결을 위한 기본 단계

1. 문제 파악

• netlify 배포에서 해당 파일을 찾을 수 없다는 에러문구를 볼 수 있었다.
• 배포하기 전에 컨벤션에 맞지 않는 폴더명을 수정하고 import 구문도 고쳐서 push한 상태였다. (로컬에서 Button이나 Badge나 button, badge 등등 다 소문자로 변경해서 올려줬다.)

2. 환경 확인 및 시도

• github 레포지토리에 올라가 있는 폴더들을 보니 소문자로 변경한 사항이 반영되어 있지 않았다.
• 로컬에서 폴더명을 수정했다고 해서 github의 대소문자 폴더명이 변경되는 것은 아니다라는 내용을 찾아볼 수 있었다. 실제로 위와 같이 Badge, Button 등 로컬에서는 badge, button로 수정했지만, 원격에서는 대문자인 폴더들이 몇몇 있었다.

일반적인 문제와 해결 방법

• 해결:

# ignorecase false로 설정
git config core.ignorecase false

# 원격 레포 디렉토리 삭제
git rm -r --cached .

ignorecase 설정을 통해 해결할 수 있었다. git이 대소문자에 민감하게 만들어줘서 대소문자의 변경까지 신경 쓰도록 만드는 것이다. 이후 원격 레포로 변경된 사항만 반영될 수 있도록 기존의 대문자 폴더를 포함한 모든 폴더를 삭제하고 push하여 해결했다.