안녕하세요. 진심으로 풀스택개발자가 되고싶은 진쓰입니다.



목차입니다.

1. Date 객체 특징

2. 예제




1. Date 객체 특징


- 날짜와 시간에 대한 객체생성 할 수 있습니다.

객체 생성 형식 : today = new Date() 이용합니다.


- 현재 날짜 시간에 대한 정보 가져오는 메소드들 입니다.

    getYear(), getMonth(), getDate(), getDay(),

 getHours(), getMinutes(), getSecomds(), getTime()


- 현재 날짜 시간에 대한 정보 세팅하는 메소드들 입니다.

    setYear(), setMonth(), setDate(), setDay(), 

setHours(), setMinutes(), setSecomds(), setTime()


parse(날짜) : 1070년 1월 1일 00:00:00 이후의 경과 시간을 1000분의 1초 단위로 리턴한다.


- toLocalString() : 날짜를 문자열 형식으로 변환한다.


<html>

<head>

<title> 7장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

var Today = new Date() 

var year = Today.getFullYear()

document.write("년도: "+year+"<br>");

 


var month = Today.getMonth() + 1

document.write("월: "+month+"<br>");

 

 

var date = Today.getDate()

 document.write("날짜: "+date+"<br>");

 

 

var hour = Today.getHours()

var minute = Today.getMinutes()

var second = Today.getSeconds()


document.write("현재 시간 : ") 

document.write(hour + "시 " + minute + "분 " + second + "초 </h4>")  

</script>

</body>

</html>

 



2. 예제

- 1초마다 배경색이 달라지는 프로그램 작성해보겠습니다. (단, if문을 이요해서 작성합니다.)

<html>

<head>

<title> 7장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

  var now = new Date();

document.write(now.getSeconds()+"<br>");

if(now.getSeconds()%2==0){

document.bgColor = "pink"; 

}

else{

document.bgColor = "lightblue";

}

</script>

</body>

</html> 

 



고생하셨습니다. 저는 일본여행을 다녀오겠습니다 :)

'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 자료형  (0) 2017.11.30
자바스크립트 String 내장객체 (8장)  (2) 2017.06.14
자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09

안녕하세요. 깊게학습한것을 현업에 써먹고싶은 진쓰입니다.

자바스크립트 객체, 배열 포스팅 시작하겠습니다.

같이 묶은이유는 둘다 객체 개념으로 이해하시면 되기때문입니다.

new라는 예약어를 통해 배열과 객체는 생성하실 수 있습니다.




1. 객체 정의

- 객체를 사용하기 때문에 객체기반언어 입니다.

- 객체는 속성(property)과 methods 를 가집니다.

- function으로 정의된 생성자 함수의 객체의 정의는 new를 이용합니다.

- 생성자함수 안에는 this라는 예약어를 이용해 정의합니다.




2. 객체 사용방법

일반적인 객체지향언어에서의 사용법과 동일합니다.


- 즉 객체이름 다음에 점(.)을 찍고 속성이나 메소드를 써주면 됩니다.



* 객체 선언방법 


function grade(Name, kor, eng, mat)

{ 

  this.name = Name 

  this.kor = kor 

  this.eng = eng 

  this.mat = mat 

}


메소드선언에도 사용하는 function이라는 키워드가 사용됨을 보실 수 있습니다.

또한, 파라메터 역시 적어주는데, 개발자 임의로 정할 수 있습니다.

this 라는 예약어를 통해, 객체의 멤버변수와, 함수를 저장할수 있습니다.



<html>

<head>

<title> 6장 예제 </title>

<script language="javascript">

function print(){

document.write(this.name+"<br>");

document.write(this.kor+"<br>");

document.write(this.eng+"<br>");

}

function Score(name, kor, eng)

{

this.name = name;

this.kor = kor;

this.eng = eng;

this.print = print;

}

</script>

</head>


<body>

<script language="javascript">

jinss = new Score("진쓰", 100, 80);

park = new Score("영수", 70, 50);


jinss.print();

park.print();

</script>

</body>

</html>

 

name, kor, eng 멤버변수를 가지는 Score라는 객체를 정의했습니다.

그리고 print라는 메소드를 정의해서, 객체내의 print 멤버변수가 print 메소드를 가르키도록 했습니다.


또한 객체를 생성할때는 new라는 예약어를 사용하시는것을 볼 수 있습니다.


3. 객체배열 특징


 -내장객체 Array 객체를 의미한다.

- 접근 방법

   배열이름[인덱스] : 인덱스는 0부터 시작 합니다.


- 생성방법

  배열이름 = new Array(개수)


- 예) 

   Arr_Name = new Array(10)



 <html>

<head>

<title> 6장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

my_array = new Array(5);

my_array[0] = "가";

my_array[1] = "control & instrumentation";

my_array[2] = "유튜브";

my_array[3] = "Jinss";

my_array[4] = "mybuddy";

for(var i=0;i<5;i++){

document.write(my_array[i]+" ");

}

</script>

</body>

</html>

 

객체 배열을 선언할때도 new라는 예약어를 사용하여 생성합니다.

예제에서는 다양한 문자열을 넣고 출력하는것을 확인할 수 있습니다.

자료형을 배열로 선언하였기 때문에, 연속적인 인덱싱으로 접근할 수 있습니다.

여기서는 for문을 통해서 접근하는 예제를 보실 수 있습니다.


.


4. array객체 메소드


- join() : 배열을 하나의 문자열로 만들어준다.

- sort() : 배열의 값들을 순서대로 정렬한다.

- reverse() : 배열안에 값들을 순서대로 재정렬시킨다.

- concat() : 두 개배열을 하나의 배열로 만든다.

- slice() : 배열의 일부분의 값을 추출 합니다.


 <html>

<head>

<title> 6장 예제 </title>

<script language="javascript">

</script>

</head>


<body>

<script language="javascript">

my_array = new Array("사과","배","바나나");

for(var i=0;i<3;i++){

document.write(my_array[i]+"<br>");       //배열 전체 출력합니다.

}

document.write( "<br><br>");

document.write( my_array.join()+"<br>");      //하나로 합칩니다.

document.write( "<br><br>");

document.write( my_array.join("와 ")+"<br>");    // 합칠때 "와" 로 합칩니다.

document.write( my_array.join("& ")+"<br>");    //합칠때 &로 합칩니다.

array1 = new Array("오징어", "낙지", "문어","꼴뜨기");     //1번 인덱스전껄 자르고, 3번인덱스이상부터 짜릅니다.

array2 = array1.slice(1,3);


document.write(array2); 

</script>

</body>

</html>

 



힘찬 월요일 시작해봅시다! 감사합니다. :)

'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 String 내장객체 (8장)  (2) 2017.06.14
자바스크립트 Date 객체 (7장)  (0) 2017.06.13
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09

안녕하세요. 상품화 제품을 개발해본적 있는 진쓰입니다.

자바스크립트 5장 함수의 개요 및 내장함수 블로그 포스팅 시작하겠습니다.


목 차

1. 함수 개념

2. 함수 구조

3. 함수의 호출, 리턴

4. 내장함수 - alert

5. 내장함수 -  prompt

6. 내장함수 - confirm




1.  함수의 개념

-함수란, 목적을 가진 루틴을 구성하는 부분. 호출을 통해서 실행되며, 반환값을 가진다.



2. 함수의 구조

   function  함수의 이름(매개변수, 매개변수…){


                    함수 수행문…


      }


크게 함수의 이름, 매개변수, 함수 수행문 으로 구성됩니다.

또한 예약어 function이 붙습니다.

매개변수는 필요에 따라 넣어도 안넣어도 됩니다.


 


3. 함수의 호출과 리턴


함수 호출

: 함수의 이름을 프로그램에 삽입합니다.


리턴(RETURN)

: 반환되는 값을 의미한다.


<html>

    <head>
        <title> 5장 예제 </title>
        <script language="javascript">
            function Max(x,y){      // 사용자로 부터 입력받은 x와 y를 비교해서 큰값을 반환하게 됩니다.
                 if (x>y)
                   return x;
                 else if( y>x)
                   return y;     
              }
        </script>
    </head>


    <body>
        <script language="javascript">
          var x,y,res;
               x = prompt("값을 입력하세요~");
               y = prompt("값을 하나 더 입력하세요~");
               x= parseInt(x);  //사용자로부터 값을 받을수있는 내장함수 입니다.
               y= parseInt(y);

               res = Max(x,y);   //Max라는 함수를 호출하였습니다. 사용자로부터 입력받은 x와 y를 Max 함수 파라메터로 넘기게 됩니다.
               document.write(res);

        </script>   
    </body>

</html>

 


3과 10을 입력하였을때 결과화면은 10이 출력됨을 확인하실 수 있습니다.


문제


- 두 개의 정수값과 연산자를 입력받아 계산하는 프로그램을 작성하시오.


<html>

<head>

<title> 5장 예제 </title>

<script language="javascript">

function calc(a,b,p){        

switch (p){

  case '+' :

return (a+b);

  case '-' :

return (a-b);

  case '*' :

return (a*b);

  case '/' : 

return (a/b);

}   

 }


</script>

</head>


<body>

<script language="javascript">

var a,b,p, res;

  a = prompt("값을 입력하세요.~");

  b = prompt("값을 하나더 입력하세요.~");

  p = prompt("연산자를 입력하세요.~");

  a=parseInt(a);     //웹을 통해서 입력받는 prompt 내장함수는 전부 문자로 받기 때문에 parseInt로 숫자로 바꿔줘야합니다.

  b=parseInt(b);

  res = calc(a,b,p);

  document.write(res);

</script>

</body>

</html>

 

처음입력에 3

두번째입력에 8

세번째 입력에 + 

를 넣으면 11이 출력됨을 확인하실 수 있습니다.




4. 내장함수 alert

-단순히 메시지를 나타내고자 할 때 사용된다.

-사용법
: alert(“문자열”)

<HTML>

<HEAD><TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

 

function OK()

{

  alert(" 예 배고파요. ");

}


function no()

{

  alert("아니오 배불러용.");

}


</SCRIPT>

</HEAD>

<BODY>

배고프십니까

<FORM>

<INPUT TYPE="button" VALUE="예" onClick="OK()">    //예를 누르면 OK() 함수가 호출된다.

<INPUT TYPE="button" VALUE="아니오" onClick="no()">//아니오를 누르면 no()함수가 호출된다.

</FORM>

</BODY>

</HTML>

 



5. 내장함수 prompt


내장함수 prompt

-사용자의 입력을 받아 자바스크립트로 인식시킬때 사용하는 내장함수이다.


-prompt(“문자열”)

 


<HTML>

<HEAD>


<SCRIPT LANGUAGE="JAVASCRIPT" >

<!--

    var su;

    su=prompt("값을 입력 하세요");    //유저로부터 문자열을 입력받습니다.

    document.write("입력된 값은  " + su + "입니다.")

//-->

</SCRIPT>


</head>

<BODY>


</BODY>

<HTML>

 

.



6. 내장함수 confirm

- 확인과 취소 버튼을 가지는 메시지 상자입니다.




- 확인을 선택하면 true 반환 합니다.

- 취소를 선택하면 false 반환 합니다.


<HTML>

<HEAD>

<SCRIPT LANGUAGE="JAVASCRIPT"> 


  var res;


  res = confirm("계속하겠습니까?");


  if (res == true) 

    document.write("진행을 선택했습니다.");

  else

    document.write("취소 되었습니다.");

</SCRIPT>

</HEAD>


<BODY>

</BODY>

</HTML>

 





감사합니다. 일요일 마무리 잘하세용. :)


'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 Date 객체 (7장)  (0) 2017.06.13
자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09
자바스크립트 연산자(2장)  (0) 2017.06.09

안녕하세요 2년차 개발자 진쓰입니다.

전략패턴, Strategy pattern 에 대해서 포스팅 시작하겠습니다.


- 의도

다양한 알고리즘이 있을 때, 이들을 각각의 클래스로 캡슐화하여 만들고, 알고리즘 대체가 가능하도록 하고자 할 때 사용합니다.


- 활용

알고리즘 행위가 조금씩 다를 뿐, 개념적으로 관련된 많은 클래스들이 존재할 때 활용합니다.


알고리즘 변형이 빈번하게 필요한 경우 활용합니다.



예제상황과 코드로 배워보도록 하겠습니다.


- 예제상황



많은 데이터를 검색하려고 한다.

검색을 할 때, 상황에 따라 다양한 정렬알고리즘을

바꿔가면서 적용하려고 한다.

 




- 코드리뷰


코드구성


 Sort.java

전략을 바꿀 수 있는 매개체 인터페이스입니다.

 import java.util.List;

public interface Sort {
    public void sort(List <Object> al);
}



 MergeSort.java

Merge sort 전략 클래스입니다.

 

import java.util.List;
public class MergeSort implements Sort {
    @Override
    public void sort(List<Object> al) {
       System.out.println("Merge Sort!!!");
    }
}


 QuickSort.java

Quick sort 전략 클래스입니다.

 import java.util.List;

public class QuickSort implements Sort {
    @Override
    public void sort(List<Object> al) {
       System.out.println("Quick Sort!!!");       
    }
}



 SortEngine.java

Sort sorter는 현재 전략을 가르키는 객체변수이다.

Main에서 SortEngine을 생성하고 상황에 따라 전략을 set한다.

 


import java.util.ArrayList;
import java.util.List;
public class SortEngine {
    private Sort sorter;    
    public SortEngine(Sort ss){
       sorter = ss;
    }
    public void setSorter(Sort ss){
       this.sorter = ss;
    }
    
    public List<Object> search(){
       //sort할, array 값을 구성.
       List list = new ArrayList<Object>();      
       
       sorter.sort(list);
       return list;
    }  
}


.



 Main.java

1. Quick sort 전략을 생성하여, SortEngine에 넣고 search() 호출합니다.

2. Merge sort 전략을 생성하고, SortEngin에 넣고 search() 호출합니다.


전략을 바꿔가며(알고리즘을 바꿔가며) serach를 수행중이다.

 


public class Main {
    public static void main(String[] args) {
       
       //엔진생성
       SortEngine se;
       //퀵소트 Strategy 생성
       Sort st = new QuickSort();       
       //엔진생성 + 퀵소스 Strategy 설정.
       se = new SortEngine(st);       
       //엔진이 퀵소트를 실행
       se.search();     
       
       //머지소트 Strategy 생성
       st = new MergeSort();
       
       //엔진에 머지소트 Strategy 설정
       se.setSorter(st);       
       //엔진 머지소트 실행
       se.search();
       
    }
}




결과화면







- UML


> UML 설명


전략(알고리즘)을 나타내는 Sort 인터페이스가 있고, QuickSort와 MergeSort각각의 전략이 있다.

SortEngine은 Sort를 has a 관계로 가지고있다.

SortEngine의 전략(알고리즘)은 Main에서 setSorter()를 통해서 바뀌게되고

변경된 전략으로 search()를 수행한다.



- 정 리

전략 패턴을 사용하면?


> 관련 알고리즘 집합을 형성할 수 있습니다.


> 알고리즘의 선택 혹은 대체가 가능합니다.


> 알고리즘 객체 수가 증가 합니다.



고생하셨습니다 좋은 하루되세요 :)


'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

프록시 패턴 (Proxy pattern)  (0) 2020.05.31
추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
어댑터 패턴 Adapter Pattern  (0) 2017.06.10
상태패턴 State Pattern  (0) 2017.06.10
팩토리 메소드 Factory method  (0) 2017.06.10

안녕하세요. 살빼고싶은 개발자 진쓰입니다. 어댑터 패턴에 대해서 포스팅 시작하겠습니다.



- 의도

이미 제공되는 기능이 형태가 달라, 필요로하는 형태로 변경하고자 할 때 사용합니다.



- 활용

기존의 클래스를 사용해야 하나 인터페이스가 수정되어야 하는경우 사용합니다.  (인터페이스 수정은 지양해야됩니다.)


기존 라이브러리 모양을 달리하여 재사용하고자 할 경우 사용합니다. (라이브러리를 직접 수정할수는 없죠.)



역시 예제상황과 코드리뷰로 배워보도록 하겠습니다.



- 예제 상황

-LED Framework를 제공되어졌다. 

LED를 끄고 RGB 색상으로 켜고 하는 메소드들을 제공받았다.(Framework)

하지만, 우리하드웨어는 켜있는 상태에서 다른 색상을 켜면 색이 섞이는 현상이 생겨서, 무조건 한번 끄고 색상을 켜는 기능을 추가로 하고싶다.


Framework자체를 수정해버리면, 하드웨어가 바뀌면 또다시 Framework를 되돌려야 하는 부담감이 있다. 




- 코드리뷰


소스코드 구성




 ILedFramework.java

개발자가 제공받을 LedFramework.java 의 api를 추출하여 인터페이스를 생성했습니다. 

 public interface ILedFramework {

    //기존메소드, 기존의기능에서 수정할 메소드 구현, 완전 새로운 메소드 구현
    public void ledOff();
    public void ledOn(String color);    
    public void ledBlink(String color1);
}



 LedFramework.java

개발자가 받은 API입니다. 문제가 있죠?(색이 섞이는 현상코드로 구현되어있음)

 //adatee

public class LedFramework {
    public int state = 0;
    public String curColor;
    
    public void ledOn(String color){
       if(state==0){
           System.out.println("LED "+color+" ON");
           curColor=color;
           state=1;
       }
       else{
           if(curColor.equals(color)){
               System.out.println("LED "+color+" ON");
               state=1;
               return;
           }
           //색이 섞인 경우발생.
           
           if(color.equals("RED")){
               curColor=curColor+" RED";
               System.out.println("LED "+curColor+" ON");        
           }
           else if(color.equals("BLUE")){
               curColor=curColor+" BLUE";
               System.out.println("LED "+curColor+" ON");
           }
           else if(color.equals("GREEN")){
               curColor=curColor+" GREEN";
               System.out.println("LED "+curColor+" ON");    
           }   
           
       }
    }
    public void ledOff(){
       System.out.println("Led Off");   
       state = 0;
       curColor="";
    }
    
}



 LedFrameworkAdpater.java

1. LedframeWork는 implements 하였습니다. 

2. LedFramework(색이 섞이는 문제가 있는부분) 를 has a 관계로 가지고있습니다. 

3. ledOn을 보시면 기존의 ledOn을 호출하기전 ledOff를 먼저 호출하도록 수정하였습니다. 

4. ledBlink라는 새로운 기능을 추가하기도 했습니다.


 public class LedFrameworkAdpater implements ILedFramework{

    //1. 확장하려는 클래스를 멤버변수로 선언.
    public LedFramework led;
    //2. 생성자에서 생성.
    public LedFrameworkAdpater(){
       led = new LedFramework();
    }
    
    //3. 기존메소드, 기존의기능에서 수정할 메소드 구현, 완전 새로운 메소드 구현
    @Override
    public void ledOff() {
       led.ledOff();
    }
    @Override
    public void ledOn(String color) {
       ledOff();
       led.ledOn(color);
    }
    @Override
    public void ledBlink(String color1) {
       for(int i=0;i<10;i++){
           ledOff();
           led.ledOn(color1);
       }
    }
    
    
}



 Main.java

led프레임워크를 그대로 사용하는 경우와, 어댑터 패턴을 적용한 객체를 생성해서 사용하는 예제를 볼 수 있다. 

 public class Main {

    public static void main(String[] args) {
       // TODO Auto-generated method stub
       LedFramework led = new LedFramework();
       led.ledOn("RED");
       led.ledOff();
       led.ledOn("RED");
       led.ledOn("BLUE");
       led.ledOn("GREEN");
       led.ledOff();
       led.ledOn("GREEN");
       
       System.out.println("LED프레임워크 -> 어댑터 패턴 적용\n\n\n\n");
    
       ILedFramework newLed = new LedFrameworkAdpater();
       newLed.ledOff();
       newLed.ledOn("RED");
       newLed.ledOn("BLUE");
       newLed.ledOn("GREEN");
       newLed.ledBlink("GREEN");
    }
}



결과화면


Adpater패턴 적용 전 


 Red를 켜고 Blue를 켜버리면, Red와 Blue가 섞이게 된다.

 Adpater패턴 적용 후


색이 안섞이는것을 볼 수있다.

 

 


.


- UML

> UML 설명

ILedFramework 인터페이스로, 기존에 제공받은 LedFrameWork api와 더불어 유저가 추가하고싶은 ledBlink()메소드도 선언하였습니다.



LedFrameworkAdpater.java 는 ILedFramework를 implements하였으며 프레임워크(LedFramework)를 has a 관계로 가지고있습니다.

ledOn은 기존의 기능에 새로 추가된 내용을 덧 붙혔으며, ledBlink는 기존 LedFramework가 없는 기능입니다.


어댑터 패턴의 장점을 보실 수 있습니다.(플랫폼에 알맞게 수정, 확장)




- 정리

지금 포스팅된 어댑터 패턴은 Object Adapter 패턴입니다. 일반적으로 많이 사용됩니다.


오브젝트 어댑터 패턴을 사용하면, Adaptee 클래스의 하위 클래스에 대해서도 소스코드 변경없이, 이를 활용하여 새로운 기능 추가가 편리해집니다.




정독해주셔서 감사합니다.

항상 정성을 다해서 포스팅 하도록 하겠습니다 :)

'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
전략 패턴 Strategy pattern  (0) 2017.06.10
상태패턴 State Pattern  (0) 2017.06.10
팩토리 메소드 Factory method  (0) 2017.06.10
싱글톤 패턴 Singleton pattern  (0) 2017.06.09

풀스택개발자를 지향하는 진쓰의 디자인패턴 - 상태패턴 블로그 포스팅 시작하겠습니다.


의도

 - 객체 자신의 내부상태에 따라 행위를 변경하는 효과를 주고자 할 때 사용합니다.



활용

- 객체 행위는 상태에 따라 달라질 수 있다. 객체의 상태에 따라서 프로그램이 실행 중 행위가 바뀌어야할 때 활용할 수 있습니다.


- 객체 상태에 따라 수많은 if를 갖도록 구현해야하는데 이를 피해보고자 할 때 사용합니다.



역시 개발자는 코드를 보면서 공부를 해야제맛이죠. 

예제상황 살펴보시겠습니다.


 

- Edit 프로그램을 구현하려 한다.


하나의 문서를 열 수 있으며, 

문서가 수정상태일 경우, =>          문서의 저장, 열기, 종료 기능을 처리하는 방법은,

문서가 수정상태가 아닌 경우의  => 처리 방법을 다르게 동작한다고 한다.




코드리뷰


- 구조





 State.java   // 작명을 잘못한것같애요. UML부분에 이유를 설명드리겠습니다.

 public interface State {

    public void open();
    public void close();
    public void save();
    public void edit(String text);  
}




 InitState.java


State를 implements 하여 구현하였습니다. 앞서배웠던 싱글톤 패턴으로 작성되어있는것도 살펴보실수 있습니다.


 public class InitState implements State {

    private InitState(){}
    private static InitState init;
    public static InitState getInstance(){
       if(init ==null)
           init = new InitState();
       return init;
    };
    
    @Override
    public void open() {
       //System.out.println("새로 문서가 열렸습니다.");
    }
    @Override
    public void close() {
       System.out.println("문서 수정없이 문서가 닫혔습니다.");
    }
    @Override
    public void save() {
       System.out.println("저장할 것이 없습니다.");
    }
    @Override
    public void edit(String text) {
       System.out.println("init 상태 -> modify상태 ");
        EditEngine.setState(ModifyState.getInstance());
    }
}




 ModifyState.java

 public class ModifyState implements State {

    private ModifyState(){}
    private static ModifyState modify;
    public static ModifyState getInstance(){
       if(modify ==null)
           modify = new ModifyState();
       return modify;
    };
    
    @Override
    public void open() {
       System.out.println("이미 열려있는 파일이 있습니다.파일을 저장하고 엽니다.");
       save();
    }
    @Override
    public void close() {
       System.out.println("수정된 사항이있습니다. 파일을 저장하고 종료합니다.");
       save();
    }
    @Override
    public void save() {
       System.out.println("현재내용을 저장합니다.");
        EditEngine.setState(InitState.getInstance());
    }
    @Override
    public void edit(String text) {
       System.out.println("편집 상태 -> 편집상태 (상태변화없음)");
       
    }
}




 EditEngine.java


여기서 EditEngine은 state를 가지고 있는데, public static으로 선언되어있어서, State 인터페이스를 implements한 클래스들이 접근할 수 있도록 만들어 놓았습니다.

 public class EditEngine {

    
    private String text ="";
    private static State myState = InitState.getInstance();
    
    public void setText(String text){
       this.text = text;
    }
    public String getText(){
           return text;
    }
    public static void setState(State state){
       myState = state;
    }
    
    public void open(){
       myState.open();
       System.out.println("문서가 open되었습니다.");
    }
    public void close(){
       myState.close();
       System.out.println("문서가 종료 되었습니다.");
    }
    public void edit(String text){
       myState.edit(text);
       System.out.println("문서가 편집되었습니다");
    }
    public void save(){
       myState.save();
    }
}



.


 Main.java

 public class Main {

    public static void main(String[] args) {
       
       EditEngine edit = new EditEngine();
       
       edit.open();
       edit.edit("안녕");
       edit.save();
       edit.save();
       
       System.out.println("\n\n");
       edit.open();
       edit.edit("Jinss Programming Lecture");
       edit.open();
       edit.close();
       
       System.out.println("\n\n");
       edit.open();
       edit.edit("끝내자");
       edit.close();
       
    }
}


결과화면





UML


UML 설명


- State에 문서가 가질수있는 상태 혹은 동작 들을 인터페이스로 구현하였습니다.  음... 동작이라는 표현이 더 와닿는것 같기도합니다.

어쨌든 State 인터페이스를 상속받아 InitState와 ModifyState 를 각각 두웠습니다.

덕분에 InitState일때와, ModifyState일때 open, close, save, edit 라는 행위를 할때는 State에 따라 다르게 동작하게 됩니다.


그러고보니 인터페이스인 State는 막상 State라는 의미이기보단 Behavior? 라는게 더 알맞는 작명일것 같습니다.

뭐 개발자 나름이니깐 저는 그렇게 판단이 되네요.



어쩄든 EditEngine은 State를 가지고있는 has a 관계를 형성하고있습니다.

Main에서 EditEngine을 생성하고 단지 open, close, save, edit만 하면 상태에 따라서 알아서 착착착 다르게 호출되며 돌아가게 됩니다.



그리고 EditEnngine는, setState(state: State): void 를 static method로 선언해서, InitState와 ModfityState에서 접근하여 상태를 바꿀 수 있도록 해놓았습니다.  


EditEngine은 State인터페이스 변수를 두고있고, 현재 상태를 InitState혹은 ModifyState 로 갱신해야되니 뚫어놓아야겠죠?



정독해주셔서 감사합니다 :)




'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
전략 패턴 Strategy pattern  (0) 2017.06.10
어댑터 패턴 Adapter Pattern  (0) 2017.06.10
팩토리 메소드 Factory method  (0) 2017.06.10
싱글톤 패턴 Singleton pattern  (0) 2017.06.09

안녕하세요. 풀스택개발자를 지향하는 진쓰입니다.

디자인패턴 팩토리메소드 포스팅 시작하겠습니다.




목적

- 개발자는 객체를 생성해서 사용해야하는데, 어떤 객체를 생성할지, 어떤 객체가 생성가능할지 없을 때 사용할 수 있습니다.




활용

- 생성할 객체 타입을 예측할 수 없을 때 활용합니다.


- 객체 생성의 책임을 하위 클래스에게 위임시키고, 어느 하위 클래스에게 위임했는지에 대한 정보를 은닉하고자 할 때 활용합니다.




목적과 활용으로 봐서는 감이 안오실수있습니다. 예제를 통해 살펴보고 설명하도록 하겠습니다.

예제

- 교통수단이 되는 것을 만들어내는 회사가 있다. 이회사는 택시와 자전거를 만들어내는 회사다.





코드리뷰


 - 구성




 TransProduct.java

 public abstract class TransProduct {

    abstract void useTrans();
}




 TransProduct_Taxi.java

 public class TransProduct_Taxi extends TransProduct {

    @Override
    void useTrans() {
       System.out.println("Using Taxi");    
    }
}



 TransProduct_Bicycle.java

 public class TransProduct_Bicycle extends TransProduct {

    @Override
    void useTrans() {
       System.out.println("Using Bicycle");       
    }
}



.



 TransCreator.java

 //추상 클래스.

//Caller는 Interface혹은 abstract 클래스를 통해, Callee와 연결해야된다.
public abstract class TransCreator {
    //TransProduct 생성하는 팩토리 메소드(자전거, 택시)
    public abstract TransProduct transCreate(String trans);
}




 RealTransCreator_TransCompany.java

 public class RealTransCreator_TransCompany extends TransCreator {

    @Override
    public TransProduct transCreate(String trans) {
       
       if(trans.equals("taxi")){
           return new TransProduct_Taxi();
       }
       else{
           return new TransProduct_Bicycle();
       }   
       
       
    }
}



Main.java 

 public class Main {

    public static void main(String[] args) {
       
       //교통수단을 만들어내는 생산자 선언.
       TransCreator tc = new RealTransCreator_TransCompany();
       
       //Caller(Main)은 Callee를 직접변수를 선언하지않고 생성.
       //항상 인터페이스(중간매체, 추상클래스포함)를 통해 생성.
       
       TransProduct tp;
       
       //교통수단 - 자전거 생성
       tp = tc.transCreate("bicycle");
       
       //자전거 기능 이용.
       tp.useTrans();
       
       //교통수단 - 택시 생성
       tp = tc.transCreate("taxi");
       
       //택시 기능 이용.
       tp.useTrans();
    }
}



결과화면





UML




- UML 설명

TransCreator 클래스가 부모 클래스 입니다.

RealTransCreator가 진짜 객체를 만드는 클래스 입니다. 

여기선 RealTransCreator가 Bicycle과 Taxi를 생성하여(TransProduct)반환한다.



*) 여기서 회사가 만들어내는 제품이 늘어난다면?

(1) TransProduct 상속받는 클래스 추가합니다.

(2) RealTransCreator_TransCompany(Product를 생성하는 클래스)에서도 transCreate 수정합니다.

(Product가 늘어났으니!,dependency 관계니깐)



 RealTransCreator_TransCompany는 TransProduct_Bicycle, TransProduct_Taxi와 dependency 관계라서 Product가 늘어났다는것은 RealTransCreator_TransCompany역시 수정되어야 한다는 의미이다.



점선화살표는 dependency 를 의미합니다.





객체지향 원칙

Caller는 Callee를 직접 만들어 호출하지 않는다.


=> 여기선, TransCreator에서 TransProdcut_Taxi와 TransProduct_Bicycle을 만들 수 있지만, 

RealTransCreator_TransComapny 라는 sub 클래스를 하나 둬서 , 실제 TransProduct를 생성하여 반환하도록 하였다.


이처럼 객체지향언어에서는 Caller는 Callee를 직접만들어 호출하지않고 한단계를 더 둔다=>결합도를 떨어트리기 위해서이다.







정독해주셔서 감사합니다 :)

'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
전략 패턴 Strategy pattern  (0) 2017.06.10
어댑터 패턴 Adapter Pattern  (0) 2017.06.10
상태패턴 State Pattern  (0) 2017.06.10
싱글톤 패턴 Singleton pattern  (0) 2017.06.09

안녕하세요 풀스택개발자를 꿈꾸는 진쓰입니다.

디자인패턴 - 싱글톤 패턴 포스팅 시작하겠습니다.

부족한부분은 포스팅 밑부분, 싱글톤 패턴 영상으로 보충하실수있습니다.




의도

=> 클래스를 생성하는 인스턴스가 오직하나여야 한다.


인스턴스 접근 혹은 생성 역시 한가지의 방식으로만 제공하여 오직, 

하나의 인스턴스만 생성하고 이용할수 있게된다.




활용

- 클래스 인스턴스가 오직하나여야함을 필요로 하는곳에 활용할 수 있습니다.

- 모든 클라이언트가 하나의 인스턴스만 사용해야하는 경우에 활용할 수 있습니다.


싱글톤 패턴 만드는 방법!  딱 3가지만 숙지하시면 됩니다.

1. private 생성자 선언 합니다.


2. private static 인스턴스 변수 선언 합니다.


3. public static getInstance() method 구현 해야합니다.





예제 코드로 살펴보시겠습니다.


예제상황: 안드로이드 시스템에서 스피커객체는 유일하게 하나만 존재해야 하며, 

스피커의 객체에서 attribute값 중하나인 시스템사운드 크리를 읽어 오려한다.





시스템 스피커의 클래스 선언부입니다.


 SystemSpeaker.java

 public class SystemSpeaker {

    //원래는 private, getter, setter 필요. 편의상.
    public int systemVol = 5;
    //2. private static 인스턴스 변수
    private static SystemSpeaker ss = new SystemSpeaker();
    
    //3.public static getInstance() method 구현.
    public static SystemSpeaker getInstance(){   
       //if(ss==null){
       //  ss = new SystemSpeaker();
       //}
       return ss;     
    } 
    //1.private 생성자.
    private SystemSpeaker(){    
    }
  
    //4.다양한 방법 존재.
    /*
     * 시작과 동시에 객체를 생성할것인가 혹은, 프로그램 러닝중에 객체를 생성할 것인가.
     *
     *
     */
}


위와 같이 SystemSpeaker.java 를 생성하면, 자바 가상머신이 시작할때 바로 객체가 미리 생성하고 프로그램이 시작된다.


아래와같이 SystemSpeaker.java를 생성하면 프로그램이 실행중에 객체를 1번 생성하게된다. (필요할때 생성하는 방식)


어느것을 선택할지는 개발자 몫이다.


  SystemSpeaker.java

 public class SystemSpeaker {

  
    public int systemVol = 5;  
    //2. private static 인스턴스 변수
    private static SystemSpeaker ss;
    //3.public static getInstance() method 구현.
    public static SystemSpeaker getInstance(){ 
       if(ss==null){
           ss = new SystemSpeaker();
       }
       return ss;     
    }
    
    //1.private 생성자.
    private SystemSpeaker(){
       
    }

}

.


스피커 객체를 생성하고 값을 읽어오는 메인부입니다.

 Main.java

 public class Main {

    public static void main(String[] args) {    

       //객체1생성

       //SystemSpeaker ss = new SystemSpeaker();

       SystemSpeaker ss1 = SystemSpeaker.getInstance();

       //객체2생성

       SystemSpeaker ss2 = SystemSpeaker.getInstance();

       //객체의 주소 비교.

       System.out.println(ss1);

       System.out.println(ss2);   

       //객체의 attribute값 읽어오기.

       System.out.println(ss1.systemVol);

       System.out.println(ss2.systemVol);       

    }

}

 



객체의 주소를 비교해본 결과, 같은 객체임을 알수있다.






정리

- 유일하게 존재하는 인스턴스 접근을 통제하고자 할 때 사용하면 됩니다.


- 싱글톤 패턴을 사용하면 인스턴스가 오직한개이기때문에 변수영역을 줄일 수 있습니다.





정독해주셔서 감사합니다. :)



'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
전략 패턴 Strategy pattern  (0) 2017.06.10
어댑터 패턴 Adapter Pattern  (0) 2017.06.10
상태패턴 State Pattern  (0) 2017.06.10
팩토리 메소드 Factory method  (0) 2017.06.10

안녕하세요 풀스택 개발자를 꿈꾸는 진쓰입니다.

자바스크립트 4장 -   제어문2 - 반복문 포스팅 시작하겠습니다.


목차입니다.


(1). for 문 개념

(2). for 문 원리

(3). while문 개념

(4). while문 원리

(5). do~while문 개념

(6). while과 do~while의 차이




(1). for 문 개념


제어문 : 프로그램이 흐름을 제어 합니다.

제어문의 종류: 

        - 비교문, 반복문이 있습니다.

비교문

        - if 

        - switch ~ case문

반복문

        - for, while, do ~while



(2). for 문 원리를 살펴보겠습니다.

반복문의 순서는 a.초기화를 최초 1회 후 아래와 같은 순서로 계쏙 진행됩니다.

b->c->d->b(조건이참이면, 계속 진행)->c->d->b(조건이 거짓이면 for문 종료)



예제코드 

결과 

 <HTML>

<HEAD>

<TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

   var i;

   for(i=1; i<=10 ; i++){

    

     document.write(i+"<br>");  

   }  

// -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 



문제


1부터 20까지 짝수 합을 구하시오.

 예제코드

결과 

 

<HTML>

<HEAD>

<TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

   var i, hap=0;

   for(i=2; i<=20 ; i+=2){

     hap=hap+i;

   

   }  

   document.write(hap +"<br>");  

// -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 




(3). while문 개념


while문도 for문과 같이 반복문입니다.

모든 for문과 while문은 치환이 가능합니다.



(4). while문 원리


while(조건){


   수행문...


} 


조건이 참이면 수행문을 수행합니다.

조건이 거짓이면, 수행문을 수행하지않고 while문 종료합니다.



 예제코드 입니다.

결과 화면 입니다.

 <HTML>

<HEAD>

<TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

    var  cnt = 1;         

    while(cnt <= 5){     

      document.write("Nice !" +"<br>");

      cnt += 1 ;      

 }            

// -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 



(5). do~while문 개념




do{


   수행문...


} while(조건)



일단 수행문은 무조건 1회 실행됩니다.

그 이후 조건이 참이면 또한번 수행문을 실행하고, 

또 조건을 따져서 참이면 수행문실행, 거짓이면 while문 종료 됩니다.



예제코드 입니다.

결과 입니다.

 <HTML>

<HEAD>

<TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

    var cnt = 1;         

    do{     

      document.write("Nice !" +"<br>");

      cnt += 1 ;      

    }while(cnt <= 5);         

// -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 




(6). while과 do~while의 차이.



가장 큰차이점입니다. 처음부터 조건을 따지느냐, 일단 최소 1회는 수행문을 시작하느냐가 다릅니다.



문제


1에서 10까지의 수 중 홀수의 합을 구하시오.

(단, do~while문을 이용하시오.)


=> 구독자 스스로 해보시기 바랍니다. :)



문제코드답 

결과 

 

 



정독해주셔서 감사합니다. :)


'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09
자바스크립트 연산자(2장)  (0) 2017.06.09
자바스크립트 개요(1장)  (0) 2017.06.08

안녕하세요 풀스택 개발자를 꿈꾸는 진쓰입니다.

자바스크립트 3장 - 제어문 1(if, switch) 포스팅 시작하겠습니다.


목 차

(1). if 문

(2). if ~ else 문

(3). if ~ else 문 if ~ else 문

(4). switch~ case 문

(5). switch ~ case 문의 flow

 



포스팅에 앞서 잡설 하겠습니다.


프로그래밍을하다보면 수많은 조건, 상황, 예외에 따라 실행을 각기 다르게 해줘야할 필요가있습니다.

이럴때 제어문을 써야하는데요.

제어문은 자바스크립트 뿐만 아니라 수많은 프로그래밍 언어에서도 같은 맥락으로 사용되고있습니다.

이번 포스팅으로 제어문을 배워보도록 하겠습니다.


(1). if 문

제어문 : 프로그램이 흐름을 제어할 때 사용되는 구문입니다.


제어문의 종류: 

비교문, 반복문이 있습니다.


if문 시리즈

if ~

if ~ else

if ~ else if ~ else





if 문 예제를 살펴보겠습니다.

먼저 if문의 구조입니다.


 if( 조건식 ) {

  실행문

  .....

}


조건식이 참 - 실행문을 합니다.

조건식 거짓 - if문 탈출 합니다.



 예제코드 입니다.

 결과 입니다.

 <html>

<head><title> </title>

<script language="javascript">

<!--

A = 300;

B = 5 ;

document.write("자바스크립트 예제"+"<br>");

if(A>B){

  document.write( A + "값이 더 큽니다");

}

//-->

</script>

</head>

<body>

</body>

</html>

 


.



(2). if  ~  else 문


 if( 조건식 ) {

  실행문1;

  .....

 }

 else {

  실행문2;

}



 

조건식이 참 - 실행문1 실행 합니다.

조건식이 거짓 - 실행문2 실행 합니다.



 예제코드 입니다.

결과 입니다.

 <html>

<head><title> </title>

<script language="javascript">

<!--

A = 10;

B = 30 ;

document.write("자바스크립트 예제"+"<br>");

if(A>B){

  document.write( A + "값이 더 큽니다");

}

else

{

  document.write( B + "값이 더 큽니다");

}

//-->

</script>

</head>

<body>

</body>

</html>

 





(3). if ~ else 문 if ~ else 문



-조건이 여러 개인 경우 else if 사용합니다.


-else if문은 여러 개 나올 수 있다.


-더 이상 조건을 나열하지 않고 그 외의 것을 명시하고자할때 else 실행문을 실행하게 된다.




if(조건1){

      실행문1 ;

else if(조건2)

     실행문2 ;

else if(조건3)

     실행문3;

.....

else 

    실행문 x;

}

 



조건1을 만족하면 실행문1을 실행합니다.

조건2를 만족하면 실행문2를 실행합니다.

조건3을 만족하면 실행문3을 실행합니다.

위 의 모든 조건을 만족하지 않으면 실행문 x을 실행합니다.



 예제코드 입니다.

결과 입니다.

 <HTML>

<HEAD>

<TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- 

var score;

score = prompt("점수를 입력해 주십시오."); //유저로부터 점수입력받음

if (score >= 90)

{

document.write("A학점 입니다.");

}

else if (score >= 80)

{

document.write ("B학점 입니다.");

}

else if (score >= 70)

{

document.write ("C학점 입니다.");

}

else if (score >= 60)

{

document.write ("D학점 입니다.");

}

else

{

document.write ("F학점 입니다.");

}

// -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 

위 예제에서는 85점입력했을때 결과화면


(4) Switch ~ case 문


switch(변수 혹은 수식){


  case 값1:

       수행문1;

       break;

  case 값2

        수행문2;

        break;

  default :

       수행문3;

}




switch문의 뼈대라하면, case, 값, break 이렇게 따라오는데 특히, case와 break는 switch문의 예약어로 쓰이기도 합니다. 

특히 break는 반복문을 빠져나오는 예약어이기도 하죠.


아무튼, 변수 혹은 수식, 에 맞게 "값"으로 분기를하고 "break"를 만나면 case문은 종료하게됩니다.


가끔 프로그래머는 의도적으로 "break"문을 빠트려서, 여러 case 값: 구문들이 실행되게 하는 경우도 있습니다. 

아래 유튜브 강의를 보시면 예제를 보실수있습니다.



 예제코드 입니다.

결과 입니다.

 <HTML>

<HEAD>

<TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

   var Num;

   Num= prompt("번호를 입력해주세요! 혹은 알파벳을 입력해주세요.");

     

   switch(Num){

       case "1" :

               document.write(“1를 선택하셨습니다." ); break;

       case "2" :

               document.write(“2을 선택하셨습니다." ); break;

       case "3" :

               document.write(“3을 선택하셨습니다." ); break;

       case "4" :

               document.write(“4를 선택하셨습니다." ); break;

       default :

               document.write("번호를 잘못 누르셨습니다." );

   } // switch문을 닫아줌

// -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 

위 예제에서는 3을 입력했을때 결과화면 입니다.


3을 입력하면 case "3" 이하의 구문을 실행하고 break를 만나서 case문을 탈출하게 되죠.



정독해주셔서 늘 감사합니다. :)

아래는 유튜브 강의영상입니다.




'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 연산자(2장)  (0) 2017.06.09
자바스크립트 개요(1장)  (0) 2017.06.08

+ Recent posts

티스토리툴바