흔히, 서버와 클라이언트 사이에서 통신을 주고 받으며 데이터가 오고 간다.
하지만, 아주 가벼운 프로젝트나 빠르게 프로토타입을 개발하려 한다면, 서버까지 구성하기에는 부담이 많이 된다.
그래서 찾아보던 중, git만으로 빠르게 간단한 db 역할을 수행토록할 수 있도록 하는 오픈소스를 보았다.
무료이며, git만으로 통신이 가능한 가짜db(?)와 통신을 하는 예제로 강의를 만들어보고자 한다.
My JSON Server - Fake online REST server for teams
my-json-server.typicode.com/user/repo/posts/1 { "id": 1, "title": "hello" }
my-json-server.typicode.com
사용 될 오픈 소스는 my-json-server이다.
kiju2.github.io/simple_quiz_visualization/
https://kiju2.github.io/simple_quiz_visualization/
Q. loading....
kiju2.github.io
이번 강의를 통하여 위와 같은 싱글페이지 퀴즈 사이트를 개발해보자.
소스코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles/styles.css">
</head>
<body>
<section id = "section">
<div>
<h1>Q. <span id ="question">loading....</span></h1>
</div>
<div class = "">
<ol id = "answers">
<li class = "list">.....</li>
</ol>
</div>
</section>
</body>
<script type="text/javascript" src="./script/xhr.js"></script>
<script type="text/javascript" src="./script/script.js"></script>
</html>./index.html
{
"questions" :[
{
"question" : "다음 중 스크립트 언어가 아닌 것을 선택하시오.",
"options" : [
"python","php","java script","Go lang"
],
"answer" : "4"
},
{
"question" : "next.js는 javascript 기반 프레임워크이다.",
"options" : [
"O","X"
],
"answer" : "1"
},
{
"question" : "REST는 국제표준기관에 등재되었다.",
"options" : [
"O","X"
],
"answer" : "2"
},
{
"question" : "다음 중 흔히 CRUD라고 불리는 요소와 관련 없는 것은?",
"options" : [
"Create","Read","Update","Delete","Select"
],
"answer" : "5"
},
{
"question" : "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,",
"options" : [
"Lorem4 Ipsum_1","Lorem4 Ipsum_2","Lorem4 Ipsum_3","Lorem4 Ipsum_4","Lorem4 Ipsum_5"
],
"answer" : "3"
}
]
}./db.json
body{
padding: 0px;
border: 0px;
margin:0px;
}
section{
background-color: #948BF4;
width: 100vw;
height:100vh;
text-align: center;
}
h1{
color: white;
padding: 200px 0px 80px 0px;
margin:0px;
font-size: 48px;
}
.list{
color: white;
font-size: 24px;
}./styles/styles.css
const xhr = new XMLHttpRequest();
var data;
xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200 || xhr.status === 201) {
console.log("onready state change.");
data = JSON.parse(xhr.responseText);
initDocument();
} else {
console.error(xhr.responseText);
}
}
};
xhr.open('GET', 'https://my-json-server.typicode.com/kiju2/Simple_Quiz/questions'); // 메소드와 주소 설정
xhr.send();
./script/xhr.js
initDocument = () =>{
render(level);
quiz_size = data.length;
}
handleClickAnswer = (e) => {
const element = e.target;
if(level >= quiz_size - 1){
alert("End. score is " + score);
}
else{
if(element.id === "correct"){
score += 1;
alert("correct.")
}
else{
alert("incorrect.")
}
if(element.className == "list"){
level += 1;
render(level);
}
}
}
getOptionForm = (text) =>{
return `<li class = "list">`+text+`</li>`;
}
printQuestion = (text) =>{
question.innerHTML = text;
}
printOptions = (option_arr) =>{
options.innerHTML = "";
option_arr.map(option => {
options.innerHTML += getOptionForm(option);
});
}
render = (level) =>{
printQuestion(data[level]['question']);
printOptions(data[level]['options']);
list = document.getElementsByClassName("list");
answer = Number(data[level]['answer']);
list[answer - 1].setAttribute("id", "correct");
}
var level = 0;
var score = 0;
var answer = 0;
var list = document.getElementsByClassName("list");
var quiz_size;
const options = document.getElementById("answers");
const question = document.getElementById("question");
options.addEventListener("click", handleClickAnswer);
./script/script.js
자세한 소스코드는 https://github.com/kiJu2/simple_quiz_visualization에 올려두었으니, 참고하면 될 것 같습니다.
1. git에 새로운 레파지토리를 생성한다.
2. 생성된 repository에 db.json을 생성해준다.
여기서 db.json은 위의 소스코드와 같이 json 형태를 취해준다.
여기까지 되었으면, db.json을 http로 my-json-server를 활용하여 테스트를 해보도록 하자.
https://my-json-server.typicode.com/<your-username>/<your-repo>
위와 같은 형태로 접속하거나, postman을 통하여 확인해볼 수 있다.
나 같은 경우는 username이 kiju2 이고, repo는 Simple_Quiz이므로
https://my-json-server.typicode.com/kiju2/simple_quiz_visuailization
가 될 것이다.
여기서 db.json의 내용 중
questions이란 키 값을 가졌으므로,
https://my-json-server.typicode.com/kiju2/Simple_Quiz/questions
에 테스트를 해보면 될 것이다.
정상적으로 작동한다.
이제 통신을 통해 확보한 데이터를 기반으로 퀴즈 프로그램(또는 여러분이 만들고 싶은 프로그램)을 개발한다.
퀴즈 프로그램은 script.js를 확인하면 좋을 것이다.
'개발 > 연구' 카테고리의 다른 글
| VPN/VPS/VPC (0) | 2020.10.30 |
|---|---|
| [git fork]Git의 오픈소스를 활용하여 나의 레파지토리에서 개발해보자. (0) | 2020.10.26 |
| C++, JAVA, C# 객체지향 언어들의 차이 (0) | 2020.09.14 |
| [python3, 크롤링, deep web] http로 특정 사이트의 원하는 정보를 가져오기 (0) | 2020.07.04 |
| [논문] GoLang 성능 분석 (0) | 2020.06.18 |
