맥북 에어 m1 환경설정(임시공개)

soo·2023년 2월 18일

상황

맥북 에어 m1 을 장만했다! 그런데 환경설정 세팅할 생각에 한숨부터 나온다... 그렇지만 언젠가는 해야할 일이라 생각하고 진행했다. 첫번째 실패는 뭔가 중간에 꼬여버리고, 너무 무지성으로 아무거나 때려박고 입력한것 같다 처음부터 찬찬히 진행하기로 했다. 중간에 혹시 마이그레이션을 하면 npm 등 다 딸려오는걸까 해서 두 번 시도해봤는데, 적용되지 않아 다시 공장초기화를 진행했다.
Q. npm은 대체 어디에 설치되는거고, 왜 마이그레이션에 안 딸려올까?

zsh, bash 차이
터미널은 무엇인가

홈브루

1)brew list로 따로 관리가능하여 용이함. 오...홈브루도 git 기반으로 되어있다네.
->node
->git

이 링크에 들어가면 홈브루로 많이 설치하는 것을 볼 수 있다.

홈브루 설치가 완료되면 아래의 명령어를 입력했을 때 결과가 잘 나온다.
(버젼은 시기에 따라 다를 수 있다.)

soo@suyeongui-MacBookAir ~ % brew -v                    
Homebrew 4.0.1
Homebrew/homebrew-core N/A

반대로, 아직 nvm을 설치하지 않았기 때문에(또는 제대로 설치되지 않았기 때문에) 아래 명령어는 오류가 난다.

soo@suyeongui-MacBookAir ~ % nvm -v
zsh: command not found: nvm

nvm 설치를 위해서는 최초 명령어 이후 두번 더 해줘야한다.
명령어들의 해석에 대해서는 다른 블로그를 참고하시라.

soo@suyeongui-MacBookAir ~ % export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"    soo@suyeongui-MacBookAir ~ %  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/

나는 아래와 같은 내용이 나왔는데, 무슨 소리인지는 모르겠다. 나의 경우 cmd+c로 그냥 나왔다.

cmdand dquote>

아래 명령어로 설치할 수 있는 node.js 버젼을 출력해본다.

soo@suyeongui-MacBookAir ~ % nvm ls-remote

그러면 아래와 같이 설치할 수 있는 목록이 쭉 뜨는데, 나는 안정성을 위해 가장 최근의 LTS 버젼을 설치했다.(LTS는 안정적인 버젼이며, 최신의 버젼이 꼭 LTS는 아니다.)

아래 처럼 nvm install (설치할 node.js 버젼) 을 입력하면 설치가 진행된다.

nvm install 18.14.1

제대로 설치되었는지 확인을 위해, 아래와 같이 입력해보면 정상적으로 출력된다.

soo@suyeongui-MacBookAir ~ % node -v
v18.14.1

npm(노드 패키지 매니저) node.js의 패키지를 관리해주는 도구. npm은 의존성이 강하다.)

npx

nvm(노드 버젼 매니저)

깃 설치하기

아래 명령어를 실행하면 홈브루가 git 설치를 해준다.

brew install git

아래 명령어 중 하나를 입력해보고, 버젼이 제대로 뜬다면 성공적인 설치이다.

git --version

git -v

깃과 깃헙은 다르다.

깃헙은 설치하는게 아니라, 접속하는 것이다. (플랫폼이다)

깃 최초설정(user.name "내용",
https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%B5%9C%EC%B4%88-%EC%84%A4%EC%A0%95

위 문서에서 " 환경 설정은 한 컴퓨터에서 한 번만 하면 된다. 설정한 내용은 Git을 업그레이드해도 유지된다." 라고 표시되고 있다.

사용할 수 잇는 깃 컨피그 명령어들을 보여주는것 같다.

git config --system

아래 명령어들로 유저 네임과 유저 이메일 입력.

git config --global user.name "sykang013"

git config --global user.email sy.kang013@gmail.com

아래 명령어로 방금 입력한 유저네임과 이메일이 잘 입력되었는지 확인

git config ls

git의 기본 편집기로 vsc 설정
--await 은실수 방지용이다.(cli로 vsc 실행했을시, vsc 끄기 전까지 command를 대기시킨다는데 먼소린지 모르겠음. 여튼 브렌치 머지할때 유용하다함)

tip
파일 이름 앞에 .가 있다면 숨김파일이므로, ls 를 해도 보이지 않는다. 숨김파일까지 보려면 ls -a 을 입력해서 모든 파일을 표시해야한다.

git config --global core.editor "code --wait"

cask 설치

맥용 어플리케이션 설치를 터미널에서 가능하게 해주는 것이라고 한다.
설치 명령어

brew install cask

이러면 뭔가 엄청 많이 뜨면서 설치된다.

그리고 cask로 vsc를 설치했다.

brew install --cask visual-studio-code

윈도우와 맥의 공백문자 설정

윈도우와 맥으로 협업시, 공백문자 때문에 불필요한 충돌이 많이 난다고 알고있다.
해당 문제를 방지하기 위해 아래 명령어를 입력한다.

git config --global core.autocrlf input

git config에 잘 들어갔는지 확인한다. 아래 명령어를 입력했을 때 뜨는 목록들 중에 core.autocrlf=input이 있다면 잘 등록된거다.

git config --list

iterm2 설치

vsc와 깃헙 연동

vsc 좌측 하단의 프로필 이미지를 클릭해서, terning on setting sync를 클릭하고, 깃헙으로 로그인을 선택한다. vsc와 깃헙이 연동되어있으면 로컬의 저장소를 깃헙에 그대로 푸쉬 가능해서 편하다.

terminal, VSC 현재 브랜치 보이도록 설정

깃 익스텐션 읽어보기
https://inpa.tistory.com/entry/VSCode-%F0%9F%92%BD-GIT-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98-%EC%B6%94%EC%B2%9C#Git_History

tip
최상위 폴더에 git을 설정해두면 커밋할게 많아져서 추천하지 않는다 <- 다시 알아보기.

바벨
:리액트 문법을 위한? pars?

사실 설치를 하거나 하다보면 주룩주룩 뜨는걸 읽어보기 싫은 마음이 드는데, 그렇다고 해서 막상 읽어보면 아주 어려운 내용도 아니다. 그리고 의외로 이런 문제가 있는거 같은데 이렇게 해결해봐! 라고 알려주는걸 그대로 따라해서 문제를 해결한 경우도 더러 있으니, 아주 친절한 도구이다. 중요한것은 익숙해지는 것이다. 메시지를 읽고 도움말을 읽는 연습을 가져야 혼자 공부할 수 있고, 툴에 상관없이 원리와 기본을 이해해야 나중에 또다른 유행으로 툴이 바뀌더라도 크게 흔들리지 않고 꾸준히 성장할 수 있다.

아래 명령어는, npm에게 무엇무엇을 설치해달라고 하는 것이다. 구체적으로 원하는게 있다면 뒤에 그것을 붙이지만, 다른 사람의 레포를 가졍ㄴ 경우, package.json이 있는 경우를 볼 수 있다. 그러면 우리는 터미널에 npm i 만 입력하면, npm이 package.json을 훑어서 흠 이러이러한게 필요하군! 하고 설치해준다. 그러면 node_modules 라는 개발 의존 모듈이 생긴다.