개발자.. 너란놈..

※TypeScript 기본 세팅
    1) 설치 명령어
        - npm i typescript -g
    2) 버전 확인
        - tsc -v
    3) TypeScript init (초기화)
        - tsc --init
    4) VS Code에서 자동 변환 (es5)
        - tsc -w 변환활파일명.ts
    5) VS Code에서 자동 변환 (es6)
        - tsc -w 변환할파일명.ts --target es6

SASS란?

Sass: Syntactically Awesome Style Sheets의 약자로 CSS를 만들 때 좀 더 편리하게 쓸 수 있게 만들어주는 CSS 전처리기 언어 이다.

SASS 설치를 하기 위해서는 Node.js를 설치 하여야 한다.

Node.js 설치 주소

https://nodejs.org/ko

※보통은 안정성이 있는 LTS 버전을 사용하고 신규 버전은 새로운 것들이 추가되어 안정성이 있는 LTS 버전 보다는 안정성이 떨어져서 LTS 버전을 다운로드 받는 것을 추천한다.

node.js를 다운로드 받고 '다음'을 눌러서 설치를 완료하고 나면 '명령 프롬포트' 에서 정상 설치가 되었는지 확인 할 수 있다.

위와 같이 Node가 설치 되면 'npm' 을 사용하여 SASS를 설치 할 수 있습니다.

npm install sass -g

설치가 완료되고 나면 아래와 같이 VS code를 통해서 SASS / SCSS를 사용 할 수 있습니다.

1. VS CODE에서 터미널을 열고 (Ctrl + `)

2. 터미널에 명령어를 입력 합니다.

3. 명령어가 제대로 동작하면 scss 스타일에서 코딩 하는 것을 바로 CSS 전처리기인 SASS가 css로 변환 해줍니다.

VS CODE를 사용하면서 유용한 확장 프로그램을 아래와 같이 정리 하려고 한다.

※추후 다시 세팅을 하기 위한 메모

[ VS CODE 설치 링크 ]

https://code.visualstudio.com/

[ 확장 프로그램 ]

auto rename tag : 여는 태그 변경 시 닫는 태그도 변경됨
community material Theme : VS CODE 테마 추가
ES7 React/Redux/GraphQL/React-Natvie snippets : React할 때 컴포넌트 만들 때 자동으로 만들어짐
ES7 + React/Redux/React-Native snippets : React할 때 컴포넌트 만들 때 자동으로 만들어짐
ESLint : Javascript 잘못 쓸 때 수정 시켜 줌
html tag wrapper : 드래그 후 (컨트롤 + i) 누르면 div로 감싸짐. (auto rename tag와 같이 사용하면 좋음)
indent - rainbow : 들여쓰기 태그 열고 닫고 하는 걸 색상별로 정렬 되어있음.
Material Theme : VS code 테마
Material Theme Icons : VS code 테마 아이콘
Prettier - Code formatter : 코드 이쁘게 정리 하는 것
Tailwind CSS IntelliSense : react 할 때 class 및 코드화 시켜서 바로바로 사용 할 수 있게 쓰는것
vscode-icon : VS code 테마 아이콘
vscdoe-styled-components : react 할때 자동완성 쓸 수 있다.
Live Server : vs code 아래 go Live 생겨서 바로 볼 수 있음 

[VS Code] 확장 프로그램 설치 이후 Setting.json 

{
  "editor.wordWrap": "on",
  "editor.fontFamily": "D2Coding ligature",
  "editor.fontLigatures": true,
  "editor.mouseWheelZoom": true,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.colorDecorators": true,
  "editor.codeLens": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.donotVerifyTags": true,
  "editor.tabSize": 2,
  "prettier.tabWidth": 2,
  "prettier.useTabs": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.quoteProps": "consistent",
  "editor.codeActionsOnSave": {},
  "editor.formatOnSave": true,
  "workbench.startupEditor": "none",
  "prettier.printWidth": 100,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "css"
  ],
  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "window.zoomLevel": 1
}

[VS code] 사용하기 유용한 명령어 정리

GUI 늘리기 : Ctrl 누른 상태에서 + -

텍스트 늘리고 줄이기 : Ctrl + 마우스 휠

터미널 단축키 : Ctrl + `

[VS Code] HTML 입력 시 자동으로 여러개를 만들 수 있는 명령어 모음

html:5 - html5 기본 문법을 자동으로 생성 해줌

.CLASS명 - class명이 입력된 div 태그를 만들어준다.

#ID명 - ID명이 입력된 div 태그를 만들어준다.

.CLASS*숫자 - 숫자만큼 CLASS 태그를 넣어준다.

시멘틱태그 - 시멘틱 태그의 HTML 태그를 자동으로 만들어준다.

시멘틱태그>시멘틱태그 - 부모 시멘틱 태그 안에 자식 시멘틱 태그를 만들어준다.

A[href=''] - A태그의 href를 입력해서 태그를 만들어준다.

[VS Code] CMD를 이용한 Vs code 실행 (폴더 삽입 추가)

1. 폴더를 만들고 싶은 경로로 가서 폴더를 생성한다.

 mkdir 폴더명

2. 새로 생성된 폴더명으로 들어간다.

 cd 신규 생성 폴더명

3. 아래 명령어를 치면 해당 폴더가 열린 vs code가 열리게 된다.

 code .