nodejs 개발환경을 세팅해보자

starkensin·2020년 8월 23일
2
post-thumbnail

컴퓨터를 새로 사면 개발환경을 세팅해야한다. 그런데 문제는 시간이 오래 걸린다는 것이다! 그래서 앞으로 또 새롭게 처음부터 개발환경을 구성해야 할 때 시간을 절약할 수 있도록 정리된 글을 남기고자 한다.

다른 사람이 참고해도 시간절약에 도움이 될 것이지만, 환경세팅은 개인의 취향적인 부분이 큰 부분을 차지함으로 참고 부탁드립니다.

내가 최소한으로 사용하는 환경의 구성은 다음과 같다.

command-line tool: Vim, Home-brew, oh-my-Zsh
nodeJS: NVM, NodeJS
virtualEnvironment: direnv, Docker
code editor: vscode
version control: Git, Github
database: Mysql

목표: 과하지 않게 필요한 환경을 구성하는 것을 목적으로한다.

command-line tool

1. vim

vim ~/.vimrc 후 다음을 입력한다.

set nu
set showmatch
set ruler
set autoindent
set cindent
if has("syntax")
    syntax on
endif

2. Home-brew

터미널에 다음을 입력한다.
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”

기본적인 웹 다운로드 기능 설치
brew install wget
brew install curl

편할려고 설치하는 tree
brew install tree

3. oh-my-Zsh

oh-my-zsh 설치 커맨드

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

oh-my-zsh 꾸미기

색입히고 꾸미기

git clone https://github.com/altercation/solarized.git 한 후
상단메뉴에서 iterm2를 클릭 후 preference > profile > color > color-presets를 solarized dark로 설정한다.

vim ~/.zshrc 을 입력한 후

ZSH_THEME="robbyrussell" 을 찾아서 다음과 같이 변경해준다.
ZSH_THEME="agnoster"

그 후 source ~/.zshrc을 입력하여 변경된 사항을 적용해준다.

자 당황하지 말자! 아마 대부분 글씨가 깨져서 보일 것이다.

글꼴 설치

코딩에 적합한 글꼴로써 D2 코딩 글꼴이 있다.
GitHub - naver/d2codingfont: D2 Coding 글꼴 링크로 접속해서 가장 최신의 글꼴을 설치해준다.
그 후 상단메뉴에서 iterm2를 클릭 후 preference > profile > text > d2 coding literature 설정해준다.

prompt 간소화

vim ~/.zshrc 입력 후 다음을 추가한다.

  prompt_context() {
    if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
      prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"
    fi
  }

뉴라인 적용

vi ~/.oh-my-zsh/themes/agnoster.zsh-theme 입력 후
build_promt()를 찾아서 아래와 같이 정확한 위치에 prompt_newline을 추가한다.

build_prompt() {
  RETVAL=$?
  prompt_status
  prompt_virtualenv
  prompt_context
  prompt_dir
  prompt_git
  prompt_bzr
  prompt_hg
  prompt_newline // 꼭 여기에 추가 
  prompt_end
}

그리고 이어서 다음을 맨 밑에 추가해준다.

prompt_newline() {
    if [[ -n $CURRENT_BG ]]; then
      echo -n "%{%k%F{$CURRENT_BG}%}$SEGMENT_SEPARATOR
  %{%k%F{blue}%}$SEGMENT_SEPARATOR"
    else
      echo -n "%{%k%}"
    fi
    echo -n "%{%f%}"
    CURRENT_BG=''
  }

신택스 하이라이팅

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting 을 입력 후

echo "source ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${HOME}/.zshrc 으로 적용 하이라이팅을 해준다.

nodeJS

1. NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
add the below to ~/.zshrc
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

그 후 shell을 다시 시작한다.

2. Node.JS

nvm install 12.18.3
brew install yarn

virtualEnvironment

1. direnv

44bits 기술블로그를 참고한다. 아주 잘 정리되어있다.

2. Docker

brew cask install docker

code editor

vscode

extension: pritter, gitLens 설치

setting.json

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[tpyescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[tpyescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'D2Coding'",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 120,
  "prettier.semi": false
}

version control

1. Git

git config --global user.name "starkensin"
git config --global user.email "starkensin@gmail.com"
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status 
git config --global alias.lg "log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all"

2. Github

ssh 연결은 공식 문서에 잘 나와있다.

요약하면 다음과 같다.

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

Start the ssh-agent in the background.
$ eval "$(ssh-agent -s)"

Add your SSH private key to the ssh-agent and store your passphrase in the keychain.
The -K option is Apple's standard version of ssh-add, which stores the passphrase in your keychain for you when you add an ssh key to the ssh-agent.
$ ssh-add -K ~/.ssh/id_rsa

Copy the SSH key to your clipboard.
$ pbcopy < ~/.ssh/id_rsa.pub

Testing SSH connection
$ ssh -T git@github.com

database

Mysql

brew install mysql

(혹시 잘못 설치했다면)
sudo rm -rf /usr/local/var/mysql
sudo rm -rf /usr/local/bin/mysql*
sudo rm -rf /usr/local/Cellar/mysql

mysql.server start

mysql_secure_installation
엄청나게 강력한 비밀번호: No
나머지는 4개는 모두: yes

mysql -uroot -p 로 접속 체크를 해본다.

0개의 댓글