1초 = 1000밀리세컨즈

컴퓨터 시간 기준이 밀리세컨즈임.

// setTimeout( 콜백함수, 시간설정 );

setTimeout(()=>{

console.log('1초 이후에 한번만 실행');

},1000);

구글 홈

확장 프로그램>JSON Formatter 설치, Talend API Tester - Free Edition 설치

</head>

<body>

//일반적인 함수의 형태

function simplePrint(){

console.log('simplePrint_1');

}

simplePrint();

// 함수를 변수화 - 함수를 익명화 하여 변수에 저장한다.

const simplePrint2 = function(){

console.log('simplePrint_2');

}

simplePrint2();

// 화살표 함수를 사용한 작성 - 항상 익명함수로 작성된다.

// 변수 = () => { 수행문; }

const simplePrint3 = ()=>{

console.log('simplePrint_3');

}

// 화살표 함수를 호출(사용)하는 방법은 일반함수와 동일.

simplePrint3();

// 화살표함수를 사용하는 대표예시

let arr = [1,2,3,4,5];

// filter함수를 일반익명함수로 작성

let arr2 = arr.filter(function(num){

console.log('num : ',num);

return num % 2 == 0;

});

console.log(arr2);

//화살표 함수로 작성하는 방법

let arr3 = arr.filter((num) => {

return num % 2 == 1;

});

console.log(arr3);

// 파라미터가 1개인경우에 ()를 생략 가능

</script>

<h1>콜백(callback)함수</h1>

<button onclick="stop()">interval 멈춤</button>

// 특정 시점에 호출되는 함수

// 일반적으로 함수의 매개변수로 전달하도록 설계

// 대표적인 콜백함수 : setTimeout(), setInterval() 함수

// setTimeout함수 : 특정시간 이후에 한번만 콜백함수가 실행.

// setTimeout( 콜백함수, 시간설정 );

setTimeout(()=>{

console.log('1초 이후에 한번만 실행');

},1000);

// setInterval함수 : 특정시간마다 콜백함수가 실행

let count = 0;

const interval = setInterval(()=>{

// count = count +1;

count += 1;

console.log(`1초마다 실행 : ${count}`);

// setInterval함수를 내부에서 멈추는 방법

// if(count === 5){

// clearInterval(interval);

// }

},1000);

// setInterval함수를 멈추는 방법 - clearInterval()함수사용

// clearInterval(interval);

// 멈춤버튼을 클릭했을 때

const stop = () => {

// setInterval함수를 멈추도록 한다.

clearInterval(interval);

}

JSON 데이터 포맷

JavaScript Object Notation

사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준
자바스크립트의 객체 표기법을 따른다.
사람과 기계가 모두 읽기 편하도록 고안되었다.
프로그래밍 언어와 운영체제에 독립적이다.

JSON의 구조

이름(key)과 값(value)의 쌍으로 이루어져있다.
데이터의 구분은 ,(쉼표)로 한다.
객체(object)는 {}(중괄호)로 둘러싸 표현한다.
배열(array)은 [](대괄호)로 둘러싸 표현한다.
key값은 문자열로 작성

문법 :
{
"데이터이름" : 값,
"데이터이름2" : 값
}

// json데이터 실습

js의 객체표기법에 따라 데이터를 작성
    데이터 항목은 다음과 같다.
    name에 식빵, family에 웰시코기, age는 1, weight는 2.14
    dog라는 변수를 생성하고, 위의 데이터 항목을 JS의 객체 형식으로 저장해봅시다.
    저장후에 console.log()를 활용하여 dog변수를 출력하도록 합시다.
    let dog = {
        name : "식빵",
        family : "웰시코기",
        age : 1,
        weight : 2.14
    }
    console.log(dog);

    위에서 생성한 dog변수에 저장된 데이터들을
    json포맷으로 변환하여 jsonDog라는 변수에 저장하고,
    let jsonDog = {
        'name':'식빵',
        'family':'웰시코기',
        'age':1,
        'weight':2.14
    }
    console.log로 출력
    console.log(jsonDog);

    함수를 이용하여 데이터 타입 변환 : JS객체 -> JSON객체로 변환
    let jsonDog = JSON.stringify(dog);
    console.log(jsonDog);

    함수를 이용하여 데이터 타입 변환 : JSON ->JS객체로 변환
    let jsDog = JSON.parse(jsonDog);
    console.log(jsDog);

    JSON 데이터와 JS의 객체 비교
    dom제어를 활용한 비교
    document.getElementById('json').innerText = jsonDog;
    document.getElementById('js').innerText = jsDog;

    json데이터도 js의 객체와 마찬가지로 ~.데이터이름 의 형태로 특정 데이터를 사용 가능
    console.log(jsDog.name);
    console.log(jsonDog.name); //stringify함수를 사용하여 객체 전체가 문자열화 되어서 undefined되었음.

</script>

JS AJAX

서버와 비동기 통신을 위한 기술 AJAX

페이지 전체를 재로딩 하지 않고도, 웹페이지의 일부분만을 갱신 가능

<AJAX는 서버와 비동기 통신을 위한 기술로, 페이지 전체를 재로딩하지 않고도 웹페이지의 일부분만을 갱신할 수 있다. Axios는 AJAX를 쉽게 구현할 수 있도록 도와주는 외부 라이브러리 중 하나이다. AJAX를 구현하는 방법으로는 jQuery, 순수 JS 등이 있다. AJAX의 대표적인 메소드 타입으로는 get 타입과 post 타입이 있다.>

</head>

// ajax의 종류

// 순수JS

// const ajax = fetch('주소',{ 옵션 });

// ajax.then('콜백함수');

// jQuery - 외부라이브러리

$.ajax({

url:'주소',

type:'메소드',

data : { 'key': 'value'},

succes : 콜백함수

});

// Axios - 외부라이브러리

const data = axios({

url:'주소',

method:'메소드타입',

params: { 'key' : 'value' }

});

data.then(콜백함수);

const getData = axios({

url: 'https://jsonplaceholder.typicode.com/posts',

method : 'get'

});

getData.then((result)=>{

console.log(result.data);

let data = result.data; // ajax통신이 완료가 된 결과값(필요로하는 결과만)을 따로 변수에 저장

let ajaxText = document.querySelector('#ajaxText');

ajaxText.value = JSON.stringify(data);

// ul태그에 필요한 데이터만 이용하여 출력

// ul태그에 데이터 출력을 위한 태그 선택

let ul = document.querySelector('ul');

// ul태그에 데이터 추가를 위한 li태그 생성 및 텍스트 추가

// 아래의 소스코드를 활용하여

// 반복문 이용하여 백개의 데이터를 li태그로 생성하여 ul태그에 추가를 해봅시다.

for(i=0;i<data.length;i++){

let li = document.createElement('li');

li.innerText = `${data[i].id} : ${data[i].title}`;

ul.appendChild(li);

}

});

//웹 개발에서는 서버와의 소통을 url로 하게된다.

// url에 메소드 타입이 세부적으로 존재하게 된다.

// 대표적인 메소드 타입

// get타입 메소드 : 브라우저에 직접적으로 요청, 파라미터가 전부 노출된다.

// post타입 메소드 : 사용자가 입력한 내용(파라미터)이 주소에 표시되지 않고, 브라우저에 직접 요청하지 않는다.

<!DOCTYPE html>

<head>

<style>

#news-list{

box-sizing: border-box;

padding-bottom: 3rem;

width: 768px;

margin: 0 auto;

margin-top: 2rem;

}

.news-item{display: flex;}

css 선택자 + 선택자

인접 형제 결합자

같은 부모요소를 공유하는 태그선택자중에 두번째 요소를 선택을 해주는 선택자

.news-item + .news-item{margin-top: 3rem;}

.news-item .thumbnail{margin-right: 1rem;}

.news-item .thumbnail img{

display: block; width: 160px;

height: 100px;

}

.news-item .contents h2{margin: 0;}

.news-item .contents h2 a{color: black;}

.news-item .contents p{

margin: 0; line-height: 1.5;

margin-top: 0.5rem;

}

</style>

</head>

<body>

</div>

// 사용할 url : https://newsapi.org/v2/top-headlines

// url요청시 method타입 : get

// 필요한 파라미터 : country = kr

// apiKey = a8f0d4f98b2f4e60847d990ca71a8503

// 파라미터 란?(웹 개발에서 이야기하는 파라미터)

// url에서 ?뒤에 오는 모든 항목들이 파라미터 이다.

// https://newsapi.org/v2/top-headlines?apiKey=a8f0d4f98b2f4e60847d990ca71a8503&country=kr

// 파라미터는 없을수도 있고, 한개 이상이 될수도 있다.

// 파라미터 간의 구분은 &로 구분한다.

// url?파라미터이름=값&파라미터이름2=값

// 파라미터들은 순서가 상관이 없다.

// 불리는 이름은 파라미터(Parameter) 혹은 Query String 이라고도 부른다.

function getNews(){

let newsList = axios({

url:'https://newsapi.org/v2/top-headlines',

method:'get',

params:{

apikey : 'a8f0d4f98b2f4e60847d990ca71a8503',

country : 'us',

category : 'business' //한국기사에 없는내용이 많아서 미국기사로 수정

}

});

newsList.then((result) => {

//ajax통신이 성공했을경우 수행문

// console.log("성공시 : ",result.data.articles);

const articles = result.data.articles;

let code = '';

//향상된 for문 사용~! 아래에 있는 code는 문자열이기 때문에 innerHTML로 사용해주어야함.

for(let article of articles){

// console.log(article);

const url = article.url; //실제 뉴스기사의 주소

const urlToImage = article.urlToImage; //뉴스기사의 썸네일

const title = article.title; //뉴스기사의 제목

const desc = article.description; //뉴스기사의 내용

code +=`

</a>

</div>

<h2>

${title}

</a>

</h2>

</div>

}

document.querySelector('#news-list').innerHTML = code;

}).catch((err) => {

//ajax통신이 실패했을경우 수행문

console.log("실패시 : ",err);

});

}

</script>

</body>

</html>

*위 코드에서 code는 문자열 변수입니다. 초기값으로 빈 문자열('')을 할당하고, 반복문을 통해 뉴스 기사 정보(articles 배열)를 가져와서 해당 정보를 활용하여 문자열 형태의 HTML 코드를 작성하고, 이를 code 변수에 추가합니다. 이후 code 변수는 innerHTML로 출력됩니다. 따라서 code 변수는 최종적으로 모든 뉴스 기사 정보를 담은 HTML 코드를 문자열 형태로 갖게 됩니다.

향상된 for문은 자바에서 배열이나 컬렉션을 반복적으로 처리할 때 사용하는 반복문입니다.

일반적인 for문과는 다르게 반복횟수를 직접 지정하지 않아도 됩니다.

배열의 각 요소나 컬렉션의 각 객체를 순서대로 읽어들이면서 반복작업을 수행합니다.

반복하고자 하는 배열 또는 컬렉션의 이름과 반복문에서 사용할 변수를 지정하고, ':'(콜론)을 이용해 반복하고자 하는 배열 또는 컬렉션을 지정합니다.

예를 들어, 배열의 각 요소에 1을 더하는 작업을 수행하려면 다음과 같은 코드를 작성할 수 있습니다.

javaCopy code

int[] arr = {1, 2, 3, 4, 5}; for(int num : arr) { num += 1; System.out.println(num); }

위 코드에서 for(int num : arr)은 배열 arr의 요소를 순서대로 num 변수에 할당하며, 반복문을 실행합니다. 따라서 반복문을 빠져나오면 arr 배열의 요소 값은 변하지 않습니다.

향상된 for문은 기존의 for문보다 코드를 간결하게 작성할 수 있는 방법 중 하나입니다.

기존의 for문은 배열의 길이를 구하고, 반복문을 돌면서 인덱스를 증가시켜가며 배열의 각 요소에 접근하는 방식이었지만, 향상된 for문은 for문의 괄호 안에 "요소의 타입 변수명 : 배열명"과 같은 형태로 작성합니다. 이렇게 작성하면 반복문 안에서 해당 배열의 요소를 순차적으로 변수에 할당하여 사용할 수 있습니다.

이 방법을 사용하면 코드의 가독성이 향상되고, 작성해야 하는 코드의 양이 줄어듭니다.

'Java > UI구현' 카테고리의 다른 글

js (0)	2023.08.04
2023.04.03 할일추가, 할일삭제, 좋아요 구현 (0)	2023.04.03
2023.03.31 객체, DOM (0)	2023.03.31
2023.03.30. continue, break문, 배열, 함수 (0)	2023.03.31
2023.03.29 while, for문 (0)	2023.03.29

힘들면 힘을 내자

2023.04.10 콜백함수, JSON, AJAX

JSON 데이터 포맷

JavaScript Object Notation

JSON의 구조

'Java > UI구현' 카테고리의 다른 글

티스토리툴바

2023.04.10 콜백함수, JSON, AJAX

JSON 데이터 포맷

JavaScript Object Notation

JSON의 구조

'Java > UI구현' 카테고리의 다른 글

'Java/UI구현' Related Articles

티스토리툴바