-
[VSCode] Code Snippets 기능 사용해보기(+ Reacjs code snippets 사용법)Dev 2019. 11. 3. 14:02
Code Snippet
snippet은 `개발자의 반복 타이핑을 회피할 수 있도록 재사용 가능한 소스 코드 단편`을 의미합니다.
워드나 한글에서 사용하던 상용구.. 라고 생각하면 좀더 쉬울까요?
snippet을 사용하면 반복되는 작업, 이를테면 HTML의 경우
<!DOCTYPE html> <html lang="ko"> <head> <meda charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>이렇게 매번 작성해주어야 하는 번거로운 작업을 간단한 명령어로 대신할 수 있다는 것입니다.
한번 snippet을 사용해 볼까요?
코드 에디터인 VSCode, Brackets 등등... 에서는 개발자들이 만든 플러그인을 설치하여 다양한 기능을 사용해 볼 수 있습니다. VSCode에서
플러그인 검색창에서 snippet을 검색해 봅시다. 캡처상 짤린 부분이 많지만
자바스크립트, HTML, Reactjs, Eno 등등... 다양한 snippet이 준비되어 있습니다.
저는 마침 리액트를 공부하고 있으니 Reactjs code snippets을 사용해 보겠습니다.
이 친구를 설치해줍시다.
플러그인 세부 정보에 사용법과, 상용어구 목록이 나열되어 있습니다.
rcc→ class component skeleton rrc→ class component skeleton with react-redux connect rrdc→ class component skeleton with react-redux connect and dispatch rccp→ class component skeleton with prop types after the class rcjc→ class component skeleton without import and default export lines rcfc→ class component skeleton that contains all the lifecycle methods rwwd→ class component without import statements rpc→ class pure component skeleton with prop types after the class rsc→ stateless component skeleton rscp→ stateless component with prop types skeleton rscm→ memoize stateless component skeleton rscpm→ memoize stateless component with prop types skeleton rsf→ stateless named function skeleton rsfp→ stateless named function with prop types skeleton rsi→ stateless component with prop types and implicit return fcc→ class component with flow types skeleton fsf→ stateless named function skeleton with flow types skeleton fsc→ stateless component with flow types skeleton rpt→ empty propTypes declaration rdp→ empty defaultProps declaration con→ class default constructor with props conc→ class default constructor with props and context est→ empty state object cwm→ componentWillMount method cdm→ componentDidMount method cwr→ componentWillReceiveProps method scu→ shouldComponentUpdate method cwup→ componentWillUpdate method cdup→ componentDidUpdate method cwun→ componentWillUnmount method gsbu→ getSnapshotBeforeUpdate method gdsfp→ static getDerivedStateFromProps method cdc→ componentDidCatch method ren→ render method sst→ this.setState with object as parameter ssf→ this.setState with function as parameter props→ this.props state→ this.state bnd→ binds the this of method inside the constructor disp→ MapDispatchToProps redux function 설명이 좀 어렵죠?
그중 간단한 클래스형 컴포넌트를 만들어주는 rcc를 사용해 봅시다.
빈 js코드에 rcc를 입력해 주면,
요로코롬 Creates a React component class ... 라는 자동완성이 생깁니다.
이를 선택해 주면
이렇게 자동으로 빈 클래스형 컴포넌트가 생성되게 됩니다.
이 코드를 일일이 쳐 주는것도 리액트 이해에 도움이 되긴 하겠지만,
이미 숙달이 되어있다면 굳이 일일이 쳐주는 건 귀찮은 작업이겠죠?
이럴 때에 Snippet을 사용하면 아주 편하게 소스 코드를 작성할 수 있습니다!
'Dev' 카테고리의 다른 글
윈도우 골수 유저의 Mac 구매 후기 (0) 2019.11.21 [Github] gitignore 쉽게 추가해주는 사이트 추천(http://gitignore.io/) (0) 2019.11.14 [Github] Readme에 이미지 파일 쉽게 넣는 방법 (0) 2019.10.24 [Git] 여러 줄의 커밋(commit) 메시지 추가하기 (0) 2019.10.23 칸반이란? (Feat. 애자일) (0) 2019.10.21
