본문 바로가기

Web Front-End/기타

(2)
Babel 이란? 운영하고 있는 웹 프로젝트의 덩치가 커지다 보니.. 바벨을 어느정도 다룰 수 있어야겠다.. 정리 고고.. 바벨 공식 사이트 1. 바벨이란? -> 입력과 출력이 모두 자바스크리브 코드인 컴파일러다. 고수준의 언어를 저수준의 언어로 변환되는데 보통의 컴파일러와 비교된다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나 현재는 바벨을 이용해서 리액트의 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법 등을 사용할 수 있게 해준다. 2. 바벨을 실행할 수 있는 방법 1) @babel/cli로 실행하기 2) 웹팩에서 babel-loader로 실행하기 3) @babel/core를 직접 실행하기 -> 바벨을 설치하기 위해서는 npm을 통해 @babel/cor..
VSCode Extentions (유용한.. 익스텐션) 1. Active File In StatusBar - 현재 파일 경로를 바 형태로 보여주는 확장팩 2. Auto Rename Tag - div, p, 와 같이 쌍으로 닫는 태그중 하나만 수정해도 쌍으로 쑤정해준다. 3. Better Comments - 주석 룰에 따라 색을 표시해줌.. 은근 유용함 4. Bracket Pair Colorizer - 같은 블럭 끼리 색을 표시해준다. 5. ES7 React/Redux/GraphQL/React-Native snippets - 리액트에서 일부 이니셜만 입력하면 코드 조각을 제공해준다. 6. ESLint - ESLint를 설치해야하고 VSCode 확장팩을 설치해야.. 코딩컨밴션 효과를 극대화할수 있다. 매우 유용 7. Highlight Trailing White ..