kohen's 기록

[Back-end]Procedure? StoredProcedure

코헴 — Tue, 30 Jul 2019 16:52:23 +0900

Procedure

프로젝트를 하다가 데이터베이스와 관련된 글들을살펴보면 간혹 프로시저에 대한 내용들이 나온다. 매번 그냥 넘겨짚어서 아 이런게 있구나 했지만 알아두면 좋을것 같아서 따로 정리해보기로 했다.

프로시저란

간단하게는 프로그램을 여러개의 단위로 분해한것을 프로시저라고 한다.

보통 기능에따라 분해되는 단위로 프로시저라고 일컫는데, 이를 세부적으로는 서브 프로시저와 함수 프로시저로 구분한다고한다.

서브 프로시저

프로시저를 수행후 결과값을 반환하지 않는 프로시저를 말한다.

[Private][Public][Static] Sub 프로시저명 [Args]
    [명령문]
    [Exit Sub]
    [명령문]
End Sub

위는 서브 프로시저의 구문 형태를 나타내고있다.

Private, Public같은 경우 프로시저의 유효범위, Static은 정적 프로시저인지, Args는 서로다른 프로시저간의 정보 교환 수단으로 사용된다. 프로시저 수행 중간에 Exit Sub 명령을 만나게되면 프로시저를 빠져나온다.

프로시저의 유효범위를 생략하면 디폴트로 Public이다.

서브 프로시저는 더 구체적으로 사건(Event) 프로시저와 사용자정의 프로시저로 구분된다.

사건(Event) 프로시저

해당 사건이 발생하면 자동적으로 실행된다 (ex: click, drag..)

사용자 정의 프로시저

호출시에만 실행된다, 이벤트 프로시저는 어떤 객체에 이벤트가 발생하면 생성되는 프로시저로, 프로시저명이 객체명_이벤트()로 표현된다.

서브 프로시저를 호출 할 때는 다음과 같은 형식을 이용한다.

[Call] 호출할 프로시저 명 [Args]

함수 프로시저

함수 프로시저는 사용자가 정의하여 사용하는 사용자 정의 함수를 말하는데, 결과값을 호출 프로시저에게 반환하는 특징을 갖고있다.

[Private][Public][Static] Function 함수이름 [Args][As 자료형]
    [명령문]
    [Exit Function]
    [명령문]
End Function

As 자료형은 함수가 수행을 완료한 후 반환할 결과 값의 자료형을 나타낸다.

함수 프로시저를 호출하는 형식은 다음과 같다.

변수=함수이름(매개변수 리스트)

함수 프로시저에서 호출된 프로시저로 반환되는 형식은 다음과 같다

함수이름 = 결과 값

여기까지 프로시저에 대한 개념을 알아보았다. 솔직히 말해서 개발하면서 흔히 사용하는 함수랑 무슨 차이가 있는가 싶었다.

그래서 더 검색해보고 공부해본 결과.. 프로시저란것은 결국 어떤 행동을 수행하기 위한 일련의 작업 순서를 말하는것인데, 이런 점들만 생각을 해보면 기존에 함수를 통해서 구현한 코드또한 프로시저일수 있는것이다. (다만 좀더 원시적인 용어로써 받아들여질 뿐)

그리고 한가지 중요하게 구분되어야 할 점이 있는데, 처음 내가 궁금했던 프로시저에 대한 의미는 사실 Stored Procedure라는 구분된 개념이라는 점이다.

저장 프로시저(Stored Procedure)

저장 프로시저는 데이터베이스에서 일련의 쿼리를 마치 하나의 함수처럼 실행하기 위한 쿼리의 집합이다. 일반적인 RDBMS에 저장되고, 영구저장모듈(Persistent Storage Module)이라고도 불린다. (SP라고도 불리고..)

이런 저장 프로시저를 활용하는 이유는 다음과 같다.

개발 측면

반복적인 작업을 피할 수 있다.
- 함수의 특징과도 같은..
개발 언어에 비의존적이다
- SP는 RDBMS에 종속된 개념이므로
확장 및 유지보수가 간편하다
- DB관련 작업을 수정할때 프로시저만 건드리면 되기 때문
프로그램 에러 확률이 줄어든다
- 이부분은 사실 경험해보지 않아서 잘은 모르겠다

성능 측면

최적화 및 캐싱
- SP는 최초 실행될 때 최적화된 상태로 컴파일이 되고 이후 DB에 캐싱되어 저장된다. 캐싱이후에는 최적화와 컴파일 작업을 다시 수행하지 않는다.
네트워크 트래픽을 감소 시킨다.
- 개발단에서 날리던 쿼리를 DB 서버에서 자체적으로 처리하니 트래픽이 크게 감소된다

보안 측면

SP에서 참조하고 있는 테이블에 접근 권한을 설정할 수 있다. (자바 언어의 특징인 은닉성과 같은 특징을 갖는다고 생각해보면 될것같다. getter를 통해서 실제 데이터에 접근하는 등..)

_{참고 링크 : https://itability.tistory.com/51}

[gRPC] gRPC 심화

코헴 — Tue, 4 Jun 2019 08:55:59 +0900

gRPC 심화

gRPC는 RPC(Remote Procedure Call) 에서의 컨셉과 같이 한 프로세스가 원격 서버에서 호출할 수 있도록 하는 방식을 사용합니다.

gRPC는 여러 기술의 확장판으로 표현할 수 있습니다.

CORBRA와 같이 서비스 정의를 위해 IDL(Interface Definition Language)를 사용합니다.
Java RMI와 같이, 클라이언트가 로컬에서 원격 메소드를 호출합니다.
SOAP과 같이, 여러 언어를 위한 클라이언트 및 서버 코드를 자동으로 생성 가능합니다.
REST와 같이 HTTP를 (정확하게는 HTTP/2)를 사용합니다.

하지만 gRPC는 단순히 기술의 집합체가 아니라, 보다 더 많은 분야서 서비스 아키텍처의 창출을 위해 설계된 프레임워크입니다.

Protocol Buffer를 사용함으로써 payload 값을 가볍고 빠르게합니다.
HTTP/2를 통해 multiplexes long-lived된 TCP 연결을 지원하며 이를 통해 동시성과 효율적인 커뮤니케이션이 가능합니다.
클라이언트 - 서버 간 양방향 통신을 지원합니다.
확장가능한 미들웨어 API를 통해 Authentication, Authorization, flow-control, tracing, circuit-breaking, service policies 등을 구현 가능합니다.

또한 gRPC는 교차 플랫폼으로써 10개의 언어가 지원됩니다.

C++, Java, Python, Go, Ruby, C#, Node.js, Android Java, Objective-C, PHP

어떻게 동작하는가

대부분의 언어에서 gRPC 서비스를 만드는 것은 세가지 기본 단계로 이루어집니다.

Define IDL
protoc
Impl service

먼저 protocol buffers IDL 파일을 정의합니다. 이후 protocol bufferes 컴파일러인 protoc를 통해 선택한 언어에 대한 서비스 인터페이스, 클라이언트 스텁을 생성하며, 마지막으로 IDL에 정의된 서비스 인터페이스를 구현합니다.

자바 기반의 예제코드는 다음 사이트에서 확인가능합니다

내용 : https://blog.thecodeteam.com/2017/09/08/grpc-framework-efficient-service-architectures/

참고 : https://medium.com/@EdgePress/is-grpc-the-future-of-client-server-communication-b112acf9f365

[gRPC] RPC와 gRPC

코헴 — Thu, 30 May 2019 17:40:39 +0900

RPC 와 gRPC

과거에는 Client - Server간에 자료를 요청하고, 받을때 주로 Socket 프로그래밍을 활용하였습니다.

소켓은 대부분의 프로그래밍 언어에서 API 형태로 제공하고 있지만, 실제로 소켓을 통해 서비스되기 위해서는 여러 장애물이 있습니다.

네트워크가 언제나 빨라야함
서버는 클라이언트의 요청시 언제든 즉시 응답
클라이언트는 언제든 서버와 바로바로 연결

때문에 이런 환경 이외의 예외 상황들을 모두 대비해야하는데요, 이것은 순전히 개발자의 몫이었습니다.

이러한 소켓 프로그래밍의 문제점으로 인해 RPC(Remote Procedure Call) 이 등장하게 됩니다.

RPC는 위와 같은 구조로 도식화되는데,

Server에 있는 프로그램 정보를 알고있는 IDL(Interface Definition Langauge)을 활용해서 개발자는 network 통신과 관련된 작업은 신경쓰지 않아도 되고, 원격지에 위치한 프로그램을 로컬에 있는 프로그램 처럼 사용 할 수 있는 기술입니다.

이러한 RPC 기술은 근래의 HTTP기반의 REST가 유행하면서 많이 보이지 않았는데, 반대로 REST의 경우 호출하는 parameter와 응답 값이 명시적이지 않기 때문에, 오류의 여지가 많고 (API 스펙만 의존, 형 체크등을 안함) JSON을 HTTP를 통해서 쏘기 때문에, 속도가 느리다는 단점을 가지고 있습니다.

이러한 이유로 근래에 RPC 개념이 다시 유행하게 되면서 페이스북은 Thrift라는 바이너리 기반의 RPC 프레임워크, 구글은 RPC자체는 지원하지 않고 메세지(JSON 등)을 Serialize 할 수 있는 프레임워크로 PB(Protocol Buffer)를 제공해 왔는데, GRPC라는 개념으로, PB를 기본으로한 Serializer에 HTTP2를 붙여서 GRPC라는 이름으로 프레임워크를 릴리즈 하였습니다.

GRPC는 모던 프로그래밍 언어 (Node.js, python 등등) 대부분을 지원하며 요즘 유행하는 MSA와 물려서 RPC를 하나의 서비스로 하여 배포할 수 있는 대체 수단으로 부상하고 있어서, 만약에 실시간 양방향을 필요로하는 서비스를 구현함에 있어서는 좋은 대체 수단이 될수 있는 요소가 충분하다 볼 수 있습니다.

REST의 단방향의 한계를 극복하고, HTTP2 기반의 Streaming을 지원하며, REST대비 빠른 성능을 지원하기 때문에, 근래에는 외국 서비스 'Netflix'를 비롯하여 국내 서비스

출처

[JAVA] 변수의 초기화

코헴 — Wed, 22 May 2019 22:25:17 +0900

변수의 초기화

변수를 선언하고 처음으로 값을 저장하는 것을 '변수의 초기화'라고 한다.

멤버변수는 초기화를 하지 않아도 자동적으로 변수의 자료형에 맞는 기본값으로 초기화가 이루어지므로 초기화하지 않고 사용해도 되지만 지역 변수는 사용하기 전에 반드시 초기화를 해야한다.

class InitTest {
  int x;
  int y = x; //문제 없음

  void method() {
    int i;
    int j = i; // 컴파일 에러: 지역변수를 초기화하지 않고 사용함
  }
}

멤버 변수의 초기화 방법

명시적 초기화(explicit initialization)
생성자(constructor)
초기화 블럭(initialization block)
- 인스턴스 초기화 블럭 : 인스턴스 변수를 초기화 하는데 사용
- 클래스 초기화 블럭 : 클래스 변수를 초기화하는데 사용

명시적 초기화 (explicit initialization)

변수를 선언과 동시에 초기화하는 것을 명시적 초기화라고 한다. 가장 기본적이고 간단한 초기화 방법이며, 여러 초기화 방법 중 가장 우선적으로 고려되어야 한다.

class Car {
    int door = 4;
  Engine e = new Engine();

  //...
}

명시적 초기화가 간단하고 명료하긴 하지만 보다 복잡한 초기화 작업이 필요할 때는 '초기화 블럭(initialization block)' 또는 생성자를 사용해야 한다.

초기화 블럭(initialization block)

초기화 블럭에는 '클래스 초기화 블럭'과 '인스턴스 초기화 블럭' 두가지 종류가 있다.

인스턴스 초기화 블럭

초기화 블럭을 작성하려면 인스턴스 초기화 블럭은 단순히 클래스 내에 블럭 { } 을 만들고 그 안에 코드를 작성하기만 하면 된다. 그리고 클래스 초기화 블럭은 인스턴스 초기화 블럭 앞에 단순히 static을 덧붙이기만 하면 된다.

초기화 블럭 내에는 메소드 내에서와 같이 조건문, 반복문, 예외처리구문 등을 자유롭게 사용할 수 있으므로 초기화 작업이 복잡하여 명시적 초기화만으로는 부족한 경우 초기화 블럭을 사용한다.

class InitBlock {
  static { /* 클래스 초기화 블럭 */ }

  { /* 인스턴스 초기화 블럭 */ }

}

클래스 초기화 블럭은 클래스가 메모리에 처음 로딩 될 때 한번만 수행되며 인스턴스 초기화 블럭은 생성자와 같이 인스턴스를 생성할 때마다 수행된다.

그리고 생성자 보다 인스턴스 초기화 블럭이 먼저 수행된다는 점이 중요하다

인스턴스변수의 초기화는 주로 생성자를 사용하기 때문에 인스턴스 초기화 블럭은 잘 사용되지 않는다. 대신 클래스의 모든 생성자에서 공통적으로 수행되어져야 하는 코드가 있는 경우 생성자에 넣지 않고 인스턴스 초기화 블럭에 넣어두면 코드의 중복을 줄일 수 있어서 좋다.

예를들면 클래스의 모든 생성자에 공통적으로 수행되어야 하는 문장들이 있을 때, 이 문장들을 각 생성자마다 써주기 보다 아래와 같이 인스턴스 블럭을 이용하면 코드가 보다 간결하고 유지보수하기 쉬워진다.

Car() {
  System.out.println("Car 인스턴스가 생성되었습니다.");
  color = "White";
  gearType = "Auto";
}

Car() {
  System.out.println("Car 인스턴스가 생성되었습니다.");
  this.color = color;
  this.gearType = gearType;
}

// 이러한 코드가 이렇게 된다!

{ System.out.println("Car 인스턴스가 생성되었습니다."); } //인스턴스 블럭
Car() {
  color = "White";
  gearType = "Auto";
}

Car() {
  this.color = color;
  this.gearType = gearType;
}

클래스 초기화 블럭

class BlockTest {
  static {
    System.out.println("class initialize block");
  }

  {
    System.out.println("instance initialize block");
  }

  public BlockTest() {
    System.out.println("constructor");
  }

  public static void main(String[] args) {
      System.out.println("first block test");
    BlockTest bt = new BlockTest();

  }
  /* 결과
  class initialize block
  first block test
  instance initialize block
  constructor
  */
}

클래스 초기화 블럭 -> 인스턴스 초기화 블럭 -> 생성자 순으로 진행

위 실행 결과에서도 알수 있듯이 초기화 블럭은 처음 메모리에 로딩 되는 시점에 실행된다

이러한 초기화 블럭은 배열이나 예외처리가 필요한 초기화에서 사용된다. 다음은 그 예시이다.

class StaticBlockTest {
  static int[] arr = new int[10];

  static {
    for(int i=0;i<arr.length;i++) {
      arr[i] = (int)(Math.random() * 10) + 1;
    }
  }

    public static void main(String args[]) {
      for(int i=0;i<arr.length;i++) {
        System.out.println("arr["+i+"] : " + arr[i]);
      }
    }
}

멤버변수의 초기화 시기와 순서

클래스 변수의 초기화 시점 : 클래스가 처음 로딩 될 때 단 한번 초기화됨
인스턴스 변수의 초기화 시점 : 인스턴스가 생성될 때마다 각 인스턴스 별로 초기화가 이루어 진다.

클래스 변수의 초기화 순서 : 기본값 -> 명시적 초기화 -> 클래스 초기화 블럭
인스턴스변수의 초기화 순서 : 기본값 -> 명시적 초기화 -> 인스턴스 초기화 블럭 -> 생성자

프로그램 실행 도중 클래스에 대한 정보가 요구되어 질 때 클래스는 메모리에 로딩된다. 예를 들면 클래스 멤버를 사용했을 때, 인스턴스를 생성할 때 등이 이에 해당한다.

하지만 해당 클래스가 이미 메모리에 로딩되어 있다면, 또다시 로딩하지 않는다. 물론 초기화도 다시 수행되지 않는다.

참고 : Java의 정석(남궁 성 지음)

[JAVA] 생성자

코헴 — Wed, 22 May 2019 22:23:58 +0900

생성자란?

생성자는 인스턴스가 생성될 때 호출되는 인스턴스 초기화 메소드이다.

생성자는 다음과 같은 특징을 지닌다

생성자의 이름은 클래스의 이름과 같아야 한다.
생성자는 리턴 값이 없다.

생성자는 다음과 같이 정의한다

class Card{
  Card() { // 매개변수가 없는 생성자
    //..
  }

  Card(String k, int num) { // 매개변수가 있는 생성자
   //...
  }

연산자 new가 인스턴스를 생성하는 것이지 생성자가 인스턴스를 생성하는 것은 아니다.

생성자는 단순히 인스턴스 변수들의 초기화에 사용되는 조금 특별한 메소드일 뿐이다.

인스턴스가 생성되는 과정은 다음과 같다

Card c = new Card();
1. 연산자 new에 의해서 메모리(heap)에 Card 클래스의 인스턴스가 생성된다 (c라는 이름의)
2. 생성자 Card()가 호출되어 수행된다.
3. 연산자 new의 결과로 생성된 Card 인스턴스의 주소가 반환되어 참조변수 c에 저장된다.

생성자에서 다른 생성자 호출하기 - this()

같은 클래스의 멤버들 간에 서로 호출할 수 있는 것처럼 생성자 간에도 서로 호출이 가능하다.

다음 두가지 조건을 필요로한다

생성자의 이름으로 클래스이름 대신 this를 사용한다.
한 생성자에서 다른 생성자를 호출할 때는 반드시 첫 줄에서만 호출이 가능하다.

class Car {
  String color;
  String gearType;
  int door;

  Car() {
    this("white", "auto", 4); // Car(String color, String gearType, int door)를 호출
  }
  Car(String color) {
    this(color, "auto", 4);
  }
  Car(String color, String gearType, int door) {
    this.color = color;
    this.gearType = gearType;
    this.door = door;
  }
}

생성자 Car()에서 또 다른 생성자 Car(String color, String gearType, int door)를 호출하였다. 이처럼 생성자간의 호출에는 생성자의 이름 대신 this를 사용해야만 하므로 'Car' 대신 'this'를 사용했다.

이러한 코딩 스타일은 코드를 간결하고 유지보수하기 쉽게 해준다. 다음 예시를 살펴보면 그 말이 더 와닿을 것이다.

Car() {
  color = "white";
  gearType = "auto";
  door = 4;
}


// 다음과 같이 변경

Car() {
  this("white", "auto", 4);
}

이것은 마치 실생활에서 자동차 생산에 있어서 아무런 옵션을 주지 않았을 때 기본적으로 흰색에, 자동변속기어, 그리고 문의 개수가 4개인 자동차가 생산되도록 하는 것에 비유될 수 있다.

또한 옵션 하나가 추가되었을 경우를 가정해보아도, this를 사용하지 않았을 경우 모든 생성자 메소드의 라인을 변경해주어야 하지만, this를 사용할 경우 매개변수 값에 데이터를 하나 추가해주면 그만이다.

참고

this와 위의 설명한 this()는 구분해야 한다

this는 인스턴스 자신을 가르키는 참조변수, 인스턴스의 주소가 저장되어 있다. 모든 인스턴스 메소드에 지역변수로 숨겨진 채로 존재한다(클래스 메소드에서는 없다!)
this(), this(매개변수)는 생성자, 같은 클래스의 다른 생성자를 호출할 때 사용된다

생성자를 이용한 인스턴스의 복사

어떤 인스턴스의 상태를 자세히 몰라도 똑같은 인스턴스를 추가로 생성할 수 있다. Java의 API의 많은 클래스들이 인스턴스 복사를 위한 생성자를 정해놓고 있다.

간단히 이를 구현하면 다음과 같다.

class Car{
String color;
  String gearType;
  int door;

  Car() {
    this("white", "auto", 4);
  }

  Car(Car c) { // 인스턴스 복사를 위한 생성자!
    color = c.color;
    gearType = c.gearType;
    door = c.door;
  }

  Car(String color, String gearType, int door) {
    this.color = color;
    this.gearType = gearType;
    this.door = door;
  }
}

class Test {
  public static void main(String[] args){
    Car c1 = new Car();
    Car c2 = new Car(c1); // c1의 복사본 c2
  }
}

인스턴스 c2는 c1을 복사하여 생성된 것이므로 서로 같은 상태를 갖지만 서로 독립적으로 메모리 공간에 존재하는 별도의 인스턴스이다.

참고 : Java의 정석(남궁 성 지음)

[JAVA] 변수와 메소드

코헴 — Wed, 22 May 2019 22:23:34 +0900

JVM 메모리 구조

메소드 영역(method area)
- 프로그램 실행중에 어떤 클래스가 사용되면 JVM은 해당 클래스의 클래스파일을 읽어서 클래스에 대한 정보를 이곳에 저장한다. 해당 클래스의 변수도 이곳에 저장된다.
힙(heap)
- 인스턴스가 생성되는 공간. 프로그램 실행 중 생성되는 인스턴스는 모두 이곳에 생성된다.
호출스택(call stack)
- 호출스택은 메서드의 작업에 필요한 메모리 공간을 제공한다.

기본형 매개변수와 참조형 매개변수

자바에서는 메소드를 호출할 때 매개변수로 지정한 값을 메소드의 매개변수에 복사해서 넘겨준다. 매개변수의 타입이 기본형(primitive type)일 때는 기본형 값이 복사되겠지만, 참조형(reference type) 이면 인스턴스의 주소가 복사된다.

메서드의 매개변수를 기본형으로 선언하면 단순히 저장된 값만 얻지만, 참조형으로 선언하면 값이 저장된 곳의 주소를 알 수 있기 때문에 값을 읽어오는 것은 물론 값을 변경하는 것도 가능하다.

class Data {
    int x;
}

class ParameterTest {
  public static void main(String[] args) {
    Data d = new Data();
    d.x = 10;
    System.out.println("main() : x = " + d.x);
    change(d.x);
    System.out.println("After change(d.x)");
    System.out.println("main() : x = " + d.x);
  }

  static void change(int x) {
    x = 1000;
    System.out.println("change() : x = " + x);
  }
}

/* 실행 결과
main() : x = 10
change() : x = 1000
After change(d.x)
main() : x = 10
*/

class Data {
    int x;
}

class ParameterTest {
  public static void main(String[] args) {
    Data d = new Data();
    d.x = 10;
    System.out.println("main() : x = " + d.x);
    change(d.x);
    System.out.println("After change(d.x)");
    System.out.println("main() : x = " + d.x);
  }

  static void change(Data d) { // 참조형 매개변수
    d.x = 1000;
    System.out.println("change() : x = " + x);
  }
}

/* 실행 결과
main() : x = 10
change() : x = 1000
After change(d.x)
main() : x = 1000
*/

배열을 통한 접근에서도 마찬가지로 배열은 객체와 같이 참조변수를 통해 데이터가 저장된 공간에 접근하므로 다음과 같은 결과를 얻는다

class ParameterTest {
  public static void main(String[] args) {
    int[] x = {10};
    System.out.println("main() : x = " + x[0]);
    change(x);
    System.out.println("After change(x)");
    System.out.println("main() : x = " + x[0]);
  }

  static void change(int[] x) { // 참조형 매개변수
    x[0] = 1000;
    System.out.println("change() : x = " + x[0]);
  }
}

/* 실행 결과
main() : x = 10
change() : x = 1000
After change(d.x)
main() : x = 1000
*/

클래스 메소드(= static method) 와 인스턴스 메소드

메소드 앞에 static 이 붙어있으면 클래스메소드이고 아니면 인스턴스 메소드이다.

클래스 메소드의 경우 객체를 생성하지 않고도 '클래스이름.메소드이름(매개변수)' 와 같은 방식으로 호출이 가능하다.

반면에 인스턴스 메소드는 반드시 객체를 생성해야 호출할 수 있다.

그렇다면 어느 경우에 static을 사용해서 클래스 메소드로 정의해야 하는 것일까?

클래스는 변수 + 변수와 관련된 메소드의 집합 으로 표현된다.

같은 클래스 내에 있는 메소드와 멤버 변수들은 아주 밀접한 관계가 있다.

인스턴스 메소드는 인스턴스 변수와 관련된 작업을 하는 즉, 메소드의 작업을 수행하는데 인스턴스 변수를 필요로 하는 메소드이다.

그래서 인스턴스변수는 인스턴스를 생성해야만 만들어지므로 인스턴스 변수를 사용하는 인스턴스 메소드 역시 인스턴스를 생성해야만 호출할 수 있는 것이다.

반면에 메소드 중에서 인스턴스와 관계없는(인스턴스 변수나 인스턴스 메소드를 사용하지 않는) 메소드를 클래스 메소드로 정의한다.

물론 인스턴스 변수를 사용하지 않는다고 해서 반드시 클래스 메소드로 정의해야 하는 것은 아니지만 특별한 이유가 없는 한 그렇게 하는 것이 일반적이다.

일반적으로 메소드를 정의할때 고려할 점을 나열하면 다음과 같다

클래스를 설계할 때 멤버변수 중 모든 인스턴스에 공통적으로 사용해야 하는 것에 static을 붙인다.
- 생성된 각 인스턴스는 독립적이기 때문에 각 인스턴스 변수는 서로 다른 값이지만, 인스턴스 사이에서 같은 값이 유지되어야 하는 변수는 static을 붙여서 클래스 변수로 정의한다.
클래스 변수(static 변수)는 인스턴스를 생성하지 않아도 사용할 수 있다.
- static이 붙은 변수는 클래스가 메모리에 올라갈 때 이미 자동적으로 생성되기 때문
클래스 메소드는 인스턴스변수를 사용할 수 없다.
- static이 붙은 메소드는 인스턴스 생성 없이 호출 가능한 반면, 인스턴스 변수는 인스턴스를 생성해야만 만들어지기 때문에 static이 붙은 메소드를 호출할 때 인스턴스가 생성되어 있지 않을 수 있어서 static이 붙은 메소드에서 인스턴스 변수의 사용을 허용하지 않는다.
메소드 내에서 인스턴스변수를 사용하지 않는다면 static을 붙이는 것을 고려한다
- 메소드의 작업 내용 중에서 인스턴스 변수를 필요로 한다면 static을 붙일 수 없다. 반대로 인스턴스 변수를 필요로 하지 않는다면 static을 붙이자. 메소드 호출시간이 짧아지기 때문에 효율이 높아진다. static을 안붙인 메소드는 실행시 호출되어야 할 메소드를 찾는 과정이 추가적으로 필요하기 때문에 시간이 더 걸린다.

참고 : Java의 정석(남궁 성 지음)

[VueJS] component

코헴 — Mon, 13 May 2019 13:33:14 +0900

[VueJS] component

동일한 포맷이 반복되는 템플릿의 경우 기존의 html 코드로 표현하면 그 포맷의 갯수만큼 코드길이가 늘어났다. 하지만 VueJS에서는 이를 Component를 통해 관리할 수 있다.

<script>
Vue.component('product', {
  props: ['image', 'title', 'description', 'avatar'],
  template: `
    <div>
      <div>
        <img :src="image" />
        <img :src="avatar" width="30" />
      </div>
      <div>
        {{ title }}
      </div>
      <p>
        {{ description }}
      </p>
    </div>
  `
});
</script>

Vue.component 함수를 통해 컴포넌트를 생성하고, 첫번째 인자로 컴포넌트 이름, 두번째 인자로는 템플릿에 사용될 변수값을 props, 틀을 template 이라는 속성 값으로 하는 객체를 넣어주면 됩니다.

중요한 점은 template에 선언되는 html 틀의 경우 VueJS 기본 기능들이 모두 동일하게 동작하기 때문에 편리하게 사용 가능하다는 점입니다.

[VueJS] method & event handling

코헴 — Mon, 13 May 2019 13:32:51 +0900

[VueJS] method & event handling

method

메소드는 특정 객체에 포함되어 동작한다. VueJS에서는 메소드 선언을 Vue 객체에 methods 라는 어트리뷰트를 선언함으로써 생성 가능합니다.

주의할점이 하나 있는데, VueJS 에서 메소드선언에서는 arrow function이 사용되면 안됩니다.

그 이유는 methods 영역에 arrow function 선언시 this 바인딩이 안되므로, data()함수에 정의된 변수값에 접근이 불가능 하기 때문입니다.

<script>
new Vue({
  el: '#app',
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    add: () => {
      this.counter++;
      console.log(this.counter);
    }
  }
})
</script>

_{위와같이 작성시 원하는대로 동작하지 않음}

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        counter: 0
      };
    },
    methods: {
      add() {
        this.counter++;
        console.log(this.counter);
      }
    }
  })
</script>

_{제대로 동작하는 코드}

event handling

<div id="app">
    <button type="button" v-on:click="add">더하기 </button>
    {{ counter }}
</div>

위와같은 click 이벤트 생성시 v-on:click이후 영역은 javascript 코드 영역이므로, 연사자 실행이 가능합니다. 예를들어서 data() 영역에 선언된 counter 변수의 값을 click 이벤트로 증가시키는 등의 코드를 생성하고 싶다면

<div id="app">
  <button type="button" v-on:click="counter++">더하기 </button>
  {{ counter }}
</div>

위와 같이 입력하여 동작시킬 수 있습니다.

또한 이벤트 관련 지시자의 경우 이전 챕터에서 v-bind 를 : 로 줄여쓴 것처럼, @ 를 입력함으로써 줄여 쓸 수 있습니다.

<div id="app">
    <button type="button" @click="add">더하기 </button>
    {{ counter }}
</div>

또한 이벤트의 특정 실행 조건을 프로퍼티로 제공하므로 해당 프로퍼티를 학습하면 기존에 자바스크립트를 통해 복잡하게 구현하던 부분들을 간편하게 구현 가능합니다.

<input type="text" @keyup.enter="keyup"/>

<script>
methods: {
  keyup(ev) {
    console.log(ev);
    alert("엔터키 눌렸습니다 ^^");
  }
  /*if (ev.keyCode === 13) {
    console.log('엔터키 눌렸습니다 ^^');
  }*/
}
</script>

[VueJS] attribute binding

코헴 — Mon, 13 May 2019 13:31:38 +0900

[VueJS] attribute binding

String이 결합된 attribute binding

스트링과 결합된 어트리뷰트 바인딩은 다음과 같은 방식으로 할 수 있습니다.

<div id="app">
  <img :id="`thumbnail_${id}`" :src="image" />
</div>

<script>
  let app = new Vue({
    el: '#app',
    data() {
      return {
        id: 1,
        image: "https://naver.com"
      }
    }
  })
</script>

style attribute binding

style 속성또한 다음과 같은 방식으로 바인딩이 가능합니다.

<div id="app">
  <div :style="style">
    test
  </div>
</div>
<script>
  let app = new Vue({
    el: '#app',
    data() {
      return {
        style: 'background : white'
      }
    }
  })
</script>

Json 형태 & 다중 속성 삽입

배열 형태로 다양한 어트리뷰트 속성값을 지정할 수 있습니다.

<div id="app">
  <div :style="[style, fontStyle]">
    test
  </div>
</div>
<script>
  let app = new Vue({
    el: '#app',
    data() {
      return {
        id: 1,
        style: {
          background: 'red',
          fontSize: '10px',
          fontFamily: 'dotum'
        },
        fontStyle: {
            fontSize: '10px',
            fontFamily: 'dotum'
        }
      }
    }
  })
</script>

[VueJS] list

코헴 — Mon, 13 May 2019 00:00:31 +0900

[VueJS] list

v-for

VueJS 데이터에는 리스트형태의 데이터를 담을 수 있습니다. 또한 이를 html 에서 순회시키기 위한 v-for 어트리뷰트를 지원합니다.

<div id="app">
  <li v-for="item in items">
    {{ item.id }}
  </li>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        items : [
          {
            id: 1,
            image: '...'
          },
          {
            id: 2,
            image: '...'
          }
        ]
      }
    }
  })

</script>

v-bind & :attribute

VueJS에서는 태그와 어트리뷰트에 변수값을 대입시키기 위해 v-bind 혹은 :어트리뷰트명 표현식을 활용합니다.

<li v-for="item in items">
  {{ item.id }}
  <img v-bind:src="item.image" />
  <img :src="item.image" />  
  <!-- 위 두개는 동일한 표현 -->

</li>

template 태그

for loop를 각각의 태그속에서 동작시키고 싶을때에는 template 태그를 활용하면 됩니다.

<template v-for="item in items">
  <li>
    {{ item.id }}
  </li>
  <li>
    <img :src="item.image" />
  </li>
</template>

동적으로 List 추가

외부 플러그인 없이 동적으로 새로운 list를 구현하기 위해서는 자바스크립트 코드를 통해 DOM을 구현하고 그에 맞는 텍스트를 직접 스트링형태로 추가하고 append 해주는 방식을 통해 가능했습니다. VueJS에서는 data() 함수에 정의된 변수값에 데이터만 추가해주면 동적으로 list가 append 됩니다.

이를 보여주기 위한 예시는 다음과 같습니다( 다음은 위의 예시를 위해 Vue객체에 변수할당을 했지만, 실제로 추천되는 방법은 아닙니다)

let app = new Vue({
  el: '#app',
  data() {
    return {
      items : [
        {
          id: 1,
          image: 'https://www.google.com/url?sa=i&source=images&cd=&ved=&url=https%3A%2F%2Ftwitter.com%2Fgooglekorea&psig=AOvVaw16SeSEDgigBw1tSk64PIPF&ust=1557758223504154'
        },
        {
          id: 2,
          image: 'http://image.itdonga.com/files/2013/12/09/1.png'
        }
      ]
    }
  }
})

app.items.push({id: 3, image: "..."});
//위 명령어를 콘솔에 실행시 동적으로 li 태그 추가됨