웹개발 생초보 : Vuetify 사용환경 만들기-1편
IDE 설치, Git과 Git GUI 설치, Node.js 설치하기
인터넷에 자료들도 많으니. Vuetify 프레임워크를 사용해서 간단히 내가 원하는 디자인을 만들어볼 수 있지 않을까? 하는 생각에 시작해보는 실험. 막히는 부분은 외부자료나, 인터넷 강의 등으로 떼워보기로 했다.
일단 Vuetify를 사용하기 위한 기본 환경세팅부터 시작했다.
Vuetify는 HTML, 자바스크립트 등 다양한 언어를 오가는 방식으로 개발이 진행되는 것으로 알고있다. 그래서 단순 텍스트 에디터가 아니라 기본적으로 IDE 환경을 구축해야한다. 유명 IDE로는 비주얼 스튜디오, 이클립스 등이있는데, 필자는 일단 그나마 사용해본 Intelli J IDEA를 사용하기로 했다.
1. IDE 설치 (Intergrated Development Environment)
일단 인텔리 J부터 설치하기 시작. 업데이트가 잘 되고있고, 완성도도 높은 IDE다
역동적인 메인 이미지가 상당히 인상적이다.
Intelli J IDEA는 연간 / 월간 사용료를 내고 사용할 수 있다. 사업장은 연간 400달러, 개인은 연간 150달러 정도 한다. 가격이 조금 비싸다고 생각할 수는 있는데, 지속적인 플러그인 / 기능 업데이트를 해주기 떄문에 그만한 가격은 한다고 봐야할듯.
인스톨 과정 중간에 JRE x86 (32비트) 을 인스톨할거냐고 물어보는데, 이 옵션은 당장 중요한건 아닌것 같다. JRE는 Java Runtime Environment의 약자인데. 필요한 경우에 따로 깔면 되니 별로 걱정할 필요는 없어보인다.
2. Git / Git GUI 설치
이번엔 Git 설치 차례다.
Git은 개발용 소스 버전관리 / 여러 사람의 협업시에 유용한 도구다. 규모가 큰 작업을 할수록 사용이 용이하다. 개인작업의 경우에는 오히려 조금 복잡하게 느껴질 수 있긴 한데, 추후 복잡한 작업을 위해 미리 배워놓는 셈 치자.
설치시에 컴포넌트 선택화면이 나오는데, 사실 별로 대단한 내용은 아니라서, 기본설정대로 그냥 넘겨도 된다.
기본 에디터를 설정하는 화면도 나오는데, 기본설정은 Ubiquotos Text Editor라는 프로그램을 기본설정으로 되어있다. 굳이 추가로 프로그램을 깔고싶진 않은데다, Intelli J IDEA를 사용하기로 했으니, 해당 프로그램을 메인으로 잡아두었다. 만약 문제가 생긴다해도 나중에 설정창에서 바꿀 수 있을테니, 이 부분도 크게 문제는 없다.
윈도우 DOS 명령을 기반으로 GIT 사용경로를 조종할 수 있도록 하는 기본 세팅. 내부 데이터를 전송하는데에 연관이 되다보니 보안 관련된 세팅인듯하다. 제일 안전한건 위쪽이지만, 그만큼 기능이 제한되는 것으로 보이니 기본세팅으로 진행하도록하자.
HTTPS 연결시 어떤 방식으로 연결을 할지 정하라는 이야기인데. 이 부분도 추후에 세팅변경이 가능할 부분이니, 기본세팅을 해도 무방해보인다.
거참, 질문도 많다. 코드 마지막 줄의 텍스트를 어떻게 판단하고 다루게 할거냐는 질문인데. 일단은 무슨 내용인지 잘 모르겠고. 세부세팅에서 바꿀 수 있을테니. 넘어가자.
질문도 많다(222). GIT 배쉬를 사용할때 연결될 터미널 에뮬레이터를 설정하라는데. 사실 이 내용도 무슨 내용인지는 알 수 없으니. 일단 넘어가자.
Git 설치시 현재 단계가 어디쯤인지 나타내는 Indicator가 꼭 필요해보인다... 뭐 이렇게 끝도없는 질문을 해대는지-_-... 이 다음에도 질문이 하나 더있었지만, 사실상 선택적인 내용이라서, 따로 건드릴 필요가 없다.
Git을 설치하고나면 Git bash라는 프로그램이 실행되는데. 이게 설치가 완료된 상태다. 다만 여기서 끝이 아니라 Git에서 사용할 기본설정 등을 만들어줘야한다. 물론 리눅스의 아버지가 만든 기능 답게, 따로 보기좋게 만들어진 UI같은건 없다. 명령어를 따로 찾아서 쓰거나, 아니면 이걸 사용하기 위해 다시 git 관련 GUI 프로그램을 사용해서 연결을 해줘야된다. Git 설치 후 GUI를 따로 불러다 깔아줘야한다는게, 참 리눅스 답다 (...)
https://www.tuwlab.com/ece/22210
도스버전 명령입력으로 직접 사용할수도 있겠지만. 아무래도 GUI가 있는 편이 더 사용이 편할 것 같았다.
그래서 Git 전용 GUI 프로그램을 찾아보니, 순위별로 모아둔 사이트가 있었다.
https://www.slant.co/topics/2089/~best-git-clients-for-windows#21
대충 무료버전으로 유명한게 네다섯가지가 있는데. 그중에 Smart git이란 녀석이 제일 무난해보여서. 해당 프로그램을 쓰기로했다.
https://www.syntevo.com/smartgit/download/
해당 Git GUI는 무료로 사용할 수도 있으나, 오픈소스이거나, 학교용일 경우에만 해당된다고한다.
라이센스 타입에서 비상업적 / 오픈소스 / 스터디용으로 사용한다는 체크를 해준다.
다음 과정에서 사용자명과 이메일을 입력하라고한다. 불친절한 Git과는 다르게 설치 진행과정이 표현되니 참 보기 좋다.
SSH 클라이언트 설정에 대한 내용을 묻는다. 위쪽은 신규유저를 위한 설정이 어렵다고말하는거 보면, 나같은 초보들한텐 아래쪽 설정이 더 나은것같다.
호스팅 제공업체 / 프로그램을 설정하라는데, 사실 나중에 아래쪽에 있는 어떤 프로그램을 쓸건지의 여부에 따라서 얘기가 달라진다. 미리 설정을 해도 되고 당장은 넘어가도 된다.
설치를 완료하면 아까 선택했던대로 - smart git을 기반으로 한 사용자 설정창이 뜬다.
Git을 어디다가 연결할거냐는 이야기인데, 난 아직 아무 프로젝트도 만든적이 없으니. 원하는 곳에 새로 폴더를 만들어야한다.
신규로 폴더를 만들고, 내용을 저장했다.
새 폴더다보니 '여긴 아무것도 없는것같은데요, 진짜 여기다가 새로 만들까요?' 라고 물어보는 상황. 뭐, 일단 init complete 라는 내용이 뜨는 걸 보니 일단 별문제없이 설치는 한것 같다.
만약 프로젝트가 있었다면 하단같이 연결을 해주면 - 바로 Git을 기반으로 내용을 업로드할 수도 있다.
https://www.youtube.com/watch?v=0FXAcfUqgJc
일단 Git과 Git GUI를 설치했으니. 내용 연결은 나중에 해도 되고. 다음으로 넘어가도록 하자.
3. Node.js 설치하기
Node.js는 끝에 js가 붙어있는거 보니. 자바스크립트 관련 파생 프로그램인듯한데. 자바스크립트 관련내용을 묶어다가 연결해준다던가. 뭔가 생성해준다거나하는 기능을 하는 모양이다. 찾아보니 V8 크롬 엔진은 - 웹브라우저를 만들기 위한 오픈소스 응용프레임워크라고한다. 구글 크롬 만들때 쓰였다길래 크로미움 엔진의 일부인건가 싶긴한데, 명확치는 않은듯.
일단 Node.js를 다운받을땐 안전빵. 신뢰도높은 안정적인 버전을 받기로 했다. (10.13.0 LTS)
Node JS 설치시 나오는 화면은 별거 없긴 한데. 한 화면이 맘에 걸린다.'필수 툴들을 함께 설치할거냐'라고 묻는다. 사실 Box starter라던가 Chocolatey라는게 뭔지는 모르겠는데. 안깔았다가 낭패볼 수 있으니 그냥 깔아줘보자.
필수 프로그램 설치를 누른 경우, 기본 프로그램 설치 후 dos창이 나타나서 Node.js 네이티브 모듈 인스톨이 진행됨을 알려준다. 약 3gb(?!)나 드는 과정이다보니. 용량이 그만큼 남아있어야한댄다.
제3사의 소프트웨어를 다운로드받아야하다보니, 내가 직접 인증을 해줘야하는데.... 중간에 문제가 생겼다.
설치도중 안전빵 전용으로 깔아둔 AVAST가 설치프로그램을 위험프로그램으로 인식해버렸다.
이런 경우는 설치가 중단되었을 가능성이 크니, AVAST를 잠시 끄고 Node.js 삭제하고 다시 설치해주는게 낫다. (심지어 설치파일로 Repair - 를 진행시, 필수프로그램 설치에 대한 내용이 다시 등장하지 않으니, 삭제후 재설치를 하자.)
설치가 안되있는 내용이 많으니 약 3gb 정도 되는 내용들을 마구마구 다운 & 설치하기 시작한다.
그중에는 visual studio build tool 2017이라던가 bootstrap 관련 파일. box starter, Chocolatey라는 정체를 알 수 없는 녀석들을 이래저래 깔게된다. 이후 갑자기 컴퓨터가 종료되며, 재부팅 후 자동으로 설치가 이어지니 놀라지말것.
이후 Visual Studio2017 내용을 설치하게되는데, 시간이 좀 오래걸리는듯하다. (아니면 이미 설치가 다 된건가?) 일단 기다려보자.
혹시나해서 기다리던 끝에. 약 5분만에 완료가 됐다. 이제 끄고나가랜다. 설치된 내용이 뭔가 사용자 권한 / 컨트롤과 연관이 있는지. 재시작을 하라고 하니. 일단 재시작을 해주도록 하자.
-
다음 편에서 계속해서 이어집니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
