*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요🌼
좋은 예술가는 품질 도구들에 투자할 것이다. 좋은 ‘웹 개발자’는 직업을 완료하기 위해 가능한 최고의 도구들을 사용할 것이다. 다행히도 대부분의 시간 동안 ‘웹 개발자’로서 당신이 해야 하는 유일하게 중요한 투자는 컴퓨터의 선택이다.
당신이 선호하는 작업 환경에 있거나 기술 개발을 할 수 있는 컴퓨터에 접근할 수 있는 수단을 가진 채 일한다고 가정한다면, ‘웹 개발자’로 기술을 연마할 수 있는 최고의 도구를 사용하고 싶어할 것이다. 아래에 기술되어 있는 5가지는 모든 ‘웹 개발자’가 오랫동안 최상의 작업을 하기 위해 배워야 하는 필수적인 도구들이다.
5. 크롬 개발자 도구 (Chrome Developer Tools)
먼저 배우는 단계에서 실시간의 중요한 핵심 개념에 대한 이해를 강화하기 위해 조사관과 웹콘솔을 사용하는 것은 좋은 방법이다. 해당 개념은 문서 개체 모델(Document Object Model, DOM), CSS Box Model을 사용한 작업을 포함하고, JavaScript 코드 디버깅에 큰 도움이 된다.
이 글을 읽는 ‘웹 개발자’들이 Chrome DevTools에 익숙할 것이라고 생각하지만, 그렇지 않은 사람들을 위한 Chrome DevTools에 액세스하는 방법은 다음과 같다.
macOS를 사용한다면 ⌘+⌥+I(Cmd+Option+I)를 누르고 Windows를 사용한다면 Ctrl+Shift+I를 누르고, 또는 F12를 눌러도 된다. Chrome 메뉴를 통해 탐색하는 것도 가능하지만 속도가 느리다! 메인 브라우저 창에 도킹되거나 팝업되어 나온 아래와 같은 화면을 볼 수 있을 것이다.
개발자 도구 창의 각 부분에 주목하자. 확인할 수 있는 것처럼 여러 탭이 있다. 기본 탭은 요소(Elements)이고, 그리고 내 설정에서는 아래에 JavaScript 콘솔이 있다.
샘플 HTML 파일을 가져오고(또는 무언가를 함께 두드리거나), 크롬에서 열고, 위에 기술된 개발자 도구를 연다. 이를 가지고 놀아보자. JavaScript 콘솔(컴퓨터에서 페이지 프레젠테이션을 조작할 수 있는 REPL)에 있는 DOM 요소를 갖고 오거나 다른 화면에서 HTML이나 CSS를 바꿔보자.
DevTools 작업을 위해서 본인의 웹 문서를 제공할 필요도 없다. 당신이 할 수 있는 정말 재밌는 일은 아무 웹페이지를 열어서 편집하는 것이다. 그렇게 하는 것을 두려워하지 말자! 실제 페이지가 손상되지는 않을 것이고, 그저 일시적으로 새로고침(refresh/reload)을 누르기 전까지 클라이언트 측에서 몇 가지 사항을 변경하는 것일 뿐이다.
요소를 선택하고 텍스트나 배경색의 변경을 시도하자. 너무 지루하다면, 요소를 추가하거나 삭제해도 되고, 전체 페이지의 레이아웃을 변경할 수도 있다. 다시 말하지만 이런 작업을 한다고 해서 실제 페이지가 손상되지 않는다. – 페이지가 새로고침 되기 전까지 당신의 컴퓨터에 띄워진 당신의 웹 브라우저에서만 보여지는 변화일 뿐이다. 그렇다면 지체하지 말고 시도해보자. 원한다면 본 기사의 텍스트를 변경하는 방법을 파악해보아도 좋다.
또한 The React Developer Tools(React 개발자 도구)와 같은 크롬 확장 프로그램을 통해 Chrome Devtools의 기능을 향상시킬 수도 있다.
추후 DevTools의 주요 기능에 대한 튜토리얼을 발표할 예정이다. 그동안 DevTools를 어서 실험해보자!
4. 노드 패키지 매니저 (Node Package Manager, NPM)
최신 웹 어플리케이션을 구축하기 위해선 Node.js로 작업하는 방법을 알아야 한다. 이를 차지하는 가장 큰 부분은 Node Package Manager(NPM)의 기본 구문과 커맨드를 아는 것이다.
· 새로운 Node.js 프로젝트 초기화
· 웹 어플리케이션 개발을 위한 프레임워크, 라이브러리와 기타 도구와 같은 의존성(dependency) 설치
· 설치된 패키지 업데이트
사용법을 알아야 하는 주요 커멘드는 npm install <package_name>, npm init, npm start, 그리고 npm update이다. 전역적으로나 국지적으로나 패키지를 어떻게, 언제 설치해야 하는지 알아야 하고 그것이 무엇을 의미하는지도 알아야 한다. 또한 package.json 파일 작동 방식과 이를 통한 작업 방식에 대해 배워야 한다.
다음은 번번히 실행되는 npm 커맨드 목록이다.
· npm init (현재 디렉토리를 Node.js 패키지/프로젝트로 초기화한다.)
· npm install <package_name> (이는 package_name을 의존성(dependency)처럼 프로젝트에 국지적으로 설치한다. 패키지를 시스템 전체에 설치하고 싶다면 -g flag를 사용하면 된다)
· npm uninstall <package_name> (package_name을 제거한다)
· npmstart (당신의 package.json에서 “start”로 정의된 스크립트를 실행한다)
· npm list (당신의 프로젝트에 있는 모든 의존성(dependencies)을 나열한다. 전역적으로 설치한 패키지의 목록을 보고 싶다면 마지막에 -g를 누르자)
· npm update (모든 패키지를 업데이트한다)
npm에 대해 더 알고 싶다면, 자료를 읽어보자.
3. Git/Github
한 두번의 사소한 변경으로 전체 앱이 손상될까 두려웠던 적이 있는가? 하드 드라이브가 망가지거나 노트북에 커피를 쏟으면 어떻게 될까? 코드 변경을 추적하고 동일한 파일의 다양한 버전을 비교할 수 있는 간단한 방법이 있기를 바라는가? 문제가 발생했을 때 코드베이스의 이전 버전으로 쉽게 돌아갈 수 있는 방법도 있길 바라는가? 다른 개발자들과 코드를 쉽게 공유할 수 있기를 원하는가? 혹은 다른 개발자들의 변경 사항들이 전체 앱을 손상시키지 않도록 하고 싶은가? 그리고 이 모든 훌륭한 기능을 무료 또는 상대적으로 낮은 가격에 사용하고 싶은가?
이 지점에서 git과 같은 버전 컨트롤 시스템이 등장한다. Github는 프로젝트를 호스트하기 위한 플랫폼이다. 대부분의 진지한 개발자들은 Github 계정을 갖고 있고 매일 그들의 저장소에 커밋(commits)을 푸시한다.
잠시만, James – 저장소에 커밋을 푸시한다는 것이 무슨 뜻인가? 대학에서 Github에 대해 처음 들었을 때, 누군가가 커밋을 풍부한 기능을 가진 저장 버튼이라고 설명해주었다. 이러한 설명이 git 커밋의 모든 힘을 정의하지는 못하지만 그럼에도 적절한 비유라고 생각한다. Git 저장소에 변경 사항들을 커밋할 때, 이는 본질적으로 다음과 같이 말하는 것이다. “git, 이 버전의 코드를 코드베이스에 추가하고 변경 사항을 기록하되 모든 이전의 변경 사항들의 기록은 유지해.”
원격 저장소로 푸시할 때마다 많은 커밋을 가질 수 있다. 근본적으로 커밋은 저장이고 푸시는 로컬 저장의 클라우드 백업이다. 이것이 전체 그림은 아니지만, 본 기사의 범위 밖의 git에 대한 많은 것들이 있으니 git 문서를 확인해보자. Git과 Github가 관련되어 있음을 기억할 필요가 있지만, Github는 유명한 원격 git 저장소 호스팅 서비스인 한편 git은 VCS이다.
2. The Command Line
터미널, 프롬프트, 셸 또는 콘솔이라고도 알려진 커맨드 라인은 효과적인 ‘웹 개발자’가 되기 위해선 반드시 마스터해야 하는 기본적인 도구이다. 내 경험 상 기초를 알면 GUI보다 터미널로 작업하는 것이 보통 더 빠르다. 커맨드는 macOS, Linux 배포판 그리고 Windows 각각에서 조금씩 다르지만, 나는 Mac과 PC 시스템, Debian 기반의 Linux 배포판까지도 모두 사용해봤고 상대적으로 커맨드를 빠르게 선택할 수 있다고 안전하게 말할 수 있다.
Bash, zsh, csh, Microsoft PowerShell 등 선택할 수 있는 많고 다양한 셸이 있다. 처음 세 가지는 모두 전통적으로 UNIX 기반 시스템이지만 현재 Mac과 Linux 시스템에서도 PowerShell을 실행할 수 있다!
파일과 디렉토리를 탐색하고 커맨드 라인에서 git과 node를 사용하는 방법을 배우면 이러한 중요한 도구를 배우게 되는 옳은 길에 들어선 것이다! 참고로 다음은 UNIX 셸에서 자주 사용되는 커맨드들이다.
· cd <file_or_directory_path)
· ls
· pwd
· touch <filename>
· mkdir <directory_name>
· sudo <command_requiring_root>
· rm <filename>
· cp <file_or_directory_name> <new_location>
사용 예시
~ $ cd Documents
~/Documents $ pwd
/Users/jybryce/Documents
~/Documents $ ls
document1.docx code sample.txt some_picture.jpg
idk lol stuff
~/Documents $ cd
~ $ pwd
/Users/jybryce
~ $ _
위의 예시 콘솔을 보고 실험을 통해 커맨드가 무엇을 하는 지 알아낼 수 있는지 파악해보자.
커맨드 라인 실험 시 최종 참고 사항: rm과 sudo에 주의하기!
1. Visual Studio Code (VSC)
에디터, 터미널, 작업 중인 프로젝트 일부에 열려 있는 스크래치 파일의 VSC 설정은 파일 탐색기에서 볼 수 있다. 여기서 내가 무엇을 구축하고 있는지 궁금할 것이다. 그러한 파일의 대부분은 미래 기사를 위한 것이다!
마이크로소프트의 Visual Studio Code는 내 생각에는 사용 가능한 텍스트 에디터들 중 최고 중 최고이다. VSC는 이에 대한 전담 기사를 쉽게 가질 수 있다. 실제로 이 사이트 이외의 다른 곳에도 이미 많은 기사들이 있다!
구체적으로, VSC는 확장 기능이 있는 전체 IDE로 변환될 수 있는 코드 에디터이다. 이는 IntelliSense, themes, debuggers, 통합된 터미널, 그리고 Prettier과 같은 모든 종류의 포맷터는 물론 snippets까지 제공한다. 고도의 커스터마이징이 가능하고 git과 Github 계정과 잘 통합되어 개인이 로컬이나 원격 git 저장소에서 쉽게 복제하고, 가져오고, 커밋하고 푸시할 수 있다. 단축키만 알면 거의 모든 것을 키보드에서 작업을 수행할 수 있으며, 많은 것들이 커맨드 팔레트 (Ctrl+P or ⌘+P)를 통해 이루어질 수 있다.
위 기능만으로도 이 도구를 매우 추천한다. 솔직히 내가 사용해본 것 중 가장 강력한 ‘웹 개발자’를 위한 개발 소프트웨어였다!
그리고 이게 끝이다! ‘웹 개발자’로서 잘 배우고 배워야 하는 5가지 도구들이었다. 기사를 즐겁게 읽었기를 바라며, 시간을 내준 것에 대해 감사함을 표한다!
Plainenglish.io에서 더 많은 웹 개발자 콘텐츠를 확인하자. 무료 주간 신문을 구독하고 커뮤니트 Discord에서 글 작성 기회와 조언에 대한 독점적 접근 권한을 얻자.
국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?
