Vue.js - 1일차 ) 환경설정 & 설치

코로나를 맞이하여서 집에만있다가, 알고리즘 공부도하면서 예전에 프론트 쪽도 잘 정리해보고 싶다는 생각이 들었는데,

 

모처럼 시간이나고 Vue.js강의를 들을 기회가 생겨서 들을 내용을 정리해야겠다.

 

먼저 Vue.js란?

 

대화형 웹 인터페이스를 개발하는데 사용되는 자바스크립트 프레임워크이다.

 

자바스크립트 프레임워크는 뷰 뿐만이아니고 앵귤러, 리엑트등 유명한 프레임워크들이 많다.

 

이번 시간에는 앞으로의 정리를 위한 환경설정을 진행해볼까한다.

 

설치해야할것은 

 

1. JAVA SE 12 버전

2. Apache Tomcat 9.0

3. Eclipse

 

위 세가지이다.

 

각 각 

 

1 ) https://www.oracle.com/java/technologies/

 

2 ) http://tomcat.apache.org/ 

 

3 ) https://eclipse.org/

 

다운받고, 한 폴더에다 압축을 풀고 환경변수를 설정해주면된다.

 

내컴퓨터 -> 속성 -> 고급시스템설정 -> 환경변수

 

 

에서 환경변수를 변경해주면된다. 환경변수란 내 pc에서 특정 디렉토리로 접근하는 것이아니고 

 

어디서든 접근할수 있게 경로를 잡아주는것이다.

 

환경변수 -> 시스템변수에 

 

 

아래와같이 대문자로 JAVA_HOME을 지정해주고 JDK가 설치되어있는 경로를 변수 값에 넣어주자

 

그 후에 Path를 변경하면된다.

 

윈도우 10기준

 

 

 

Path를 변경하기위해서 JDK의 bin 폴더의 경로가 필요하다.

 

설치경로에서 bin 파일의 경로를 제일 앞에 넣어주자 그후 경로의 맨 마지막에 ; (세미콜론)을 추가하여

 

뒤의 경로와 구분지어주면된다.

 

필자는 Algorithm용 Photon이 깔려있기때문에 Vue용으로 맨앞에 추가해서 먼저잡아주었다.

 

다음 cmd -> java -version 명령어를 입력하면?

 

 

위처럼 12버전의 자바를 잘 잡은것을 확인 할 수있다.

 

이후에 Tomcat을 Eclipse와 연동하여 서버를 띄우기 위해서 Eclipse내에서 간단한 설정을 하자.

 

모든 설정은 상단 

 

Window -> Preference로 들어가서 설정하자. 

 

1 ) 폰트 설정

 

이클립스내에 폰트 크기와 글씨체를 변경해주면 코딩할때에 편하다.. 초기값이 10pt로 작기때문에 

 

위 순서대로 진행후 Text Font를 더블클릭해주면 폰트와 크기를 변경할 수 있다.

 

2 )  웹 브라우저 설정

 

이후 서버를 띄울 브라우저를 설정 할 수 있다.

General -> Web Browser -> Chrome -> Apply and Close

 

 

 

3 ) 인코딩 방식 설정

 

Eclipse는 초기값이 MS949로 문자가 인코딩이 되므로 이것이 다르면 글씨가 깨져보이므로 

 

General -> Content Types ->Texts -> Default Encoding 

란에 UTF-8을 써주고 Update를 꼭 눌러주자.

 

그 후에 Apply and Close로 설정을 저장해주자.

 

 

 

---

 

 

4 ) Eclipse와 Apache Tomcat 연동

 

우리가 이클립스에서 작성한 프로젝트를 서버에 띄우기위해 Controler 역활을 하는 Tomcat을 설정해주자 

 

이번엔 General이 아닌 Server -> Runtime Env -> Add -> Apache Tomcat 9.0

 

을 설정하여 앞으로 우리가 작성한 코드를 서버에 띄우자

 

 

 

 

 

---

 

마지막으로 테스트를 해본다면?

 

File -> New -> Dynamic Web Project 

 

Project생성후 HTML파일을 생성해주자.

 

 

간단한 소스를 입력하고 실행한다면?

 

 

로 잘 실행되는 것을 볼 수 있다.

 

개념에 관한것은 2일차부터 진행할 예정이다!