분류 전체보기21 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로 산성비 만들기(3) - 가상돔 업데이트를 위한 Diff 알고리즘 Diff 알고리즘 구현 vDOM에서 무엇보다 중요한 것은 변경된 DOM 요소만을 업데이트 하는 Diff 알고리즘이다. 이번 글에서는 이전 가상돔 글에 이어, Diff 알고리즘을 완성해보도록 한다. Diff 알고리즘의 구현은 개발자 황준일님의 블로그를 참고해 내가 만든 웹 컴포넌트에 맞게 다시 작성했다. updateElement 함수에서 prev는 이전 노드, next는 새로운 노드, $parent는 prev의 부모 엘리먼트, parentComponent는 prev의 부모 vDOM 컴포넌트, index는 prev와 next가 부모의 children 중 몇 번째 자식인지를 의미한다. 여기서의 노드는 vDOM 요소인 Component와 Element의 인스턴스, 그리고 TextNode를 의미한다. 또한 이후 .. 2023. 2. 9. RxJS로 산성비 만들기(2) - 웹 컴포넌트(가상돔) 구현하기 혹시 조회수가 높아질까 싶어 썸네일용 이미지도 넣어본다😂 웹 컴포넌트 특히, 가상돔을 만드는게 여간 어려운 일이 아니었다. 굳이 굳이 가상돔을 구현한 데에는 두 가지 이유가 있다.(이제부터 가상돔은 vDOM, 실제돔은 rDOM이라고 부르도록 하겠다.) 첫째로 컴포넌트의 상태가 변함에 따라 다시 렌더링 되었을 때, 기존 게임 함수가 의존하고 있는 엘리먼트가 항상 그대로 유지되어야만 했다. 예를 들어, 게임 함수가 엘리먼트에 의존하고 있을 때, 외부 상태의 변화로 인해 해당 엘리먼트도 함께 리렌더링 된다면, 게임은 더 이상 rDOM에 존재하지 않는 엘리먼트를 참조하게 된다. 아래 코드에서 render 버튼을 클릭하면 이후로 버튼들이 작동하지 않게 되는 것과 같다. 둘째로, RxJS를 사용함에 따라 컴포넌트가.. 2023. 2. 6. RxJS로 산성비 만들기(1) - 프로젝트를 시작하며 왜 이 프로젝트를 시작하게 되었는가? 나는 게임을 좋아하다 보니, 새로운 기술이나 개념을 익힐 때 주로 게임의 개념을 대입하거나, 실제로 간단한 게임을 만들어본다. 최근 들어 관심이 생긴 RxJS 역시 문서를 읽어보고 API들을 조금 사용해 본 후, 이를 게임에 가장 잘 활용할 수 있는 방법이 없을까 생각해 보았다. 정말 뜬금없지만, 그 당시에 한글과컴퓨터 채용 공고가 올라온 것을 보았고, 의식의 흐름대로 어릴 적 즐겁게 했던 한컴 산성비 게임이 떠올라 그대로 이를 프로젝트 주제로 삼았다. 프로젝트 목적 RxJS를 활용해 프로젝트를 하는 것은 좋은데, 이것 만으로는 프로젝트 볼륨이 너무 작은 느낌이었다. 그래서 프로젝트 진행에 몇 가지 목적을 세워, 스스로 챌린지를 주기로 했다. 목적들은 다음과 같다. .. 2023. 2. 1. [Regex] Look Around 특정 문자열의 앞, 뒤 찾기 정규 표현식을 사용하다보면 특정 문자열의 앞 뒤에 있는 문자열을 구해야 하는 경우가 자주 있다. 예를 들어 "1월 26일 코로나 감염자 수 1000명"이라는 문자열이 있을 때, 이 중 감염자 수를 의미하는 "1000" 만을 얻고자 한다면 다음과 같이 구할 수 있다. const str = '1월 26일 코로나 감염자 수 1000명' const reg = /(\d+)명/; str.match(reg); // ['1000명', '1000', index: 0, input: '1000명', groups: undefined] 이와 같은 정규표현식을 사용하면 우리에게 필요하지 않은 "1000명"까지 구하게 되는데, Positive Look Ahead 표현을 사용하면 더 깔끔하게 구할 수 있.. 2023. 1. 26. [VSCode] 나만의 code snippet 만들기 코딩자바스크립트로 코딩테스트 문제를 풀다보면 우선순위 큐와 같은 자료구조가 필요한 경우가 있다. 이때마다 작성해둔 코드를 매번 작성하거나 어딘가에서 복사 붙여넣기 하기란 여간 귀찮은 일이 아닌데, VSCode의 snippet 기능을 사용하면 훨씬 간편하게 작성해둔 코드를 가져다 사용할 수 있다. snippet을 작성하기 위해서는 '파일 탭 -> 기본 설정 -> 사용자 코드 조각 구성'으로 이동한 뒤 원하는 언어를 선택한다. 이제 아래와 같이 json 형식으로 미리 작성해두고자 하는 코드와 키워드를 입력하면 된다. [name]: snippet의 이름으로, description이 없을 때 설명으로 보여진다. prefix: 자동완성 키워드이다. 배열 형식으로 2개 이상의 값을 지정하는 것도 가능하다. body.. 2023. 1. 19. 이전 1 2 3 4 다음
