유랑하는 개발자

첫 번째 파일 : web.xml (WEB-INF폴더)

--  WEB-INF 폴더에 'config'란 폴더 생성 후 'presentation-layerbiz.xml' 파일 생성

--  서버 시작될 때, 해당 위치에 있는 context파일을 모조리 읽어들이는 것을 뜻합니다.

     이 경로 안에 파일이 오류나면 서버 실행시 404 에러가 발생합니다.

--  중간의 characterEncoding 은 한글 인코딩을 위해 사용합니다.

--  servlet-name. class, url-pattern 에 오타 없는지 꼭 확인 해야 합니다.

     이 부분은 컨트롤러를 위해 사용 됩니다.

	
 	
		ex(main.do or index.jsp)
		



	
		contextConfigLocation
		/WEB-INF/spring/root-context.xml
	
	
	
		org.springframework.web.context.ContextLoaderListener
	

	
	
		characterEncoding
		org.springframework.web.filter.CharacterEncodingFilter
		
			encoding
			UTF-8
		
	
	
		characterEncoding
		*.do
	


	
	
		action
		org.springframework.web.servlet.DispatcherServlet
		
			contextConfigLocation
			
			/WEB-INF/config/presentation-layerbiz.xml
		
	
		
	
		action
		*.do
	

두 번째 파일 : root-context.xml(WEB-INF -> spring 폴더)

--  DB를 연동 할 때 사용함. 중간중간 DB 및 서버 정보는 사용자에 맞게 입력해야합니다.

--  3 번째 단락의 component-scan은 Service 와 Implement 가 저장된 패키지명으로 해야됩니다.

세 번째 파일 : presentation-layerbix.xml

--  component-scan 의 base-package 부분은 controller 를 저장한 패키지 이름으로 해야합니다.

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan r />xmlns:context="http://www.springframework.org/schema/context" xsi:schemalocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		"http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
  
    
   
   
      
         
   

웹페이지 개발을 보다 동적으로 하기 위해 제이쿼리를 사용하는데

이때 문서 객체 구조 요소를 선택하기 위해 '선택자'를 이용합니다.

선택자와 사용법 입니다.

브라우저 객체(BOM)의 객체인 screen 객체 메소드에 이은,

location객체와 history 객체의 메소드 입니다.

location.href : URL을 설정 및 반환 합니다.

location.host : URL 호스트 이름과 포트 번호를 설정 및 반환합니다.

location.hostname : URL의 호스트 이름을 설정 및 반환합니다.

location.hash : URL의 해쉬값을 설정 및 반환합니다.

location.origin : URL의 프로토콜, 호스트이름, 포트번호를 반환합니다.

location.protocol : URL의 프로토콜을 설정 및 반환합니다.

location.port : URL의 포트 번호를 설정 및 반환합니다.

location.search : URL의 쿼리스트링을 설정 및 반환합니다.

location.reload() : 화면을 새로고침 합니다.(F5와 같은 기능)

history.length : 방문 목록 갯수를 표현합니다.

history.back() : 이전 페이지로 이동 합니다.

history.forward() : 존재하는 다음 페이지로 이동 합니다.

history.go() : 인덱스 값에 맞춰 페이지가 이동 합니다.

navigator.appCodeName : 브라우저 이름을 반환합니다.

navigator.appName : 브라우저 이름을 반환합니다.

navigator.appVersion : 브라우저의 버전 정보를 반환합니다.

navigator.cookieEnabled : 쿠키 사용 여부를 반환합니다.

navigator.geolocation : 유저 접속 위치의 Geolocation 객체를 반환합니다.

navigator.language : 브라우저의 사용 언어를 반환합니다.

navigator.onLine : 온라인 브라우저 인지 확인합니다.

navigator.platform : 운영체제 정보를 반환합니다.

navigator.product : 브라우저 엔진 이름을 반환합니다.

navigator.userAgent : 서버 정보를 반환합니다.

navigator.javaEnabled() : 자바 사용 여부를 확인 합니다.(boolean)

결과 값이 보이는 내용만 테스트 하였습니다.

	console.log(navigator.appCodeName);
	console.log(navigator.appName);
	console.log(navigator.appVersion);
	console.log(navigator.cookieEnabled);
	console.log(navigator.geolocation);
	console.log(navigator.language);
	console.log(navigator.onLine);
	console.log(navigator.platform);
	console.log(navigator.product);
	console.log(navigator.userAgent);
	console.log(navigator.javaEnabled());

실행 결과 :

브라우저 객체(BOM)의 screen 객체 메소드

내용이 많지 않아 코드 내에 주석으로 설명 내체 하였습니다.

	var scr_width = screen.width;			// 화면 너비
	var scr_height = screen.height;			// 화면 높이
	var scr_avaWidth = screen.availWidth;	// 화면 사용 가능 너비
	var scr_avaHeight = screen.availHeight;	// 화면 사용 가능 높이
	var scr_colorDepth = screen.colorDepth;	// 표현 가능 컬러 bit
	var scr_pixelDepth = screen.pixelDepth;	// 표현 가능 픽셀 bit
	
	console.log("화면 너비 : " + scr_width);
	console.log("화면 높이 : " + scr_height);
	console.log("화면 사용 가능 너비 : " + scr_avaWidth);
	console.log("화면 사용 가능 높이 : " + scr_avaHeight);
	console.log("표현 가능 컬러 bit : " + scr_colorDepth);
	console.log("표현 가능 픽셀 bit : " + scr_pixelDepth);

결과 : 

자바스크립트의 배열을 추가,  삭제, 정렬 기능을 사용할 수 있는

배열 메소드를 코딩 하였습니다.

join('문자열') : 배열 객체 데이터를 문자열로 이어줍니다.

reverse() : 배열 객체 데이터의 정렬 순서를 역방향으로 해줍니다.

slice(index1, index2) : index1 ~ index2 까지의 구간을 잘라서 표현합니다.

sort() : 배열 객체 데이터를 오름차순으로 정렬합니다.

concat(배열) : 선택된 배열+'배열'을 하나의 배열로 연결 합니다.

pop() : 배열 객체 데이터의 마지막 데이터를 삭제합니다.

push() : 마지막 인덱스에 새로운 데이터를 추가 합니다.

shift() : 배열 객체 데이터의 맨 첫번째 데이터를 삭제 합니다.

unshift() : 첫번째 인덱스 앞에 새로운 데이터를 추가 합니다.

	var arr1 = ['A', 'B', 'C', 'D'];
	var arr2 = ['가', '나', '다', '라'];
	var arr3 = [1, 5, 3, 8, 2, 7];
	var arr4 = ['E', 'F', 'G', 'H'];
	var arr5 = ['a', 'b', 'c', 'd'];

	console.log(arr1.join(' & '));	// join('문자열')
	console.log(arr1.reverse());	// reverse()
	console.log(arr3.slice(0,3));	// slice(index1, index2)
	console.log(arr3.sort());		// sort()
	console.log(arr3.splice());		// splice()
	console.log(arr4.concat(arr5));	// concat(array)
	arr2.pop();		// pop()
	arr2.push('카카');	// push('문자열')
	arr2.shift();		// shift()
	arr2.unshift("가가"); // unshift('문자열')
	console.log(arr4.length);	

결과 : 

단순하게 날짜 (연/월/일)을 받아 현재 날짜 기준 디데이를 계산하는 코드입니다.

today는 Date() 객체를 이용한 오늘 날짜를 계산하는 변수이고,

stdDate는 입력받은 날짜를 Date()객체로 저장하는 변수입니다.

stdDate의 월에 -1을 해준 이유는, 

1~12월이 1~12가 아니라 0~11이기 때문입니다.

	var today = new Date();

	var inYear = prompt("년도 입력");
	var inMonth = prompt("월 입력");
	var inDate = prompt("일 입력");
	
	var stdDate = new Date(inYear,(inMonth-1),inDate);
	var gapDate = stdDate.getTime() - today.getTime();
	
	var gapDay = Math.ceil(gapDate / (60*1000*60*24));
	
	if(gapDay<0) {
		gapDay = -gapDay;
		console.log(gapDay+"일 지났습니다.")	
	} else if(gapDay>0) {
		console.log(gapDay+"일 남았습니다.");
	} else if(gapDay==0) {
		console.log("당일 입니다.");
	}

결과 :

홈페이지 개발시 날짜 및 시간을 출력하는 소스입니다. 

자바스크립트 내장객체중 Date 객체를 사용 하였습니다.

Date 객체의 getDay() 메소드는 현재 요일을 0(일)~6(토) 까지의 숫자로 표시 해줍니다.

그래서 switch 문을 이용하여 요일로 수정 하였습니다.

	var dt = new Date();
	var year = dt.getFullYear(); // 년도
	var month = dt.getMonth();	 // 월
	var date = dt.getDate();	 // 일
	var day = dt.getDay();		 // 요일(포맷 전)
	var hours = dt.getHours();	 // 시간
	var mins = dt.getMinutes();	 // 분
	var snd = dt.getSeconds();	 //초
	var msnd = dt.getMilliseconds(); // 밀리초
	
	console.log(day);
	var dayName;	// 요일(포맷 후)
	
	switch(day) {
		case 0:dayName="일요일"; break;
		case 1:dayName="월요일"; break;
		case 2:dayName="화요일"; break;
		case 3:dayName="수요일"; break;
		case 4:dayName="목요일"; break;
		case 5:dayName="금요일"; break;
		case 6:dayName="토요일"; break;
	}
	
	document.write(year+"년 "+month+"월 ",+date+"일 "+dayName+"
");
	document.write(hours+"시 "+mins+"분 "+snd+":"+msnd+"초");

출력 결과 : 

아마존 웹 서비스 (Amazon Web Service) EC2 인스턴스 생성.

EC2란 (Elastic Compute Cloud) 로 오프라인에 컴퓨터를 설치해서

 사용하는게 아닌,  아마존 서버에서 제공하는 클라우드 컴퓨터를

사용하는것 입니다.

저는 취업시 우대사항에 AWS 사용 경험이 해당 되었고,

노트북으로 돌려 놓은 서버가 괜히 불안해서

좀 안정적으로 구축 하기 위해

EC2 인스턴스(윈도우)를 생성하여 서버를 구축 하려 합니다.

1. 로그인 하고 AWS Management console 로 이동 합니다.

2. 컴퓨팅에 있는 'EC2'를 선택하거나 검색바에서 'EC2'로 검색 합니다.

OR

3. 아래 인스턴스 생성의 '인스턴스 시작'을 클릭 합니다.

4. 필요한 운영체제를 선택합니다.

Amazon Linux, Ubuntu, Red Hat 등 있으며 필요한 버전에 맞춰 선택 해주시면 됩니다.

저는 윈도우가 필요하기 때문에 윈도우 서버를 선택 하겠습니다.

5. 인스턴스 세부 정보 구성, 스토리지 추가 도 필요한 옵션에 맞게

설정 해주시면 됩니다.

6. 새로운 키 페어를 생성 합니다.

처음 인스턴스가 생성되면 해당 인스턴스는 암호화된 상태로 생성 됩니다.

이때 그 암호화를 풀어주는 역할을 키 페어가 하게 됩니다. 

우선 저장 가능한 경로를 설정하여 저장해주세요.

7. 원격 접속전, 해당 인스턴스의 암호를 알기 위해서는,

인스턴스 -> 해당 인스턴스 선택 -> 우클릭 -> 연결/Window암호 가져오기

8. 파일 선택 후 저장된 .pem 키 페어를 첨부 후 '암호 해독'

8. 검색 -> '원격 데스크톱 연결' -> 퍼블릭 DNS복사 후 붙여넣기

9.  암호는 암호 해독된 내용을 복사 후 붙여넣기 하면 접속 됩니다.

1. for - in 문을 사용

var objTest = {'a' : 1000, 'b' : 2000, 'c' : 3000, 'd' : 4000,  'e' : 5000};

for(var i in objTest) {
     document.write("Key : " + i + ", value : " + objTest[i] + "
);
}

배열을 추가하는데 2가지 종류가 있습니다. 

1. 하나의 데이터를 추가할 때

2. 두개 이상의 데이터를 추가할 때 

var singularAdd = ['1', '2'];
var pluralAdd_1 = ['a', 'b'];
var pluralAdd_2 = ['A', 'B'];

singularAdd.push('3');
pluralAdd_1 = pluralAdd_1.concat(['c', 'd']);
pluralAdd_2 = pluralAdd_2.concat(['C', 'D', 'E']);

console.log(singularAdd);
console.log(pluralAdd_1);
console.log(pluralAdd_2);

결과 값 :