2018. 10. 26. 15:09

검색된 대부분의 블로그가 이클립스에서 톰캣과 연동하여 웹서비스를 실행시키는 유형이 많아 내가 필요한 부분을 새로 정리해보기로 했다. 내용을 수시로 보완할 예정이다.


1. Tomcat 설치

  1) 다운로드: 윈도우 버전에 맞는 zip 파일 다운로드 후 원하는 경로에 복사하여 압축을 푼다.

  2) 환경설정

     - 환경변수 등록

       > Path: java sdk의 bin 경로지정

       > JAVA_HOME : java sdk 루트경로

       > JRE_HOME: java runtime environment 루트경로

       > CATALINA_HOME: tomcat 루트경로

     - 권한 설정

        tomcat/conf/tomcat-users.xml 파일 열기 >  아래와 같이 설정한다. (단, 아래는 예시일뿐 똑같은 권한을 설정할 필요는 없음)

        <role rolename="manager-script"/>

        <role rolename="manager-status"/>

        <role rolename="manager-gui"/>

        <role rolename="admin-gui"/>

        <user username="생성ID" password="생성비밀번호" roles="manager-gui,admin-gui,manager-script,manager-status"/>

     -  포트 설정

        톰캣을 최초실행하면 기본 8080으로 설정되어 있어 다른 포트로 변경할 경우

        tomcat/conf/server.xml 파일 열기 > <Connector port="8080" 을 변경하고자 하는 포트로 변경

     - Root 경로 변경 지정

        링크참조

  4) tomcat 실행/중지

     - console 실행 > tomcat/bin 으로 이동 > startup

     - console 실행 > tomcat/bin 으로 이동 > shutdown

  5) 윈도우 서비스

      - 등록: console 실행 > tomcat/bin 으로 이동 > service install tomcat_service > 서비스에서 apache tomcat 등의 이름을 찾음 > 실행 (자동/수동 설정에 따라 윈도우 리부팅이 되면서 실행되게 설정이 가능)

      - 제거: console 실행 > tomcat/bin 으로 이동 > service remove "서비스명"


2. JSP 연동

  1) WAR 파일 생성

     eclipse 실행 > Project Explorer 에서 프로젝트 선택 후 마우스 오른쪽 버튼 클릭 > Export > War file 선택 > Web Project 명과 Destination(생성경로)을 지정하여 WAR파일을 생성

  2) WAR 파일 복사

     생성된 WAR파일을 tomcat/webapps 폴더 하위에 복사 > Tomcat 재실행



Posted by CoolDragon
2017. 10. 27. 15:53

[준비하기]

 - VS 2017 템플릿

https://marketplace.visualstudio.com/items?itemName=NUnitDevelopers.NUnitTemplatesforVisualStudio


- 다운로드 

  https://github.com/nunit/nunit/releases/3.8


- NUnit-Gui

테스트를 진행을 위한 GUI툴

 - https://github.com/NUnitSoftware/nunit-gui/releases


[프로젝트]

1. nuget에서 nunit 설치

    - NUnit3 

    - NUnit3TestAdapter


2. 프로젝트 생성

 Test메뉴에서 NUnit Test Project 선택


3. Attribute (https://github.com/nunit/docs/wiki/Attributes)

 -  [TestFixture]: 클래스에 지정하여 해당 클래스는 테스트를 위한 클래스라는 것을 지정하기 위해 사용

 - [SetUp]: 클래스 멤버나 기타 초기화가 필요한 경우 사용

 - [Test]: 메소드에 선언되며 단위별 테스트를 위한 사용

 - [ExpectedException(typeof(exception class))]: 예상되는 exception을 테스트할 경우 사용

 - [Ignore("메시지")]: 


3. Assert

 - 단위테스트의 주요 기능 결과를 확인 하기 위해 사용되는 클래스

 - 주요기능

  - AreEqual, AreNotEqual, AssertDoublesAreEqual, AreSame, AreNotSame

  - ByVal

  - True, False

  - IsTrue, IsFalse, IsEmpty, IsNull, IsNaN

  - Greater, GreaterOrEqual, , Less, LessOrEqual, Zero

  - Pass, Fail

  - Positive, Negative

  - Null, NotNull, Zero, NotZero

  - That

  - Throws


3. 테스트 실행

 - 메뉴 > 테스트 > 실행


[NUNIT Document]

https://github.com/nunit/docs/wiki/NUnit-Documentation

Posted by CoolDragon
2017. 7. 28. 12:05

controller에 늘어나는 변수와 함수들을 유사한 성격을 가진 것들을 묶어 service로 분리하여 코드를 관리


index.html

<!DOCTYPE html>

<html ng-app="web">

<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />


  <script src="app.js"></script>

  <script src="controller.js"></script>

  <script src="service.js"></script>  

</head>


<body ng-controller="ctrl">

  <h1>{{Data}}</h1>

</body>

</html>


app.js

var app = angular.module('web', []);


controller.js

// myService의 명시적으로 선언하여 사용

app.controller("ctrl", ["$scope", "myService", function($scope, myService) {

  $scope.Data = myService.get();

}]);

// 또는

app.controller("ctrl", function($scope, myService) {

  $scope.Data = myService.get();

});


service.js

app.factory("myService", function() {

  var service = {

    Data:  "Datasafasfsad",

    

    get: function() {

      return service.Data;

    }

  }

  // controller에서 사용할 object를 리턴

  return service;

});


샘플

Posted by CoolDragon
2017. 7. 28. 10:29

간단 사용자 지시자(custom directive) 만들기


<!DOCTYPE html>

<html ng-app="web">

<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="script.js"></script>

  <script src="directives.js"></script>

</head>


<body ng-controller="WebController">

   <!--angular에서 카멜케이스로 지정하지만 여기서는 '-'으로 구분 -->

  <div>

    <my-title />

  </div>


  <ul ng-repeat="Fruit in Fruits">

    <my-item />

  </ul>

</body>

</html>


script.js

(function() {

  var app = angular.module('web', []);


  app.controller("WebController", ["$scope", function($scope) {

    $scope.Fruits = ['Apple', 'Orange', 'Cherry'];

    $scope.Title = "TEST";

  }])

})();


directives.js

// 지시자 이름을 카멜케이스로 한다.

angular.module('web').directive('myTitle', function() {

  return {

    template: '<h1>테스트</h1>'

  }

});


angular.module('web').directive('myItem', function() {

  return {

    templateUrl: 'item.tmpl.html'

  }

});


item.template.html

<li>{{Fruit}}</li>



샘플

Posted by CoolDragon
2017. 7. 27. 17:03

클릭에 대한 핸들러 연결


<tag ng-click="controller명.함수()"/>


예제

<button ng-click="controller.delete()">삭제</button>




Posted by CoolDragon
2017. 7. 27. 16:15

바인딩될 데이터를 필터 지시어에 맞게 데이터 포맷을 변경

용법

<tag>{{ expression | filter:argument1:argument2:... | filter | ...}}</tag>


index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="controller.js"></script>

</head>


<body ng-controller="WebController">

  <h1>student info</h1>

  

  <ul ng-repeat="Student in Students">

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

    <li>Create: {{Student.Create | date:"yyyy-MM-dd HH:mm:ss"}}</li>

  </ul>

</body>


</html>


// controller.js

// Code goes here


(function() {

  var app = angular.module('web', []);

  

  app.controller("WebController", ["$scope", function($scope) {

    $scope.Students = [

      {Name: "Tom", Grade: 8, Gender: "Male", Create: Date.now()}, 

      {Name: "Alice", Grade: 10, Gender: "Female", Create: Date.now()}, 

      {Name: "Ann", Grade: 7, Gender: "Female", Create: Date.now()}, 

      {Name: "Brown", Grade: 8, Gender: "Male", Create: Date.now()}, 

    ]

  }])

})();


샘플

참고: https://docs.angularjs.org/guide/filter

Posted by CoolDragon
2017. 7. 27. 12:14

반복된 데이터(배열)를 UI에 표시해 줄 때 사용


// index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="controller.js"></script>

</head>


<body ng-controller="WebController">

  <h1>student info</h1>

  

  <!-- ng-repeat="변수 in 변수배열" 처럼 사용 -->

  <ul ng-repeat="Student in Students">

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

  </ul>

</body>


</html>


// controller.js

// Code goes here


(function() {

  var app = angular.module('web', []);

  

  app.controller("WebController", ["$scope", function($scope) {

    //배열로 선언

    $scope.Students = [

      {Name: "Tom", Grade: 8, Gender: "Male"}, 

      {Name: "Alice", Grade: 10, Gender: "Female"}, 

      {Name: "Ann", Grade: 7, Gender: "Female"}, 

      {Name: "Brown", Grade: 8, Gender: "Male"}, 

    ]

  }])

})();


샘플

Posted by CoolDragon
2017. 7. 27. 11:49

기본 컨트롤러 선언 및 구현방법


index.html

<!DOCTYPE html>

<html ng-app="web">


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="controller.js"></script>

</head>


<!--ng-controller: controller.js에 선언된 컨트롤러를 사용-->

<body ng-controller="WebController">

  <h1>student info</h1>

  <ul>

    <!--ng-model: 양방향 데이터바인딩에 사용, 성능에 영향을 줌-->

    <li><input type="text" ng-model="Student.Name"/></li>

    <li>Grade: {{Student.Grade}}</li>

    <li>Gender: {{Student.Gender}}</li>

  </ul>

</body>


</html>


controller.js

(function() {

  var app = angular.module('web', []);


  // WebController: 컨트롤러 명

  app.controller("WebController", ["$scope", function($scope) {

    $scope.Student = {

      Name: "Tom",

      Grade: 8,

      Gender: "Male"

    }

  }])

})();



샘플

Posted by CoolDragon
2017. 7. 27. 11:18

Directive(지시자)

ng-app: angular를 시작하기 위한 지시자

ng-init: 웹페이지가 시작되면서 웹 사이트의 기본 설정값을 초기화 하기 위한 지시자


<!DOCTYPE html>

<html ng-app>


<head>

  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>

  <link rel="stylesheet" href="style.css" />

  <script src="script.js"></script>

</head>


<body ng-init="name='Angular'"> <!-- name 변수를 선언 -->

  <h1>Hello {{name}}</h1> <!-- name 변수를 사용 -->

</body>


</html>


https://embed.plnkr.co/YvAQLTZ08J4n9JKbFfXz/
Posted by CoolDragon
2017. 7. 21. 13:44

# 계정 생성

>net user Test Test /ADD

The command completed successfully.


# 생성계정 그룹 등록

>net localgroup Administrators Test /add

The command completed successfully.

Posted by CoolDragon