My Boundary As Much As I Experienced

트리 구조란? 트리(Tree)는 계층적인 구조를 나타내는 비선형 자료 구조이다. 이 구조는 노드(node)와 간선(edge)의 집합으로 이루어져 있다. 트리에서 한 노드는 부모(parent)와 그 자식(child) 노드들로 구성된다. 트리 구조에서는 최상위 노드를 루트(root) 노드라고 하고, 각 노드는 그 아래에 여러 자식 노드들을 가질 수 있다. 각 노드는 부모 노드로부터 연결된 간선을 통해 접근할 수 있다. 트리에서 각 노드는 서로 다른 자식을 가질 수 있지만, 각 노드는 하나의 부모를 가진다. class Tree { constructor(value) { this.root = new Node(value); } } class Node { children = []; constructor(value) ..

들어가기 전 토막 상식 보통 클래스 안의 정보들은 프로퍼티가 아니라 필드라고 한다. 계속 프로퍼티라 부르고 있었는데 클래스 문법 복습하면서 다시 알게 되었다. _가 붙는 필드는 무엇인가? class Counter { constructor() { this._count = 0; // _count는 내부적으로 사용되는 프로퍼티 } increment() { this._count++; } getCount() { return this._count; } } const counter = new Counter(); counter.increment(); console.log(counter.getCount()); // 외부에서는 getCount를 통해서만 _count에 접근할 수 있음 JavaScript 클래스 문법에서 _..

*본 내용은 모던 자바스크립트 딥다이브의 class부분을 요약정리한 내용입니다. * (*텍스트)는 제가 주석을 단 부분입니다. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. var person = (function(){ // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person...

Flux란? An application architecture for React utilizing a unidirectional data flow. 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍처 Flux아키텍쳐는 Meta(전 Facebook)에서 개발한 단방향 데이터 흐름을 가지는 아키텍쳐이다. MVC구조를 개선하기 위해 만들어졌다. 그 전에 MVC란? (복습) 먼저 MVC구조를 보자면 이와 같은 구조를 가지는데 Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 하고, Model은 이런 데이터를 View를 통해 반영한다. 또, View는 사용자로부터 데이터를 입력받기도 하기 때문에 사용자의 입력이 Model에 영향을 주기도 한다. 문제는 이러한 구조가 거대한 어플리케이..

MVVM의 탄생기 2004년 마틴 파울러의 프레젠테이션 모델(PM) 패턴 발표 - 프레젠테이션 모델 = 뷰의 추상화 - 뷰는 단지 프레젠테이션 모델의 렌더링에 불과 - 프레젠테이션 모델은 뷰를 자주 업데이트하여 동기화 상태 유지 - 동기화 로직은 프레젠테이션 모델 클래스에 코드로 존재 2005년 - MS사는 마틴 파울러의 아이디어를 수용하여 MVVM 체계화 및 도입 - 두 패턴 모두 뷰의 상태와 동작을 포함해 추상화 - PM 패턴을 WPF 및 Silverlight 플랫폼에 맞게 특화시킨 것 MVVM의 특징 - 과거와 다른 애플리케이션의 UI 개발 환경의 변화 - 코딩을 덜 필요로 하며, 다양한 툴, 언어, 사람, 로직 등에 의해 이루어짐 - 하나의 환경 혹은 하나의 언어를 사용하던 과거와 달리, 현재 트..

최근 '리액트 교과서'를 읽다가 'React는 다른 MVC 프레임워크나 AngularJS의 지시자, Jade, Pug 같은 템플릿 엔진 문법에 비하면 학습 곡선이 얕고 완만하다(React는 MVC가 아니니 이러한 비교는 이쯤에서 그만 두겠다).' 라는 문장을 발견했다. 여기서 MVC가 무엇인가? 그리고 무엇이길래 MVC 프레임워크들이 즐비한가? MVC란? MDN에서 이를 찾아보았다. https://developer.mozilla.org/ko/docs/Glossary/MVC MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더나은 ..

이전 포스팅에선 게임 플레이 시 어떻게 타일의 일반 상태 -> 깃발 상태 -> 물음표 상태로 전환하는지와 어떻게 빈 타일들을 모두 열고, 지뢰 근처의 타일에서 탐색을 멈추게 했는지를 설명했다. 이번엔 게임의 부수적인 요소인 게임 타이머, 리셋버튼 얼굴 전환, 사운드 구현 등을 어떻게 했는지에 대해 설명하겠다. 레벨, 게임플레이 상태와 게임 플레이같은 뼈대가 되는 요소들이 모두 구현된 상태에선 이런 부수적인 요소는 쉽게쉽게 처리할 수 있다. 게임 타이머 구현 로직 아래 코드는 useTimer훅이다. 짧게 기능을 설명하자면 레벨 전역 상태가 playing이면 setTimeout을 시작하고, stale일 때는 0으로 초기화한다. succeess이거나 gameOver일때는 0으로 초기화하지 않고 그냥 멈춘다. ..

이전 포스팅엔 타일맵 생성 로직과 지뢰 뿌리기를 어떻게 구현하였는지에 대해 설명하였다. 이번 포스팅에선 게임 플레이 시 타일의 일반 상태 -> 깃발 상태 -> 물음표 상태로 전환하는지와 어떻게 빈 타일들을 모두 열고, 지뢰 근처의 타일에서 탐색을 멈추게 했는지를 설명하겠다. 타일 상태 바꾸기 로직 (기본 - 깃발 - 물음표 - 게임오버 - ...) 이전 포스팅에서 소개한 바와 같이 아래 코드처럼 각각의 타일들은 TileType의 객체로 구성되어 있으며 2차원 배열을 구성하고 있다. 그리고 이를 Tile컴포넌트로 만들기 위해 map메소드로 전개한다. // TileType { isOpened: false, // 열렸는지 여부 isMined: false, // 지뢰가 있는지 여부 isStaled: true, ..