1) JSON (JavaScript Object Notation)
2) JavaScript 객체 문법
{
"name" : "soohykim"
"age" : 30
"name" : "king" // 마지막 키 값만 존재
}
3) 데이터 + 교환 형식
4) 여러 언어에서 사용
const fs = require('fs')
const path = require('path')
const a = fs.readFileSync(path.join(__dirname,"a.json"))
console.log(a)
console.log(JSON.parse(a)) //json.parse를 통해 json을 (javascript)JSONobject로 변환
int cnt = 0;
if(b[0].name.firstname == "ju") {
cnt++;
}
console.log(cnt)
console.log(b[0].name.firstname)
json in javascipt = javascript object
json in python = dict
참고 python 예시5) 단순 배열, 문자열 표현
6) 실습
// 배열은 []로 표현 ([0], [1]로 접근)
// 객체는 다른 타입을 가지고 있어도 되지만, 맞춰주는게 좋음
// 해당 Key에 대한 value는 .key 또는 ["key"] 접근하여 빼냄
const a = {
"지브리OST리스트" : [ // 스키마 (타입) 구축
{
"name" : "마녀 배달부 키키",
"song" : "따스함에 둘러쌓인다면"
},
{
"name" : "하울의 움직이는 성",
"song" : "세계의 약속"
}
]
}
console.log(a.지브리OST리스트[0])
console.log(a.지브리OST리스트[0].name)
console.log(a.지브리OST리스트[0]["song"])
/*
{ name: '마녀 배달부 키키', song: '따스함에 둘러쌓인다면' }
마녀 배달부 키키
따스함에 둘러쌓인다면
*/
{
"name" : "kundol",
"like" : {
"아령" : {
"weight" : "10kg",
"feature" : "육각형"
},
"바나나" : {
"color" : "초록색"
}
}
}
7) JSON 타입
8) JSON 직렬화, 역직렬화
9) JSON의 활용
1) XML (Extensible Markup Language) 개념
2) XML 구성
<?xml version="1.0" encoding="UTF-8"?>
<OSTList>
<OST like="1">
<name>마녀 배달부 키키</name> <song>따스함에 둘러쌓인다면</song>
</OST>
<OST like="2">
<name>하울의 움직이는 성</name> <song>세계의 약속</song>
</OST>
</OSTList>
3) HTML과 XML 비교
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<div></div>
</body>
</html>
4) JSON과 XML 비교
5) XML 활용
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
<lastmod>2018-06-04</lastmod>
</url>
<url>
<loc>http://www.example.com/abc.html</loc>
<lastmod>2018-06-04</lastmod>
</url>
</urlset>
1) API (Application Programming Interface)
2) 인터페이스
3) API 작동 방식
4) API 장점
5) API 종류
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
canvas {
width: 100% !important;
}
</style>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const OPEN_API = "https://api.open-meteo.com/v1/forecast?latitude=37.57&longitude=1
26.98&hourly=temperature_2m¤t_weather=true&timezone=Asia%2FT
okyo"
const draw = (res) => {
const opt = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric'
}
res.hourly.time = res.hourly.time.map(e => {
return new Intl.DateTimeFormat("ko-KR", opt).format(new Date(e))
})
const data = {
labels: res.hourly.time,
datasets: [{
label: '서울의 온도차트',
data: res.hourly.temperature_2m,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15
}]
}
const ctx =
document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: data
});
}
window.onload = async () => {
const ret = await fetch(OPEN_API).then(res => res.json())
draw(ret)
}
/*
load : 스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체
페이지가 로드될 때를 말합니다.
*/
</script>
</html>
{
"name" : "kundol",
"tall" : "200"
}
const express = require('express')
const app = express()
const port = 3000
const fs = require('fs')
app.get('/', (req, res) => {
const f = JSON.parse(fs.readFileSync("a.json",
{encoding:"utf-8"}))
const data = {
"name" : f.name
}
res.send(data)
})
app.listen(port, () => {
console.log(`http://127.0.0.1:${port}`)
})
📖 참고 📖 node.js 설치
- 비동기적 이벤트 주도 방식
- 논블로킹 I/O 모델을 사용하는 구글의 V8 엔진을 장착한 자바스크립트 런타임
- node.js는 자바스크립트 런타임으로, 자바스크립트로 만든 프로그램 실행 가능
📖 참고 📖 express 모듈 설치
npm install express
- node.js에서 동작하는 웹 프레임워크 중 많이 사용되며 라우팅 설정, 미들웨어 설정, 정적자원서버 설정 등이 쉬운 프레임워크
- 라우팅
- URI(또는 URL) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정
- URI 분석
- http://127.0.0.1:3000
- 프로토콜 : HTTP
- IP : 127.0.0.1 (루프백IP)
- port : 3000
- port는 사실 숨겨져 있음
- https port : 443 (기본 포트)
- http port : 80 (기본 포트)
1) IaaS (Infrastructure-as-a-Service)
2) PaaS (Platform-as-a-Service)
3) SaaS (Software as a Service)
1) 컨테이너
2) 도커
2) 도커 과정
3) 도커 활용사례
1) 개념
2) CI/CD 파이프라인
3) 빌드
4) 테스트
5) 머지
6) 배포
7) 툴
📖 참고 📖 클래스와 객체와 인스턴스의 차이
- ✏️ 클래스
- 객체를 만들어 내기 위한 틀
- 만들어 낼 객체의 속성과 메서드의 집합을 담아 놓은 것
- ✏️ 객체
- 클래스로부터 만들어지는 실체
- 클래스로 선언된 변수
- ✏️ 인스턴스
- 객체가 메모리에 할당이 된 상태
- 런타임에 구동되는 객체
- AWS의 클라우드의 가상서버
- ✏️ 실습
- java
public class Person { // 멤버변수(속성) String name; int IQ; int str; // constructor public Person(String name, int IQ, int str){ this.name = name; this.IQ = IQ; this.str = str; } public Person(){ this.name = "alanwalker"; this.IQ = 100; this.str = 100; } // 메서드 public void levelup(){ this.IQ = this.IQ + 1; this.str = this.str + 1; System.out.println(this.name + "의 지능과 힘이 증가했습니다!" + this.IQ + " / " + this.str); } public static void main(String[] args) { Person a = new Person(); // 객체 >> 인스턴스 a.levelup(); Person b; // 객체 b = new Person("홍철", 1, 1000); // 인스턴스 b.levelup(); } }
- javascript
class Person { constructor(name = "alanwalker", IQ = 100, str = 100) { this.name = name; this.IQ = IQ; this.str = str; } levelup() { this.IQ++; this.str++; console.log(this.name + "의 지능과 힘이 증가했습니다! " + this.IQ + " / " + this.str); } } const a = new Person(); a.levelup(); const b = new Person("홍철", 1, 1000); b.levelup();
📖 참고 📖 static 키워드
- ✏️ 개념
- 클래스의 인스턴스가 아닌 클래스에 속하고, 클래스의 변수, 메서드 등을 공유하는데 사용
- 해당 클래스로 만들어지는 객체사이에서 중복되는 메서드, 속성을 효율적으로 정의하는데 사용
- 단순히 전역변수가 아니라 클래스 내의 static 키워드로 선언하여 클래스 객체들끼리 사용되는 메서드/속성
- ✏️ 단점
- 변수, 블록, 메서드 등은 선언과 동시에 미리 heap영역이 아닌 Method area 메모리 영역에 할당
- 프로그램이 종료될 때까지 GC에 의해 메모리가 회수되지 않음
➡️ 클래스가 객체로 쓰이지 않는다면 메모리 낭비- ✏️ 실습
- java
public class Person { // 멤버변수(속성) String name; int IQ; int str; private static final String GUDOC = "큰돌의 터전"; // final은 상수 정의에 사용 (재할당 불가능) // constructor public Person(String name, int IQ, int str){ this.name = name; this.IQ = IQ; this.str = str; } public Person(){ this.name = "alanwalker"; this.IQ = 100; this.str = 100; } // 메서드 public void levelup(){ this.IQ = this.IQ + 1; this.str = this.str + 1; System.out.println(this.name + "의 지능과 힘이 증가했습니다!" + this.IQ + " / " + this.str); } // public void talk(Person a, Person b){ // System.out.println(a.name + " & " + b.name + "이 대화를 시작했다!"); // } private static void talk(Person a, Person b){ System.out.println(a.name + " & " + b.name + "이 대화를 시작했다!"); } public static void main(String[] args) { Person a = new Person(); // 객체 >> 인스턴스 a.levelup(); Person b; // 객체 b = new Person("큰돌", 1000, 1); // 인스턴스 b.levelup(); Person.talk(a, b); System.out.println(Person.GUDOC); } }
- javascript
class Person { constructor(name = 'alanwalker', IQ = 100, str = 100) { this.name = name; this.IQ = IQ; this.str = str; } levelup() { this.IQ += 1; this.str += 1; console.log(this.name + "의 지능과 힘이 증가했습니다! " + this.IQ + " / " + this.str); } static talk(a, b) { console.log(a.name + " & " + b.name + "이 대화를 시작했다!"); } static GUDOC = "큰돌의 터전"; } const a = new Person(); a.levelup(); const b = new Person("큰돌", 1000, 1); b.levelup(); Person.talk(a, b); console.log(Person.GUDOC);
📖 참고 📖 오버로딩과 오버라이딩
- ✏️ Overloading
- 이름이 같아도 매개변수 개수, 타입, 순서를 다르게 해서 같은 이름으로 여러 개의 함수를 정의할 수 있는 것
- 프로그램의 유연성을 높이고, 코드 깔끔함
- 같은 클래스 내에서 사용
class Calculator{ void multiply(int a, int b){ System.out.println("결과는 : "+(a * b) + "입니다."); } void multiply(int a, int b,int c){ System.out.println("결과는 : "+(a * b * c) + "입니다."); } void multiply(double a, double b){ System.out.println("결과는 : "+(a * b) + "입니다."); } } public class MyClass { public static void main(String args[]) { int a = 1; int b = 2; int d = 4; Calculator c = new Calculator(); c.multiply(a, b); c.multiply(a, b, d); double aa = 1.2; double bb = 1.4; c.multiply(aa, bb); } }
- ✏️ Overriding
- 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의 하는 것
- 상속 관계 클래스에서 사용되며, static, final로 선언한 메서드는 오버라이딩 불가능
class Animal{ void eat(){ System.out.println("먹습니다."); } } class Person extends Animal{ @Override void eat(){ System.out.println("사람처럼 먹습니다. "); } } public class MyClass { public static void main(String args[]) { Person a = new Person(); a.eat(); } }
📖 참고 📖 추상화
- ✏️ 개념
- 복잡한 데이터, 구조, 시스템 등 핵심만을 가려내 덜 자세하게 만드는 것
- 복잡도 낮추는 방법
- ✏️ 데이터 추상화
- 어떠한 데이터의 공통점을 모으고, 차이점은 버림
- 객체들의 공통적인 특징을 묶어 카테고리화 시킴
- ✏️ 프로세스 추상화
- 어떠한 내부 프로세스를 숨김
- 🗒️ 예시 : MySQL 아키텍처
- 실제 시스템에서의 추상화
- 데이터베이스가 어떻게 저장하는지 모르지만 insert, upset 쿼리로 데이터 저장 가능
abstract class Animal { public abstract void animalSound(); public void sleep() { System.out.println("zzz"); } } class Pig extends Animal { public void animalSound() { System.out.println("꿀꿀꿀~"); } } class Dog extends Animal { public void animalSound() { System.out.println("왈왈~"); } } public class Main { public static void main(String[] args) { Pig a = new Pig(); a.animalSound(); a.sleep(); Dog b = new Dog(); b.animalSound(); b.sleep(); } }