aking에 해당되는 글 3건

Java Script

학습정리/by aking



JAVA SCRIPT



  • <script type="text/javascript">

-> 자바 스크립트 타입으로 지정


  • "use strict";

- 브라우저에게 자바스크립트를 엄격하게 검사할 것을 요구.

- 최신의 브라우저에 추가된 명령어로, "" 넣은 이유는 이전 브라우저에서

오류가 발생할 수 있기 때문에 미연의 방지차 정의 된 것이다.



  • 배경지식

- 변수는 페이지 단위로 관리된다.

- 페이지와 페이지 사이에는 절대 공유할 수 없다.

- 글로벌 변수 => 그 페이지 내에서 어디서든 접근할 수 있는 변수





변수와 자료형



- 변수 선언: 데이터형을 선언하지 않는다.

var a;                        // 변수에는 어떤 값을 넣을 수 있는가? - 마음대로.

a = 10; // number 데이터형

a = "홍";         // string 데이터형

a = true;         // boolean 데이터형

a = new Object(); // Object 데이터형

a = function() {}; // function 데이터형

- 출력: 브라우저의 콘솔 창으로 출력할 수 있다.

console.log(10); // 개발하는 동안 확인용으로 사용한다.




  • 바인딩이란?

- 변수의 데이터형의 결정되는 것.

- 값을 할당한 후 결정 된다.


var b;    // 바인딩 안되어 있는 상태: undefined

// 해당 변수에 값이 할당되지 않은 상태. 즉, 데이터형이 결정되어 있지 않은 상태.


console.log(b);

- 변수의 데이터형 알아내기: 바인딩 된 후 변수의 데이터형 확인 typeof()


b = 10;

console.log(typeof(b));


b = 10.5;

console.log(typeof(b));

- 동적 바인딩(dynamic binding <> static binding)

-> 예시) Java, C, C++, C#

- 변수의 데이터 형은 고정되어 있지 않다. 값을 할당하는 순간 결정되기 때문이다.

- 값을 할당할 때 데이터형이 결정되는 것.

- 가능한 변수의 용도를 결정했으면 그대로 사용.





자료형 검사: typeof()

자료형: null, undefined



b = "홍길동";

console.log(typeof(b));



b = true;

console.log(typeof(b));


b = null;

console.log(typeof(b));



b = new Object();

console.log(typeof(b));



b = function() {};

console.log(typeof(b));

- 이전 자바스크립트 명세에서는 var을 선언하지 않고 만든 변수는 글로벌 변수로 설정.

- 현재는 반드시 var을 붙여야 한다.

- 브라우저에게 자바스크립트 문법을 엄격하게 검사할 것을 요구. 'use strict";




  • 중복 선언?

- 오류가 아니다. 기존 변수 덮어쓴다.

var c = 10;

console.log(typeof(c));


var c = "홍길동";

console.log(c);



window 객체: 브라우저에 미리 정의된 객체

-> 브라우저의 정보를 다루는 객체

  • 글로벌 변수나 함수를 포함하고 있다.
  • 글로벌 변수는 모두 window 객체의 프로퍼티로 포함된다.
  • 글로벌 함수도 또한 모두 window 객체에 포함된다.

console.log(window.c);


var d = 20;

window.e = 30;


console.log(e);                                // e앞에 window 객체 레퍼런스가 생략된 것.

console.log(window.e);




기본 라이브러리

prompt(), confirm(), alert()


prompt()

- prompt 리턴값은 string이다.


var r = prompt("당신의 나이는?");

console.log(r);



var r2 = confirm("당신은 비트 수강생입니까?", "제목입니까?");

console.log(r);



alert("오호라... 단순 메시지 출력할 때 사용");





배열: [ , , , ]

var names = ["홍길동", "임꺽정", "유관순", 20, function(){}, true];

for(var i = 0; i < names.lenght; i++){

console.log(names[0]);

}




    ==와 ===의 차이

var x1 = 20;

var x2 = "20";

if(x1 == x2){                                // 암시적 형변환이 발생함.

console.log("x1 == x2");

}


암시적 형변환 없이 정확하게 데이터형과 값이 일칳나는지 확인하고 싶다면?

if(x1 === x2){

console.log("x1 === x2");

} else {

console.log("x1! ==  x2");

}





console.log('52 + 273');            // 1번


console.log(52 + 273);              // 2번


console.log(parseInt('52') + 273);            // 3번: parseInt로 썼을 경우 데이터형으로 변환한다.

        

console.log(52 + '273');            // 4번


console.log('52' + '273');            // 5번





조건 연산자


var a = (20 > 30) ? "와우 정말?! ㅎㅎ" : "어후,,,";

console.log(a);




||와 &&의 다른 활용

var x = 20;


var b = true || (x = 30);

console.log(x, b);


var b = false || (x = 30);

console.log(x, b);


var age = prompt("니 나이 몇이냐?", "18");

// (age > 18) || console.log("미성년자입니다.");

(age < 19) && console.log("미성년자입니다.");





저작자표시 비영리

'학습정리 > by aking' 카테고리의 다른 글

사이트정리  (0) 2013.07.21
안드로이드 NFC  (0) 2013.07.19
HTML & CSS  (0) 2013.06.25
(수정중) GIT Server 구축 및 Log4J 설정  (0) 2013.06.24
by aking 2013. 7. 9. 18:34

HTML & CSS

학습정리/by aking

CSS 시작하기

  • HTML의 본연의 목적인 구조화된 문서로써 제 역할을 수행하기 위해 디자인적인 요소는 HTML과 완전히 분리시켜

  • ‘구조화된 HTML을 만들어보자‘ 라는 것이 주된 목적이었다.

  • 거기에 따라 HTML에서 디자인에 관련된 요소들은 전부 사용을 지양할 것을 권고하고 있다.

 


구조화된 HTML?

  • 그럼 구조화된 HTML이란 무엇인가? 구조화된 HTML은 HTML태그 본연의 용도에 맞게 사용한다는 것으로

    예를 들면 최상위 제목을 뜻하는 <h1> 태그는 문서의 제목 수준으로 쓰이며, 본문 내용은 <p> 태그로 사용한다.

  • 이렇게 역할을 나뉘게 되면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다.

 


분담 역할

  • 이렇게 역할을 분담하게 되면 디자인에 필요한 부분은 CSS가 전담하기 때문에

    웹 디자이너와 웹 개발자간의 협업이 훨씬 용이해진다.

  • 게다가 CSS는 별도의 파일 형태로 다른 문서에서도 동일한 CSS를 호출할 수 있기 때문에

    트래픽을 줄이는 효과도 있다.

 


좀 더 Stylish한 것을 원하나요?

  • 이러한 문제들 때문에 등장한 것이 바로 css (Cascading Style Sheets)입니다.

  • css는 세밀하게 디자인할 수 있는 명령어 집단이라고 생각하시면 됩니다.

  • css는 실제로 HTML보다 스타일 정보를 명시하는데 있어 훨씬 잘 들어맞는다.

  • 약간의 css를 사용하는 것만으로도, HTML의 스타일에 꽤 큰 효과를 줄 수 있습니다.

  • 또한 여러 페이지들의 스타일을 한 번에 처리하는데 있어서도 css가 훨씬 더 나은 방법이라는 것을 알게 될 것이다.

 

 

HTML 구조

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />

<title>브라우저 타이틀바 제목</title>

<style type=“text/css”>

 

/* 태그명으로 찾기 */

h1 {

text-align: center; /* 글자 가운데 정렬 */

color: red; /* 글자 빨간색 */

}

 

/* 아이디로 찾기 */

#p1 {

border-style: dotted; /* 테두리선 스타일을 도트로 설정 */

border-width: 5px; /* 테두리선 상하 좌우 5px로 설정 */

                            /* 상 / 우 / 하 / 좌 / 로 시계방향으로 설정 */

border-color: blue; /* 테두리선 색상을 블루로 설정 */

}

 

/* 클래스(분류)로 찾기 */

.desc {

background-color: yellow; /* 배경색상을 노랑색으로 설정 */

}

 

/* 동일한 태그와 해당 아이디로 찾기 */

 

p#intro {

color: rgb(0,255,0); /* 글자색을 RGB로 설정 */

font-family: 궁서; /* 글씨체 궁서체로 설정 */

}

</style>

 

</head>

<body>


<h1 id=“header1” class=“desc”>이것은 태그명과 클래스로 만들어놓은 style 적용됨.</h1>


<p id=“intro”>이 문장은 p태그와 id 값이 intro이 같아야 스타일 설정이 됩니다.</p>


</body>

</html>

 


<BONUS> 디자인하는데 필요한 색상 RGB!

R

G

B

0

0

f

f

0

0

0

0

0

0

0

0

0

0

1

1

1

1

1

1

1

1

0

0

0

0

0

0

0

0

<- 1byte ->

<- 1byte ->

<- 1byte ->

0

255

0









시맨틱 웹이이란?

 

들어가기 앞서 시맨틱 웹과 현재 웹의 차이를 알아보자.

 

  • 현재 웹상은 컴퓨터가 해석할 수 없는 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 가득 차 있다.
  • 예를 들어 <em>원숭이</em> 엉덩이는 <em>빨갛다.</em> 라는 예에 볼 수 있듯 <em> 태그는 단지 원숭이 엉덩이는 빨갛다. 라는 단어를 강조하기 위해 사용된다.
  • 이 HTML을 받아서 처리하는 컴퓨터는 원숭이라는 개념과 빨갛다. 라는 개념이 어떤 관계를 가지는지 해석할 수 없다.
  • 단지 <em> 태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조할 뿐이다.
  • 게다가 원숭이 엉덩이는 빨갛다. 라는 것을 서술하는 예의 문장은 자연어로 작성되었으며 기계는 단순한 문자열로 해석하여 화면에 출력한다.

 

  • 시멘틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다.
  • 하지만 XML로 정의한 태그는 사람이 이해하기 어렵지 않으나 기계가 자동적으로 그 의미를 이해하기는 어렵다.
  • 특히 태그 사이의 의미 연관성을 추론하기란 매우 어렵다.
  • 임의로 만든 태그의 사용법은 알 수 있어도 어떤 의미를 담고 있는 태그인지 파악하기는 어려운 것이 XML의 단점인 것이다.
  • 이런 문제를 해결하기 위해 제시된 기술이 있는데 그것이 바로 RDF (Resource Description Framework)이다.
  • RDF는 특정 자원에 대한 메타데이터를 설명하는 XML기반의 프레임워크이다.
  • RDF는 자원, 속성, 속성값을 묶어서 하나의 단위로 취급하는 기술로 정보를 구성하는 자원에 대한 좀 더 세밀한 설명과 관계파악을 쉽게 해준다.
  • 현재 시맨틱 웹의 구조는 RDF와 같은 기술에 크게 의지하고 있다.

 

시맨틱 웹을 좀 더 알아보자.

  • 시맨틱 웹이란 단어를 풀어보자면 ‘의미를 가지는 웹’, 또는 ‘의미론적인 접근’. 좀 더 풀어보자면 ‘뜻을 살린 웹’을 뜻한다.
  • 이는 컴퓨터가 사람을 대신하여 정보를 읽고 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 하는 차세대 지능형 웹을 의미한다.
  • 시맨틱 웹의 궁극적인 목적은 웹에 있는 정보를 컴퓨터가 좀 더 이해할 수 있도록 표준 및 기술을 개발하여 의미적 검색, 데이터 통합, 네비게이션, 업무의 자동화 등을 지원하는 것이다.

 

 

 

 

- a.k.a. aking -


 

 

저작자표시

'학습정리 > by aking' 카테고리의 다른 글

사이트정리  (0) 2013.07.21
안드로이드 NFC  (0) 2013.07.19
Java Script  (0) 2013.07.09
(수정중) GIT Server 구축 및 Log4J 설정  (0) 2013.06.24
by 알 수 없는 사용자 2013. 6. 25. 20:50

(수정중) GIT Server 구축 및 Log4J 설정

학습정리/by aking


금일 배운 학습 내용



  • GIT Server 구축
  • DB분리 작업
  • Log 설정



  • GIT Server 구축

Eclipse -> Help -> Eclipse Marketplace에서 Git 검색 후 EGit - Git Team Provider를 Install 시킨다.



http://www.springsource.org -> Code Samples -> Spring Framework Samples ->

 

Git Read-Only -> URI 가져오기




Eclipse -> Git Repositories -> Clone a Git repository





Next -> Next -> Finish



SVN Repositories에서 하는 것처럼 별다른 것 없이 URI에 Git Source 주소를 적어 등록시킨다.








등록이 되었으면 spring-petclinic -> Working Directory -> Import Projects






Import 시키면 Package Explorer에 등록된 것을 확인 할 수 있다.





  • DB분리 작업


Services.xml에 보관해둔 DB정보를 분리 작업을 한다.



Step1. data-access.properties


Import해둔 spring-petclinic -> src -> main -> resources -> spring ->

 

data-access.properties 파일을 작업 할 프로젝트 resources에 가져와서


DB정보를 data-access.properties 파일에다 저장해준다.


jdbc.driverClassName=oracle.jdbc.driver.OracleDriver

jdbc.url=jdbc:oracle:thin:@localhost:1521:xe

jdbc.username=scott

jdbc.password=tiger



Step2. Services.xml


  <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">

  <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"/>

  <property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"/>

  <property name="username" value="scott"/>

  <property name="password" value="tiger"/>

  </bean>


위 DB정보를 EL(Expression Language)로 적어준다.


<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"

destroy-method="close">

<property name="driverClassName" value="${jdbc.driverClassName}" />

<property name="url" value="${jdbc.url}" />

<property name="username" value="${jdbc.username}" />

<property name="password" value="${jdbc.password}" />

</bean>



위 DB정보를 data-access.properties 파일로 생성해 저장한다.


context:property-placeholder location="classpath:data-access.properties" />


 


Spring framework 2.5 미만에서는 위 코드를 사용하지 못하고, 아래 코드를 사용하게 된다.


<bean

class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">

<property name="locations" value="classpath:data-access.properties" />

</bean>






  • Log 설정


Pom.xml -> Dependencies 에서 log4j 검색 후 1.2.14 버전을 추가한다.



  •  log4j 설정
1. web.xml에 context-param과 Listener 설정을 안해줘도 classpath의 루트 경로에
log4j.properties 파일을 두면 자동으로 loggin이 활성화 된다.

2. 또는, WEB-INF/.../log4j.properties 파일을 둔 경우, 아래와 같이 web.xml 파일에
log4jConfigLocation 이라는 이름으로 파라메터 정보를 설정하고,
log4jConfigListener를 사용하여 로딩하는 방법도 있다.

  • log4j 설정파일 위치 설정 (2번방법)
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/log4j.properties</param-value>
</context-param>

  • web.xml에서 Listener 설정 (2번방법)
<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>

  • log4j.properties 생성 및 설정

WEB-INF 폴더안에 log4j.properties (File) 생성하고 작성한다.


# DEBUG < INFO < WARN < ERROR < FATAL

log4j.rootCategory=DEBUG, stdout, dailyfile


# setting stdout logger

log4j.appender.stdout=org.apache.log4j.ConsoleAppender

log4j.appender.stdout.layout=org.apache.log4j.PatternLayout

#log4j.appender.stdout.ImmediateFlush=true

#log4j.appender.stdout.Target=System.err

log4j.appender.stdout.layout.ConversionPattern=[%5p] [%t] (%F) - %m%n


# setting dailyfile logger

log4j.appender.dailyfile=org.apache.log4j.DailyRollingFileAppender

log4j.appender.dailyfile.layout=org.apache.log4j.PatternLayout

log4j.appender.dailyfile.layout.ConversionPattern=[%5p] [%t] (%F) - %m%n

log4j.appender.dailyfile.DatePattern='.'yyyy-MM-dd

log4j.appender.dailyfile.threshold=DEBUG


#시스템 properties에 집어넣을 경로 ${webapp.root} 설정

#1. context-param web.xml에 집어 넣기.

#-> context-param 정의

# <context-param>

# <param-name>webAppRootKey</param-name>

# <param-value>webapp.root</param-value>

# </context-param>


#2. log4jConfigListener 또는 WebAppRootListener에 추가하기.



log4j.appender.dailyfile.File=${webapp.root}/WEB-INF/log/web03.log


#log4j.logger.org.springframework=DEBUG

#log4j.logger.org.apache=DEBUG

#log4j.logger.org.mybatis=DEBUG


#log4j.logger.java.sql=DEBUG

#log4j.logger.java.sql.Connection=DEBUG

#log4j.logger.java.sql.Statement=DEBUG

#log4j.logger.java.sql.PreparedStatement=DEBUG

#log4j.logger.java.sql.ResultSet=DEBUG


log4j.logger.bit.java39.dao=TRACE




[%p]

 로그 기록 범위 

 [%t]

 스레드

 (%F)

 현 파일명

 %m

 메시지를 출력

 %n

 다음라인으로 이동





  • 시스템 properties에 집어넣을 경로 설정하기
    <!-- 다음 파라메터는 log4jConfigListener에 의해 시스템 프로퍼티로 등록된다.
    -> log4jConfigListener는 webapp.root 이름으로 웹 애플리케이션 루트 경로를 저장한다.
     -->

1. context-param web.xml에 집어넣기
- context-param 정의

<context-param>
    <param-name>webAppRootKey</param-name> <!-- 시스템 프로퍼티에 넣으려면 반드시 이 이름으로 설정해야 한다. -->
    <param-value>webapp.root</param-value>     <!-- 값은 마음대로. log4j.properties에서 사용할 이름이다. -->
</context-param>


2. log4jConfigListener 또는 WebAppRootListener 추가하기



  • Log4j 설정

기본 디폴트는 DEBUG이다.

  • logger 지정
    • 로그 기록의 범위 지정
      • DEBUG < INFO < WARN < ERROR < FATAL
        • 지정한 것보다 같거나 작은 것 모두 출력

예시) DEBUG로 지정하면 그 아래 모든 것이 출력된다.


  • 로그 출력 방법 (이름은 마음대로 설정해도 상관없다.)
예시) log4j.rootCategory=DEBUG, stdout, dailyfile
예시) 각 출력 방법을 지정
- log4j.appender.방법이름=방법지정

  • 출력할 대상 지정
    • log4j.logger


  • 선언 방법
private Logger logger = Logger.getLogger(Logger.class);

static 사용하지 말고 private로 사용한다.

  • 사용방법

logger.debug("오호라...debug...");

logger.info("오호라...info...");

logger.warn("오호라...warn...");

logger.fatal("오호라...fatal...");



  • File로 추출할때 방법 (log4j.properties)

log4j.appender.dailyfile.File=${webapp.root}/web03/WEB-INF/log/web03.log


- 시스템루트를 지정하지 않고 동적으로 받아와 해당 루트에 로그파일을 생성하기 위함.





  • 실제 경로 확인하는 방법

Properties props = System.getProperties();
for(Object key : props.keySet()){
System.out.println(key + " , " + props.getProperty((String)key));
}




- a.k.a. aking -


저작자표시

'학습정리 > by aking' 카테고리의 다른 글

사이트정리  (0) 2013.07.21
안드로이드 NFC  (0) 2013.07.19
Java Script  (0) 2013.07.09
HTML & CSS  (0) 2013.06.25
by 알 수 없는 사용자 2013. 6. 24. 22:18
| 1 |

티스토리툴바