[TIL] yarn 설치 성공기...

TIL작성방법

어떤 문제가 있었는지 내가 시도해본 것들 해결 알게 된 점

1. 어떤 문제가 있었나?

yarn start react-app //만들 리액트 이름

위와 같은 오류 발생했음.

 

2. 내가 시도해 본 것들

+) 모두 친절한 프로그램 동기분이 도와주셨음을 분명히 명시합니다. 이렇게 정리하는 것 또한 그 분이 친절히 자료를 정리해서 주셔서 할 수 있었습니다

 

---

* 계정 이름을 바꿈

Hong Ye Won -> HongYeWon

이 방법을 시도해 본 이유 :

- 항상 공백으로 문제가 났었고, 이번에도 오류 메세지가 그렇게 떴기 때문임

 

* 사용자 명을 바꾸기 위해 사용한 방법

(1) 사용자 이름 공백에 대한 리액트 공식 문서

https://github.com/facebook/create-react-app/issues/6512

Create react app won't work on Windows if there are spaces in your username · Issue #6512 · facebook/create-react-app

- 위의 공식 문서에서 볼 수 있는 오류 해결 방법

- HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList 내 레지 이름 변경

- 시도해본 결과

: 똑같은 오류 발생함 

: 이슈 체크를 해보면, 대부분 npx는 되게 되는데 yarn에 관해서는 되지 않는다고 나와있음

: 위의 방법만으로는 사용자명이 바뀌지 않았음 

: 레포지토리와 사용자 관련된 모든 이름을 변경해줘야 했음

 

(2) 윈도우 10에서 계정 이름 변경하는 방법

https://www.groovypost.com/howto/change-account-name-windows-10/

How to Change Your Account Name on Windows 10

- 위의 공식 문서에서 볼 수 있는 오류 해결 방법

1. administrator(최고관리자) 계정 활성화 및 administrator 계정 전환

 2. 기존 로그인 계정 로그아웃

 3. netplwiz로 계정명 띄어쓰기 제거

 

-시도해본 결과

: 위의 방법과 이 방법을 모두 적용했을 때, 사용자 명이 제대로 바뀌었음

: 여기서 netplwiz 이나 rename 명령어를 cmd를 통해 사용했었는데, 이미 있는 폴더(or이름)이라는 오류가 발생했었음.

확인해보니, 내가 만든 기억이 없는데(ㅜㅜ 죄송함다) Users 폴더에 HongYeWon폴더가 이미 만들어져 있었음.

오류가 생길 땐, 모든 곳을 잘 확인해보자

 

(3) 참고된 문서들

- [Windows 10] 사용자 계정 폴더 이름 변경 from MS
- 앱이 Windows 새 버전에서 작동하지 않음 from MS
- 이전 앱 또는 프로그램이 Windows와 호환되도록 설정 from MSHard links and junctions from MS

: 관리자 권한을 해당 계정에 양도하는 방법

: junction link로 띄어쓰기 있는 계정명 폴더 유연성(경유 경로 확보)

command line interface - wmic useraccount list full and nothing happen - Stack Overflow

wmic useraccount list full and nothing happen

 

 

---

- 결과 : 위의 방법으로 사용자명 성공적으로 바뀜. npm 설치까진 가능하나, yarn은 동일한 오류 계속 발생 , Hong Ye Won이라는 띄어쓰기 폴더를 Users에 yarn이 직접 만들고 react-app을 설치하는 기행까지 선보임....

 

*npm, yarn 명령어

- 포기하고, npm 쓰려 찾아본 npm과 yarn 명령어 모음

https://ui-tricks.netlify.app/posts/2020-03-10-npm-yarn/

npm & yarn 명령어

https://velog.io/@hahbr88/npm-yarn-%EB%AA%85%EB%A0%B9%EC%96%B4-%EB%AA%A8%EC%9D%8C

npm & yarn 명령어 모음

 

* everything

- 그리고 위의 과정을 거치며, 빠른 파일 검색을 위해 window에서 사용할 수 있는 프로그램 하나를 얻어냄

- 사용해보니, 실제로 매우 빠름 매우 좋음 :D

https://www.voidtools.com/ko-kr/downloads/

다운로드 - voidtools

 

- 포기하지 않은 yarn 의 길.. 이젠 왜 오류가 나는지 궁금해서라도 .. 해결을 하고 싶어짐.. 

---

3. 해결

* 설치경로 문제(with bash)

- 매니저님이 도와주심

- 결론부터 말하자면, 설치경로가 잘못 설정되어 있었음

- 해결한 코드 전체 보겠음 모든 명령어는 bash를 통해 진행함

yarn config get prefix
yarn config set prefix ~/.yarn
vim ~/.zshrc
export PATH="$PATH:`yarn global bin`"
:wq
source ~/.zs

 하나씩 설명해보자면 (with 챗gpt)

 

1)

yarn config get prefix

: 현재 Yarn의 설치 경로(prefix)를 확인하는 명령어. 이 명령어를 실행하면 Yarn이 설치된 경로가 출력됨

: 여기서 문제의 "Hong Ye Won" 경로가 뽑혀나옴.... 이게 문제였던 거임

 

2)

yarn config set prefix ~/.yarn

: Yarn의 설치 경로(prefix)를 ~/.yarn으로 설정하는 명령어 (set)

: 이렇게 설정하면 Yarn이 ~/.yarn 경로에 설치되게 됨

 

3) 

vim ~/.zshrc

: Zsh 쉘의 환경 설정 파일인 ~/.zshrc을 Vim 편집기로 열음

: 이 파일은 사용자의 Zsh 쉘 환경 설정을 포함하고 있음 

: 그렇기에 여기서 편집을 해주는 거임

: Zsh 쉘 에 설정된 경로가 지금 잘못된 거니까

 

4)

export PATH="$PATH:'yarn global bin'

: Yarn의 글로벌 패키지 설치 경로를 현재 사용자의 PATH 환경 변수에 추가함

: 이렇게 함으로써 Yarn 글로벌 패키지들을 쉘에서 바로 실행할 수 있게 됨

 

5) 

:wq

: Vim 편집기에서 파일을 저장하고 종료하는 명령어

: 말 그대로 위의 변경 사항을 저장하고 Vim을 종료함

 

6)

source ~/.zshrc

: 변경된 ~/.zshrc 파일을 적용하기 위해 현재 쉘 세션에 새로운 환경 설정을 적용함

: 이 명령어를 실행하면 이후부터는 업데이트된 PATH 설정이 적용됨

: 굳이 터미널을 껐다 키지 않아도 되는 것

 

- 관련 자료

https://myung-ho.tistory.com/103

[YARN] Yarn Global PATH 설정

 

- 이렇게 해결됨! yarn 설치 완료~

 

---

- 그런데 위의 방법을 통해 해결하고 나니, 환경변수의 시스템 변수 변경 버튼들이 활성화가 안됨

- 한 가지를 해결하면, 다른 한 가지 문제가 튀어나는 게 볼만함 팝업게임도 아니고 어이가 없음

- 하지만? 위의 문제는 간단함

https://korearank1.tistory.com/28

환경변수 등록 (Python)

- 걍 위의 방법으로 들어가십쇼

- 시스템 -> 설정 변경 -> 시스템 속성의 고급 탭 -> 환경 변수

- 그럼 잘 됨 아무래도 컴퓨터가 보호를 해서 그런듯 ;

 

---

4. 알게 된 점

- 뭔가 지식적으로 알았다기보다는 감정적으로 느낀 게 컸음. 이건 2주차 WIL 참고~~

- 찾아보고 구하면 어떻게든 된다! 걍 밀어버릴 생각도 있었는데 뭐!