'Eclipse'에 해당되는 글 5건

  1. VJET JavaScript IDE: Node.js를 지원하는 JavaScript IDE 설치하기 (1)
  2. [Eclipse] [JavaScript] "식별자나 문자열 또는 숫자가 필요합니다." 오류 분석 (4)
  3. [Java] Eclipse; 단축키
  4. [Spring] Spring MVC 개발환경 구성: STS 설치
  5. [JavaScript] Eclipse에서 JavaScript 기본 편집기를 Aptana Studio 3로 변경하기

VJET JavaScript IDE: Node.js를 지원하는 JavaScript IDE 설치하기

* Node.js 공부를 시작하려고 보니 예제와 API 레퍼런스 문서를 보면서 메모장으로 타이핑하고 있는 나를 발견했다. Eclipse와 Visual Studio에 익숙해져서 코드 어시스트가 안된다는 사실로도 답답함이 밀려왔다. 그래서 Node.js를 포함하여 좀 더 편하게 JavaScipt를 작성하기 위한 IDE를 조사해봤다.


* 구글링 결과 가장 추천수가 높은건 Eclipse의 플러그인인 VJET JavaScript IDE를 사용하는 것이다. 개발자에게 가장 필요한 Code Assistance, Navigation, Validation 기능을 제공한다.

http://eclipse.org/vjet/download/


* Eclipse의 플러그인이기 때문에 먼저 Eclipse를 설치해야 한다. Windows 7 64-bit를 기준으로 설명하겠다.

* Eclipse > Downloads > Eclipse Standard 4.3 > Windows 64 Bit > [Korea, Republic Of] KAIST (http) (다운로드) > C:\Program Files\VJET 폴더에 압축 해제 >

* eclipse.exe -clean (실행) > Workspace: C:\Projects\Node.js


* VJET JavaScript IDE 플러그인을 설치해보자. 

* Help > Ecllipse Marketplace > Find: VJET JavaScript IDE > Install > Confirm > Finish > OK > Yes


* JavaScript 프로젝트를 생성해보자.

* File > New > Other > VJET Project > Project name: server > Finish


* 프로젝트가 생성하면 본격적으로 작성할 JavaScript Source 파일을 생성할 수 있다. 하지만 문제는 현재 상태만으로는 코드 어시스트 기능을 사용할 수 없다. 별도의 VJET ANVILS 파일을 다운로드 받아 프로젝트에 임포트해주어야 한다.

http://wiki.eclipse.org/VJET/ANVILS


* VJET ANVILS 페이지 접속 후 아래 순서대로 클릭하여 파일을 다운로드 받는다. 아쉽게도 현재까지 Node.js 0.4 버전까지만 지원한다. 최신 버전에 대해서는 개발 중이라고 한다.

* Node.js > git > commit > download: org.eclipse.vjet.typelibs-master.zip


* 앞서 생성한 프로젝트에 다운로드받은 파일을 임포트한다.

* Import > Existing Projects into Workspace > Select archive file: org.eclipse.vjet.typelibs-master.zip > Deselect All > NodejsTL (체크) > Finish


* 임포트한 내용을 프로젝트의 Build Path에 추가한다.

* Build Path > Configure Build Path > Projects > Add > Projects > Add > NodejsTL (체크) > OK > OK


* 드디어 환경설정이 모두 끝났다.


[WIP...]



저작자 표시 비영리 동일 조건 변경 허락
신고

[Eclipse] [JavaScript] "식별자나 문자열 또는 숫자가 필요합니다." 오류 분석

* 개발 프로젝트의 시연을 앞두고 브라우저 호환성 테스트 중 일부 PC의 IE에서 `식별자나 문자열 또는 숫자가 필요합니다.`와 같은 JavaScript 오류가 발생했다. 개발 PC의 IE, Chrome, Firefox에서 어떤 문제도 없었기 때문에 당황하던 차에 원인을 발견했는데 JavaScript 오브젝트 선언시 마지막 프라퍼티 뒤에 콤마(,)를 붙인 것이 원인이었다.

$('#message').tooltip({

  title : '메시지',

});


* Eclipse에서 오류를 잡아주지 않아 무심코 넘어갔었고 개발 PC의 브라우저 테스트에서 문제가 없었기에 그대로 시연했다가 망신을 당할뻔 했다. JSLint를 이용하여 코드를 검사하자 역시나 `Extra comma.` 오류를 잡아냈다. Eclipse에도 JSLint와 동일한 기능을 제공하는 JSHint 플러그인이 존재하지만 JSP 템플릿 파일 내의 JavaScript 코드에 대해서는 정상적으로 작동하지 않아 아쉽다.


저작자 표시 비영리 동일 조건 변경 허락
신고

[Java] Eclipse; 단축키

* Eclipse에는 개발 생산성을 도와주는 여러 유용한 단축키가 많다. 내가 가장 많이 사용하는 단축키를 정리해봤다.


* CTRL + SHIFT + R: 프로젝트의 특정 클래스를 바로 찾아서 편집하고 싶을 때 사용한다. 와일드 카드를 통한 파일명 검색이 가능하다.


* CTRL + O: 현재 편집 중인 클래스의 모든 필드와 메써드를 바로 찾아서 편집하고 싶을 때 사용한다. 와일드 카드를 통한 필드 및 메서드명 검색이 가능하다.


* CTRL + E: 현재 열려 있는 모든 탭을 바로 탐색할 수 있다. 와일드 카드를 통한 파일명 검색이 가능하다.


* ALT + SHIFT + R: 패키지명, 클래스명, 메서드명, 변수명을 바로 리팩토링할 수 있다.


* CTRL + M: 현재 편집 중인 화면을 최대화할 수 있다.


* CTRL + SHIFT + O: 현재 소스 코드에 사용된 클래스를 자동 임포트한다.


* CTRL + SHIFT + F: 현재 편집 중인 소스 코드를 자동 정렬한다.


<관련 링크>

Top 10 (not so popular) Eclipse Shortcuts (by Handerson Gomes)

http://www.summa-tech.com/blog/2009/05/19/top-10-not-so-popular-eclipse-shortcuts/


Eclipse Shortcuts (by Lars Vogel)

http://www.vogella.com/articles/EclipseShortcuts/article.html


저작자 표시 비영리 동일 조건 변경 허락
신고

[Spring] Spring MVC 개발환경 구성: STS 설치

* Spring 기반의 프로젝트를 진행한다면 Eclipse보다는 Spring에 특화된 다양한 기능을 지원하는 Spring Tool Suite(이하 STS)를 IDE로 사용하는 것이 정신건강에 좋다.


<Spring Framework 다운로드>

- SPRING FRAMEWORK (spring framework로 구글링 후 접속) > DOWNLOAD > take me to the download page >
spring-framework-3.2.1.RELEASE-dist.zip (다운로드)


<STS 다운로드>

- SPRING TOOL SUITE (sts로 구글링 후 접속) > DOWNLOAD > take me to the download page > spring-tool-suite-3.1.0.RELEASE-e3.8-win32-x86_64-installer.exe (다운로드 후 실행) >

- Select the installation path: C:\Java\STS (STS 설치경로 지정) > Select the JDK path: C:\Java\jdk1.7.0_03 (JDK 설치경로 지정) >

- (STS 실행) > Workspace: C:\Workspace (프로젝트 경로 지정)


<컬러 테마 설정>

- Help > Eclipse Marketplace > Find: Eclipse Color Theme > Install >

- Window > Preferences > General > Appearance > Color Theme > Color Theme: Obsidian > Apply >

- General > Appearance > Colors and Fonts > Basic > Text Font > Edit > Consolas/보통/12 > 확인 > OK


* 영문 글꼴에서 소스 코드로 가장 가독성이 좋은 글꼴은 Consolas가 유명하다. 하지만 한글 글꼴이 제공되지 않으므로 맑은 고딕이 추가된 트윅된 글꼴을 추천한다. 아래 블로그에서 다운로드 가능하다.

http://warmz.tistory.com/648


<Spring MVC 프로젝트 생성>

- File > New > Dynamic Web Project > Project name: (프로젝트명 입력) > New Runtime >

- Apache > Apache Tomcat v7.0 > Create a new local server (체크) >

- Download and Install > Tomcat installation directory: C:\Java\apache-tomcat-7.0.12 > JRE: jdk1.7.0_03

- 다운로드한 Spring Framework 압축해제 후 \libs\*.RELEASE.jar 파일들을 프로젝트의 /WebContent/WEB-INF/lib 디렉토리에 복사


* Spring Framework는 몇가지 라이브러리에 종속성을 가지는데 대표적으로 Apache Commons Logging 라이브러리가 있다. maven commons logging으로 구글링하여 라이브러리를 다운로드하고 앞과 같은 방법으로 복사한다.


<web.xml 작성>

- 프로젝트의 /WebContent/WEB-INF/web.xml 파일을 아래와 같이 작성한다.

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

<display-name>Spring MVC Sample Application</display-name>

<servlet>

<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextClass</param-name>

<param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>

</init-param>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>com.leeth.mvc.config.SpringConfig</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>

</web-app>


* XML 파일이 아닌 Java 클래스로 WebApplicationContextConfig 파일을 작성할 수 있도록 했다. Spring Framework v3.1부터 추가된 기능이다.


<Config 클래스 작성>
package com.leeth.mvc.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan("com.leeth.mvc.*")
public class SpringConfig {
@Bean
public InternalResourceViewResolver internalResourceViewResolver() {
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setPrefix("/WEB-INF/views/");
viewResolver.setSuffix(".jsp");
return viewResolver;
}
}

<Controller 클래스 작성>
package com.leeth.mvc.controller;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class HomeController {
private static final Log log = LogFactory.getLog(HomeController.class);

@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Model model) {
log.info("home");
return "home";
}
}

<.WAR 임포트>
* .WAR로 익스포트한 프로젝트 파일을 다시 STS에서 임포트하는 방법은 아래와 같다.
- File > Import > Web > WAR file >
- WAR file: (임포트할 .WAR 파일 지정) > Web project: (프로젝트명 입력) > Target runtime: Apache Tomcat v7.0 >
- (임포트 후 프로젝트명 우클릭) > Properties > Resource > Text file encoding > Other: UTF-8 >
- JavaScript > Include Path > Source > Edit > Exclusion patterns > Add > **/*.js

저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] Eclipse에서 JavaScript 기본 편집기를 Aptana Studio 3로 변경하기

Eclipse에 기본 내장된 JSP Editor는 JavaScript에 대한 지원이 미약하여 코딩이 굉장히 불편하다.
구글링 결과 JSP Editor에서 JavaScript를 Java처럼 편리하게 작성하는 방법은 현재까지 없다고 결론내리고 <script></script> 태그 안의 작성되는 JavaScript를 별도의 .js 파일로 분리하고
Aptata Studio 3 플러그인이 제공하는 JavaScript Source Editor를 연결하기로 결정했다.

Eclipse에 Aptana Sutdio 3 플러그인 설치하기

- Help > Install New Software > Add >
- Name: 'Aptana Studio 3' >
- Location: 'http://download.aptana.com/studio3/plugin/install' > OK >
- 'Aptana Studio 3 Plugin' (체크) > Next > Next > Finish > OK > Restart Now


저작자 표시 비영리 동일 조건 변경 허락
신고