분류 전체보기
[JS/연습/객체/OOP] TextRPG 설계하기
HTML,CSS,JS를 이용해서, 간단한 TextRPG를 구현해볼겁니다. 구현할 기능 떠올리기 -> 순서도(내부로직) -> WireFramming(화면 구성) -> 코드작성 -> 코드 수정의 단계로 해보겠습니다. 구현할 기능(Needs) 입력은 버튼 / input 태그를 통해서 받게 됩니다. 캐릭터 생성 : 캐릭터 닉네임을 받고 , 초기값을 설정해줍니다. 모험하기 : 몬스터와 전투하는 모드입니다. 공격하기, 회복하기, 도망가기 3가지의 분기가 나타납니다. 공격하기 : 몬스터를 공격하고, 몬스터의 공격력만큼 HP가 감소합니다. 선공권은 항상 Player에게 있습니다. 몬스터 처치시, 드롭아이템과 경험치를 획득합니다. 레벨 업시 , 최대 HP와 공격력이 성장합니다. 회복하기 체력을30 회복하고, 몬스터의 공..
[JS/Basic/객체] 자바스크립트의 클래스
JavaScript에서 객체를 구현하는 방법은 아주 많습니다. 객체 리터럴을 이용해서 선언 Factory 함수를 이용해서 객체 리터럴로 반환 생성자 함수를 이용해서, 객체를 선언한 뒤, new로 할당 위의 3가지 방법 외에도 , ES6에서 정의된 방법이 1개가 있습니다. 어쩌면 가장 친숙한(?) 방법일지도 모릅니다. 바로 Class 문법입니다. 각각의 방법마다 차이점은 있긴 합니다! 하지만, 그건 OOP 디자인패턴을 다루면서 더욱 자세히 하겠습니다.(Prototype에 대한 심화설명 + 다양한 패턴에서 Prototype의 쓰임, TypeScript의 등장 등등) Class Constructor(생성자)와 new를 이용해서, 객체를 생성합니다. method를 정의해서 사용할 수 있습니다. 사실 Game이라..
[JS/Basic/객체] 자바스크립트 객체(new,factory,ProtoType)
OOP는 "학문"으로써 취급받을만큼 연구도 많이되었고, 현업에서 가장 많이 쓰는 형태입니다. 따라서, OOP에 대한 이야기를 하면 진짜 끝이 없기 때문에, 이번 글은 "자바스크립트에서 OOP를 어떻게 구현했는지"에 초점을 마추려고 합니다. 잠깐! 객체는 어떤 "사물"을 컴퓨터의 세계에 나타내기 위한 방법이라고 했습니다. 이번 글에서는 게임 속의 캐릭터를 나타내는 예시로 쭉 가겠습니다 :) 객체 만들기 JS에서는 객체를 {} (중괄호 리터럴)으로 선언을 합니다 . 그리고 안의 값을 Property라고 하고 Property는 key와 value라고 했습니다. "게임 캐릭터"에 필요한 Property는 무엇이 있을까요? 닉네임 ID 직업 State(스텟, 힘,지력, HP,MP ,방어력 등등 ) 위의 값으로 작..
[JS/Basic/자료형] 자바스크립트 원시타입,참조타입
JavaScript에서는 자료형을 "메모리에 저장하는 방식"에 따라서, 원시타입과 참조타입으로 나눌 수 있습니다. (네? 뜬금없이 무슨 메모리 이야기냐구요? 컴공이면 당연히 알아야하는거 아닌가요?) 사실, 저희가 짜는 Code의 모든 변수와 로직들은 폰노이만 컴퓨터 구조에서는 메모리에 저장되어집니다. (그게 캐시 메모리일 수도, RAM 일수도, 심지어 가상메모리 공간일 수도 있습니다.) 메모리 관리기법, 컴파일러의 역할, JS 엔진의 역할 등을 말하면 이 글은 천페이지를 넘길 수 있기 때문에 복잡한 이야기는 각설하고 하나만 기억하면 됩니다! "JS에서는 원시타입과 참조타입이 있다." 원시타입은 문자열, 숫자,참/거짓, undefined,Symbol,null이 있습니다. 그 외에는 다 참조값입니다. 참조타..
[JS/Basic/연습문제] 자바스크립트 객체 연습문제
https://ko.javascript.info/object 객체 ko.javascript.info 아래의 문제는 JavScript 객체편에 있는 문제를 스스로 풀어본 것 입니다. 문제는 위 링크를 참조해주세요 :) 객체가 비어있는지 확인하는 방법 객체가 비어있다면, key 값이 아무것도 없을겁니다. 즉 , 순회를 했을 때, undefined가 반환된다면 비어있는거죠! 반대로 이야기하면 순회를 했을 때, 어떠한 값이 있다면 비어있지 않다는 뜻입니다. 순회가 시작되면 바로 return false를 해준다면 더 효율적 일 것 같습니다! const schedule = {} function isEmpty(schedule){ for (let key in shedule){ return false; } return ..
[JS/Basic/객체] 자바스크립트 객체
프로그래밍에서 "객체"는 아주 많이 나오는 개념입니다. 오늘은 JavaScript에서 객체를 어떻게 구현했는지 알아보죠! 객체(Object) 객체는 {} 중괄호 안에 "키 : 값"의 쌍으로 구현되는 자바스크립의 "자료형" 입니다. 중괄호로 선언하는 방법 외에도, new Object()라는 방법도 있지만, 대부분 객체 리터럴(중괄호)를 이용합니다. 중괄호를 이용해 선언한 객체를 "객체 리터럴"이라고 합니다. const mapin = new Object(); //'객체 생성자' const mapin2 = {}; // '객체 리터럴 ' "키 : 값"의 쌍은 Property라고 하고, 한 객체에는 여러 개의 Property가 있을 수 있습니다. 키엔 문자형, 값엔 모든 자료형(배열,문자열,함수 등등)이 허용됩니..
[JS/가독성/주석] 자바스크립트 주석 잘 달아보자!
주석을 잘 달아놓는 것도 실력 중에 하나이다. 오늘은 주석을 잘 달아야 하는 이유와, 주석을 잘 이용하기 위한 팁들을 적어보려고 합니다. 주석을 다는 이유? 간단합니다. 기억력에는 한계가 있기 때문입니다. 당장 3일전에 먹는 점심메뉴가 기억이 나질 않습니다. 제 3자가 나의 코드를 볼 수 있기 때문입니다. 다른 사람과 협업을 할 때, 나의 코드를 상대방은 이해하지 못할 수도 있습니다. 따라서, 적절한 주석은 가독성에 큰 도움이 됩니다. 심지어, 내가 짠 코드인데도, 3개월 뒤에 보면, "내가 왜 이렇게 했지?" 라는 생각이 분명히 듭니다. 주석을 잘 달기 위해서는 , 달지 않으면 된다. 주석을 잘 달기 위해서는 어떻게하면 될까요? 간단합니다. 주석을 달지 않으면 됩니다.(프로그래밍을 잘하는 방법은 안하는..
[JS/Basic/TDD,BDD] 자바스크립트 테스팅 연습
자기 프로그램을 테스트를 안하는 프로그래머가 있을까요 ?? 이건, 음식점을 하는데 간을 보지 않는것과 같습니다. 컴파일을 하면서 출력값을 보는 것도 일종의 테스트입니다. 실제로, 출력값을 중간 중간에 찍는건 아주 좋은 테스트 방법이죠. 그리고, 알고리즘 문제를 풀 때도, 다양한 테케(테스트케이스)를 넣어보는 연습을 하고, 아주 극단적인 상황의 테스트 케이스를 넣어보곤 합니다. 프로그램을 작성할 때 Error를 검출하고, Bug를 막기 위해서 Test는 필수입니다. (실제로 Mapin도 최소한 아주 극단적인 입력값을 넣는 정도는 하고 프로그램을 완성합니다.) 실제로, 하지만, 프로젝트가 매우 크고 , TestCase가 엄청 많아진다면 "Test"하는 것 또한 쉽지않은 일이 되어버립니다. 따라서, TDD,B..