나의 Windows 웹개발 세팅

jhj46456·2020년 7월 5일
0

📌 React 및 Node.js 개발자입니다.
WSL은 Windows directory I/O가 느려 사용하지 않습니다.

초기화

지금 PC를 초기화했거나 PC를 업그레이드하여 아무것도 설치되어있지 않는 상황이라 가정합니다.

git

git을 설치합니다.

https://git-scm.com/

👉 git config --global user.name "name"

👉 git config --global user.email "email"

Node.js

본인은 JS 기반으로 개발하기 때문에 Node.js를 설치해야 합니다.

https://nodejs.org/ko/

뭐 상황에 따라 LTS, Latest 골라서 설치합니다.

yarn

⭐ https://yarnpkg.com/getting-started/install

yarn v2 부터는 npm으로 설치

npm i yarn -g

VSC

메모장으로 개발할 순 없으니 코드 에디터를 설치합니다.

https://code.visualstudio.com/

Terminal

기본 터미널이 PowerShell로 설정되어있는 경우 취향에 따라 git bash로 바꿔줍니다.

Edit in settings.json 클릭

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

git bash 실행 파일을 찾아서 경로 지정 후 재실행

Prettier

code formatter 확장입니다.

설치 후

  1. Ctrl + , 로 VSC Settings 접근
  2. format on save 검색 후 체크

필수

  1. Auto Close Tag

Id: formulahendry.auto-close-tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Version: 0.5.8
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

  1. Auto Rename Tag

Id: formulahendry.auto-rename-tag
Description: Auto rename paired HTML/XML tag
Version: 0.1.4
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

  1. TSLint

Id: ms-vscode.vscode-typescript-tslint-plugin
Description: TSLint support for Visual Studio Code
Version: 1.2.3
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

  1. vscode-icons

Id: vscode-icons-team.vscode-icons
Description: Icons for Visual Studio Code
Version: 10.1.1
Publisher: VSCode Icons Team
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

  1. vscode-styled-components

Id: jpoissonnier.vscode-styled-components
Description: Syntax highlighting for styled-components
Version: 0.0.29
Publisher: Julien Poissonnier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

  1. Better Comments

Id: aaron-bond.better-comments
Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!
Version: 2.0.5
Publisher: Aaron Bond
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

  1. Bracket Pair Colorizer

Id: coenraads.bracket-pair-colorizer
Description: A customizable extension for colorizing matching brackets
Version: 1.0.61
Publisher: CoenraadS
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

  1. Color Highlight

Id: naumovs.color-highlight
Description: Highlight web colors in your editor
Version: 2.3.0
Publisher: Sergii Naumov
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

  1. IntelliSense for CSS class names in HTML

Id: zignd.html-css-class-completion
Description: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
Version: 1.19.0
Publisher: Zignd
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

  1. Markdown All in One

Id: yzhang.markdown-all-in-one
Description: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
Version: 3.1.0
Publisher: Yu Zhang
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

  1. markdownlint

Id: davidanson.vscode-markdownlint
Description: Markdown linting and style checking for Visual Studio Code
Version: 0.36.1
Publisher: David Anson
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

선택

  1. GraphQL

Id: prisma.vscode-graphql
Description: GraphQL extension for VSCode adds syntax highlighting, validation, and language features like go to definition, hover information and autocompletion for graphql projects. This extension also works with queries annotated with gql tag.
Version: 0.2.14
Publisher: Prisma
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql

  1. GraphQL for VSCode

Id: kumar-harsh.graphql-for-vscode
Description: GraphQL syntax highlighting, linting, auto-complete, and more!
Version: 1.15.3
Publisher: Kumar Harsh
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode

  1. Live Server

Id: ritwickdey.liveserver
Description: Launch a development local Server with live reload feature for static & dynamic pages
Version: 5.6.1
Publisher: Ritwick Dey
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

  1. Prisma

Id: prisma.prisma
Description: Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
Version: 2.1.4
Publisher: Prisma
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Prisma.prisma

DB

로컬 DB에서 작업해야할 것이 있다면 MySQL이든 PostgreSQL이든 설치합니다.

Heroku

heroku에 올려 테스트할 것이 있다면

https://devcenter.heroku.com/articles/getting-started-with-nodejs?singlepage=true

profile
리액뚜

0개의 댓글