분류 전체보기
-
JavaScript 입문 : 클래스 기본 구조컴퓨터 알아가기/JavaScript 2022. 9. 7. 19:30
지난시간 this에 대해 textRPG에 적용을 해보았습니다. 아울러 복잡한 코드를 좀 더 간편하게 할 수 있는 방식으로 클래스를 이용하여 코드를 재세팅하고자 할려고 했습니다. 그러기 위해서는 기본적으로 클래스가 무엇인지 개괄적인 내용을 공부하고 textRPG에 클래스를 적용해 보도록 하겠습니다. 1. 클래스 정의 자바스크립트에서 Class(클래스)는 객체를 생성하기 위한 템플릿입니다. 따라서 데이터와 이를 조작하는 코드를 하나로 추상화 한다고 합니다. 2. 클래스 선언 클래스 문법을 활용하기 위하여 클래스 선언을 해야합니다. 이는 일종의 함수식이기 때문에 중괄호를 통하여 함수식을 표시하며 호출방식은 해당 클래스 이름에 new를 붙혀 호출합니다. 이때 둘다 이름은 대문자로 표시하는 것을 암묵적인 약속으로..
-
JavaScript 입문 : textRPG 만들기 - this를 이용하여 사냥메뉴 만들기컴퓨터 알아가기/JavaScript 2022. 9. 6. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간까지 전체 RPG의 기본프레임 즉, 게임이 동작할 수 있는 구조를 미리 구성 하였습니다. 오늘은 자바스크립트의 중요한 요소인 this를 이용하여 사냥메뉴에서 상호간 공격하는 롤플레이 형태의 코딩을 공부해 보고자 합니다. this를 알아야하는 이유중 하나는 this를 이용하여 향후 지금과 같은 형태의 코딩에서 중요항목별 묶는 클래스 기능을 사용할 때 아주 유용하게 사용할 수 있습니다. 1. this (자바스크립트) 자바스크립트에서 this는 다음과 같이 우선 기억해 두면 편합니다. " 자바스크립트 객체안에 this는 객체 자기 자신을 가리키며, 객체.메소드( ) 형태가 되어야 this가 객체 자신을 카리킵니다. " 사실 이러한 정의..
-
JavaScript 입문 : textRPG 만들기 - 롤플레이 대상(헌터와 사냥감) 초기 설정, 초기화면, 일반메뉴 화면, 사냥메뉴 연결 구조 설정컴퓨터 알아가기/JavaScript 2022. 9. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간까지 만들어야 할 순서도와 기본적인 프레임인 HTML과 JS 기본구조를 만들었습니다. 이 과정은 훈련화 되어야 하기에 거의 공장에서 일련의 과정을 거쳐가는 것 처럼 연습하고 있습니다. 이제는 기본프레임하에 자바스크립트 공부를 본격적으로 시작해 볼 예정인데 순서도를 기억해 보면 시작하여 헌터의 이름을 입력하고 일반메뉴 (사냥을 가기위한 모험편, 휴식편, 종료)의 화면이 필요하고 모험편으로 들어갔을때는 실질적인 사냥편을 구성해야 합니다. 이러한 큰 설계측면에서 연결구조를 볼 예정입니다. 1. 헌터와 사냥감 초기 설정 이 단계에서는 헌터와 사냥감의 능력치를 초기 세팅해 줍니다. 초기 세팅된 능력치로 상호간 공격을 할 수 있기때문에 사냥..
-
JavaScript 입문 : textRPG 만들기 - 기본포맷 (HTML/CSS, JS)컴퓨터 알아가기/JavaScript 2022. 9. 4. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 전체적인 순서도는 지난시간 미리 만들어는 보았는데 RPG형태이다 보니까 고려할 사항들이 많습니다. 먼저 기본적인 HTML / CSS 부분과 결국 상호작용을 할 수 있는 JS 부분을 고려해야 합니다. 1. 기본컨셉 전체적인 흐름에 대해 공부를 할 생각으로 이번장에서는 CSS를 특별히 다루지는 않습니다만 링크는 생성을 해 두고 향후 CSS와 연계되서 할 수 있는 부분이 나온다면 별도 적용하고자 합니다. HTML에서 첫번째 화면은 헌터의 이름을 입력알 수 있는 태그를 사용하고 입력후 클릭하면 화면이 바뀌어서 게임이 시작되는 개념으로 만들고자 합니다. 게임이 시작되는 화면은 크게 5개의 태그로 구성하고자 하며 이 구성에는 일반메뉴와 사냥메뉴를 ..
-
JavaScript 입문 : textRPG 만들기 - 순서도컴퓨터 알아가기/JavaScript 2022. 9. 3. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 컴퓨터 언어인 자바스크립트 재미있긴한데 공부를 한다는 개념은 힘들수 밖에 없는것 같습니다. 새로운 챔터에 대해 공부를 하는 시간입니다. 이번시간부터는 조금 더 깊이 들어가는 내용을 공부할 예정인데 소위 말하는 롤플레이게임에 대해 알아보고자 합니다. 현재 그래픽으로 만들 수 있는 수준은 아니기에 텍스트 기반에서 RPG를 구현하는 것을 연습해 보고자 합니다. 1. textRPG 기본 개념 우선 만들고자 하는 프로그래밍은 입력창에 주인공인 헌터의 이름을 입력한 후 랜덤하게 출몰하는 동물을 사냥하는 게임입니다. 다음과 순서를 고려하여 순서도를 설계할 필요성이 있습니다. ① 주인공 생성 절차 ② 일반 게임모드로 입장했을때 사냥을 할 동물들을 생성..
-
JavaSCript 입문 : 자바스크립트에서 this는 무엇인가? - 1컴퓨터 알아가기/JavaScript 2022. 9. 2. 19:30
자바스크립트를 공부하다 보면 this라는 단어가 심심치 않게 등장합니다. this가 this인데 갑자기 왜 나올까하는 생각으로 기본부터 이해를 해 보고자합니다. 일단, 문헌에 의하면 대부분의 경우 this값은 함수를 호출한 방법에 의해 결정된다고 합니다. 무슨 말인지 이해가 되지는 않습니다. 1. 객체내의 this는 변수를 의미 예제를 가지고 무작정 따라해 보면서 정의를 쉽게 내려야 할 듯 합니다. 객체내 word를 return하는 함수를 만드는 예제를 보면 다음과 같이 에러가 납니다. 물론 word값만을 객체에서 뽑고자 하면 console.log(test.word);로 하면 되지만 함수에 대한 내용을 참조하는 방식이 필요할 수 있습니다. 이럴 경우 this를 사용하며 여기서 this의 범위는 test라..
-
JavaScript 입문 : 참조(Referal), 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy) - 1컴퓨터 알아가기/JavaScript 2022. 9. 1. 19:30
자바스크립트를 공부하면서 익혀야 될 이론이 참으로 많은 것 같습니다. 여러가지 메소드들을 접하면서 돌아서면 낯설은 느낌들이 많지만 이왕 시작한 공부 포기할 수는 없어 보입니다. 오늘은 자바스크립트 용어(?) 혹은 메소드라고 볼 수 있는데요. 참조와 얕은 복사 그리고 깊은 복사라는 개념을 일부 알고 가도록 하겠습니다. 우리가 지금껏 변수에 대입하던 행위들이 기본적으로 '참조'라고 보면 될 듯 합니다. 다음을 예로 들면서 이해 하도록 하겠습니다. 당연히 변수 a 가 참조하는 배열은 1, 2, 3입니다. 이럴 경우 a에 첫번째수를 원하는 숫자로 변경할 수 있으며 그 후 a는 변경된 숫자를 나타내게 됩니다. 이럴 경우 굳이 내용을 표현하자면 변수 a 는 배열 1, 2, 3을 참조하고 있기때문에 언제나 참조값은 ..
-
JavaScript 입문 : JSON.parse( JSON.stringify( ) )를 이용한 깊은 복사컴퓨터 알아가기/JavaScript 2022. 8. 31. 19:30
이전까지 기본적인 JSON의 구조와 의미 아울러 JSON.parse( ) 메소드와 JSON.stringify( ) 메소드에 대해 기본적인 내용을 정리 하였습니다. 이 중 두 메소드를 같이 쓰는 경우가 있습니다. 이는 문자열화 시킨내용을 자바스크립트 언어로 사용할 수 있는 객체로 만들어 주는 과정인데 첫번째 문자열로 변환되는 과정에서 참조객체가 무시됩니다. 따라서 일반 객체에서 변수를 바꾸어 주면 결과값이 바뀌는 형태가 아닌 최초 선언된 내용을 그대로 담고 있다고 보면 됩니다. 무슨 말인지 예를 들어 보겠습니다. 전체 과일 배열속에 3가지 객체를 넣어 보았습니다. 첫번째 apple에 접근하기 위해 fruit1과 fruit2를 만들어 다음과 같이 참조하고 콘솔에 나타내 보았습니다. 결과값은 같게 보입니다만,..