웹 개발자의 작업 흐름을 가속화하기위한 도구 및 접근 방식

웹 개발은 엄청난 양의 스택, 도구, 프로그래밍 언어 등을 함께 번들로 제공합니다. 여기에있는 일부 도구 / 워크 플로는 경우에 따라 작동하고 다른 경우에는 작동합니다. 더 나은 접근 방법을 위해이 게시물을 WordPress Front-End 개발자의 관점에서 작성한 것으로 간주하십시오. 도구는 매우 광범위하고 많은 경우에 사용될 수 있습니다.

1 – tmux

내 작업 과정에서 가장 큰 변화 중 하나는 내 컴퓨터에 tmux를 설정할 때였습니다 (macOS는 물론 Linux에서도 작동합니다). 진정한 잠재력을 활용하지 못할 수도 있지만 훌륭한 작업을 수행하고 프로젝트간에 즉시 전환 할 수 있으므로 많은 시간이 절약됩니다.

tmux에는 체크 아웃 할 프로젝트의 GitHub 저장소에 긴“시작하기”페이지가 있습니다. 또한 활성화 할 수있는 마우스 지원과 함께 상자에서 바로 키보드로 작동합니다. tmux는 즉각적인 설정을 위해 시스템간에 공유 할 수있는 구성 파일을 사용합니다.

그렇다면 내 작업 흐름이 어떻게 바뀌 었습니까?

• tmux는 두 번의 키 누르기만으로 화면을 분할하고 프로젝트 내에서 탐색하는 쉬운 방법을 제공합니다. 따라서 한보기에서 실행되는 "gulp", 다른보기에서 실행하는 명령, 세 번째에서 서버에 대한 SSH, 네 번째보기에서 실행되는 일부 통계를 가질 수 있습니다.
• "탭"과 같은 각 프로젝트에 대한 창을 제공합니다. 여기에서 두 개의 키를 눌러 다른 프로젝트로 전환 할 수 있습니다. 저는 항상 약 20 개 이상의 프로젝트가 탭에 열려 있고 새 프로젝트에서 작업해야 할 때 거기로 전환하기 만하면 꿀꺽 꿀꺽 벌써 실행 중입니다. 나는 올바른 디렉토리에 있으며 2 초 이내에 작업을 시작할 수 있습니다.
• 항상 전체 설정을 유지합니다. 작업을 시작할 때마다 할 필요는 없으며 항상 거기에 있습니다. 컴퓨터가 꺼지고 다시 부팅하면 표준 설정으로 "부활"(간단한 플러그인 사용) 할 수 있으며 약 5 초 후에 다시 작동합니다. 그래도 I7-9900K에서 100 % 사용하는 것이 재밌습니다.
• 창의 각 패널은 고유 한 인스턴스입니다. 따라서 각 패널에 대해 다른 노드 버전을 쉽게 실행할 수 있습니다.

출처

2 – Alfred (또는 대안)

Alfred는 Mac 용 "생산성 앱"이며 Windows 및 Linux에서도 동일합니다. Alfred가하는 일 중 일부는 다음과 같습니다.

• 몇 글자 만 입력하면 열려있는 프로그램에 빠르게 액세스 할 수 있습니다.
• 디렉토리로 빠르게 이동
• 팝업에서 직접 필요한 것을 찾을 때까지 탐색
• 다른 프로그램으로 파일 열기
• 통합 된 웹 또는 프로그램 등을 검색합니다.

파워팩에는 작업을 자동화 할 수있는 다른 많은 "워크 플로우"통합이 있습니다.

또한 계산기에 빠르게 액세스하고, OS 전체에서 스 니펫을 관리하고 (액세스 할 필요도없고, 자동으로 확장하기 만 함) 클립 보드 기록을 저장하고 (인명 구조자) 터미널과 통합하는 등의 작업을 수행합니다. 앱 사이트에서 모든 정보를 찾을 수 있습니다.

사용 방법 :

• 물론 먼저 앱을 엽니 다. 아이콘에있는 포인터로 클릭하는 것이 아니라 문자를 입력하기 만하면됩니다.
• CSS를 작성할 때 계산기로 사용하십시오 (EM 값과 함께 자주 발생).
• 클립 보드 기록 – 때때로 클립 보드에 5-6 개의 항목을 쌓은 다음 필요할 때마다 코드 편집기에 붙여 넣습니다. 또는 며칠 전으로 돌아가 이메일, 스 니펫 등을 찾거나 한 프로젝트에서 작업을 수행하고 다른 프로젝트에서 도움이 될 작은 기능을 찾으십시오. 코드를 찾는 데 10 분 이상 걸리지 않고 2-3 초가 걸립니다.
• 설계 작업을 수행 할 때 작업 디렉토리로 이동하거나 파인더를 검색하지 않고 XD 파일로 직접 이동합니다. 파인더에서 다시 2-3 초가 걸립니다.
• 스 니펫 – 결과 스크린 샷, 커밋 링크를 추가 할 위치, 다음 개발자에게 보내는 메시지, 스테이징 중인지 여부 등이 포함 된 멋진 Asana 용 "코멘트"스 니펫을 준비했습니다. 이것은 팀이 쉽게 팔로우하는 모든 댓글에 대해 일관된 메시지입니다. 스 니펫을 입력하고 펼치는 데 2 ​​초도 걸리지 않습니다.

3 – 터미널 도구 / 플러그인

Oh My Zsh – 터미널을 유용하게 만드세요 – ZSH는 보물입니다. 선택할 수있는 270 개 이상의 플러그인이 있습니다. 이전 설정에서 새 설정으로 마이그레이션하는 데 몇 분 밖에 걸리지 않는 간단한 구성 파일을 사용합니다. tmux는 동일한 작업을 수행하므로 전체 개발 설정이 몇 분 밖에 걸리지 않았습니다. 엄청나게 많은 플러그인 중에서 선택할 수 있으므로 워크 플로에 유용한 것을 확실히 찾을 수 있습니다.

내가 활용하는 ZSH에서 가장 자주 사용되는 플러그인 중 하나는 "Z"로, 사물에 액세스하는 데 사용하는 경로를 학습합니다. 그런 다음 몇 가지 주요 문자를 사용하여 원하는 곳으로 이동합니다.

예 : $z te 는 /folder/path/inner/more/content/testing – 이전에 갔던 바로 가기입니다. 디렉토리 사이를 쉽게 이동할 수 있습니다.

exa – 더 예쁜 LS 출력. 웹 사이트에서 더 많은 정보를 찾을 수 있습니다. 간단히 말해서, 파일과 디렉토리의 빠르고 멋진 출력을 제공합니다. 다시 – 예쁘다.

ripgrep – 초고속 검색. 수천 줄의 코드로 수천 개의 파일을 찾아야 할 때 너무 많이 기다리면 안됩니다. Ripgrep이 당신을 구하기 위해 여기에 있습니다. 물론 다른 유용한 기능과 함께 사용할 의미있는 플래그도 많이 제공됩니다. 또한 결과를 의미있게 유지하기 위해 .gitignore 파일을 따릅니다.

출처

git-open – Github에서 Paul Irish가 작성한 작은 도구로 git 저장소를 엽니 다. 당신이 말할 수있는 큰 문제는 무엇입니까? 6 개월 만에 처음으로 작업 한 프로젝트의 정확한 URL을 기억하십니까? 탐색하는 데 얼마나 걸리나요? 이 명령을 사용하면 직접 열립니다. 그리고 더 많은 것 – 그것은 또한 당신을 올바른 브랜치로 이동시킬 것입니다.

귀하의 CLI! 제 경우에는 WordPress를 중심으로 작업합니다. WP 설치와 함께 작업 할 수있는 CLI로서 행복합니다. 간단한 새 사이트 설정은 mkdir (폴더 만들기), git clone (repo 복제), wp core 다운로드, wp db create, wp db import (모두 WP-CLI에서)와 같은 기본 명령을 사용합니다. 모든 것을 입력하고 빠른 구성을 입력하면 1 분 후에 새로운 설정이 실행됩니다.

사용중인 도구와 함께 작동하는 다른 유사한 CLI가 있는지 다시 확인하십시오!

출처

4 – VS 코드 플러그인

코드 편집기 / IDE에 대한 내 선택은 VS Code입니다. 이전에는 숭고했지만 더 강력한 시스템을 사용하면 더 큰 문서를 아래로 스크롤 할 때 이전에 얻었던 3FPS없이 VS 코드를 제대로 사용할 수 있습니다.

아래 목록의 경우 ESLint, GitLense 또는 테마 / 아이콘 팩과 같은 매우 유명한 확장을 사용하지 않을 것입니다.

• 자동 닫기 태그 – 매번 닫기 태그를 작성할 필요가 없습니다. Emmet으로 깨끗한 HTML을 할 때는 쓸모가 없지만 빠른 편집을해야 할 때 도움이됩니다.
• 자동 이름 바꾸기 태그 – 편집 할 때도 매우 유용합니다. 닫는 / 여는 태그 중 하나만 편집하면 직접 변경됩니다.
• 코드 맞춤법 검사기 – 이제 오타로 무언가를 작성했을 때 PR에서 당황 할 필요가 없습니다. 또는 오픈 소스 프로젝트를 위해 멋지고 예쁘게 유지하는 데 사용하십시오.
• 중복 작업 – 기존 파일에서 새 파일을 만드는 데 매우 유용합니다. Cmd + P로 실행하는 명령입니다. 프런트 엔드 작업에서 새 sass / js 파일을 만드는 데 효과적입니다.
• Jumpy – 멋진 도구! 정의한 단축키를 누르기 만하면 각 단어 옆에 작은 두 개의 글자 상자가 출력됩니다. 입력하면 커서가 해당 위치로 이동합니다. 마우스를 사용하지 않고 파일을 빠르게 탐색 할 수있는 방법입니다.

프로 팁 / 알림 – VS 코드에서 이미지를 미리 볼 수 있습니다. UI를 개발하고 디자이너의 이미지를 따를 때 뷰포트로 드래그하여 측면에서 볼 수 있습니다.

간단히 말해서 :

놀라운 도구와 도구가 가득합니다. 반복적 인 작업을 발견하거나 "더 쉬운 방법이 없을 것"이 궁금 할 때마다 검색 만하십시오! 실제로 더 빠른 방법이 있습니다. 일년 내내 몇 번 그렇게하면 매우 빠른 속도로 작업을 생성 할 수있는 멋지고 긴밀한 워크 플로우로 끝납니다.

가능하면 몇 가지 "안전 조치"도 찾으십시오. linting을 설정하고, 빌드 설정을 자동화하고, 작업 할 "스타터 템플릿"을 빌드하고, 자신을 위해 약간의 CLI를 작성할 수도 있습니다.