javascript5 RxJS로 산성비 만들기(4) - 게임 로직 만들기 게임 만들기 프로젝트였는데 앞에서 힘을 다 빼느라 포스팅 시리즈 4회만에 게임 로직을 만들게 됐다. 바로 본론으로 들어가보자! Game 클래스 getInstance() Game은 단 하나의 인스턴스만 가질 수 있도록 싱글턴 패턴으로 작성되었다. 생성된 인스턴스가 없는 경우 새로운 인스턴스를 만들어 반환하고, 이미 만들어진 인스턴스가 있으면 그것을 반환한다. Game.getInstance = function (textList, $canvas, $form) { if (!Game._instance) { const game = new Game(textList, $canvas, $form); Game._instance = game; return game; } else { return Game._instance; .. 2023. 2. 20. RxJS로 산성비 만들기(1) - 프로젝트를 시작하며 왜 이 프로젝트를 시작하게 되었는가? 나는 게임을 좋아하다 보니, 새로운 기술이나 개념을 익힐 때 주로 게임의 개념을 대입하거나, 실제로 간단한 게임을 만들어본다. 최근 들어 관심이 생긴 RxJS 역시 문서를 읽어보고 API들을 조금 사용해 본 후, 이를 게임에 가장 잘 활용할 수 있는 방법이 없을까 생각해 보았다. 정말 뜬금없지만, 그 당시에 한글과컴퓨터 채용 공고가 올라온 것을 보았고, 의식의 흐름대로 어릴 적 즐겁게 했던 한컴 산성비 게임이 떠올라 그대로 이를 프로젝트 주제로 삼았다. 프로젝트 목적 RxJS를 활용해 프로젝트를 하는 것은 좋은데, 이것 만으로는 프로젝트 볼륨이 너무 작은 느낌이었다. 그래서 프로젝트 진행에 몇 가지 목적을 세워, 스스로 챌린지를 주기로 했다. 목적들은 다음과 같다. .. 2023. 2. 1. [Javascript] 변수 선언과 호이스팅(feat. TDZ) 변수 선언 변수를 사용하기 위해서는 가장 먼저 변수를 선언해야 한다. 변수의 선언은 어떤 값의 주소를 담기 위한 메모리 공간을 확보하고 이름을 붙이는 것이다. 자바스크립트에서는 var, let, const 키워드를 사용해 아래와 같이 변수를 선언할 수 있다. var name; 명심해야할 점은 변수에 값 자체를 담는 것이 아닌, 해당 값이 담겨있는 주소를 담는 다는 점이다. C언어의 포인터를 생각하면 이해가 쉽다. 변수에 매번 새로운 값을 할당 하면, 그때마다 변수는 그 새로운 값의 메모리를 가르킨다. 초기화 변수를 선언했으면 이제 값을 할당해야 할테지만, 자바스크립트에서는 값을 할당하지 않은 변수(단, const로 선언한 변수는 제외)를 사용해도 에러가 발생하지 않는다. 값을 할당하지 않은 위의 변수 n.. 2022. 12. 27. [Javascript] 리덕스 만들어보기 - (1) 리덕스는 시시각각 변하는 복잡한 상태를 효과적으로 다루기 위해, 세 가지 기초 원칙에 따라 상태의 변화 시점에 제약을 두어 상태 변화를 예측 가능하게 한다. 리덕스의 세 가지 원칙은 다음과 같다. 모든 상태는 하나의 저장소에 저장된다. 애플리케이션의 모든 상태는 단 하나의 store에 객체 트리 구조로 저장된다. 상태는 읽기 전용이다. 상태를 변화하기 위해서는 반드시 dispatch 함수에 액션 객체를 전달해야 한다. 변화는 순수 함수로 작성되어야 한다. 리듀서는 이전 상태를 직접 변경하지 않고 항상 새로운 객체 상태를 생성해서 반환해야 한다. 먼저 모든 상태들의 저장소인 store를 만드는 createStore() 함수를 작성해보자. export const createStore = (reducer) =.. 2022. 7. 24. [Javascript] Closure 클로저란? MDN에 따르면, 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이라고 한다. 이것만 들으면 무슨 말인지 더 모르겠다😅. 이를 쉽게 이해하기 위해선 먼저 변수의 렉시컬 스코핑이 어떻게 이루어지는지 알아야 한다. 렉시컬 스코핑 자바스크립트에서 함수가 호출되면 먼저 필요한 변수를 자신의 렉시컬 환경에서 찾는다. 만약 자신의 내부 렉시컬 환경에 필요한 변수가 없으면, 참조하고 있는 외부 렉시컬 환경으로 검색 범위를 넓히고, 그래도 변수를 찾을 수 없으면 전역 환경까지 계속해서 검색 범위를 넓힌다. 중간에 필요한 변수를 찾았으면, 해당 변수를 사용한다. 이렇게 내부 함수가 외부 환경의 변수를 사용할 때, 외부 함수에서 내부 함수를 반환하면 클로져를 형성하게 된다. 외부 함수가 종료되었지만, 내부 함.. 2022. 4. 14. 이전 1 다음
