개발자로 가는길

Better Touch Tool(BTT)에서  Magic Mouse 사용을 위해 설정한 내용입니다.

처음 45일은 무료로 사용할 수 있고 이후엔 유료구매해서 써야해요.

이걸 써야 매직마우스를 온전히 사용하는 느낌입니다..!

부드럽게 트랙패드 쓰는것처럼 화면 축소/확대하는 방법도 찾고싶네요..!

1. 현재 git이 설치되어있는지 확인 

터미널에서 git --version

2-1. 설치된 git이 없다면 homebrew로 git을 설치해준다

brew install git 

brew info git    package 정보. 판본 정보및 설치되었는지 여부, 의존성 등등을 표시해줌 .

git --version   사용하고있는 깃 버전이 뭔지 알려준다.

2-2. 설치되어있는데 최신버전이 아니라면

git을 최신버전 설치하고, git 명령어 실행시 최신버전이 실행되도록 경로를 수정해준다

brew install git 

git --version으로 새로운 버전이 출력되는지 확인. 안된다면 git 경로를 수정한다

echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc

git --version으로 최신버전으로 변경되었는지 확인

3. git config 설정해주기

로컬 디렉토리에서 git 저장소로 변경 push 하려면 github 계정명과 패스워드를 계속 입력해야하는 번거로움이 있다.
초기에 계정 설정을 한번만 해주면 (초기화 하지 않는 이상) 계속 유지되기 때문에 계정 설정을 해주는 것이 편리하다.

프로젝트마다 다른 email을 사용하고 싶으면 --global 옵션을 제거하기.

git config --global user.name "abcd" // git user name
git config --global user.email abcd@abcd // git user email

설정 확인

git config --list

4. GitHub를 사용하려면 SSH 키를 등록해야 한다.

로컬 개발 환경에서 Git을 단독으로 사용한다면 SSH가 없어도 된다.

하지만 안전하게 외부 Git 서버에서 코드를 Clone하거나 Push하려면 SSH(Secure Shell Protocol) 프로토콜을 사용한다.

SSH는 데이터전송, 원격제어에 사용하는 프로토콜 이다.

GitHub처럼 인터넷을 통해 원격에서 Git 저장소를 호스팅해주는 서비스에서도 SSH 프로토콜을 지원하고 있다.

GitHub 뿐만 아니라 원격 Git 저장소와 통신할 때 일반적으로 사용하는 방법이다. 

 1) SSH키를 만들기 전에 이미 키가 만들어져있는지 확인한다. 

cd ~/.ssh

ls

id_ed25519와 id_ed25519.pub 혹은 id_rsa와 id_rsa.pub 파일쌍이 있는지 확인해본다

이 파일이 있다면 이미 키를 생성했던 적이 있는 것.

다른 이름으로 여러개의 키를 만들어서 사용하는 것도 물론 가능하지만, 개인키의 위치를 따로 지정해줘야해서 불편하게 된다.

이 파일들이 없다면 ssh-keygen으로 생성한다. 생성 방법은 간단하게 아래 명령어를 실행해 주면 된다.

2) SSH키가 없다면 생성해주기

$ ssh-keygen -t ed25519 -C "your_email@example.com"  

ed24419방식이 동작하지 않으면 rsa옵션으로 ssh키를 생성한다.

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

명령어를 실행하면 저장위치를 묻고, 비밀번호를 추가로 지정할지 묻는다.

기본값에 저장하고 비밀번호를 설정하거나, 없이 사용하려면 엔터를 두번 입력한다.(비밀번호 사용 권장)

개인키와 공개키가 만들어지게된다.

개인키는 절대 공개되어서는 안된다. .pub 인 키만 공개해야한다

cat id_ed25519.pub혹은 cat id_ras.pub 

를 입력하여 나오는 내용이 공개키이다. 이 내용을 직접 복사하거나 pbcopy해서 클립보드에 복사한다

pbcopy < ~/.ssh/id_ed25519.pub 혹은 pbcopy < ~/.ssh/id_rsa.pub

3) 공개키를 Github계정에 등록하기.

로그인 후 오른쪽 상단 프로필을 클릭해서 Settings메뉴로 이동한다.

오른쪽 사이드바에서 SSH and GPS Keys를 선택한다.

New SSH key클릭하면 SSH키 등록창이 나타난다.

Title필드에 등록하려는 키의 이름을 본인이 구분하기 쉽게 정한다.

key필드에 복사한 공개키를 그대로 입력한다. 다른문자가 들어가지 않게 주의한다

출처:

https://www.lainyzine.com/ko/article/creating-ssh-key-for-github/

https://baked-corn.tistory.com/52

1. Homebrew 설치하기

홈브루는 맥OS용 패키지 관리자로 맥에 설치되는 애플리케이션 설치, 삭제, 업그레이드 ,의존성 관리 등을 돕는다.

brew -v 로 설치확인

없으면 설치한다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

macOS의 경우 /usr/local 위치에 HomeBrew가 설치된다.

brew -v 로 설치확인

2. zsh쉘을 쓸수있게 셋팅하기

zsh —version으로 zsh이 설치 되어있나 확인(이전에는 bash가 기본 쉘이었고, macOS Catalina 부터 기본 쉘이 zsh로 설정되어있다)

echo $SHELL로 현제 쉘 프로그램확인(없으면 brew intall zsh 으로 설치하기)

which zsh 로 zsh 위치 확인

cat /etc/shells 현재 맥에 설치된 모든 쉘 확인하기

cat은 지정된 파일의 내용을 보여주는 명령. etc디렉토리 shells파일의 내용을 보여달라는뜻

chsh -s $(which zsh) 기본쉘을 zsh 로 변경하기

 chsh 는 chpass 와 동일한 것으로, 사용자의 데이터베이스 정보를 추가하거나 변경하는 ‘유틸리티’ 입니다. 여기서 옵션 -s 를 붙여서 chsh -s 라고 하면, 사용자의 쉘을 바꾸겠다는 의미가 됩니다.

* zsh접근이 제대로 안되면 기본 터미널 설정을 수정해주자.

https://tutorialpost.apptilus.com/code/posts/tools/mac-cli-with-iterm2-zsh/

3. iterm2 애플리케이션 설치하기 

맥의 기본 터미널을 대체할수있는 터미널 에뮬레이터. 홈페이지에서 설치

https://iterm2.com/

4. oh-my-zsh 프레임워크 설치하기

zsh을 좀 더 편리하게 쓸수있게 도와주는 프레임워크. 플러그인과 테마 쓸수있게해준다.

brew install curl

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

5. iterm2테마 꾸미기

https://github.com/mbadolato/iTerm2-Color-Schemes

에서 원하는 테마 고르고 다운로드하기

iterm2>preferences>profiles>colors tab에서 color presets클릭 import클릭하고 다운로드받은 테마 선택해주기

6. zsh 테마 꾸미기

zsh 테마는 .zshrc 파일을 수정해서 변경할 수 있다.

1. https://github.com/robbyrussell/oh-my-zsh/wiki/themes 에서 원하는 테마를 찾는다
2. 저는 개인적으로 선호하는 dracula 테마를 선택했습니다. https://draculatheme.com/zsh/
3. 테마 파일을 다운로드 한다.
4. 테마파일의 압축을 풀고, oh-my-zsh/themes/dracula.zsh-theme 와 같이 테마 파일이 설정되도록 파일을 이동.
5. vim이나 VS Code 등의 편집기로 ~/.zshrc 파일을 열어준다.( vi ~/.zshrc ) 
6. ZSH_THEME 설정을 찾아서 원하는 테마로 변경 해주고 저장한다. ZSH_THEME="dracula"

7. iterm2 폰트 설정

D2 Coding 글꼴은 나눔바른고딕을 바탕으로 개발자의 코딩을 위해 가독성 및 유사 문자간 변별력 뿐만 아니라 디자인적으로 한글과의 조화를 고려해 최적화시킨 글꼴이다. 

네이버 D2 코딩용 폰트를 설치하고 이를 위의 단축키로 iterm2 preferences를 다시 열어서 Profiles > Text에서 지정해준다.

8. 사용자명 뒤에 붙는 @macbook-pro제거하는법

.zshrc 파일을 열어서 맨 하단에 아래의 코드를 입력해주면 사용자명 뒤에 붙는 @macbook-pro를 제거할 수 있다.

vi ~/.zshrc

prompt_context() {

  if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then

    prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"

  fi

}

9. 자동완성 플러그인 설치하기

zsh-autosuggestions

자동완성 플러그인으로 여기를 참고하여 설치할 수 있다.

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

 .zshrc의 plugins에 추가해 줘야 한다.

 vi ~/.zshrc

plugins=(

  git

  zsh-syntax-highlighting

  zsh-autosuggestions

)

출처: https://xzio.tistory.com/765 [코딩창고]

https://futurecreator.github.io/2018/05/30/mac-os-better-terminal-iterm2-zsh-oh-my-zsh/

React에서 절대경로를 설정하지 않으면 파일을 불러올때마다 "./../../파일" 이런식으로 import를 해와야 하기때문에 절대경로를 설정하는게 좋다.

1. 절대경로를 편하게 설정하기위해 라이브러리 설치하기

(cross-env는 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입하는 방법.

사용법은 아주 간단하다. 사용할 커맨드 앞에 cross-env [<key>=<value>, ...]를 붙여 실행해주면 된다.)

$ npm install --save-dev cross-env

2.  package.json 수정 해서 cross-env 사용하기

"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start", 
"build": "cross-env NODE_PATH=src react-scripts build", 
"test": "react-scripts test", 
"eject": "react-scripts eject" 
},

3. jsconfig.json파일 생성후 아래내용 삽입

(jsconfig.json파일은 js 프로젝트를 할때 필요한 파일이고, 이 파일이 위치하는 곳이 루트 디렉토리가 된다.

만들고 있는 js 프로젝트에 속해있는 파일, 속하지 않은 파일, 컴파일러 옵션 등을 설정할 수 있는 설정 파일이다.)

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

<참고>

- https://velog.io/@cckn/windows%EC%97%90%EC%84%9C-NODEENV%EB%A5%BC-%EB%B0%94%EA%BF%80-%EB%95%8C%EC%97%90%EB%8A%94-cross-env%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

- https://velog.io/@zxcvbnm5288/jsconfig.json%EC%9D%B4%EB%9E%80

- https://velog.io/@cckn/windows%EC%97%90%EC%84%9C-NODEENV%EB%A5%BC-%EB%B0%94%EA%BF%80-%EB%95%8C%EC%97%90%EB%8A%94-cross-env%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

Auto Close Tag - HTML/XML close tag를 자동으로 닫아줌

Auto Rename Tag - 스타트태그나 클로즈태그 내용 하나 수정하면 다른것도 바꿔줌

VS Color Picker

CSS Peek- HTML태그 클릭하면 해당 태그를 다루는 CSS파트로 연결됨(ctrl+hover)

HTML CSS Support - HTML에서쓴 id,class네임을 CSS에서 자동완성해준다

HTML to CSS autocompletion

Prettier -코드정렬

Prettier Now

Sass

Live Server - 웹으로 미리보기하려면 필수

Live Sass Compiler - 파일저장하면 SASS,SCSS파일을 바로 CSS로 변환해준다

Image preview - img태그에 마우스 대면 이미지 미리보기 가능

TODO Highlight - //TODO:  혹은 FIXME: 쓰면 색상하이라이트가 표시되고 모아볼수도있음. 

Material Theme

Github Dark - 평소에 쓰던 Theme

Material Icon Theme - 파일앞에 아이콘 넣어준다

JavaScript code snippets - snippet이 작은 조각이라는 뜻인데, 이미 완성되어있는 코드들을 갖다쓸수있는방법. (for,while문등을 작성할때 등등) 생산성 증대

ESLInt - JS 코드를 분석해 문법이나 안티패턴을 알려준다

Wrap Console Log - console.log() 를 일일이 입력하지않게 도와준다. 블록선택후 단축키설정에서 ctrl+L 누르면 선택된 부분을 console.log(선택된부분) 이 아래줄에 코드로 들어오게해서 썼음

Node Require

node-snippets 

vscode-styled-components

styled-components-snippets

계속 윈도우 기반의 컴퓨터만 사용하다 올해2월부터 맥을 사용하게 되었다.

리엑트 공부를 시작하면서 프로그램을 설치해야할 일들이 생겼는데 맥은처음이라 난감했던 기억이 난다.

그래서 정리해보는 홈브루를 쓰는 이유!

- Homebrew란?

Homebrew는 패키지매니저로 Apple(또는 Linux)에서 제공하지않는 유용한 패키지 관리자를 설치한다.

터미털에서 명령어를 작성해서 자신이 필요한 프로그램을 설치, 삭제, 업데이트를 손쉽게 관리할 수 있게 해준다.

- Homebrew를 쓰는 이유는?

Mac을 사용해서 프로그램을 설치하려면 보통 App Store나 해당 사이트에 접속해서 다운받아야한다.

하지만 이런경우 원치않는 프로그램이 자신도모르게 설치될수있고, 나중에 프로그램 재설지,삭제,업데이트할때 기존데이터가 남아있는 경우가 있으며 맥이 버벅대는경우도 나타날수 있다고 한다.

Homebrew를 사용하면 프로그램들을 설치하고 관리할때 이런문제 없이 컴퓨터를 관리할 수 있다. 그래서 Homebrew는 프로그램 사용이 많은 개발자가 손쉽게 패키지를 관리하기위해 사용하는 도구중 하나다.

Homebrew는 마우스로 클릭해서 설치하는 앱스토어가 아니라, 명령어를 쳐서 프로그램을 설치하고 관리하는 앱스토어라고 생각하면 된다. 

홈브루를 다운받으면 앞으로 프로그램을 설치할때는 $ brew install 프로그램명 이런식으로 설치하면 된다.