폴더 생성 및 터미널 활용 - by. UXKM

요약 설명

Gulp를 세팅하기 위한 첫 번째 순서입니다.
Window OS 기준으로 진행되며, 프로젝트 폴더를 생성을 시작으로 Gulp의 여정을 시작합니다.

2.1.1. 프로젝트 폴더 생성

자유로운 이름으로 Gulp를 설치할 폴더를 생성합니다.
Gulp 강의를 따라 세팅한 결과물 Gulp 기본 폴더로 하여 추후 복사해서 재사용 할 수도 있습니다. 적절한 경로에 폴더를 생성해서 세팅하시길 바랍니다.

UXKM은 폴더명을 임시로 _gulp_setting으로 지정하였지만, 폴더명의 첫 번째 글자를 밑줄( _ )로 생성하는 것을 권장하지 않습니다.
(이하 커리큘럼에서는 gulp_setting 폴더로 명칭을 통일하여 설명합니다.)

생성한 폴더를 각자 사용하는 에디터기에서 오픈합니다.
에디터기는 두가지를 추천합니다.

  • 무료 에디터기 - VS Code (Visual Studio Code)
    비주얼 스튜디오 코드 또는 코드는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기입니다. 디버깅 지원과 Git 제어, 구문 강조 기능, SSH 접속 등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있습니다.
  • 유로 에디터기 - WebStorm
    웹스톰(WebStorm) 은 HTML 편집기가 포함된 자바스크립트 IDE(Intergrated Development Environment)로 IntelliJ IDEA 플랫폼 위에 구축되었고 비주얼 스튜디오나 이클립스와 같은 프론트엔드 개발에 최적화 된 통합개발환경을 제공합니다.

2.1.2. 명령프롬프트(Terminal, 이하 터미널) 활용

요약 설명

Gulp를 세팅하려면 터미널을 이용하여 필요한 명령을 입력하고 여러 패키지를 설치해야합니다.
터미널을 처음 써보는 상황이라면 조심스럽고 겁이 날 수 있습니다. 잘못된 명령어 입력 시 바로 에러메시지를 띄우기 때문에 과감하게 사용해도 문제 없습니다.

gulp_setting 폴더 위치에서 터미널을 열어야 합니다. DOS모드의 폴더 탐색 명령어(cd 폴더명/cd..)를 모르는 분은 아래를 따라하면 됩니다.
만약 사용하는 에디터기에서 Terminal 기능을 지원하면 에디터기에서 직접 Terminal을 사용하는 것을 추천합니다.

에디터기에서 터미널 열기 (추천)

Window, Mac 상관없이 편리하게 프로젝트 폴더 기준으로 터미널을 사용할 수 있기 때문에 이 방법을 추천합니다.
만약 사용하는 에디터기에서 터미널 기능을 지원하지 않을 경우 아래 각자의 운영체제에 맞는 터미널 실행 방법을 참고하세요.

  1. 웹스톰에서 터미널 열기

    웹스톰 하단 Terminal 텝을 클릭하여 사용하면 됩니다.

    웹스톰에서 Terminal 열기
  2. VS Code에서 터미널 열기
    VS Code에서 Terminal 열기

window에서 터미널 열기

  1. window 기본 터미널 열기

    검색 텝(단축 키 : + S)에서 cmd 입력 후 엔터
    이 방법으로 터미널 열면 프로젝트 폴더까지 스스로 접근해야 하므로 아래 해당 폴더에서 바로 터미널을 여는 방법을 추천합니다.

    window 기본 Terminal 열기
  2. 해당 폴더에서 터미널 열기

    해당 폴더에서 주소창에 cmd 입력 후 엔터

    window 해당 폴더에서 Terminal 열기
  3. 해당 폴더에서 Windows PowerShell 열기

    해당 폴더에서 [파일 > Windows PowerShell 열기] 메뉴 클릭

    window 해당 폴더에서 PowerShell 열기

mac에서 터미널 열기

  1. 검색을 이용하여 터미널 열기

    우측 상단 메뉴바에서 돋보기 모양의 아이콘을 클릭하거나 단축키 Cmd + Space를 입력하여 Spotlight Search를 엽니다.
    Spotlight Search에서 terminal을 입력하고 검색결과의 terminal을 클릭합니다.
    이 방법은 프로젝트 폴더까지 찾아가야 하는 번거로움이 있으므로 하단 '3. Finder에서 터미널 열기' 방법을 추천합니다.

    mac에서 검색을 이용하여 Terminal 열기
  2. Launchpad에서 터미널 열기

    Dock에 있는 Launchpad 아이콘을 클릭하거나 단축키 Fn + F4를 입력하여 Launchpad를 엽니다.
    Launchpad 메뉴의 기타 그룹안에 있는 터미널 아이콘을 클릭합니다.
    이 방법은 프로젝트 폴더까지 찾아가야 하는 번거로움이 있으므로 하단 '3. Finder에서 터미널 열기' 방법을 추천합니다.

    mac에서 Launchpad을 이용하여 Terminal 열기
  3. Finder에서 터미널 열기 (mac 추천)

    Mac OS에서 이 기능은 기본 기능이 아니므로 몇 가지 설정을 진행해야 합니다.

    • 왼쪽 상단 메뉴에서 Finder > 서비스 > 서비스 환경설정을 클릭합니다.
    • 환경설정 창의 단축키 텝으로 이동하여 서비스 > 폴더에서 새로운 터미널 열기 항목을 활성화하고 터미널을 열 때 사용할 단축키를 설정해 줍니다.
      UXKM은 Shift(⇧) + Command(⌘) + T로 지정하였습니다.
    Finder에서 Terminal 열기 세팅 시작

    앱 단축키 > + 버튼을 클릭하여 항목 추가 화면을 띄웁니다.

    • 응용 프로그램 : Finder를 선택합니다.
    • 메뉴 제목 : 방금 활성화시켰던 '폴더에서 새로운 터미널 열기'를 입력합니다.
    • 키보드 단축키 : 방금 설정한 것과 동일하게 Shift(⇧) + Command(⌘) + T를 입력합니다.
    Finder에서 Terminal 열기 세팅

    여기까지 설정을 마치고 Finder에서 터미널을 열고 싶은 폴더를 선택한 뒤 Shift(⇧) + Command(⌘) + T를 입력합니다.
    Window에서 폴더 위치 기준으로 터미널을 여는 것과 마찬가지로 Mac에서도 폴더 위치를 기준으로 터미널이 열립니다.

    Shift(⇧) + Command(⌘) + T를 이용하여 Terminal 열기
  4. 터미널에 해당 폴더 드레그 하기

    1회 성으로 사용할 수 있는 간단한 방법입니다. 이 방법보다는 위 'Finder에서 터미널 열기'를 추천합니다.

    • 검색 또는 Launchpad를 이용하여 터미널을 열고 cd를 입력 후 Space를 입력합니다.
      (cd 옆에 한 칸이 띄워 저 있어야 합니다.)
    • Finder에서 해당 폴더 아이콘을 터미널로 드래그한 후 Enter를 칩니다.
    Terminal에서 해당 폴더 드레그하여 위치 찾아 가기