티스토리 뷰

개발을 하기 위한 준비물은 다 챙긴것 같고 이제 개발환경을 만들어야 하는데 일단 이 개발환경은 Windows 운영체제 기준으로 만들것이므로 본인이 혹시 Mac OS 유저라던지 Linux 유저라던지 하는 분들은 나도 어쩔 수가 없다. 알아서 만들어보도록 하자.

 

일단 개발환경을 만들기전에 우리는 CMD(Command)라는 것을 알아야한다. 이걸 보고 명령 프롬프트라고 부르는데 검정바탕에 하얀 글씨가 떠있고 마우스 없이 키보드만으로 명령어를 입력해야하는 그런게 있다. 맥 OS에서는 터미널이라고 부른다. 암튼, 그걸 실행하도록 하자.

 

윈도우키 + R을 입력하자.

 

이 두개의 키를 동시에 입력하란 말이다.

그러면 "실행"이라는 창이 등장한다.

거기에 cmd라고 입력하면 아까 말한 검정화면이 등장할거다.

개인정보가 될만한 문구는 Blur 처리하였습니다.

이렇게 등장한 검정화면은 처음 보는 사람에게는 굉장히 당황스러울 수 있지만 겁먹지 말자. 은하수를 여행하는 히치하이커를 위한 안내서의 뒷 표지에 있는 글귀를 기억하자.

Don't Panic! 당황하지 마시오.

전혀 당황할 필요가 없다. 단지 마우스를 쓸 수 없고 키보드의 명령어만으로 동작하는 어떤 프로그램이라고 생각하면 간단하다. 오타가 생겨서 이상한 메시지를 뿜어도 걱정하지 않아도 괜찮다. 크게 문제가 생기거나 하지 않는다.

 

개발환경을 만들기 위해서는 이 명령 프롬프트에서 몇가지 사용법을 알아둬야하는데 기초적인 사용법은 여기를 클릭하면 도움이 될거라고 생각한다. 뭐 주로 사용하는 명령어는 "cd" 뿐이겠지만..

 

명령 프롬프트를 활용하기 위해 프로젝트 폴더를 하나 만들어보도록 하자.

나는 funny-picture라는 폴더를 하나 만들었다. 그리고 여기 3개의 디렉토리를 만들건데 하나하나의 이름은 "user-front", "back-front", "back-api"로 각각의 역할에 맞는 이름으로 만들어주도록 하자.

아, 내가 D 드라이브에 개발 폴더를 만들었다고 자신도 D 드라이브에 만들 필요없다. C 드라이브가 좋으면 거기에 대충 만들자. 나는 D 드라이브가 좋고 거기에 Study 폴더가 있어서 그 안에 프로젝트 폴더를 만든거지 다른 이유 없다.

암튼 이렇게 폴더 3개를 다 만들었으면 명령프롬프트를 이용해 개발환경을 만들어볼거다.

명령프롬프트로 드라이브를 이동하고 폴더를 이동한 이미지

일단 위의 이미지에서 빨강 사각형은 내가 손으로 입력한 명령어들과 "dir" 명령어를 통해 우리가 방금 만들었던 폴더 3개를 확인할 수 있음을 보여준다. 내가 그저 입력한 명령어를 우리가 알아들을 수 있는 말로 설명해보자면 아래와 같다.

잘 안보이면 클릭해서 확인해라

 

위에서 자주 등장한 명령어인 "cd"란 "change directory"의 약어로 폴더를 이동하겠다는 명령어다. 이렇게 이동했으면 저 위치에서 몇가지 명령어를 입력해보자.

$ npm install -g vue-cli

위에 있는 "$" 는 "D:\07.Study\funny-picture" 와 같이 앞에 붙어있는거 적기 귀찮아서 "$"로 생략한거다. 그냥 그렇게 알고 있으면 된다. 암튼 저렇게 입력하고 엔터를 치면 막 혼자서 이상한 행동을 할거다.

 

우리가 이전에 설치했던 Node.js 안에는 npm 이라고 부르는 명령어가 같이 따라오는데 이것은 온라인 상에 있는 개발용 유틸들을 다운로드 하거나 제거하거나 하는 메니저 역할을 해준다. 그래서 저걸 우리말로 번역하면 "npm아 vue-cli 라는 패키지를 전역환경(-g)에 설치(install)해줘"라는 뜻이고 여기서 전역환경이란 본인이 어느 폴더에 있든지 vue-cli에 있는 명령어를 사용할 수 있도록 만들어달라는 이야기다.

 

이렇게 명령어 실행이 끝났다면 다시 명령어를 하나 입력하도록 하자.

$ vue init nuxt-community/starter-template user-front

vue 라는 명령어는 아까 설치한 vue-cli를 설치하면 사용할 수 있게 되는 명령어인데 위와 같이 입력하고 엔터를 치면 컴퓨터가 알아서 무슨 동작을 할거다. 저 명령의 의미가 뭐냐하면 "vue야 user-front 폴더에다가 nuxt-community에 있는 starter-template을 초기화(init) 해줘"라는 뜻인데 starter-template는 Nuxt.js를 시작하기 위한 기초 템플릿이다.

 

명령을 입력하면 몇가지 질문들을 하게 되는데 영어를 읽고 침착하게 대답해주면 된다. 나는 위의 이미지 처럼 대답했고 To get started 아래의 명령을 입력했다. 아참, Author 항목엔 이메일을 입력해줘야하는데 내 이메일은 왠지 노출되기가 꺼려져서 Blur 처리했다. 나중에 공개 할만한 이메일 주소를 만들게 되면 공개하도록 하겠다.

 

암튼, "cd user-front"를 한 뒤에 "npm install"을 실행하면 막 뭘 하다가 아래의 이미지처럼 있어보이는 화면이 연출될거다.

 

자 이제 "npm run dev"라는 명령어를 입력해보자.

 

막 이런 화면이 등장하면서 이것저것 작업을 수행할텐데 중요한건 저 "Listening on: http://localhost:64700" 이라는 부분이다. 브라우저에 주소입력란에 "http://localhost:64700" 이라고 입력해보자.

이렇게 막 화면이 등장하는 것을 확인할 수 있다. 위와 같은 방법으로 똑같이 back-front도 만들어보도록 하자.

 

아참, 아까의 명령프롬프트에서 컨트롤 + C 를 누르면 아래의 이미지 처럼 프로그램이 종료된다.

프로그램이 종료되면 브라우저에 사이트가 열리지 않게 된다.

 

이렇게 된다는 점 알고있으면 도움이 된다.

 

자, 아래의 명령어를 순서대로 입력하면서 back-front를 셋팅하자.

$ cd ..
$ vue init nuxt-community/starter-template back-front

"cd .." 명령에서 "..(쩜쩜)"은 자신이 위치한 폴더보다 상위 폴더를 의미한다. 다들 현재 있는 폴더의 위치가 funny-picture 폴더 안에 있는 user-front 였을텐데 쩜쩜은 그 보다 위에 있는 funny-picture 폴더를 의미하게 된다.

 

그런 다음 back-front에 초기화를 하도록 하자.

 

나는 위처럼 셋팅했다. To get started 아래에 있는 명령어를 입력해서 실행하면 아까처럼 서버가 동작하게 될거다.

 

오늘은 프론트엔드 개발환경을 꾸며보았으니 다음 시간엔 API 서버를 위한 back-api 환경도 꾸며보도록 하자.

 

오늘은 이만. 안녕!

댓글
댓글쓰기 폼