컨플릭트를두려워하지말자

https://emotion.sh/docs/typescript

이모션 공식 문서대로 

tsconfig.json 파일 안에 

{
.
.
.
.

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}

이 부분을 추가하자!

css-in-js 스타일 라이브러리중에 emotion이 코드도 깔끔하고 수정이 쉬워서 자주 사용중인데

프로젝트에 typescript를 도입하니 여기저기 에러가 튀어나온다 ...

번들러랑 바벨 다루는게 더 익숙해져야겠지 ~.~ 

npm run start  또는 

yarn start 등을 사용해 리액트 프로젝트를 실행했을 때,

react-scripts 관련 오류가 발생할 때가 있다. 

보통은 npm install --save react-scripts 또는

yarn add react-scripts를 입력해 설치하면 문제가 해결되지만 

typescript를 사용하는 경우엔 위의 방법으로 해결이 안되는 경우가 있다. 

그럴땐 우선 package.json 파일 안의 dependencies를 살펴보자 

  "dependencies": {
        .
        .
        .
        .
        .
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.0",
    "react-scripts": "5.0.0",
    "typescript": "^5.5.3",
    }

나처럼 react-scripts가 5버전 이상인 경우에는

typesciprt가 4버전까지 지원이 된다. 

(2024.7 기준. 이후 버전에는 달라질 수도 있음)

나의 경우엔 "typescript" :  5.5.3 버전이 설치되어 있었는데 

저 부분을 ^4.9.5로 수정한 후 다시 실행했더니

정상적으로 로컬호스트가 실행되었다! 

git mv 를 사용해서 폴더명을 바꾸는 중 오류가 발생했다.

bash 터미널에서 rename 하려는 폴더의 상위 폴더로 이동한 후 

git mv PreviousName NewName 을 입력했더니 

Rename from 'src/상위폴더../PreviousName' to 'src/상위폴더../NewName' failed. Should I try again? (y/n)

이런 오류가 발생한 것이다. 

y를 눌러도 계속 같은 메시지가 출력되어 해결법을 찾다가 

vscode 상단의 파일 > 폴더열기 >바꾸려는 폴더의 상위 폴더로 이동 한 뒤 

다시 git mv를 시도했더니 이름이 바로 바뀌었다!!! 

터미널에서 상위 폴더로 이동하는게 아니라 탐색기에서 이동해야 하는 거였다... 

오전내내 이 문제로 머리를 싸맸는데 이렇게 간단하게 해결되다니 !

그리고 만약

소문자 > 대문자로 변경할 때는 

testName > Testname 으로 바로 변경하지 말고

git mv testName testName_fix  //임시 이름은 아무거나 상관없음

한 다음

git mv testName_fix Testname

으로 바꿔주면 된다 .

주의할 점! 

git은 기본적으로 대소문자를 구분하지 않고 test , Test 두 개의 폴더 이름이 달라도

안에 들어있는 내용이 같다면 같은 폴더로 인식하는데,

git config core.ignorecase false

위 명령어를 사용해서 대소문자를 구분할 시 

혼자 작업하는 레포지토리라면 상관이 없겠지만,

다른사람과 동시 작업하는 경우엔

리모트에 

test/ 폴더와

Test/ 폴더가 각각 생성되어 충돌이 발생할 수도 있다 < 내 경험임 🥺

그러니 귀찮더라도 

다른 이름으로 먼저 바꿔준 다음, 대소문자 변경을 하도록 하자!