웹게임을 만들어보자는 글이 올라온걸보고
일단 폴더를 만들어주시고
jquery를 사용할거에요!
Game // Game이라는 루트 폴더
└ common
└ js
└ common.js
└index.html
뒤에 확장자가 붙어있지 않은 목록은 폴더입니다.
폴더를 다만들었으면
index.html 안에
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >Game</ title > < style > * {margin: 0;padding: 0;font-family: "Dotum";font-size:12px;} html, body, #wrap {width: 100%;height: 100%;position: relative;background: #efefef;color:#333;} button {border:none;box-shadow: 0 2px 5px 1px rgba(0,0,0,.1);border-radius:2px;cursor: pointer;box-sizing: border-box;} #enchant {width:300px;height:254px;background: #fff;left:0;top:0;bottom:0;right:0;position: absolute;margin:auto;box-shadow: 0 2px 5px 1px rgba(0,0,0,.1);border-radius:2px;} #enchant .category {line-height: 30px;width:100%;text-indent:15px;border-bottom: solid #ddd 1px;box-sizing: border-box;} #enchant .action {padding:10px;border-bottom: solid #ddd 1px;} #enchant .sell-btn {width: 100%;padding:10px;background: #2ecc71;color:#fff;} #enchant .enchant-btn {width: 100%;padding:10px;background: #e74c3c;color:#fff;margin-bottom: 10px;} #enchant .bool {display:none} #enchant .success {color:#2ecc71;} #enchant .failure {color:#e743c3;} </ style > < script src = "http://code.jquery.com/jquery-latest.min.js" ></ script > < script src = "./common/js/common.js" ></ script > </ head > < body > < div id = "wrap" > < div id = "enchant" > < div class = "weapon category" > Lv.< span class = "level" ></ span > [ < span class = "name" ></ span > ] < span class = "bool success" >성공</ span > < span class = "bool failure" >실패</ span > </ div > < div class = "price category" > 판매 가격 (< span class = "value" ></ span >원) </ div > < div class = "cost category" > 강화 가격 (< span class = "value" ></ span >원) </ div > < div class = "money category" > 소지금 (< span class = "value" ></ span >원) </ div > < div class = "chance category" > 강화 확률 (< span class = "value" ></ span >%) </ div > < div class = "action" > < button class = "enchant-btn" >강화하기</ button > < button class = "sell-btn" >판매하기</ button > </ div > </ div > </ div > </ body > </ html > |
따로 강의를 올릴터이니 javascript만 보자
자이걸 브라우저로 열어서 보면
이렇게 보인다.
단순한 텍스트 게임이다 (옛날느낌을 살리기위해 돋움글꼴을 사용)
자 이제 우리가 여기서 만들어야 하는 함수를 생각해보자!
변수들을 보여줄 즉
강화 가격 (X원) 이런식으로 보여줄 rendering 함수가 있어야하고
강화 하기 함수 enchant 함수라 하자
그리고 판매 하기 sell 이라고 하자
그리고 강화 확률을 인자로 받고 그의 맞은 확률로 성공과 실패를 반환할 chance 라는 함수도 있어야한다
또 숫자에 콤마를 찍어줄 comma 함수도 있어야한다.
이정도면 함수나누는건 다 되었다고 보고
이번엔 변수를 만들어보자
일단 변수를 만들때 JSON 데이터 형태로 만들것이다.
JSON
JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAJ)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.
대충 이정도로 알고
common.js 파일에 이변수를 추가해주자
1 2 3 4 | var user = { weapon: 0, money: 10000 }; |
자 user란 변수는 weapon이라는 변수를 속성으로 가지고있고 0라는 값이 할당됬다. money도 마찬가지다.
쉽게 말해
사용자는
무기를 0 가지고있고
돈을 10000 가지고있다.
자 javascript에서 접근하는 방법은 다음과같다.
1 2 3 4 5 6 7 | var user = { weapon: 0, money: 10000 }; console.log(user.weapon); console.log(user.money); |
user.weapon 이런식으로 접근한다. 즉
user 안의 weapon 이라는 변수
자그러면 user 변수 설정은 끝났다.
다음은 weaponList 라는 변수를 만들어보자
말그대로 무기 리스트 이다.
사용 용도는 레벨별 [무기 이름]과 [판매 가격]과 [강화 비용]과 [강화 확률] 네가지를 속성으로 가지고있어야하며
[무기]는 여러개 즉 레벨별로 나뉘므로 배열이여야 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | var weaponList = [ { name: "개드리퍼의 단검" , price: 0, cost: 100, chance: 100 }, { name: "개드리퍼의 장검" , price: 50, cost: 200, chance: 98 }, { name: "개드리퍼의 군용단검" , price: 100, cost: 300, chance: 95 }, { name: "개드리퍼의 군용장검" , price: 300, cost: 400, chance: 90 }, { name: "개드리퍼의 키보드" , price: 1000, cost: 500, chance: 80 }, { name: "개드리퍼의 마우스" , price: 2500, cost: 1000, chance: 70 }, { name: "개드리퍼의 직박구리" , price: 5000, cost: 2000, chance: 50 }, { name: "개드리퍼의 휴대폰" , price: 10000, cost: 10000, chance: 30 }, { name: "개드리퍼의 통장" , price: 25000, cost: 15000, chance: 20 }, { name: "개드리퍼의 집" , price: 100000, cost: 50000, chance: 10 }, { name: "개드리퍼의 미래" , price: 1000000, cost: 0, chance: 0 }, ]; |
추가하면 이렇게 11개의 무기 리스트가 만들어졌다.
weaponList는 배열이며
모든 배열의 요소는 JSON데이터 형태를 취하고있고
각 배열의 요소는 [name], [price], [cost], [chance] 라는 속성을 가지고있다.
이변수는 위에서본 user와는 다르다
접근방법은
weaponList[0].name 이런식으로
weaponList 의 0번째 name을 접근한다 이말이다.
지금까지 따라왔으면 완성된코드는
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var weaponList = [ { name: "개드리퍼의 단검" , price: 0, cost: 100, chance: 100 }, { name: "개드리퍼의 장검" , price: 50, cost: 200, chance: 98 }, { name: "개드리퍼의 군용단검" , price: 100, cost: 300, chance: 95 }, { name: "개드리퍼의 군용장검" , price: 300, cost: 400, chance: 90 }, { name: "개드리퍼의 키보드" , price: 1000, cost: 500, chance: 80 }, { name: "개드리퍼의 마우스" , price: 2500, cost: 1000, chance: 70 }, { name: "개드리퍼의 직박구리" , price: 5000, cost: 2000, chance: 50 }, { name: "개드리퍼의 휴대폰" , price: 10000, cost: 10000, chance: 30 }, { name: "개드리퍼의 통장" , price: 25000, cost: 15000, chance: 20 }, { name: "개드리퍼의 집" , price: 100000, cost: 50000, chance: 10 }, { name: "개드리퍼의 미래" , price: 1000000, cost: 0, chance: 0 }, ]; var user = { weapon: 0, money: 10000 }; |
이렇게 될것이다.
이제 첫번째 함수를 만들어보자 일단 rendering 함수 먼저!
1 2 3 4 5 6 7 8 | function rendering() { $( ".cost .value" ).text(weaponList[user.weapon].cost); $( ".money .value" ).text(user.money); $( ".price .value" ).text(weaponList[user.weapon].price); $( ".chance .value" ).text(weaponList[user.weapon].chance); $( ".weapon .name" ).text(weaponList[user.weapon].name); $( ".weapon .level" ).text(user.weapon + 1); } |
자 이게 무슨소리인지는 당연히 모를것이다.
일단 Jquery의 함수부터 설명해주겠다.
$(".cost .value").text(); 이부분 은
.cost 라는 클래스를 가진태그 안의 .value
라는 뜻이다. 즉 .cost 안의 .value를 선택한다 이다음에 점으로 이어지는 .text() 라는 함수가 .cost 안의 .value 태그 안의 내용을 수정한다라는 뜻이다.
다시말해
<
div
class
=
"cost category"
>
강화 가격 (<
span
class
=
"value"
></
span
>원)
</
div
>
cost 라는 클래스를 가진 태그안의 value라는 클래스안의 내용을 $(".cost .value").text( X ); X로 변경한다 가 되겠다.
그래서 rendering 함수의 첫번째 줄
$(".cost .value").text( weaponList[user.weapon].cost ); 는
cost 라는 클래스를 가진 태그안의 value라는 클래스안의 내용을
weaponList[ user.weapon ].cost 로 변경한다가 되겠다.
weaponList[ user.weapon ].cost 는
잘 분해해보면
user.weapon의 값을 0 이라고 선언했으니
weaponList[ 0 ].cost 로 접근하게된다.
cost 라는 클래스를 가진 태그안의 value라는 클래스안의 내용은 결국 100이 된다.
자그럼 rendering 함수를 추가하고
맨위에
1 2 3 | $( function () { rendering(); }); |
라는 코드를 넣자
$(function() {
// 여기 안의 내용은 웹페이지 즉 index.html 다 로딩완료후 호출되는 함수이다.
// 이걸 안쓰고 그냥 rendering 만 호출하면 html 요소들이 완전히 생겨나기전 실행된다.
// 결국 .cost 라는 클래스를가진 태그가 생겨나기전에 $(".cost .value").text( weaponList[user.weapon].cost ); 를 실행하면
// 내용이 추가되지 않는다.
});
자그럼 이제
이렇게 보일것이다.
소지금 부분의 숫자가 알아보기 힘들다 comma 함수를 추가하고 rendering 함수를 수정하자
1 2 3 4 5 6 7 8 9 10 11 12 | function rendering() { $( ".cost .value" ).text(comma(weaponList[user.weapon].cost)); $( ".money .value" ).text(comma(user.money)); $( ".price .value" ).text(comma(weaponList[user.weapon].price)); $( ".chance .value" ).text(weaponList[user.weapon].chance); $( ".weapon .name" ).text(weaponList[user.weapon].name); $( ".weapon .level" ).text(user.weapon + 1); } function comma(s) { return String(s).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,' ); } |
comma 함수가 만들어지고 rendering 함수의 첫번째, 두번째, 세번째 줄이 comma( ) 로 감싸였다.
comma 함수는 s라는 인자를 받아 String(문자열)으로 변환후 정규식을 이용해 치환하는것인데 정규식을 설명하면 끝도 없을것같다
자 이제 실행해보면
이렇게 좀 그럴듯하게 나온다.
자 이제 확률을 인자로 받아 그 확률대로 참과 거짓을 반환하는 chance 함수를 만들어보자
1 2 3 4 5 6 | function chance(percent) { if (Math.floor(Math.random() * 100) + 1 <= percent) return true ; else return false ; } |
자 첫번째줄 에서 function chance( percent ) 부분
percent 라는 인자를 받고
두번째 줄 if () 안은
Math.floor( Math.random() * 100 ) + 1 <= percent
Math.floor( Math.random() * 100 ) + 1 값보다 percent 가 크거나 같을때 참이된다.
Math.floor( Math.random() * 100 ) + 1 는 Math.floor 라는 함수로 쌓여있고 그안은 Math.random() * 100 + 1 이라는 수식이 있다.
자 Math.random() 이라는 함수는 0 ~ 1의 난수를 발생시킨다. 하지만 소수점 단위이다.
즉 0.6460182257238509 이런식으로 반환 한다
여기서 100을 곱한다
Math.random() * 100
이 식은 0 ~ 99 까지 소수점을 포함해서 나온다
Math.random() * 100 + 1
이 식은 1 ~ 100.xxxxxxxxx 까지 소수점을 포함해서 나온다
100을 초과하기때문에
Math.floor 를 이용해 소수점을 버림해준다.
결과적으로
Math.floor( Math.random() * 100 + 1)
이 식은 1 ~ 100 까지 정수만 나온다
가 되겠다.
그래서
Math.floor( Math.random() * 100 ) + 1 값보다 percent 가 크거나 같을때 참이된다 라는건
1 ~ 100의 수보다 percent 가 크거나 같을때 즉
1 ~ 100의 수보다 chance를 호출할때 들어온 인자값 이 크거나 같을때
참이된다.
참일경우 true 거짓일경우 false를 반환한다.
그다음 함수인 enchant 강화하기 함수를 만들어보자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function enchant() { if (user.money >= weaponList[user.weapon].cost) { user.money -= weaponList[user.weapon].cost if (chance(weaponList[user.weapon].chance)) { user.weapon++; } else { user.weapon = 0; } rendering(); } else { alert( "돈이 부족합니다." ); } } |
두번째 줄의 if 는
user.money 가 weaponList[ user.weapon ].cost 보다 크거나 같을때 참이된다.
다시말해
사용자의 돈이
무기리스트의 [ 나의 무기 레벨 ] 의 강화 비용 보다 크거나 같아야 참이된다.
그럼 처음 강화하기를 눌렀을때
user.weapon = 0 이기 때문에
weaponList[ 0 ].cost = 100 이다
그리고 user.money = 10000 이기때문에 조건은 참이된다.
즉 if 안이 실행된다.
if 안의 첫번째,
전체의 두번째줄은
user.money -= weaponList[user.weapon].cost
는 말그대로
사용자의 돈 - 무기리스트의 [ 나의 무기 레벨 ] 의 강화 비용
즉 10000 - 100 = 9900 이된다.
네번째 줄인 if ( chance( weaponList[user.weapon].chance ) ) 는
chance 함수에 weaponList[ user.weapon ].chance 라는 변수를 인자로 넣는다.
user.weapon = 0 이다.
즉 weaponList[ 0 ].chance = 100 이다
결과적으로 chance(100) 이렇게 실행한다 생각하면된다.
100% 확률로 강화될 확률을 100% 이다.
다시말해 무조건 성공한다.
강화에 성공, if ( chance( weaponList[user.weapon].chance ) ) 가 참이 될경우
user.weapon++;
사용자의 무기 레벨을 증가시킨다 가 되겠다.
즉 지금까지 대입하던
weaponList[ user.weapon ].cost
weaponList[ user.weapon ].name
weaponList[ user.weapon ].chance
들이 의 값이 모두 바뀌게 된다.
쉽게말해 변수가 바뀌는것이고, 참조하던 배열번호가 바뀌는것이다, 우리는 참조하는 배열 번호를 강화 레벨이라고 칭하고있으며
강화에 성공하면 다음 레벨로 하나씩 올라가는 개념이다.
weaponList[ 1 ].cost = 200 이 되고
weaponList[ 1 ].name = "개드리퍼의 장검" 이 된다.
weaponList[ 1 ].chance = 98 이된다.
다시 코드를보자 네번째 줄의 if가 만약 거짓이 나왔다면 else 블럭인
7번째 줄로 이동하게된다.
user.weapon = 0;
사용자 무기 레벨 = 0 으로 대입한다.
쉽게말해 실패하면 강화 레벨이 0으로 바뀐다는거다.
그리고
10번째 줄을보자 rendering();
을 호출했다 변수를 바꿨으니 다시 화면에 뿌려줘야한다.
그렇기에 모든 계산이 끝난후 rendering 함수를 호출한다.
자 지금까지 했으면 강화하기는 된다.
? 안된다고
안되는게 맞다 강화하기 버튼을 클릭했을때 이벤트를 넣지않았다.
1 2 3 4 5 6 7 | $( function () { rendering(); $( ".enchant-btn" ).on( "click" , function () { enchant(); }); }); |
자 4번째 줄이 무슨뜻이냐 하면
$(".enchant-btn") 위에서 설명한것과 같이 .enchant-btn라는 클래스가진 태그를 가져오고
.on("click", function() {
});
를 뒤에다 써줬다.
설명하자면 enchant-btn 라는 클래스가진 태그를 클릭하면
.on("click", function() {
// 이 안이 실행된다 이거다.
});
그래서 enchant-btn 라는 클래스가진 태그를 클릭하면
enchant 라는 함수가 실행된다.
지금까지 잘따라했다면
코드는
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | $( function () { rendering(); $( ".enchant-btn" ).on( "click" , function () { enchant(); }); }); var weaponList = [ { name: "개드리퍼의 단검" , price: 0, cost: 100, chance: 100 }, { name: "개드리퍼의 장검" , price: 50, cost: 200, chance: 98 }, { name: "개드리퍼의 군용단검" , price: 100, cost: 300, chance: 95 }, { name: "개드리퍼의 군용장검" , price: 300, cost: 400, chance: 90 }, { name: "개드리퍼의 키보드" , price: 1000, cost: 500, chance: 80 }, { name: "개드리퍼의 마우스" , price: 2500, cost: 1000, chance: 70 }, { name: "개드리퍼의 직박구리" , price: 5000, cost: 2000, chance: 50 }, { name: "개드리퍼의 휴대폰" , price: 10000, cost: 10000, chance: 30 }, { name: "개드리퍼의 통장" , price: 25000, cost: 15000, chance: 20 }, { name: "개드리퍼의 집" , price: 100000, cost: 50000, chance: 10 }, { name: "개드리퍼의 미래" , price: 1000000, cost: 0, chance: 0 }, ]; var user = { weapon: 0, money: 10000 }; function rendering() { $( ".cost .value" ).text(comma(weaponList[user.weapon].cost)); $( ".money .value" ).text(comma(user.money)); $( ".price .value" ).text(comma(weaponList[user.weapon].price)); $( ".chance .value" ).text(weaponList[user.weapon].chance); $( ".weapon .name" ).text(weaponList[user.weapon].name); $( ".weapon .level" ).text(user.weapon + 1); } function comma(s) { return String(s).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,' ); } function enchant() { if (user.money >= weaponList[user.weapon].cost) { user.money -= weaponList[user.weapon].cost if (chance(weaponList[user.weapon].chance)) { user.weapon++; } else { user.weapon = 0; } rendering(); } else { alert( "돈이 부족합니다." ); } } function chance(percent) { if (Math.floor(Math.random() * 100) + 1 <= percent) return true ; else return false ; } |
만약 안된다면 복사해서 사용해라
자 이제 판매만 남았다.
1 2 3 4 5 | function sell() { user.money += weaponList[user.weapon].price; user.weapon = 0; rendering(); } |
자 sell 함수 이다
두번째 줄을보자
user.money += weaponList[ user.weapon ].price;
이제 감이 오나?
사용자의 돈 + 무기 리스트의 [ 사용자의 무기 레벨 ] 번째 배열의 가격
user.weapon 이 만약 0 이라면;
user.money += weaponList[ 0 ].price;
user.money += 0;
user.weapon 이 만약 1 이라면;
user.money += weaponList[ 1 ].price;
user.money += 50;
이 된다.
그 다음줄인
user.weapon = 0;
당연히 무기를 팔았으니 강화 레벨은 0가 되어야한다.
그리고 마지막줄엔
rendering();
당연하다 변수를 변경하면 화면에 바뀐 변수를 보여주어야한다.
그리고 마지막으로
1 2 3 4 5 6 7 8 9 10 11 | $( function () { rendering(); $( ".sell-btn" ).on( "click" , function () { sell(); }); $( ".enchant-btn" ).on( "click" , function () { enchant(); }); }); |
판매 버튼의 이벤트이다 위에서 설명했으니 생략한다.
이로써 확률게임이 완성되었다.
; ==================================
안되는 개드리퍼를 위해 코드를 올려줄게요
common.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | $( function () { rendering(); $( ".sell-btn" ).on( "click" , function () { sell(); }); $( ".enchant-btn" ).on( "click" , function () { enchant(); }); }); var weaponList = [ { name: "개드리퍼의 단검" , price: 0, cost: 100, chance: 100 }, { name: "개드리퍼의 장검" , price: 50, cost: 200, chance: 98 }, { name: "개드리퍼의 군용단검" , price: 100, cost: 300, chance: 95 }, { name: "개드리퍼의 군용장검" , price: 300, cost: 400, chance: 90 }, { name: "개드리퍼의 키보드" , price: 1000, cost: 500, chance: 80 }, { name: "개드리퍼의 마우스" , price: 2500, cost: 1000, chance: 70 }, { name: "개드리퍼의 직박구리" , price: 5000, cost: 2000, chance: 50 }, { name: "개드리퍼의 휴대폰" , price: 10000, cost: 10000, chance: 30 }, { name: "개드리퍼의 통장" , price: 25000, cost: 15000, chance: 20 }, { name: "개드리퍼의 집" , price: 100000, cost: 50000, chance: 10 }, { name: "개드리퍼의 미래" , price: 1000000, cost: 0, chance: 0 }, ]; var user = { weapon: 0, money: 10000 }; function rendering() { $( ".cost .value" ).text(comma(weaponList[user.weapon].cost)); $( ".money .value" ).text(comma(user.money)); $( ".price .value" ).text(comma(weaponList[user.weapon].price)); $( ".chance .value" ).text(weaponList[user.weapon].chance); $( ".weapon .name" ).text(weaponList[user.weapon].name); $( ".weapon .level" ).text(user.weapon + 1); } function comma(s) { return String(s).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,' ); } function enchant() { if (user.money >= weaponList[user.weapon].cost) { user.money -= weaponList[user.weapon].cost if (chance(weaponList[user.weapon].chance)) { user.weapon++; } else { user.weapon = 0; } rendering(); } else { alert( "돈이 부족합니다." ); } } function sell() { user.money += weaponList[user.weapon].price; user.weapon = 0; rendering(); } function chance(percent) { if (Math.floor(Math.random() * 100) + 1 <= percent) return true ; else return false ; } |
자 확률게임 만들기 강좌가 끝이났다.
예제 링크는
http://whks3498.cafe24.com/game/
VIPS
참고로 모듈화도 좀했으면 편했으리라 본다.
main()
{
-setting();
-while(true)
-{
--mainengine();
--randeringmaker();
-}
}
알지?
물론 메인엔진이나 렌더링은 테스크메니져를 쓰면 좋다.
이거설명도 좀 싸주면 좋을듯
자바스크립트
Javascript는 랜더링 while로 돌리면 멈추지않아?
window.requestAnimationFrame 쓰는데 나는.
VIPS
어쩄든 while문은 썼어. 빠져나오는건 예외처리로 해두고
nerid
못난놈
다음에 해보도록 하자
나는 미남이다
자바스크립트
나는 미남이다
팡파팡팡
자바스크립트
팡파팡팡
타이사
걔 호출하는것
타이사
나는 오늘 jquery랑 ajax로 국가 및 종목 체급별 메달집계 만드렀땅 ㅎㅎ
네버뎃
난틀렸어먼저가
nerid
시삼십칠분
Jquery, html5/CSS, 자바스크립트 스프링 이게다 뭐냐
다 연관되있는거임? jsp는 조금 배워봄 톰캣이랑
자바스크립트
Jquery는 Javascript로 만들어진 라이브러리이고
HTML5는 웹의 뼈대를 구성하는거야
CSS는 그 웹의 뼈대를 꾸며주는것이고
Spring은 JSP의 프레임워크야
모두 연관있지만
Jquery - Javascript - HTML5 - CSS :: 클라이언트 사이드
JSP -Spring :: 서버 사이드
이정도?
시삼십칠분
db랑 분석어쩌고저쩌고 한다고 R이나 파이썬사용해서 하는거같기도한더 맞는건가..
자바스크립트
클라이언트 웹을 배우려면 Javascript, Jquery, HTML5, CSS3
서버 웹을 배우려면 PHP, JSP, ASP 등
웹을 만드려면 서버와 웹을 배워야하지
간단하게 배우려면 PHP 추천할게
시삼십칠분
뭐가 달라서 사이드를 나누는건지 머르겠다..
클라이언트 웹이 네트워크상의 쿠키같은건가?
시삼십칠분