프론트엔드 개발/도구 (Tool)

VSCode 스니펫 생성하기

스니팻 생성 https://snippet-generator.app/ 사이트에 접속한뒤 원하는 템플릿 구조를 왼쪽에 작성합니다. Description : 설명을 작성합니다. Tab trigger : 저장한 템플릿을 한방에 불러올 마법의 단어를 작성합니다. Your snippet :저장할 템플릿을 입력합니다. 2-2. vscode 로 돌아와서 File > Preferences > User Snippet 을 클릭하면 상단에 사용할 언어를 쓰면됩니다. 참고로 VSCode 에서 맥북 기준으로 Command+Shift+P 를 누르고 Snippets 까지 입력하는게 빠릅니다. (커맨드 꼭 외우는걸 추천) 자바스크립트 리액트라면 javascriptreact.json 을 선택 후 사이트에서 변환된 코드를 삽입해주면 됩니..

gulp 모듈 - Node.js기반 프로세스 자동화 도구

gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을 변경 시 css가 자동으로 엎어쳐지게 만들 것이다. 설치 방법 : npm 또는 yarn을 통해 패키지를 설치해주면 된다. (게시물 하단 참고) 사용 방법 : gulp에서 수행하는 작업단위(Task)를 gulpfile.js에 작성한다. API : series() : 순차적으로 Task를 수행 parallel() : 동시에 최대한 많은 Task를 수행 src() : 주어진 경로의 파일을 Readable Node.js Stream 생성 dest() : 주어진 경로의 파일에 Writeable No..