vue.js 구조

Vue.js 2018.12.15 15:13

vue 예제 분석


<html>

<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<script src="http://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
<div id="simple">
<h2>{{message}}</h2>
</div>
<script tpye="text/javascript">
var model = {
message: 'Hello Vue.js World!'
};

var simple = new Vue({
el: '#simple',
data: model
})
</script>
</body>

</html>


Model 객체는 변수명 그대로 모델 객체이다.

데이터를 가지고 있음


SImple 객체는 Vue 객체이자 뷰모델 객체이다. 

Vue 객체의 el 속성의 html 요소를 나타낸다. 또한 data 속성을 모델 객체를 참조한다.

vue 객체가 html 요소와 데이터를 참조하고 있다. 이제 데이터가 변경되면 뷰모델 객체는 즉시 html 요소에 반영시킨다.


html 요소에서는 {{ }}과 같은 콧수명르 닮은 모양의 템플릿 표현식을 사용해 선언ㅇ적으로 html dom에 데이터를 렌더링한다. 뷰모델 객체의 데이터 속성에서 해당 값을 이 위치에 나타낸다. 콧수염을 닮았다고 해서 콧수염 표현식(Mustache Expression)이 라고도 부르며, 문자열을 덧붙인다는 의미로 보간법(Interpolation)이라고도 한다.



이코드만으로도 모든 작업은 반응형으로 이뤄지는다. 모델을 벼경하면 뷰모델 객체를 통해 html dom에 즉시 변경된다.















'Vue.js' 카테고리의 다른 글

[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
[Vue.js] computed Property (계산형 속성)  (0) 2018.12.15
[Vue.js] 기본 디렉티브  (0) 2018.12.15
vue.js 구조  (0) 2018.12.15
[Vue.js] 개발환경 구축  (0) 2018.12.15
Posted by 루우지

개발 환경 설정


1) Node.js : 서버측 JavaScript언어이자 플랫폼

2) npm : app의 의존성 관리를 위해 사용하는 노드 패키지 관리자

3) Visual Studio Code : 코드 편집 도구(IDE)

4) 크롬 브라우저 + vue.js Devtools : 디버깅을 위한 개발도구

5) Vue-cli : app 작성을 위한 기본 틀을 제공하는 도구





1. Node.js, npm 설치

Node.js는 Google의 v8엔진을 기반으로 만들어진 서버측 JavaScript 언어이자 Flatform이다. Node.js와 함께 설치되는 npm을 이용해 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리한다.


https://nodejs.org/ko

( 위의 사이트에서 Node.js 다운로드 후 설치)



설치가 끝나면 Windows에서는 CMD창을 실행, Mac에서는 터미널을 실행하여 아래의 명령어 수행


npm install -g npm (Windows)

sudo npm install -g npm (Mac)





2. Visual Studio Code 설치

Vue.js의 개발을 하기 위해서는 IDE가 필요한데 SublimeText, Bracket, Atom과 같은 많은 도구들이 있다. 하지만 나는 코드가 익숙하고, 다양한 플러그인이 존재하니 코드로 작업할 예정



http://code.visualstudio.com

( 위으 사이트에서 code 다운로드 후 설치)




Visual Studio Code에서 Vue.js 개발시 유용한 Plugin List

1) View-in-browser : html 파일을 기본 브라우져로 볼 수 있도록 한다.

2) vetur : Vue.js 코드에 대한 문법 강조, 코드 자동완성, 디버깅, 린팅 기능들을 제공한다.

3) html snippets : html 태그 조작을 빠륵 ㅔ작성할 수 있도록 도와준다.

4) js-css-html formmatters : js, css html의 코드 자동완 성기능을 제공한다. 에디터 창에서 ctrl+sapce

5) vue 2 snippets : vue.js 2.0의 콛 ㅡ조작 지원과 문법 강조 기능을 제공한다.

6) vue-beautify : vue.js 코드에 대한 정리 배치 기능을 제공한다.

7) ESLint : 자바 스크립트 코드 스타일, 문법 체크 기능을 제공한다.




3. Chrome Browser, Extendtion Tool 설치

크롬 브라우져 설치후 확장 프로그램에서 Vue 검색후 vue.js devtools 설치




4. Vue-CLI 설치

Vue-CLI는 에반 유가 공식적으로 관리하는 커맨드라인 인터페이스 기반의 스캐폴딩 도구이다. Vue.js앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 필드, 의존성 부분에대한 셋팅을 제공해준다.


npm을 이용해 vue-cli 설치


npm install -g yarn @vue/clie (Windows)

sudo npm install -g yarn @vue/cli (Mac)


Vue CLI는 3.x 버전에서는 npm 대신 yarn 패키지 매니저를 주로 사용한다. yarn이 npm보다 실행속도가 빠르기 때문에 최근에는 yarn을 선호하는 추세





'Vue.js' 카테고리의 다른 글

[Vue.js] Event 처리  (0) 2018.12.17
[Vue.js] Vue instance (뷰 인스턴스)  (0) 2018.12.16
[Vue.js] computed Property (계산형 속성)  (0) 2018.12.15
[Vue.js] 기본 디렉티브  (0) 2018.12.15
vue.js 구조  (0) 2018.12.15
[Vue.js] 개발환경 구축  (0) 2018.12.15
Posted by 루우지

.vue 파일 밑에 빈줄 추가

Posted by 루우지




집에서 심심하면 만들고 있는 토이 프로젝트가 있는데 

익숙치 않은 mfc라 힘들다~







위와 같이 기본 list control을 생성 후

각 컬럼과 열에 data를 넣어준 뒤 클릭벤트를 걸어주면

row 전체가 선택이 되는게 아니라 첫번째 열(column)만이 선택이된다.



이럴때 마법과 같은 코드 한줄이면 전체 선택이 된다.



 리스트컨트롤 변수를 생성하여 아래의 코드를 onInitDialog쪽에 쳐주면




CListCtrl test;

test.SetExtendedStyle(LVS_EX_FULLROWSELECT | LVS_EX_GRIDLINES);




LVS_EX_FULLROWSELECT만 적용된 경우




LVS_EX_FULLROWSELEC | LVS_EX_GRIDLINES 적용된 경우




그 이외에 스타일 추가는 msdn에 있을거라 생각되고

 필요하면 찾아서 적용하면 될듯하다

Posted by 루우지


Oracle 에서는 MySql에 있는 Auto_Increment 기능이 없다.

그렇기에 자동으로 인덱스값을 증가시켜주기 위해서는 시퀀스를 생성해서 사용해야한다.



1) 예제 테이블 생성

create table tmp(

    idx_tmp number(10),

    name    varchar(1000)

);


예제로 사용할 TMP테이블을 생성하였다.

이제 idx_tmp 의 값을 차례대로 증가시키는 시퀀스를 생성해야한다.



2) 시퀀스 생성

CREATE SEQUENCE tmp_seq START WITH 1 INCREMENT BY 1 MAXVALUE 100 CYCLE NOCACHE;


tmp_seq라는 시퀀스를 만드는 sql이다.

간단하게 키워드에대한 설명을 하자면 아래의 표를 확인하길 바란다.


CREATE SEQUENCE “스키마명.시퀀스명”
MINVALUE -- 시퀀스가 시작되는 최초의 숫자
MAXVALUE --시퀀스가 끝나는 최대 숫자
INCREMENT BY -- 시퀀스가 증가되는 단위
START WITH -- 시퀀스 생성이 시작되는 값
NOCACHE  -- 캐시를 사용하지 않음
NOORDER  --요청되는 순서대로 값을 생성하지 않음
NOCYCLE  --초기값부터 다시 시작하지 않음

tmp_seq 시퀀스는 1부터 시작하여 1씩 증가하여 100까지 도는 시퀀스이다.



3) 시퀀스를 사용한 값 삽입


INSERT INTO tmp values(tmp_seq.NEXTVAL, 'tmptmp');


이제 insert할때 시퀀스명.NEXTVAL 함수를 사용하면 자동으로 1씩 증가되어 값이 추가되는걸 확인할 수 있다.



4) 값 조회


select * from tmp;



Posted by 루우지

JUnit의 개요

- Java에서 독립된 단위테스트(Unit Test)를 지원해주는 프레임워크이다.

- Desgin 패턴과 Eclipse IDE를 개발한 Erich Gamma가 제작한 프레임워크다.

- 단정(assert) method로 테스트 케이스의 수행 결과를 판별한다.

- jUnit4부터는 테스트를 지원하는 어노테이션을 제공한다. (@Test, @Before, @After)

- 각 @Test 메서드가 호출할 때 마다 새로운 인스턴스를 생성하여 독립적인 테스트가 이루어지도록 한다.




단위테스트(Unit Test)란?

- 소스코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차, 즉 모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차를 말한다.

- JUnit은 보이지 않고 숨겨진 단위 테스트를 끌어내어 정형화시켜 단위테스트를 쉽게 해주는 테스트 지원 프레임워크다




JUnit Annotation

@Test

- @Test가 선언된 메서드는 테스트를 수행하는 메서드가 된다.

- JUnit은 각각의 테스트가 서로 영향을 주지 않고 독립적으로 실행됨을 원치으로 하므로 @Test 마다 객체를 생성한다.



@Ignore

- @Ignore가 선언된 메서드는 테스트를 실행하지 않게 한다.



@Before

- @Before가 선언된 메서드는 @Test 메서드가 실행되기 전에 반드시 실행되어 진다.

- @Test 메소드에서 공통으로 사용하는 코드를 @Before 메소드에 선언하여 사용하면 된다.



@After

- @After가 선언된 메서드는 @Test 메소드가 실행된 후 실행된다.



@BeforeClass

- @BeforeClass 어노테이션은 @Test 메소드보다 먼저 한번만 수행되어야 할 경우에 사용하면 된다.



@AfterClass

- @ AfterClass 어노테이션은 @Test 메소드보다 나중에 한번만 수행되어야 할 경우에 사용하면 된다.





JUint Method

method name 

description 

 assertEquals(a, b)

객체 a와 b의 값이 일치함을 확인한다. 

 assertArrayEquals(a, b)

배열 a와 b의 값이 일치함을 확인한다. 

 assertSame(a, b) 

객체 a와 b가 같은 객체임을 확인한다.

assertEquals 메서드는 두 객체의 값이 같은지 확인하고 assertSame 메서드는 두 객체의 레퍼런스가 동일한가를 확인한다. 

 assertTrue(a) 

조건 A가 참인가를 확인한다.

 assertNotNull(a) 

 객체 A가 null이 아님을 확인한다.


그 외 다양한 테스트용 메소드를 제공한다.


'JAVA > SPRING FRAMEWORK' 카테고리의 다른 글

[Spring] JUnit의 어노테이션과 메소드  (0) 2018.09.10
[Spring] IoC와 DI  (0) 2018.09.10
Posted by 루우지

IoC (Inversion of Control) 와 DI(Dependency Injection)

- "제어의 역전" 즉 인스턴스 생성부터 소멸까지의 인스턴스 생명주기 관리를 개발자가 아닌 컨테이너가 대신 해준다 라는 뜻이다.

- 컨테이너 역할을 해주는 프레임워크에게 제어하는 권한을 넘겨서 개발자의 코드가 신경 써야 할것을 줄이는 전략이다.

- IoC 컨테이너는 객체의 생성을 책임지고, 의존성을 관리한다.

- POJO의 생성, 초기화 서비스, 소멸에 대한 권한을 가진다.

- 개발자가들이 직접 POJO를 생성 할 수 있지만 컨테이너에게 맡긴다.



DL (Dependency Lookup) : 의존성 검색

 - 저장소에저장되어 있는 Bean에 접근하기 위해 컨테이너가 제공하는 API를 이용하여 Bean을 Lookup하는 것


DI (Dependency Injection) : 의존성 주입

 - 각 클래스간의 의존관계를 빈 설정정보르 바탕으로 컨테이너가 자동으로 연결 해주는 것]


DL사용시 컨테이너에 종속성이 증가하여 주로 DI를 사용한다.


DI의 유형 

1) Setter Injection : Setter 메서드를 이용한 의존성 삽입

 - 의존성을 입력 받는 setter 메서드를 마들고 이를 통해 의존성을 주입한다.

2) Constructor Injection

 - 필요한 의존성을 포함하는 클래스의 생성자를 만들고 이를 통해 의존성을 주입한다.

3) Method Injection

 - 의존성을 입력 받는 일반 메서드를 만들고 이를 통해 의존성을 주입한다.








다형성 Polymorphism = Poly(다양한) + Morphism(변형, 변신)




객체를생성할때 다형성에 의거해서 아래와 같이 생성을 하면



Printer p1 = new StringPrinter();

Printer p2 = new ConsolePrinter();

부모클래스타입  변수 = new 자식 클래스의타입();



위와 같은 형식으로 으로 코드를 작성하면 아래와 같은 뜻을 내포한다.

-> StringPrinter 클래스는 Printer 타입이다.

-> ConsolePrinter 클래스는 Printer 타입이다. 


- 이게 바로 java에서 말하는 다형성이다.

- 타입은 Printer 타입이지만 다양한 StringPrinter, ConsolePrinter 변형이 가능하다.

- 구현체는 언제든지 바뀔수 있기 때문에 인터페이스만 바라보게끔 하는 방식 








Setter Injection의 <property> tag

- Setter method를 통해 의존관계가 있는 Bean을 주입하려면 <property> tag의 ref 속성을 사용 할 수있다.

- Setter method를 통해 Bean의 레퍼런스가 아니라 단순 값을 주입하려고 할 때는 <property>tag의 value 속성을 사용한다.

ref -> Bean id를 이용하여 주입할 Bean을 찾는다.

value -> 단순 값 또는 Bean이 아닌 객체를 주입할 때 사용한다.

public class Hello {
	String name; 
	Printer printer;

	public Hello() {};

	public void setName(String name) {
		this.name = name;
	}

	public void setPrinter(Printer printer) {
		this.printer = printer;
	}
}


위의 소스를 xml로 빈설정을 해주면 아래와 같다.


<bean id="Hello" class="source.Hello">

<property name="name" values="Spring" />    // setName Method

<property name="printer" ref="printer" />       // setPrinter Method 

</bean>

<bean id="printer" class="source.StringPrinter" />


보기 쉽게 각각의 키워드가 의미하는 바를 소스와 xml에서 찾을 수 있도록 하이라이팅해봤다.








Constructor Injection의 <constructor-arg> tag

- Constructor를 통해 의존관계가 있는 Bean을 주입하려면 <constructor-arg> tag를 사용할 수 있다.

- Constructor 주입방식은 생성장의 파라미터를 이요하기 때문에 한번에 여러개의 객체를 주입할 수 있다.


public class Hello {
	String name;
	Printer printer;

	public Hello() {};

	public Hello(String name, Printer printer) {
		this.name = name;
		this.printer = printer;
	}
}

1) Constructor-arg index지정하여 파라메터를 넘겨주는 경우

<bean id="hello" class="source.Hello">

<constructor-arg index="0" value="Spring"/>

<constructor-arg index="1" ref="printer" />

</bean>


2) Constructor-arg Paramater name 지정하여 넘겨주는 경우

<bean id="hello" class="source.Hello">

<constructor-arg name="name" value="Spring"/>

<constructor-arg name="printer" ref="printer" />

</bean>








Collection Type의 값 Injection

- Spring은 List, Set, Map, Properties와 같은 Collection Framework 타입을 XML로 작성해서 프로퍼티에 주입하는 방법을 제공한다.


1) 프로퍼티가 Set과 List일 경우

<bean id="hello" class="source.Hello">

<property name="names">

<list>

<values>Spring</values>

<values>IoC</values>

<values>DI</values>

</list>

</property>

</bean>

- Set으로 설정할경우 list를 set으로 설정하면 된다.


2) Map 타입 : <map>과 <entry> tag를 사용

<bean id="hello" class="source.Hello">

<property name="names">

<list>

<entry key="Kim" values="30"/>

<entry key="Lee" values="35"/>

<entry key="Ahn" values="40"/>

</list>

</property>

</bean>








Spring DI Container의 개념

- Spring DI Container가 관리한는 객체를 빈(Bean)이라고 하고, 이 빈(Bean)들을 관리한다는 의미로 컨테이너를 빈 팩토리라고 부른다.

- 객체를 생성과 객체 사이의 런타임(run-time) 관계를 DI 관점에서 볼 때는 컨테이너를 BeanFactory라고 한다.

- Bean Factory에서 여러 가지 컨테이너 기능을 추가하여 애플리케이션 컨텍스트라고 부른다.








* POJO(Plain Old Java Object)

-> JVM으로만 동작하는 객체를 POJO라한다. 일반 Java Class 객체를 뜻한다.


* Bean 

-> 스프링이 IoC방식으로 관리ㄷ는 객체라는 뜻, 스프링이 직접생성과 제어를 담당하는 객체를 Bean이라고 부른다.


* Bean Factory 

-> 스프링의 IoC를 담당하는 핵심 컨테이너를 가리킨다.

-> Bean을 등록 생성 조회 반환하는 기능을 담당함

-> 보통 BeanFacotry를 바로 사용하지 않고 ApplicationContext를 주로 이용한다.


* ApplicationContext

-> BeanFactory를 확장한 IoC 컨테이너이다.

-> Bean을 등록, 생성, 조회, 반환 관리하는 기능은 BeanFactory와 같다.

-> Spring에서는 ApplicationContext를 BeanFactory보다 더 많이 사용된다.

-> Spring의 각종 부가 서비스를 추가로 제공한다.

-> Spring이 제공하는 ApplicationContext 구현 클래스가 여러가지 종류가 제공된다. 


* Configuration Metadata

-> ApplicationContext 또는 BeanFactory가 IoC를 적용하기위해 사용하는 메타정보를 말한다.

-> 설정 메타정보는 IoC컨테이너에 의해 관리되는 Bean 객체를 생성하고 구성할 때 상용된다.

-> xml로 작성한 bean정보가 metadata에 해당된다.





'JAVA > SPRING FRAMEWORK' 카테고리의 다른 글

[Spring] JUnit의 어노테이션과 메소드  (0) 2018.09.10
[Spring] IoC와 DI  (0) 2018.09.10
Posted by 루우지




증상 : ORA-12638 Credential retrieval failed (신용검색에 실패했습니다) 경고창 출력

원인 : Oracle 설치시 Admin 권한으로 설치하지 않아 발생하는 문제


해결 방법

1. Oracle 설치 경로 찾기

- Oracle Home으로 지정한 경로를 찾아 network\admin 폴더로 이동한다. 

(디폴트로 설치 했을 경우 : C:\app\사용자명\product\11.2.0\client_1\network\admin)




2. sqlnet.ora 파일 수정

- sqlnet.ora 파일을 메모장으로 열어서


SQLNET.AUTHENTICATION_SERVICES= (NTS) <- 이부분을 주석처리한다.



# SQLNET.AUTHENTICATION_SERVICES= (NTS)





이러면 끝!

저장시에 권한문제가 생기면 바탕화면에 임시로 저장 후 해당 파일을 덮어씌우기해서 바꿔치기하면 된다.

Posted by 루우지





















젠킨스란?

- 젠킨스는 Java로제작된 오픈소스 CI(지속적 통합)도구 이다. Jenkins에는 Tomcat 서버가 내장되어 Servlet Container위에 돌아가는 웹서버 이다. 

- SVN, GIT, CVS ... 등과 같은 많은 SCM을 지원한다.

- 쉽게 빌드 결과물을 만들고 테스트하며 배포할수 있는 아주 유용한 도구이다.







젠킨스 다운로드 받기


https://jenkins.io/download/



- 위의 url에 들어가면 다양한 os에서의 젠킨스 설치파일을 제공해준다. 본 게시물에서는 windows os에서의 설치를 다룰 예정이니 windows 설치파일을 다운받는다.




젠킨스 설치하기

- 다운로드 받은 파일을 압출풀고 인스톨러를 실행한다.

- 설치과정은 매우 쉽다. 그냥 NEXT만 눌러주면된다~




- 끝 -



정상 설치가 되었으면 Jenkins 웹서버가 자동으로 구동된다.


http://localhost:8080/


위의 주소로 접속하면 젠킨스의 초기 셋팅을 해줘야한다.









젠킨스는 초기 셋업시 패스워드가 필요하다.

설치된 폴더 C:\Program Files (x86)\Jenkins\secrets 에서


initialAdminPassword파일을 오픈하면 비밀번호가 나오는데 그걸 복사해서 진행해준다.







Jenkins에서 필요한 플러그인을 설치할수 있다.


왼쪽은 추천되는 플러그인 

오른쪽은 사용자가 직접 셀렉할수있는 플러그인 페이지이다.

나는 귀찮으니 왼쪽~




이제 기본적인 셋팅은 끝났다.


http://localhost:8080/


로컬 주소로 재접속을 해보면 



젠킨스가 셋업된 화면을 볼 수있다.





포트번호를 바꿔주고 싶다면?

C:\Program Files (x86)\Jenkins 폴더의 jenkins.xml을 수정해준다.



밑줄친 포트번호를 수정후 저장한뒤 젠키스를 재시작하면 끝~















1


Posted by 루우지


리눅스 os에 익숙하지 않아서 블로그에 정리할겸 올려봅니다.

리눅스에서는 압축파일의 확장자로 tar나 tar.gz파일을 볼 수 있는데요





1. tar 압축

> tar -cvf [파일명.tar]





2. tar 압축 풀기

> tar -xvf [파일명.tar]





3. tar.gz 압축

> gar -zcvf [파일명.tar.gz]





4. tar.gz 압출 풀기

> tar zxvf [파일명.tar.gz]


'Linux OS' 카테고리의 다른 글

[Linux] tar, tar.gz 파일 명령어 (압축하기/압축풀기)  (0) 2018.09.02
Posted by 루우지