'Programming/Web Programming'에 해당되는 글 7건

  1. 2014.06.27 Node.js 시작하기
  2. 2014.06.24 JavaScript 개요
  3. 2014.04.16 webapp deploy in tomcat 7.0
  4. 2014.03.14 javascript - oop
  5. 2014.01.13 javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss
  6. 2011.11.10 jQuery - jQuery 시작하기
  7. 2011.11.08 HTML - HTML 시작하기
posted by Full-stack Developer 2014. 6. 27. 18:06
Step 1. 설치

설치방법 설명 URL : http://www.nodeclipse.org/updates/
  1. node.js install
    1. URL : http://www.nodejs.org/download/
    2. OS에 맞춰 설치 (windows의경우 c\nodejs 폴더에 설치하는 것 권장. 찾기쉽기때문)
    3. (windows 경우)cmd창을 열어 nodejs설치한 경로로 이동
    4. 아래의 명령어를 차례로 입력
      1. npm install -g nodeclipse
      2. npm install -g express-generator
      3. npm install -g express
        • npm install -g express 설치 결과 예시 이미지
  2. JDK 7이상 설치
    • URL : http://www.oracle.com/technetwork/java/javase/downloads/index.html
  3. eclipse 세팅
    • nodeclipse 설치(선택)
      1. URL : http://sourceforge.net/projects/nodeclipse/files/Enide-Studio-2014/0.11-preview/Enide-Studio-2014-011-20140228-win64.zip/download
    • 기존 사용하던 eclipse에 plug in(선택)
      1. plug in URL : http://www.nodeclipse.org/updates/
      2. http://www.nodeclipse.org/updates/에 접속하여 버튼을 기존사용하는 eclipse에 드래그&드랍
        • 설치할 체크리스트
    • perspective 설정

Step 2. hello world


  1. File(상단텝) -> New -> Node.js Project or project explorer 우클릭 -> New -> Node.js Project
  2. project name을 기입하고, template을 hello world로 체크
  3. hello-world-server.js파일 우클릭 -> Run as(or Debug as) -> Node Application 클릭
  4. 테스트
    1. eclipse의 console에서 아래의 문구가 떠야한다.
    2. browser에서 테스트



Step 3. Chat Server


'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
posted by Full-stack Developer 2014. 6. 24. 15:33
  1. Web browser
    1. 브라우저에는 javascript를 해독할 수 있는 엔진이 존재한다.
    2. 구글 크롬의 경우 just in compiler(일명 JIT 컴파일)형식의 V8 javascript engine을 사용한다.
    3. V8은 javascript 코드를 c++코드로 변환하여 compile하고 캐싱과 같은 최적화기술을 사용하여 속도향상을 시켰다.

  2. Weak & Dynamic type language
    1. javascript는 c/c++처럼 타입이 지정되어있지 않다.
    2. 타입은 var로 표시한다.
      • javascript 기본타입
        • number(8byte double)
        • string
        • boolean
        • undefined
        • null(참조객체 없음을 의미)
      • javascript 참조형타입
        • 함수
        • 객체

  3. Non-class based object-oriented programming
    1. object-oriented programming
      • class-based oop
        • c/c++, c#, java ...
      • non-class-based oop
        • javascript, python, ruby ...
    2. javascript의 oop
      • prototype chain
      • closure


'Programming > Web Programming' 카테고리의 다른 글

Node.js 시작하기  (0) 2014.06.27
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
posted by Full-stack Developer 2014. 4. 16. 13:58

Webapp deploy in tomcat 7.0

 

webapp을 deploy 하는 3가지 방법에 대하여 기술하겠습니다.

 

  1. server.xml
    • 위치 : $TOMCAT_PATH/conf/server.xml
    • server.xml 구조
      <Servers>
        <Service>
           <Engine>
              <Host>
                  //이부분에 Context를 넣어주면됩니다.
                 <Context>
    • <context> 예시
      <Context docBase="test" path="/test" reloadable="true" source="org.eclipse.jst.jee.server:test"/>
       
    • 참고사항
      • tomcat에서 context는 web aplication을 의미합니다.
      • server.xml에 context를 기술하여 사용하는(위와 같은방식)것은 지향하는 추세입니다. server.xml은 tomcat server자체에 대한 설정파일 임에도 불구하고, web context에대하여 설정한다는 것은 목적에 맞지 않기 때문입니다.
         
  2. descriptor file(확장자 .xml)
    • context를 따로 파일로 관리하는 방식입니다.
    • 관리방식
      1. $TOMCAT_PATH/conf/[enginename]/[hostname]/[webappname].xml
      2. $TOMCAT_PATH/webapps/[webappname]/META-INF/context.xml
    • 설명
      • 관리방식의 1은 파일명이 webappname그대로 따른다는 것이고, 2는 webapp의META-INF아래에 context.xml에다가 기술한다는 차이점이 있습니다.
      • 해당 파일에([webappname].xml 혹은 context.xml) server.xml에서 context를 기술하는 것과 마찬가지로 <Context>를 기술하면 됩니다.
  3. auto deploy
    • webapps(appBase경로)폴더에 war파일을 넣어두면 자동으로 deploy하는 방식입니다.
    • 설정방법
      • server.xml에서 Host의 attribute에 autoDeploy를 true설정해줍니다.
        • 예시 : <Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">
    • 사용방법
      • .war 파일을 appBase에 복사하면 deploy됩니다.
      • 압축해제된 webapp이 appBase 복사되면 deploy됩니다.
      • appBase에 있던 .war가 갱신되면 re-deploy됩니다.(단, host attribute인 unpackWARs가 true여야 합니다.)
        기존에 압축해제된 webapp은 제거되고 갱신된 .war를 압축해제합니다.
      • 압축해제된 webapp에 /WEB-INF/web.xml이 변경되면, re-loading됩니다.
      • webapp의 descriptor file(deploy의 3가지방법 중 2번째 방법 참조)이 변경되면 re-deploy됩니다.
      • $TOMCAT_PATH/conf/[enginename]/[hostname]/[webappname].xml 파일이 추가될경우 re-deploy됩니다.
      • <context docBase="...."  ...>에서 docBase가 삭제되었을때 un-deploy됩니다.

참조 : http://tomcat.apache.org/tomcat-7.0-doc/deployer-howto.html#Deploying_using_the_Client_Deployer_Package

'Programming > Web Programming' 카테고리의 다른 글

Node.js 시작하기  (0) 2014.06.27
JavaScript 개요  (0) 2014.06.24
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
posted by Full-stack Developer 2014. 3. 14. 17:59

Javascript OOP

참조

Object-Oriented JavaScript 소개 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Encapsulation

Encapsulation : http://phrogz.net/JS/classes/OOPinJS.html


Class

function Person() { }

java에서 class Person(){}

c++에서 class Person(){};


Instance

방법1. new class명();
function Person() { }
var person1 = new Person();
var person2 = new Person();

방법2. Object.create(protoType [, propertiesObject ] )

// Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

// superclass method
Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);//or new shape();
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

rect instanceof Rectangle // true.
rect instanceof Shape // true.

rect.move(1, 1); // Outputs, "Shape moved."

생성자

function Person() {
  alert('Person instantiated');
}

var person1 = new Person();
var person2 = new Person();

 


클래스 맴버(속성)

function Person(gender) {
  this.gender = gender;
  alert('Person instantiated');
}

Person.prototype.gender = '';

var person1 = new Person('Male');
var person2 = new Person('Female');

//display the person1 gender
alert('person1 is a ' + person1.gender); // person1 is a Male

함수

function Person(gender) {
  this.gender = gender;
}

Person.prototype.gender = '';

Person.prototype.sayGender = function () {
  alert(this.gender);
};

var person1 = new Person('Male');
var genderTeller = person1.sayGender;

person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined
alert(genderTeller === person1.sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true

 

genderTeller.call(person1); //alerts 'Male'

person1의 sayGender()이 호출된다.


상속

// define the Person Class
function Person() {}

Person.prototype.walk = function(){
  alert ('I am walking!');
};
Person.prototype.sayHello = function(){
  alert ('hello');
};

// define the Student class
function Student() {
  // Call the parent constructor
  Person.call(this);
};

// inherit Person
Student.prototype = new Person();//or Object.create(Person.prototype);

// correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;
 
// replace the sayHello method
Student.prototype.sayHello = function(){
  alert('hi, I am a student');
};

// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
  alert('goodBye');
};

var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();

// check inheritance
alert(student1 instanceof Person); // true 
alert(student1 instanceof Student); // true

Encapsulation(캡슐화)

function Person() { 
     //-- property --


     //private property
     var userId="";

     //public property type one
     this.weight="";
     //public property type two - may be overridden
     Person.prototype.job="";

     //-- method --


     //private method
     function getUserId(){
          return userId;
     }
     //protected method
     this.eat=function(){
          weight++;
     }
     //public method - may be overridden
     Persone.prototype.workOut=function(){
          weight--;
     }
}

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10
HTML - HTML 시작하기  (0) 2011.11.08
posted by Full-stack Developer 2014. 1. 13. 10:32

formatting yyyy-MM-dd hh:mm:ss


time = new Date(time);

var h = time.getHours();

time.setHours(h+9);//korea timezone is GMT+09:00

time = time.toISOString().slice(0, 19).replace("T"," ");

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
jQuery - jQuery 시작하기  (0) 2011.11.10
HTML - HTML 시작하기  (0) 2011.11.08
posted by Full-stack Developer 2011. 11. 10. 18:02
Step 1 . Download jQuery

-http://jquery.com/
 
 


Step 2. Add script
- 해당페이지에 js파일을 넣는다. 
- 아래와 같이 추가한다.

<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
</head>
</html> 

Step 3. Use jQuery

 
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
<script>

$(function(){

//alert($('li').length);
$('ul#sectionList li');
document.getElementsByTagName('ul')[0].getElementById('sectionList').childNodes;

var cnt = $('ul#sectionList').children().length;
console.log(cnt);
$('ul#sectionList li').css({
width: 100/cnt+'%',
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');
//show image for only this li
$(this).addClass('selected');
});
});

</script>

Sample code
-주석없는 예제는 하단에 있습니다.
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>// jQuery를 추가한다.
<script>//스크립트 사용
//$의 의미는 jQuery이다. 즉, jQuery가 $로 typedef되어있다. jQuery == $
//jQuery를 사용할때는 $()형식으로 사용한다. 
$(function(){//c에서 main함수 같은 것이다. 이렇게하면 body의 script가 로딩된후 해당함수가 실행된다. 
html은 맨위에서 한줄한줄 적용된다. 즉 해당소스를 크게보면 head안에 <meta .../>를 수행하고 script src="..</script>를 수행하고 <script> ... </script>를 수행한다. 그 후 <body>의 script가 수행된다는 점을 기억하자.


        $('#sectionList li');//#->id .->class #sectionList li(공백)->id가 sectionList 하위의 li(parent elemtnt 공백 parent elemnt child)
document.getElementById('sectionList').childNodes;
//위의 $('#sectionList li');와 같은 기능의 소스다. 한눈에봐도 jQuery를 사용하는게 짧은것을 볼수있다.(즉, 같은 기능을 짧은코드로 수행할 수 있어서 매우 효율적이다.)

var cnt = $('ul#sectionList').children().length;//id가 sectionList인 ul의 li개수를 가져온다.
console.log(cnt);//chrome을 사용하고 요소검사를 하면 로그가 보일것이다.
$('ul#sectionList li').css({//id가 sectionList인 ul의 li들의 css를 변경한다.
width: 100/cnt+'%',//JSON처럼 ,로 설정할것을을 나열한다. ;으로 끝나지 않는다.
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){//$('ul#sectionList li')는 배열이다 즉 모든 li에 동일 작업roof가 도는것과 같다.
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');//바로전에 클릭된던 li의 class를 제거한다.
//show image for only this li
$(this).addClass('selected');//click한 li에 select라는 class를 add한다. class는 class=" selected fooclass sooclass"와같이 여러클레스를 다중 추가해줄 수 있는데 공백으로 구분한다.
});
});

</script>
<style type="text/css">
ul#sectionList li.selected {
background-color: red;
}
li{
float: left; //리스트가 달릴때 vertical로 안달리고 horizental식으로 달리게하는 설정이다.
}

body{
margin:0px;
}

ul#sectionList{
-webkit-padding-start:0px;
background-color: green;
overflow:hidden;//상위 element가 height가 설정하지않고, 하위 li들이 flot될때 height가 0이되는 현상이 일어나는데 overflow:hidden;을 해준다면 child의 height로 보여주게 됩니다.
}
</style>
</head>
<body>
<div>
<ul id="sectionList">
<li> <a>전체</a> </li>//chrome에서 요소검사를하면 class가 추가 삭제 되는 현상을 볼수있다.
<li> <a>야구</a> </li>
<li> <a>축구</a> </li>
<li> <a>종합</a> </li>
<li> <a>포토</a> </li>
</ul>
</div>
</body>
</html>

----------------------예제----------------------
<html>
<head>
<meta charset="UTF-8"/>
<script src="jquery-1.6.2.min.js"> </script>
<script>

$(function(){

$('#sectionList li');
document.getElementById('sectionList').childNodes;


var cnt = $('ul#sectionList').children().length;
console.log(cnt);
$('ul#sectionList li').css({
width: 100/cnt+'%',
});
console.log($('ul#sectionList li'));
$('ul#sectionList li').click(function(){
//hide selected image
$('ul#sectionList li.selected').removeClass('selected');
//show image for only this li
$(this).addClass('selected');
});
});

</script>
<style type="text/css">
ul#sectionList li.selected {
background-color: red;
}
li{
float: left;
}

body{
margin:0px;
}

ul#sectionList{
-webkit-padding-start:0px;
background-color: green;
overflow:hidden;
}
</style>
</head>
<body>
<div>
<ul id="sectionList">
<li> <a>전체</a> </li>
<li> <a>야구</a> </li>
<li> <a>축구</a> </li>
<li> <a>종합</a> </li>
<li> <a>포토</a> </li>
</ul>
</div>
</body>
</html> 
 

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
HTML - HTML 시작하기  (0) 2011.11.08
posted by Full-stack Developer 2011. 11. 8. 17:28
시작하기전에
-apache서버를 설치를 해야하는데 구글링해서 무료라서 설치하기 쉬울것이다.
apavhe서버를 (단, windows OS일 경우)설치하면 
C:\Program Files\Apache Software Foundation\Apache2.2\htdocs 에 수정한 html파일을 넣어두면 127.0.0.1로 접근하면 파일리스트가 보일것이다. 
그래서 파일을 실행하여 결과화면을 보면서 개발하면된다.

-크롬 요소검사사용을 추천한다. 위에 자신이 개발한 html코드를 작성하고 우클릭->요소검사를 하면 
html css 등 여러 데이터를 분석하는데 큰 도움이 된다.



1.Web programming
-keyword는 소문자로
-html은 이미지, 텍스트같은 데이터만
-css는 테마, 스타일을 설정
-javascript는 동작, 반응 리엑션을 다룬다.
-php는 DBconnection과같이 DB데이터를 다룬다. 페이지를 만들수도 있다.
-기타 프로그래밍과같이 모듈화를 잘해야 한다.
2.기본구조
<html>
<head>
            </head>
            <body>
            </body>
</html> 

3.keyword
<a> - 링크 
<ul> - 리스트 그룹 (ul안에 li를 넣는다)
<li> - 리스트 아이템 
<img> - 이미지 (img는 img안에 넣을 것이 없어서 <img src="dir/images.jpg"/> 와같은식으로 효기된다.)

4.한글깨짐 문제
-meta데이터 html데이터를 설명하기위한 데이터 charset을 설정해주어야 한글이 안깨진다.
<head>
<meta charset="UTF-8"/>
</head>

5.style 설정
style은 <head> 안에 넣는다 </head>
<head>
<style type="
text/css">
...
</style> 
...
</head>
 
6.예제를 통한 설명
-style에 데이터를 지우면서 차이를 비교하세요. 
-하단에 주석이 없는 깨끗한 예제가 있습니다. 

 
<html>
<head>
<meta charset="UTF-8"/>//한글깨짐 해결해주는 부분

<style type="text/css">//스타일 시작부분
body {//style를 적용할때  적용대상(body) { 식으로 시작한다.
margin: 0;
}

li {//리스트 아이템에 style 적용하는 부분 - 아래와같이 적용을 안할경우 기본브라우저가 자동생성해주는 부분이 있어서 자신의 style에 맞게 설정해주어야 한다.
background-color: none;
list-style-type: none;
padding-bottom: 5px;
border-bottom: 1px solid #e3e3e3;//boder-bottom-width, boder-bottom-style, boder-bottom-color을 한번에 설정해줄수있다. 1px solid #e3e3e3  와같이 설정 데이터 사이에 ,은 안넣어준다.
}
ul{//리스트 그룹에 style 적용
-webkit-padding-start: 0px;
}
div#rt_news{//div중 rt_news에 style을 설정한다는 의미다. 아래 보면 id 지정해준 부분이있다.
만약 div #re_new로 div와 #사이를 띄어줄경우 모든 div안에있는 id가 rt_news인 element의 스타일을 설정한다는 의미다. 
width:218px;
}
</style>

</head>
<body>

<div id="rt_news">//div는 박스 개념으로 보면된다. 대세는 div라고한다. 예전에는 table을 많이 사용했다고함.
<img src="images/sokbo.png" />
<ul>//리스트 그룹
<li id="myLi">//리스트아이템(li)을 ul안에 넣는다.
<a>기사입니다! 첫번째</a>
</li>
<li class="myClass">
<a href="http://codedb.tistory.com">기사 두번째!</a>//a는 링크로 기사 두번째! 와같이 표기되게 바꾸어 클릭하면 href로 설정한 url로 이동한다.
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
</ul>
</div>

</body>
</html>
---------------------예제------------------------
 <html>
<head>
<meta charset="UTF-8"/>

<style type="text/css">
body {
margin: 0;
}

li {
background-color: none;
list-style-type: none;
padding-bottom: 5px;
border-bottom: 1px solid #e3e3e3;
}
ul{
-webkit-padding-start: 0px;
}
div#rt_news{
width:218px;
}
</style>

</head>
<body>

<div id="rt_news">
<img src="images/sokbo.png" />
<ul>
<li id="myLi">
<a>기사입니다! 첫번째</a>
</li>
<li class="myClass">
<a href="http://codedb.tistory.com">기사 두번째!</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
</ul>
</div>

</body>
</html>

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10