안녕하세요. 엔지엠소프트웨어입니다. 이 글의 제목과 같이 웹 개발 생산성을 높이기 위한 몇가지 노하우 또는 팁이 있습니다. 알면 괜찮은 팁이지만, 대부분은 잘 사용하지 않고 있기도 합니다. 웹 개발 프로젝트는 대부분 일정이 타이트합니다. 그렇다보니 프로젝트를 관리하기 위한 여러가지 방법들을 도입하기가 어렵습니다. 요구사항 정리부터 프로그램 설계, 코드 작성, 테스트, 배포까지 챙겨야할게 너무나도 많기 때문입니다. 특히나, 프로젝트 매니저는 고객과 미팅도 주기적으로 해야 하고 회사에 보고서도 작성해야 합니다. 이뿐만 아니라 개발자들에게 요구사항 설명부터 기본 구조에 대한 가이드까지 일이 많죠^^;

 

모든 프로젝트가 그렇지만, 일정 관리가 정말 중요합니다. 충분한 프로젝트 기간이 확보되지 않은 환경이라면 이런 노하우를 가진 매니저나 개발자가 어느정도 서포트를 해줘야 합니다. 스크럼 스프린트를 진행한다면 코드 리뷰 후 리팩토링 단계에서 코드 스니펫을 관리하는것도 하나의 중요한 활동이 될 수 있습니다. 그래서, 개발자들이 이런 기능이 있으면 좋겠다라고 생각은 하지만 잘 모르는 코드 스니펫에 대해 알아보도록 하겠습니다. 사실, C#이나 Java 프로젝트에서 이미 쓰고 있는 기능이기도 한데요. 웹 프로젝트를 Visual Studio Code로 개발할 때 알아두면 유용할거 같습니다.

 

Visual Studio Code를 실행하세요. 파일 > 기본 설정 > 사용자 코드 조각 구성을 클릭하세요. 영어 버전은 File > Preferences > User Snippets입니다.

 

 

현재 프로젝트에서만 사용하려면 프로젝트 이름을 선택하시고, 모든 영역에서 사용하려면 "새 전역 코드 조각 파일..."을 선택하세요. 저는 프로젝트로 했습니다.

 

 

react-component-default(아래 스샷과 이름이 다르지만...)로 했습니다.

 

 

react-componet-default라는 사용자 스니펫(User Snippet) 이름을 입력하고 엔터를 치면 주석으로 기본 사용에 대한 예시를 보여줍니다. 사실, 개발자 분들은 아래 예시만봐도 반복적이고 자주 사용되는 컴포넌트 코드를 미리 작성할 수 있을겁니다. 리엑트 컴포넌트를 만들기 위한 기본 코드는 정형화되어 있으니까요^^

{
	// Place your optima 작업 영역 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

 

리액트 컴포넌트를 새로 생성할 때 반복되는 부분을 상용구화하면 아래와 같이 만들 수 있습니다. 참고로 앵귤러나 리액트는 scope이 모두 typescript입니다. 그런데, 리액트의 컴포넌트는 ts가 아닌 tsx를 사용합니다. Pure TypeScript인 경우에는 XML 문법이 있으면 에러가 발생할 수 있습니다. 상호 작용이 필요한 컴포넌트에서는 이런 문제를 발생시키지 않기 위해 별도의 tsx를 사용하며, tsx의 scope은 typescriptreact입니다.

{
	"react-component-default": {
		"scope": "typescriptreact",
		"prefix": "rcd",
		"body": [
			"import React, { Component } from 'react';",
			"import PropTypes from 'prop-types'",
			"",
			"const propTypes = {",
			"",
			"}",
			"const defaultProps = {",
			"",
			"}",
			"",
			"class App extends Component {",
			"",
			"    constructor(props) {",
			"        super(props);",
			"    }",
			"    render() {",
			"        return(",
			"            '<div>Optima Component</div>'",
			"        );",
			"    }",
			"}",
			"",
			"App-propTypes = propTypes;",
			"App.defaultProps = defaultProps;",
			"",
			"export default App;"
		],
		"description": "This is default react-componet code snippet."
	}
}

 

컴포넌트에 새로운 리액트 컴포넌트 타입스크립트 파일을 하나 생성하세요.

 

 

위의 prefix를 입력하면 아래 그림과 같이 코드 스니펫이 표시되고, 선택하면 자동으로 코드가 생성됩니다.

 

 

인텔리센스에 목록으로 표시된 코드 스니펫을 선택하면 아래와 같이 코드가 자동으로 만들어집니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types'

const propTypes = {

}
const defaultProps = {

}

class App extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return(
            <div>Optima Component</div>
        );
    }
}

App-propTypes = propTypes;
App.defaultProps = defaultProps;

export default App;

 

 

마지막으로~ 우리가 생각하는 대부분의 편의 기능은 이미 만들어져 있습니다. 그리고, 사용하기 쉽게 배포되어 있을겁니다. react에서 typescript를 쉽게 사용할 수 있는 방법이 없을까를 고민 해보셨다면 이미 마켓에서 검색을 해보셨을겁니다. 역시~ 예상한대로 이미 존재하는군요^^

 

 

이미 다 만들어져 있기 때문에 잘 사용만 하면 될거 같습니다.

 

 

tsrcfull 프리픽스를 입력하면 아래와 같이 자동 코드가 생성됩니다.

import * as React from 'react';

export interface IAppProps {
}

export interface IAppState {
}

export default class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props);

    this.state = {
    }
  }

  public render() {
    return (
      <div>
        
      </div>
    );
  }
}

 

 

다음은 사용 가능한 모든 스니펫 목록과 각 스니펫의 트리거입니다. →는 TAB 키를 의미합니다.

Trigger	Content
tsrcc→	class component skeleton
tsrcfull→	class component skeleton with Props, State, and constructor
tsrcjc→	class component skeleton without import and default export lines
tsrpcc→	class purecomponent skeleton
tsrpcjc→	class purecomponent without import and default export lines
tsrpfc	pure function component skeleton
tsdrpfc	stateless functional component with default export
tsrsfc	stateless functional component
conc→	class default constructor with props and context
cwm→	componentWillMount method
ren→	render method
cdm→	componentDidMount method
cwrp→	componentWillReceiveProps method
scu→	shouldComponentUpdate method
cwu→	componentWillUpdate method
cdu→	componentDidUpdate method
cwum→	componentWillUnmount method
gdsfp→	getDerivedStateFromProps method
gsbu	getSnapshotBeforeUpdate method
sst→	this.setState with object as parameter
bnd→	binds the this of method inside the constructor
met→	simple method
tscntr→	react redux container skeleton
imt	Сreate a import

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0