자바스크립트 객체지향 프로그래밍

객체지향 프로그래밍 기본적인 문법

  • 클래스 : 연관있는 변수와 함수를 묶어 재사용하기 위한 것 
    • 자바스크립트에서는 class 키워드 명렁어를 제공하지 않는다. 대신 오브젝트 리터럴 방식, 함수방식, 프로토타입방식 으로 클래스형태를 비슷하게 만들어 사용 할 수 있다.
  • 인터페이스 : 구현체가 없이 선언으로만구성된것 
    • 자바스크립트에서는 interface 키워드 명령어를 제공하지 않으며, 인터페이스가 있다는 가정하에 코딩을 하는 방법밖에 없다. -_-
  • 추상클래스

  • 캡슐화 : 클래스에 담은 내용중 데이터가 기능을 외부에 접근하지 못하게 하는 것

    • 자바스크립트에서 캡슐화 지정 키워드는 없다. 대신 객체 외부에서 접근하지 못하게 하는 접근 지정자 private 과 protected 대신 요소 이름 앞에 “_” 를 붙여 만들어 사용한다. 그렇다고해서 자바스크립트가 문접적으로 접근 지정자 기능을 지원하지 않기 때문에 외부에서 얼마든지 접근할 수 있다. 단지 일종의 약속 같처럼 사용하는 것임.
  • 상속 : 상속을 사용하는 가장 큰 이유는 코드를 재사용하기 위함이며, 중복된 코드를 제거하며 확장성을 높이기 위해서이다.


function 부모클래스(){
this.프로퍼티 = 값
}
부모클래스.prototype.메서드 = function(){
. . . . .
}
function 자식클래스(){
}

자바스크립트에서 상속은 자식클래스의 prototype 속성에 부모 클래스를 인스턴스를 대입하는 방식으로 이루어진다. 이렇게 하면 부모 객체의 모든 기능이 자식 객체의 프로토타입에 연결되어 자식객체에서 부모의 기능을 사용할 수 있게된다.

function Parent(){
this.property1 = 값''
}
Parent.prototype.method1 = function(){
console.log(this.property1);
}
function MyChild(){
}
//상속
MyChild.prototype = new Parent();
//자식클래스 인스턴스 생성
var myChild = new MyChild();
//자식객체에서 부모의 메서드 호출
myChild.method1();


'자바스크립트' 카테고리의 다른 글

ES6 템플릿 문자열 (Template literals)  (0) 2019.01.09
DOM API - Document 객체에 접근하는 API  (0) 2018.12.12
객체 생성방법 3가지  (0) 2018.10.09
jqGrid 환경설정하기  (0) 2016.02.18
동적 colModel  (0) 2016.01.05
블로그 이미지

클라인STR

,

실습시 해당에러가 발생하면서 로딩이 진행되지 않는 현상이 발생하였다. 

구글링해서 확인을 해보니 react-native 0.57.2 버전에서 위와같은 문제가 나타나는듯 하다. 


react-native start --reset-cache


명령프롬프트에 명령어를 실행하고 , react-native run-ios 실행한다. 



https://github.com/facebook/react-native/issues/21530

https://github.com/facebook/react-native/issues/21490

블로그 이미지

클라인STR

,

1.객체 리터럴

객체를 생성하는 가장 일반적이고 간편한 자바스크립트 객체 생성 방식이다. 리터럴 방식은 객체 리터럴을 의미하는 {} 내부에 프로퍼티와 메서드를 정의(포장)하는 구조이다.

var user = {
name : "kiuk",
age : 10 ,
showInfo : function (){
document.write("name =" +this.name+", age="+this.age);
}
}
user.showInfo();

리터럴 방식은 클래스를 정의함과 동시에 자동으로 인스턴스가 만들어진다. 즉 인스턴스를 만들기 위해 다른 작업을 해주지 않아도 된다. 하지만 다른 클래스 정의 방법과 달리 인스턴스를 하나 이상 만들 수 없는 단점을 가진다.

2. 함수방식(function)

함수방식에 경우 하나의 함수 내부에 프로퍼티와 메서드를 정의하는구조이다. 프로퍼티와 메서드는 반드시 자기 자신을 나타내는 this에 정의해야 한다. 
javascript는 클래스를 만들기 위한 키워드가 따로 존재하지않는다. (ES6 에서는 지원함 -_-) 
일반적으로 함수이름은 소문자로 시작하며, 클래스는 대문자로 시작한다.

function User(){
this.name = 'kiuk';
this.age = '10';
this.showInfo = function(){
document.write("name =" +this.name+", age="+this.age);
}
}
var user = new User();
user.showInfo();

3. 프로토타입(prototype) 방식

// 클래스 생성자
function User(){
this.name = "kiuk";
this.age = 10;
}
// 메서드 정의
User.prototype.showInfo = function(){
document.write("name =" +this.name+", age="+this.age);
}
var user = new User();
user.showInfo();


'자바스크립트' 카테고리의 다른 글

DOM API - Document 객체에 접근하는 API  (0) 2018.12.12
자바스크립트 객체지향 프로그래밍  (0) 2018.10.10
jqGrid 환경설정하기  (0) 2016.02.18
동적 colModel  (0) 2016.01.05
jqGrid 기본속성  (0) 2015.12.15
블로그 이미지

클라인STR

,

Scouter 설치

시스템관리 2018. 10. 7. 22:21



1. Scouter Agent 및 Server 다운로드

1. 1파일다운로드

Scouter 릴리즈 페이지에서 최신버전을 다운로드 한다. 
https://github.com/scouter-project/scouter/releases

  • scouter-all-[version].tar.gz 
    • Scouter Collector 와 Agent를 포함하는 압축파일
  • scouter.client.product-[os].tar.gz 
    • Client Viewer 프로그램

1.2압축풀기

  • scouter-all 파일을 다운로드 받아서 /server_app/monitor/ 에 압축을 푼다.

tar -zxvf scouter-all-[version].tar.gz

2. 환경설정

2.1 Host Agent 설정

  • Host의 설정을 진행해주기 위하여 ~ /scouter/agent.host/conf로 이동한다.
  • scouter.conf 파일을 열어서 아래와 같이 편집한다.
# Server IP(default:127.0.0.1)
net_collector_ip=192.168.2.7
# Port Setting(default:6100)
net_collector_udp_port=6100
net_collector_tcp_port=6100
  • net_collector_ip 는 이 에이전트에서 수집한 데이터를 보낼 서버의 ip주소이다. 
    • 기본값은 localhost(127.0.0.1)이다.
  • net_collector_udp_port는 에이전트와 서버간 udp 통신시 사용할 포트번호이다. 
    • 기본값은 6100이다.
  • net_collector_tcp_port는 에이전트와 서버간 tcp 통신시 사용할 포트번호이다. 
    • 기본값은 6100이다.

자세한 설정 옵션은 해당 링크를 참조한다.

2.2 Server 설정

  • 서버설정을 위해 ~scouter/server/conf 로 이동한다.
  • scouter.conf 파일을 열어서 서버 설정을 진행한다.

vi scouter.conf

net_tcp_listen_port=6100
net_udp_listen_port=6100
log_dir=./logs
  • log_dir은 서버의 로그가 저장될 경로이다.
  • net_udp_listen_port는 서버가 udp연결을 받아들일 포트번호이다.

    • 기본값은 6100 이다.
  • net_tcp_listen_port는 서버가 tcp 연결을 받아들일 포트번호이다.

    • 기본값은 6100 이다.

자세한설정은 해당링크를 참조한다.

2.3 Java Agent 설정

  • ~scouter/agent.java/scouter-agent-java-1.8.4.1.jar 파일을 $CATALINA_HOME/lib/ 복사한다.
  • ~tomcat/conf 경로에가서 scouter.conf 파일을 생성합니다. (scoter/agent.java/conf/scouter.conf) 파일을 복사해도 된다.
net_collector_ip=192.168.2.7
#Scouter Server Port (Default : 6100)
net_collector_udp_port=6100
net_collector_tcp_port=6100
obj_name=web01

2.4 Tomcat 설정

  • ~tomcat/bin/ 폴더로 이동한다.

vi catalina.sh

##################################### SCOUTER OPTIONS #####################################
if [ "$1" = "start" -o "$1" = "run" ]; then
export JAVA_OPTS="$JAVA_OPTS -javaagent:$CATALINA_BASE/lib/scouter-agent-java-1.8.4.1.jar"
export JAVA_OPTS="$JAVA_OPTS -Dscouter.config=$CATALINA_BASE/conf/scouter.conf"
fi
###############################################################################################
  • catalina.sh 파일을 위와 같이 수정한다.
  • javaagent 뒤에는 scouter-agent-java-1.8.4.1.jar 파일의 경로를 넣어준다.
  • -Dscouter.config 뒤에는 설정파일의 풀 경로를 넣어준다.

3. 실행

3.1 tomcat 실행

  • ~tomcat/bin/ 폴더로 이동한뒤, startup.sh 를 실행한다.

cd /server_app/tomcat/bin 
./startup.sh


3.2 host 실행

  • ~ /scouter/agent.host/로 이동하여 host.sh를 실행한다.

cd /server_app/monitor/scouter/agent.host 
./host.sh


3.4 server 실행

  • ~ /scouter/server/ 로 이동하여 startup.sh 를 실행한다.

cd /server_app/monitor/scouter/server 
./startup.sh






블로그 이미지

클라인STR

,





실습시 안드로이드 개발환경 설정에 삽질을 해서 내용을 정리해봅니다. 


  •  JDK 설치 

      brew 통해서 설치할수도 있는데, 나는 이미 JDK 깔려있어서 설치를 하지는 않았다. 


  •  안드로이드 Studio

       https://developer.android.com/studio/  다운받아설치한다.

      설치 옵션에서 커스텀을 선택하여 아래에 옵션을 선택하여설치한다. 

    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM)
    • Android Virtual Device

  • 안드로이드 SDK 설치 

     안드로이드 Studio 를 실행한후 구성(Configure) 선택하고 SDK 관리자를 선택한다음 

     아래에 화면에서 SDK Platforms 탭에서 버전에 맞는 Platforms을 선택하고, SDK Tools 선택하여  아래와 같이 선택해서 설치한다.



  • ANDROID_HOME 환경변수 설정 


     $HOME/.bash_profile






 

편집하여 아래와 같이 환경 변수를 추가한다. 

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

export PATH=$PATH:$ANDROID_HOME/emulator


환경변수가 추가됬는지 확인한다. 

source $HOME/.bash_profile

echo $PATH


  • Android Device 등록 및 실행하기 

     react-native 명령어로 프로젝트를 생성한후 안드로이드 Studio를 실행하여 프로젝트를 Open 한다.

     Tools -> ADV Manager 를 실행한후 적당한 Devices를 추가한후 에뮬레이터를 실행한다. 

     Device 설정은 다음 링크를 참조한다. 

     https://developer.android.com/studio/run/managing-avds?hl=ko

  • react-native run-android 명령어로 프로젝트를 실행한다. 이때 Android 에뮬레이터가 실행되기 전에 이를 수행하면 아래와 같이 오류메세지가 뜬다. 

참고 : https://facebook.github.io/react-native/docs/getting-started.html






블로그 이미지

클라인STR

,





Mac OS 업데이트 후 react-native init 명령어로 프로젝트 생성후 디버깅을 하니 아래와 같은 에러가 나면서 시뮬레이터가 정상동작하지 않게되었다.

오류메세지에 나와있는데로 조치를 했는데도 정상동작하지 않아서 구글신에게 물어보던중 아래와 같은 해답을 발견하였다. 

npm add @babel/runtime


매번 프로젝트 생성시 명령어를 수행해야되니 좀 번거롭기는 한듯 -ㅅ-


출처 : 

https://stackoverflow.com/questions/52486219/unable-to-resolve-module-babel-runtime-helpers-interoprequiredefault

https://stackoverflow.com/questions/51684918/meteor-error-cannot-find-module-babel-runtime-helpers-builtin-interoprequired

블로그 이미지

클라인STR

,



화살표함수 ES6에 새로 추가된 기능이다. 

function 키워드 없이도 함수를 만들 수 있으며, return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다. 


1
2
3
4
5
6
7
8
9
10
11
function() {
 
 
}
 
 
 
() => {
 
 
}

cs



1
2
3
4
5
6
7
8
9
var lordify = function(firstname) {
 
    return '켄터베리의 ${firstname}'
 
}
 
 
 
var lordify = () => '켄터베리의 ${firstname}'

cs


화살표(=>)를 사용하면 모든 함수 정의를 한줄에 끝낼 수 있다. 

function 키워드를 없애고, 화살표가 어떤 값을 반환하는지 지정해주기 때문에 return도 없앴다. 또다른 장점은 함수가 파라미터를 단 하나만 받는 경우 파라미터 주변의 괄호를 생략해도 된다.


파라미터가 2개 이상이면 괄호가 필요하다.


1
2
3
4
5
6
7
8
var lordify = function(firstName, land) {
 
    return '${land}의 ${firstName}'
 
}
 
 
var lordify = (firstName, land) => '${land}의 ${firstName}'

cs


여러줄을 사용해야될경우는 함수 본문 전체를 중괄호로 둘러싸야한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var lordify = function(firstName, land) {
 
 
 
if (!firstName) {
 
 throw new Error("lordify에 이름을 넘겨야 합니다.");
 
}
 
 
 
if (!land) {
 
   throw new Error("영주에게는 영지가 있어야한다.");
 
}
 
return '${land}의 ${firstName}'
 
}
 
 
var lordify = (firstName, land) => {
 
 
 
    if (!firstName) {
 
 throw new Error("lordify에 이름을 넘겨야 합니다.");
 
}
 
 
 
if (!land) {
 
   throw new Error("영주에게는 영지가 있어야한다.");
 
}
 
return '${land}의 ${firstName}'
 
 
 
}
cs



블로그 이미지

클라인STR

,

React Native 실습중 해당에러가 나는데, 이는 현재 등록된 패키져의 정보를 찾을수 없다는 내용이다. 

A프로젝트를 react native 명령어로 실행이 된상태에서 , 다른 프로젝트를 react native 명령어로 실행하면 위와 같은 에러가 발생한다. 

이전에 실행된 launchPackager 를 종료하고 앱을 실행하면 정상적으로 실행된다.




블로그 이미지

클라인STR

,