* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.
* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.
import alias
스니펫(Snippet)
-
자주 사용하는 코드 조각을 저장하고 쉽게 재사용할 수 있도록 한 코드 블록.
-
반복적으로 사용하는 HTML, CSS, JavaScript 코드 등을 빠르게 삽입하는 용도로 활용.
-
개발 효율성을 높이고, 코드 작성 속도를 빠르게 하는 데 유용.
ES7+ React/Redux/React-Native snippets
-
스니펫에 대한 이해를 빠르게 하기위한 참고자료.
-
ES7+ React/Redux/React-Native snippets은.. VSCode에서 지원하는 스니펫 확장 프로그램이다.
-
가령 React.js에서 컴포넌트를 하나 만든다고 생각해보자.
-
React 기본 모듈도 불러오고, 화살표 함수를 선언한 뒤에 JSX 방식으로 하나하나 코드를 작성해줘야 한다.
-
그런데 컴포넌트의 기본 틀은 모두 동일하다. 이럴 때 스니펫을 쓸 수 있다.
-
코드 입력창에 rafce를 입력하고 불러와주면, 스니펫에 저장되어있는 기본 화살표 함수 컴포넌트가 자동으로 입력된다.
rafce
import React from 'react';
const ComponentName = () => {
return (
<div>
ComponentName
</div>
);
}
export default ComponentName;-
이외에도 상황에 맞는 수많은 스니펫들이 존재한다. prop를 받는 컴포넌트, useState 혹은 useEffect가 기본적으로 선언된 컴포넌트 등등..
-
요 확장 프로그램은 React.js 말고도 기본 HTML, JS 등도 스니펫으로 지원해준다.
-
당연하지만 이 녀석 이외에도 다른 스니펫 확장 프로그램들도 존재하기 때문에 자기 취향에 맞춰 가져다가 쓰면 된다.
react-query
모킹
