웹개발 생초보 : Vuetify 사용환경 만들기-2편
NPM 설치 / Vue CLI3 설치 / IDE 세팅 까지
인터넷에 자료들도 많으니. Vuetify 프레임워크를 사용해서 간단히 내가 원하는 디자인을 만들어볼 수 있지 않을까? 하는 생각에 시작해보는 실험.
1편 내용 : IDE 설치, Git과 Git GUI 설치, Node.js 설치하기
https://brunch.co.kr/@clay1987/86
4. Node.js 설치 후 - NPM 설치 확인
Node.js가 설치된경우, 자동으로 NPM도 설치된다고 알고있는데. 그게 진짜인지 확인이 필요하다. NPM은 기본적으로 자바스크립트를 위한 Package Module / Manager 라고 하는데. 사실 무슨 용도로 쓰이는지는 확실치가 않다.
그래서 NPM 자료를 좀 찾아보니, Node.js에서 사용한 모듈들을 박스로 담아서, 연결해주는 유통망같은 거라고 생각하면 될 것 같다. 필요한 내용을 찾아서 연결해주고, 다운로드 받아주고, 버전관리를 해주는 모양이다.
https://sarc.io/index.php/miscellaneous/1331-npm
NPM이 설치되었는지 확인하기 위해서는, 윈도우에서 DOS창을 띄우는 법. 명령 프롬프트를 열어 - npm help라는 내용을 치면 된다.
위의 내용이 나왔다면 일단 설치가 잘 된것.
하단에 나온 내용을 보니 NPM의 버전은 6.4.1인것 같다.
5. NPM으로 Vue client 설치하기
이제 본격적으로 Vue client를 깔아야하는데. 지금까지 깔아둔 NPM을 시켜서 '알아서 그 내용을 깔라고 명령을' 내릴거다.
npm install -g @vue/cli
위의 내용을 도스 명령창에 그대로 써주면 된다.
그러면 갑자기 도스창에서 'NPM이 동작해 해당 파일을 자동으로 정보확인 / 다운 / 설치를 진행해준다. 기록들 중에 - warnning : deprecated 라고 나온 부분들은. NPM이 내게 '어 이거 해당 파일들의 정보를 확인해보니 더이상 안쓰이는 버전인데요?' 라고 말해주는 내용. 아마도 해당 내용을 우회해서 다른 버전을 받은 것 같다.
-
이래저래 여러 에러메시지를 띄우긴 했지만. 끝에 보면 vue client 버전 3.1.1이 설치되었음을 알 수 있다. 자, 그럼 이제 기본 준비는 모두 되었다고 봐야겠지. 기존에 깔아두었던 IDE인 Intelli J의 기본세팅을 진행하고, 신규 프로젝트를 만들어보도록 하자.
6. Intelli J IDEA : 처음 시작하기
설치했던 Intelli J IDEA를 켜면, 기본 UI 테마를 세팅하는 화면이 먼저 등장한다.
이건 뭐 자유니까. 맘대로 설정하자. 내 경우는 다크테마가 더 나을것 같아서, Darcula로 진행하기로했다.
다음 화면에선 기본 플러그인들을 설정할 수 있는데, 뭐, 이것도 나중에 맘대로 추가할 수 있으니. 일단 넘어가자.
Intelli J에서 제공하는 외부 플러그인에 대한 내용인데. 왠지모르게 다른건 몰라도 Node JS는 눌러줘야할것 같다. 이미 내가 설치한 Node JS와 충돌이 일어나려나? 확인해보니, 설치가되어있는 부분이라 금방 넘어가버렸다.
이외에 상단의 HTML, CSS, Java Script에 대한 내용을 실시간으로 에디트할 수 있다는 - Live Edit Tool이 왠지 괜찮아보여서, 설치하기로했다.
이후에는 인증 관련 내용이 나오는데. 일단은 무료버전을 써보다가 나중에 구매를 해도 되고. 상황에 맞게 사용하도록 하자.
인증을 하고나면 그 이후에 실제 화면이 뜬다. (드디어...!)
이제 겨우 신규 프로젝트를 만들 수 있게 되었다. Intelli J IDEA의 버전은 2018. 2월 5일자 버전. 일단 내가 만들어둔 문서가 아무것도 없으니, 신규 문서를 만들자.
신규 프로젝트 화면을 보자마자 머리가 아파지기 시작한다. 나는 Vue.js를 기반으로 Vuetify를 사용하고싶은데. 대체 이 수많은 문서규격들중에 어떤걸 선택해야, 내가 원하는걸 만들 수 있단 말인가?
일단 빈 프로젝트를 만들어서 폴더 위치부터 정해놓자.
사실 복잡하게 생각할 필요는 없는게. IDE는 기본적으로 '고급진 자동화된 메모장'이다. 심지어 IntelliJ IDEA는 굉장히 다양한 개발용 문서규격에 맞춰서 여러 플러그인과 기능을 한곳에서 지원하고있다. 디자인 툴로 치자면 마치 포토샵, 일러스트레이터, 애프터이펙트 등을 한군데 모아놓고서 - 그중 한두가지 기능만 사용하는 상황이나 마찬가지다. 사실상 우리가 사용해야할 내용은 저 수많은 내용들 중에 한두개 뿐이고. 이외의 기능들은 거의 평생 건드릴 일이 없을테니. 너무 걱정하지 말자.
프로그램 입장에선 '고갱님, 이번에 사용하실 문서 규격은 어떤걸로 해드리는게 편하실까요?' 라고 묻는 거니까. 뭘 해야할지 자료를 좀 찾아보면 답이 나올테니. 일단 폴더 위치만 정해놓고, 기본적인 프로그램 세팅과, 플러그인 다운로드부터 시작하기로 했다.
7. Intelli J IDEA : 툴 기본폰트 / 문서 인코딩 설정
무슨 툴이건 간에 기본적인 내용만 좀 써보다보면 다 익숙해지는 법이다. 일단 문서 인코딩 설정부터 맞춰보자. 인코딩 설정은 세팅 내부의 옵션중 하나이고. 세팅 메뉴는 상단메뉴의 File > Settings 에 있다.
Appearance에서는 UI 테마를 변경할 수도 있고, 전체 프로그램에서 사용되는 폰트파일도 변경할 수가 있다.
아무래도 기존의 코딩용 텍스트들보다, 텍스트의 가독성이 좋으면 더 보기가 편해지기 때문에. 이 부분이 생각보다 중요하다고 생각이 들었다. 게다가 필자가 사용하고있는 개발 환경이 4K TV를 모니터로 사용하고 있기 때문에, 글씨를 좀 더 키우는게 나아보였다. 그래서 좋은 폰트가 없을까해서 이것저것 세팅을 해봤다.
일단 여러 폰트들중 현대 하모니 M 폰트를 사용하기로했다. 글씨크기도 12에서 14으로 키워서, 좀 더 확연하게 보이도록 하니, 훨씬 사용하기에 편해진듯하다. (추후 더 나은 폰트가 있다면 찾아볼 생각)
Editor > Font 메뉴에서 코딩 폰트도 변경을 할 수 있다. 폰트 사이즈와 줄 간격을 조절할 수 있으니, 편한대로 조절을 해주면 된다.
폰트와 폰트크기, 줄간격을 조절한 실제 소스코드 화면 (예시)
Editor > File Encodings 에서 파일 인코딩은 UTF 8로 통일해준다.
8. Intelli J IDEA : 기본 플러그인 설치
자, 이제 플러그인을 설치해보자.
setting > Plugin 에 위치한 플러그인 목록. 필수목록인 Vue.js와 Node.JS 등이 설치되어있는지 확인하자.
Vue.js를 설치했고, Node.js는 이미 기존에 설치해두었던 내용이 있는지 Install 버튼이 보이지않는다.
9. VueCLI 3 : NPM 기반 세팅
NPM도 깔았고. Intelli J IDEA 세팅도 끝났으니. 이제 본격적으로 Vue를 써볼 시간이다.
https://www.jetbrains.com/help/idea/vue-js.html
Intelli J를 통한 Vue.js 어플리케이션을 만들려면. NPM에서 글로벌 관련 client를 깔아야한댄다. 그래서도스 명령창에 들어가서 npm install --global vue-cli 요 내용을 써주니 또다시 NPM이 자동으로 다운을 받기 시작했다.
다운로드가 완료된 모습. 이젠 Intelli J 내에서 프로젝트를 만들면 된다.
새로운 프로젝트를 만들어보면, 하단 목록에 Vue component 라는 녀석이 등장한다. 말 그대로 Vue가 제대로 깔렸다는 얘기지.
공식문서에서 말한대로, Static Web 섹션을 누르니, Vue.js가 다시 등장한다.
프로젝트 설정은 node js가 제대로 나오는지. vue client가 제대로 표기되는지만 확인해도 된다.
이젠 프로젝트 이름과 설명글, 저자명을 정해주자.
이후에는 vue 탬플릿의 빌드타입을 물어보는데, 아래쪽은 뭔가 딱봐도 특수한 상황에 쓰는용 같다. 그냥 대부분의 사람들이 사용한다는 - 일반용으로 하자.
이번엔 또 vue router라는 애를 깔거냐고 물어본다. 음? 이건 또 뭔가 해서 찾아보니. Vue.js에서 싱글페이지앱 (SPA)를 쉽게 만들 수 있도록 도와주는 녀석이라고 한다. 자세힌 알 수 없어도트랜지션 애니메이션도 도와주고, 이것저것 도와주는 기능이라고 하니. 일단 깔아보자.
아니이건또 뭐야!! 뭐이렇게 많아!! 이번엔 vue 탬플릿을 위해 ES Lint라는걸 사용할거냐고 묻는다. 찾아보니 코드 문법검사툴이라고 해야할까. 기능적으론 크게 문제가 되진 않는데 거슬릴만한 코딩 표기들을 찾아주고 '이거 고쳐라' 라고 말해주는. 맞춤법 검사기같은 거라고 한다.
뭐, 나같은 초보자에게는 이런 문법들을 일일히 고치라고 말해주는 녀석이 있으면, 귀찮긴 해도 도움이 되겠지. 사용한다고하자.
그럼 이번엔 또 '어떤 ES Lint 세팅을 쓸거냐고' 물어본다....하... 참으로 세세하게 귀찮게하는군. 그래도 찾아보니 일반 버전과 Air Bnb에서 사용하는 세팅 중. 하나를 선택할 수 있고. 이건 약간 스타일의 차이라서 여기서 뭘 선택해도 딱히 상관은 없다는듯하다.
아니 이번엔 또 대체 뭔뎈ㅋㅋㅋㅋㅋ 제발 인디케이터가 있었으면 좋겠다. 대체 언제까지 다음 다음을 눌러야하는것인가...! 이런 불편하기 짝이없는 설명충같으니라고!!!
https://kr.vuejs.org/v2/guide/unit-testing.html
기본적인 기능이 작동하는지를 확인하는 내용인것같은데. 정작 이게 무슨 용도인지는 잘 모르겠다. 내가 세팅해둔 환경에 문제가 없는지 확인하는걸까? 대충 그런느낌인것 같으니 사용한다고 해야지 뭐(...)
친절이 과다한 우리의 Vue Project. 사실 아직은 이게 뭔 내용인지 몰라서 더 그렇게 느껴지는듯 하다. 프로젝트 하나 만드는데 무슨 질문창이 10개를 넘어서냐고!! (슬슬 진심 빡침)
https://vuejs-templates.github.io/webpack/e2e.html
찾아보니 e2e nightwatch라는 녀석은 Ent to Ent Testing이라고해서. j자바스크립트 기반의 테스트 러너 기능을 한대나 뭐래나... 대충 보니 브라우저용 테스트를 해주는 모양이었다.
우측의 재생 (화살표) 버튼을 누르면, 드디어 우리의 친절하신 Vue Runner께서 내가 세팅해둔 환경들을 기반으로 테스트를 진행해준다. 사실 정확히 뭐가 진행되는지는 몰라도 - 일단 기본적인 내용들을 알아서 해결해주는거겠지 싶다. 나중엔 좀 더 자세히 내용을 알아봐야겠지만...! 일단 기본적인 세팅이 모두 끝난 셈이다.
프로젝트 폴더가 자동으로 생성된 모습. 하단의 문서들이 빨갛게 나오는 이유가 뭔지는 잘 모르겠으나, 추후에 이 내용을 확인해보아야할 것 같다.
-
오후 1시 쯤에 작업을 시작해서 오후 8시에 끝이난걸 보면. 생각보다 기본 세팅에 오랜시간이 걸린것 같다. 물론 중간중간에 자료를 찾아보고, 실시간으로 작업 일지를 남기면서 작업한 경우라 2~3시간은 더 걸렸겠지만. 이런 작업이 나중에 오히려 스스로에게나, 타인에게나 큰 도움이될 수 있을 거란 생각이 든다.
추후에는 Vue.js 와 Vuetify 기반 웹디자인 강의 튜토리얼을 보면서 - 그 내용을 그대로 따라해보는 식으로 Vuetify를 기반으로한 프로젝트를 만들어봐야겠다.
-
다음편에 계속됩니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
