1. VScode 다운로드
- 기본적으로 vscode가 다른 에디터보다 편하고 사용하기 좋다. 라이브 쉐어(Live Share) 등 여러 기능을 지원해주기 때문에.. 이미 다운 받은지 되었지만 Arduino, Eclipse(자바 한정 편한듯...), Python IDLE, 각종 구데기 IDE를 써본 결과 제일 편한듯
- typescript, vscode, npm 등 모두 MS에서 만들어서 하나로 연동되어 하기 좋다.
바로가기
Visual Studio Code - Code Editing. Redefined
2. 기본 설정
- settings 들어가기 (단축기 Window 기준 Ctrl + , )
- Bracket - 괄호에 색을 넣어서 구분하기 쉽게 해줌. 괄호의 시작과 끝을 연결하는 선을 넣어 범위를 쉽게 확인한다.
- settings 에서 colorization 검색 후 Bracket pair colorization 체크
- settings 에서 bracketPairs 검색 후 Bracket Pairs true 로 설정
- tab size - tab 키 사용 시 몇 칸 띄울지 결정
- settings 에서 tab 검색 후 tab size를 2로 변경
3. Node 다운로드
Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. - 출처 위키
뭐...거창하게 써있지만 그냥 백엔드에 사용 되는 것이라고 생각하면 될 것 같다.
Node js 사이트에서 LTS를 다운 받는다. 현재 버전은 불안정하기 때문이기도 하고 아직 많이 나온 것들이 없어서 LTS를 다운 받는게 좋다고 한다.
이후 cmd(명령 프롬프트)에서
node -v
를 쳤을 때 버전이 잘 나오면 성공이다. (LTS랑 같은 버젼이 나와야 한다.)
4. yarn 설치
npm install -g yarn
-g 는 컴퓨터에 global 하게 설치한다는 것이다.
yarn -v 로 설치를 확인 할 수 있다.
yarn 사용법
- 특정 패키지 제거 : yarn remove <이름>
- 특정 패키지 설치 : yarn add <이름>
- 전체 패키지 설치 : yarn / package.json에 있는 것들을 설치한다.
- package.json 파일 생성 : yarn init
타입스크립트 사용 시 yarn add -g typescript
5. vscode extensions
- vscode의 extension에 들어가서(또는 Ctrl + Shift + X) 다음을 깔아준다(선택)
- Auto Rename Tag
- <div> </div> 태그의 앞 뒤를 같이 바꿔준다.
- DotENV
- 환경변수 파일의 syntax 하이라이팅
- ESLint
- eslint라는 코드 문법 설정 라이브러리를 사용 할 때 필요
- HTML CSS Support
- HTML, CSS 자동완성
- Intellicode, vscode-styled-component, Material Icon Theme, One Dark Pro
- Prettier - Code formatter
- 코드를 예쁘게 해주고 일관되게 해주는 것
- settings 에서 format on save 검색 후 Format on save체크하기 (저장시 자동으로 prettier 적용)
- settings 에서 default formatter 검색 후 Default formatter에서 Prettier - Code Formatter로 적용
- 코드를 예쁘게 해주고 일관되게 해주는 것
5. Vite 를 이용한 리액트 프로젝트 시작
cmd를 실행하고 프로젝트를 시작할 폴더로 이동한다. cd <이름> 로 이동이 가능하다.
yarn create vite 를 입력하면 선택 할 수 있는 창? 같은게 나오는데, 프로젝트 이름을 입력하고 framework와 varient를 선택해준다. varient는 일반적으로 javascript, typescript, swc(speedly web compiler)를 이용한 js, ts가 있다. 추천 하는건 swc를 추천한다. (언어는 알아서 맞춰서...)
yarn - vite로 프로젝트를 만들면 패키지가 설치되어있지 않아서 설치해줘야 한다.
code . - cmd에서 해당 경로를 vscode로 연다.
yarn dev 를 통해 실행 할 수 있다.