'분류 전체보기' 카테고리의 글 목록 (23 Page)

분류 전체보기

javascript - DOM 선택 STYLE 바꾸기 2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) 2019.02.27
스프링 Junit 테스트 예제 2019.02.27
SPRING [SOAP , RESTFUL] 에 대한 이해 (1) 2019.02.27
SPRING [RESTFUL] 에 대한 이해 (2) 2019.02.27

javascript - DOM 선택 STYLE 바꾸기

2019. 2. 27. 09:47

자바스크립트에서 String 는 '' 나 "" 로 할수있지만

`` 로 사용할 수 도있다 ''로 사용할경우 변수를 넣을수도있다

const abcd = ` abcdefg 	`;
console.log(`abd ad` + `adf egfle ${abcd}`);
//bd   adadf    egfle  abcdefg 	

상수의 계산에서

3*2 는 6 단순 곱하기이지만

3**2 는 3의 2제곱 9가 된다

<!DOCTYPE html>
<html>
<head>
    <title id="title">타이틀 색깔바꾸기</title>
</head>
<body>
    <div id="div">안녕하세여</div>
</body>
<script>
    const div = document.getElementById('div');
    const basecolor = (function(){
            if(div.style.color === 'yellow' && div.style.background === 'red'){
                div.style.color = 'white';
                div.style.background = 'black';
            } else {
                div.style.color = 'yellow';
                div.style.background = 'red';               
            }
                });
    
    function init(){
    
     div.addEventListener("click",basecolor); // 클릭할때마다 바뀜
   //  div.addEventListener("mouseenter",basecolor); // 클릭할때마다 바뀜
   //window.addEventListener("online",basecolor);  //인터넷이 연결됫을때 바뀜
   //window.addEventListener("offline",basecolor); // 인터넷이 연결이 끈겻을때 바뀜
   // 각종 마우스 이벤트 모음 구글키워드 javascript dom event mdn
    }
    init();

</script>
</html>

색깔바꾸기 예제

<!DOCTYPE html>
<html>
<head>
    <title id="title">타이틀 색깔바꾸기</title>
</head>
<style>
.div{
    color : red;
    background-color: yellow;
}
.div2{
    color : white;
    background-color: black;
}
</style>
<body>
    <div id="div">안녕하세여</div>
</body>
<script>
    const div = document.getElementById('div');
    
    const colorClick = function(){
        if(div.className === 'div2'){
            div.className = 'div';
        } else {
            div.className = 'div2';
        }
    }
    const clickEvent = function(){
        div.addEventListener('click',colorClick);

    }
    
    clickEvent();
    
</script>
</html>

위 예제는 스타일은 css 자바스크립트는 로직 으로 바꿔서 한 처리이다

보기좋게 한파일로햇지만 파일을 따로 나눠서 사용하는데 목적을 둔다

-------------------------------------------------------------------------------------------------------------------------------

클릭이벤트

div.addEventListener("click",hangleClick); 와

div.addEventListener("click",hangleClick()); 의 차이는?

아래껀 한번만 실행되고 위에껀 클릭할때마다 실행됨?

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

javascript - 바닐라자바스크립트 예제(nomad by nicollas)

2019. 2. 27. 09:44

이 예제는 https://academy.nomadcoders.co/courses/435558/lectures/6701513

공지사항

크롬 앱 클론코딩하며, JS 이론 배우기 <br></br>[초급] HTML, CSS, JS

academy.nomadcoders.co

위 강의에 들어있는 니콜라스 선생님의 강의를 토대로 제가 연습겸 작성한

js 문서들 입니다.

무료강의니깐 한번 들어보시길 추천드리겠습니다.

신기술? 신개념? 등을 좀 배울수 있어 유익했습니다.

플젝은 localStorage 에 name , to dolist , 날씨API사용하여 가져오기 , 실시간 시계 , 배경이미지(랜덤)

등이 포함된 기술입니다.

CSS는 포함안되있고 JS적인 부분만 다루고있습니다.

예제파일도 첨부하니 필요하시분은 받아서 보시기 바랍니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Real Time</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div class="realTime_div">
        <h1>00 : 00</h1>
    </div>
    <form id="form" class="form">
        <input id="input" type="text" placeholder="your name?"/>
    </form>
    <h4 id="h4" class="h4"></h4>
    <form id="todoform"> 
            <input type="text" placeholder="what is todo?">
    </form>
    <ul id="ul"></ul>
    <span class="weather"></span>
    <script src="../js/clock.js"></script>
    <script src="../js/user.js"></script>
    <script src="../js/todo.js"></script>
    <script src="../js/bg.js"></script>
    <script src="../js/weather.js"></script>
</body>
</html>

index.css

.h4,
.form {
    display:none;
}

.show{
    display:block;
}

body{
    background-color: pink;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bgIMG{
    position: absolute;  
    z-index: -1;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    animation: fadeIn 0.5s linear;
}
 /* 배경이미지의 속성 설정 
    position 절대위치로 left top 0 
    애니메이션으로 투명도를 0에서 1로 바꿈 0.5 초마다
    */

bg.js

const body = document.querySelector("body");

const IMG_NUMBER = 5;

function randomNumber(){ //랜덤숫자 생성
    return Math.ceil((Math.random()*IMG_NUMBER));
}

function IMGselect(randomNum){ 
    const image = new Image();
    image.src = `../img/${randomNum}.jpg`;
    image.className = 'bgIMG';
    body.prepend(image);
}//랜덤 숫자를 넣고 이미지 경로를 뽑아 body에 추가

function init(){
    const randomNum = randomNumber();
    IMGselect(randomNum);
}

init();

clock.js

const realTime_div = document.querySelector(".realTime_div"),
    realTime_H1 = realTime_div.querySelector("h1");
    realTime_js = (function(){
    
const realDate = new Date(),
    getHours = realDate.getHours(),  // 시간 가져오기
    getMinute = realDate.getMinutes(), // 분 가져오기
    getSecond = realDate.getSeconds();  // 초 가져오기

    realTime_H1.innerText = `${getHours < 10 ? `0${getHours}` : getHours} :`;
    realTime_H1.innerText += ` ${getMinute < 10 ? `0${getMinute}` : getMinute} :`;
    realTime_H1.innerText += ` ${getSecond < 10 ? `0${getSecond}` : getSecond}`;
    //시분초가 각각 10 미만일때 앞에 0 붙혀서 출력 삼항연산자 ex) 01:01:01 
});

//625
function init(){
    setInterval(realTime_js,1000);
}
init();

todo.js

const toDoform = document.querySelector('#todoform'),
    toDoinput = toDoform.querySelector('input'),
    LS_TODO = 'TODO',
    todolist = document.querySelector('ul');
let todos = [];


    function LS_Save(){
        localStorage.setItem(LS_TODO,JSON.stringify(todos));
        //객체를 STRING으로 변환해서저장 LOCAL은 STRING 박에 저장이 안됨
    }

    function saveTodo2(text){
        const li = document.createElement('li'), //LI 생성
            span = document.createElement('span'), //span 생성
            delBtn = document.createElement('button'), //button 생성
            newId = todos.length+1; //li에 만들어줄 id값 생성
           

        delBtn.innerText = '🤓'; // 버튼에 텍스트 이모티콘 추가
        delBtn.addEventListener('click',deleteLiBtn);
        span.innerText = text; // span 에 입력한값 추가
        li.appendChild(delBtn); // li에 버튼 추가
        li.appendChild(span); // li 안에 span 추가
        li.id = newId; //li 에 id 값 할당
        todolist.appendChild(li); // ul에 li 추가

        const todoObj = {
            text : text, //텍스트값
            id : newId  //li id값 지정
        }

        todos.push(todoObj); //객체를 배열에 저장
        LS_Save();
    }

    function deleteLiBtn(EVENT){ //버튼 클릭시 삭제 이벤트
        const BtnPaLi = event.target.parentElement;
        //버튼의 부모엘리먼트 li 찾음
        BtnPaLi.remove(BtnPaLi.id); //li의 id로 제거
        const newtodo = todos.filter(function(todo){
            //fiter 은 배열의 각각의 요소에 foreach처럼 접근해서
            //true 인 경우만 갖고 새로 배열을 만든다
            
            return todo.id !== parseInt(BtnPaLi.id)
            //true인지 false인지 확인중
        });

        todos = newtodo; //todo를 newtodo로 저장
        LS_Save(); //로컬스토리지 저장
    }

    function hanmdleSubmit2(event){  
        event.preventDefault(); //이벤트 초기화
        const todovalue = toDoinput.value;
        saveTodo2(todovalue); //text값 서브밋
        toDoinput.value = "";
    }

    function isTodo(){
        const LS_TODOSS = localStorage.getItem(LS_TODO); 
        if(LS_TODOSS !== null){
            const parseTodo = JSON.parse(LS_TODOSS); 
            //로컬 데이터를 객체로저장
           parseTodo.forEach(function(todo){ 
            //forEach로 각각 데이터 뽑기
            saveTodo2(todo.text);
           });
        }
    }

    function init(){
        isTodo();
        toDoform.addEventListener('submit',hanmdleSubmit2);
        
    }
    init();

user.js

const form = document.querySelector("#form"), 
    h4 = document.querySelector("#h4");
    input = form.querySelector("input");

function showuser(){
    h4.classList.remove('h4');
    form.classList.remove('show');
    form.classList.add('form');
    h4.classList.add('show');
    h4.innerText =localStorage.getItem("user");
}
function saveName(text){
    localStorage.setItem('user',text);
    showuser();
    //저장소에 user : 이름 저장
}

function handleSubmit(event){
    event.preventDefault(); //이벤트 초기화
    form.addEventListener("submit",saveName(input.value));

}

function isuser() {
    if(localStorage.getItem("user") === null){
        form.classList.remove('form');
        form.classList.add('show');
        form.addEventListener("submit",handleSubmit);
        //user 가 없으면 user입력
    } else {
        showuser(); //form 가리고 h4에 input.value 보여준다
        //user가 있으면 user 보여준다
    }
}

function init() {
    isuser();
}

init();

weather.js

const LS_GPSName = 'GPS';
const API_KEY = '이건 회원가입해서 받으세여 구글에 weather API 검색';
const weather = document.querySelector(".weather");

function getWeather(lat,lon){
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
        //api 호출해서 위도,경도,appid키값,화씨를 섭씨로 바꾸기 등을 넣어서 정보를 가져온다.
        ).then(function(data) {
            return data.json();
        }).then(function(json){
            const temper = json.main.temp;
            const place = json.name;
            weather.innerText = `장소 : ${place} @ 온도 : ${temper}`;

                        //속성으로 css 설정
            //weather.setAttribute('style','font-size : 30px; color : white;');

                        //프로퍼티로 css 설정
            weather.style.color = 'white';
            weather.style.fontSize = '30px';
        });        
    }

    //featch는 IE에선 작동이 안된다
    //AJAX의 상위호환 같은것인데 IE에서는 개발이안되서
    //국내에선 사용하기가 조금 꺼려진다
    //국내에선 되도록 AJAX를 호출하는게 나을거같다


function LS_SaveGPS(GPSObj){
    localStorage.setItem(LS_GPSName,JSON.stringify(GPSObj));
}
function SaveGPSSuccess(position){
    const lat = position.coords.latitude; //위도 얻기
    const lon = position.coords.longitude; //경도 얻기
    const GPSObj = {
        lat,
        lon
    }
    LS_SaveGPS(GPSObj);
    getWeather(lat,lon);
}

function SaveGPSError(){
    console.log("failed");
}

function SaveGPS(){
    navigator.geolocation.getCurrentPosition (SaveGPSSuccess,SaveGPSError);
    //navigator.geolocation 객체를 이용해서 gps 정보를 얻는다
    //getCurrentPosition빠른 응답 / 정확도는 낮음
    // getCurrentPosition 은 (첫번째인자,두번쨰인자)\
    //첫번쨰인자는 석세스 콜백 함수고
    //두번째 인자는 에러 콜백 함수다.
}

function loadGPS(){
    const LS_GPSInfo = localStorage.getItem(LS_GPSName);
    if(LS_GPSInfo === null || LS_GPSInfo === undefined){
        //GPS정보얻기
        SaveGPS();
    } else {
        const parseGPS = JSON.parse(LS_GPSInfo);
        //GPS 정보 가져오기
        getWeather(parseGPS.lat,parseGPS.lon);
    }
}

function init(){
    loadGPS();
}

init();

아래 파일의 img 폴더의 배경이미지는 용량이 많아 제거하였습니다.

마음에되는 이미지로 1.jpg 2.jpg 를 5.jpg까지 만드시면 됩니다.

clock.zip

예제파일 CLOCK.ZIP 추가

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27

스프링 Junit 테스트 예제

2019. 2. 27. 09:41

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"file:src/main/webapp/WEB-INF/spring/**/*.xml"})
public class BbsDAOTest {
	@Inject
	private BbsDAO bdao;
	private static Logger logger = LoggerFactory.getLogger(BbsDAOTest.class);

	@Test
	public void testFind() throws Exception{
		FindCriteria cri = new FindCriteria();
		cri.setPage(1);
		cri.setFindType("S");
		cri.setKeyword("테스트");

		logger.info("********** 테스트 글목록 출력 **********");
		List<BbsVO> list = bdao.listFind(cri);

		for(BbsVO bvo: list){
			logger.info(bvo.getBid() + ": "+bvo.getSubject());
		}
		
		logger.info("********** 테스트 Data갯수 출력 **********");
		logger.info("CountData: "+bdao.findCountData(cri));
	}
}

junit 단위 테스트 방법

@RunWith(SpringJUnit4ClassRunner.class) 로 junit 함께 실행

@ContextConfiguration(locations = {"file:src/main/webapp/WEB-INF/spring/**/*.xml"}) xml 설정 불러오기

@inject bdao 주입

@test 테스트 실행할 코드

'프로그래밍 > Spring' 카테고리의 다른 글

JAVA - jar 내부/외부 properties 파일 읽기 (0)	2019.04.09
전자정부프레임워크 - MYBATIS , IBATIS 다중DB 연동 (2)	2019.03.12
SPRING [SOAP , RESTFUL] 에 대한 이해 (1) (0)	2019.02.27
SPRING [RESTFUL] 에 대한 이해 (2) (0)	2019.02.27
HTTP 상태코드 (에러코드) 와 스프링에서 http 상태코드 전달방법 (1)	2019.02.27

SPRING [SOAP , RESTFUL] 에 대한 이해 (1)

2019. 2. 27. 09:40

[SOAP] 기반 웹서비스

- SOA : 해당서비스를 서로 조합해서 업구 기능을 구현한 어플리케이션을 만들어내는 소프트웨어 아키텍처

- DATA ---> XML로 표현

- UDDI : Universal Description, Discovery and Integration

* 웹서비스를 등록하고 검색하기 위한 저장소로 웹서비스를 공적으로 접근, 검색이 가능하도록 한 공개된 레지스트리

- WSDL (Web Service Description Language) : 웹 서비스 기술 언어 ( 웹서비스를 정의한 언어 XML로 표시)

이와 같이 WSDL 을 모아놓은 XML들이 모여서 UDDI가 된다 UDDI 가 WWW (월드 와이드웹) 으로 서비스 이용

# SOAP?

- HTTP, HTTPS , SMTP(1) 등을 통해서 XML기반의 메시지를 컴퓨터 네트웍상에서 교환하는 프로토콜

- XML을 통해서 제공하는 웹서비스가 SOAP기반 웹서비스다

(1)간이 전자 우편 전송 프로토콜(Simple Mail Transfer Protocol, SMTP)

SOAP 요약 그림 SOAP 부분은 XML/TXT 로 이루어짐

# SOAP 기반의 웹서비스

단점 : 1. 인코딩 , 디코딩이 어렵다.

2. HTTP 상에서 전송하기에 무겁다

3. 개발환경이 따로 필요하다

4. 개발난이도가 높다.

장점 : 1. 사용환경 , 플랫폼에 구애를 안받는다. (리눅스,윈도우,안드로이드 등) ---- XML로 이루어져있어서

2. 동적 바인딩이 가능하다, 독립된 모듈 , 서비스 연결이 느슨하게 연결 , 서비스 조립이 가능

***

[RESTful 기반의 웹서비스]

- Roy Fielding (인터넷 창시 연구한 사람) 이 박사학위 논문에서 웹 아키텍쳐가 웹의 본래 설계의 우수성을 활용하지 못한다고 판단.

웹의 장점을 최대한 활용할 수 있는 네트워크 기반의 아키텍쳐를 제안 (RESTful)

# RESTful (REpresentational State Transfer, 2000년) 표현 상태 전달? (리소스 상태 전달)

- HTTP 프로토콜로 데이터를 전달하는 프레임워크

- 클라이언트와 서버간의 구성요소를 엄격 하게 분리하여 구현을 단순화 함, 서버와 클라이언트를 독립적으로 구현함으로, 확장성을 향상

- 핵심은 Web에 개방된 리소스를 이용.

( soap 같은경운 action 과 동작과 서비스(프로세싱) 단위로 구현을 하다보니 규격화가 되있슴 ex) WSDL (XML) 만들고 UDDI에 저장을함)

- REST는 웹에 개방된 리소스들을 원격에서 또는 로컬에서 쉽게 이용할 수 있는 웹 응용

- REST 아키텍처 스타일에 따라 정의되고 이용되는 서비스나 응용프로그램을 (RESTful) 웹 서비스라고 부른다.

*** SOA(Service Oriented Architecture) 서비스를 지향하는 아키텍처 <--- SOAP (서비스를 기준)

SOAP 기반의 웹서비스는 SOA 구조에 따라서 UDDI 레지스트리를 통해서 웹서비스를 등록,탐색, 바인딩 해서 이용 (규격화)

- 상호 통신간 프로그램들이 잘 이해할 수 있는 문법에 따라 개발 되었고 , 그에따라서 개발자들은 웹 서비스의

기본 스펙을 알아야 하는 고난이도 프로그래밍 능력이 요구됨

- 사람 보다는 기계의 우선적으로 이해하기 쉬운 구조이므로 환경설정 및 개발 환경이 준비 되있어야한다 (동작과 프로세싱 중심)

*** ROA(Resource Oriented Architecture) 자원을 지향하는 아키텍처 <---- RESTful (resource (자원 지향))

Restful 웹서비스는 리소스를 등록하고 저장하는 중간 매개체 없이 리소스 제공자가 직접 요청자에게 제공

그렇기 때문에 soa 의 비해 가볍다 (규격화가 따로없다)

- 인터넷 서비스 업체들이 응용 개발자들에 손쉬운 데이터 제공을 목적으로 출발함

- Restful 은 데이터 기반 이기때문에 기계 보다는 사람이 이해하기 쉽도록 인터넷 기본(HTTP / XML) 이외에 별도의 개발 /실행 환경이 필요 없음.

'프로그래밍 > Spring' 카테고리의 다른 글

JAVA - jar 내부/외부 properties 파일 읽기 (0)	2019.04.09
전자정부프레임워크 - MYBATIS , IBATIS 다중DB 연동 (2)	2019.03.12
스프링 Junit 테스트 예제 (0)	2019.02.27
SPRING [RESTFUL] 에 대한 이해 (2) (0)	2019.02.27
HTTP 상태코드 (에러코드) 와 스프링에서 http 상태코드 전달방법 (1)	2019.02.27

SPRING [RESTFUL] 에 대한 이해 (2)

2019. 2. 27. 09:37

RESTFUL 어노테이션

스프링 3.0 에선 @RESOPONSEBODY , @CONTROLLER 를 각각의 메소드에 써서 리턴타입으로 자원만 줬으나

스프링 4.0 에선 @RESTCONTROLLER 를 클래스에 한번만 기술하면 클래스에 있는 모든 메소드들이 자원전달 가능

주로 ajax 로 url 호출하여 데이터만 받을때 많이 쓴다

컨트롤러

@RestController   //리소스 (데이타) 자체를 반환하는데 사용하는 어노테이션이다.(json,xml,문자열)
@RequestMapping("/demo")
public class DemoController { // <-- 이 클래스에 @RestController  붙임으로써 각 메소드별로 @ResponseBody 를 붙인것과 같은효과
	
	@RequestMapping("hi")   
	public String hi() {  // 클래스에 @restController 이 붙으면 리턴값이 뷰리졸버에서
                          //  뷰의 이름을 찾는거였는데 문자열 그대로 리턴을 하게됨
		return "hi!!!!! spring!!!";
	}

	
}

pom.xml

	<properties>
		<java-version>1.8</java-version>
		<org.springframework-version>4.1.7.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>

리턴타입이 문자열일 경우 그냥 문자열이 반환 되서 뿌려주나

리턴 타입이 객체 (VO , Object , map , list 등) 리턴타입이 객체로 될경우 http 에서는 각 객체들이 어떤타입이거 무엇인지 인식을 못하기때 문에

html /http 에서도 인식할수 있는 json 으로 형 변환하여 리턴 해주어야 한다

pom. xml 에 json 라이브러리 사용방법.

pom.xml 디펜던시 추가

		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.6.3</version>
		</dependency>

컨트롤러

	
@RestController //리소스(데이타) 자체를 반환하는데 사용하는 어노테이션이다. (JSON, XML, 문자열)
@RequestMapping("/demo")
public class DemoController {

    @RequestMapping("/studentInfo")  
	public StudentVO studentInfo(){  //StudentVO 객체를 만들어서 RETURN
		StudentVO svo = new StudentVO();
		
		svo.setHakbun(1);
		svo.setName("김말똥");
		svo.setGrade(2);
		return svo;
	}
}

이렇게 Pom.xml 에 jackson 라이브러리를 추가하면 반환되는 객체(vo 를 json으로 변환하여 전달합니다)

반대로 json 객체가 들어오면 그 타입에 맞는 객체로 변환합니다.

이것들이 가능한 이유는 pom.xml에 jackson 라이브러리(json라이브러리) 가 적용되야 가능하다

response header 에는 (공급하는자 헤더에는)

이렇게 타입이 들어가있따

json 라이브러리로 보낼경우엔 저 컨텐트 타입이 application/json 으로 되있다.

content-Type : 문자열 (String) = text/html

collection(map,list ,vo,JSON등) = application / json

rest 방식은 이와같이 별도의 view 를 만들지 않고 데이터만 보냅니다.

'프로그래밍 > Spring' 카테고리의 다른 글

JAVA - jar 내부/외부 properties 파일 읽기 (0)	2019.04.09
전자정부프레임워크 - MYBATIS , IBATIS 다중DB 연동 (2)	2019.03.12
스프링 Junit 테스트 예제 (0)	2019.02.27
SPRING [SOAP , RESTFUL] 에 대한 이해 (1) (0)	2019.02.27
HTTP 상태코드 (에러코드) 와 스프링에서 http 상태코드 전달방법 (1)	2019.02.27

PREV 1 ···20 21 22 23 24 NEXT

아빠개발자의 노트