전체 글 (13) 썸네일형 리스트형 MobX-시작하기 Javascript에서 react.js를 통해 어플리케이션을 만들 때 state관리를 단순화 시키기 위해 redux를 사용했었는데 최근 블로그와 Job description에서 MobX경험에 대한 글을 많이 보게되어 이번 솔로프로젝트에 도입해보려고한다. 기본적으로 MobX를 언급하기 앞서 기존에 사용했던 redux를 간단히 소개해보려고한다. About Redux 위의 GIF는 redux의 데이터 흐름을 보여주는데 크게 Store, Action, Reducer로 분류를 하여 설명을 한다. 자세한 설명은공식문서(https://redux.js.org/introduction/three-principles)에 나와있으므로 생략하겠다. 이렇게 보면 단순해보이지만 실제로 redux를 사용하기 위해선 위에 언급한 st.. Git - branch Git이란 코드 버젼관리를 위한 툴로 여러 기능을 제공한다. local(내가 사용하고 있는 컴퓨터의 레파지토리)에서도 기능을 제공하고 remote(github와 같은 원격 레파지토리)에 대한 기능도 제공하기 때문에 사용법만 익힌다면 자신 또는 팀원과 함께 코드를 작성할 때 수고스러운 작업을 줄이고 코드백업과 코드를 다시 복구시킬 때의 수고를 덜 수 있다. 여태까지 내가 사용한 Git의 명령어는 git clone [원격 레파지토리주소] 원격 레파지토리 즉 github에서 레파지토리를 복사해서 local로 가지고 올 때 git status local 레파지토리에서 변경된 파일을 볼 때 git add [파일명] 변경된 파일을 커밋하기 위해 git에 추가할 때 git commit -m '커밋메시지' git에 a.. Time Complexity (big-O) 시간 복잡도란 알고리즘의 수행시간이 얼마인지에 대한 개념이며 big-O 표기법을 통해 나타낸다. big-O는 단순히 증가하는 비율을 나타내는 개념으로 데이터의 입력이 충분히 크다고 가정하고 표기하는 방식이기 때문에 실제 입력 값에 대해 실제 소요되는 시간이 다르게 나타날 수 있다. big-O의 기본적인 룰에 대해 알아보자. 상수항 무시 O(2N) -> O(N) O(N^2 + 2) -> O(N^2) 영향력 없는 항 무시 O(N^2 + N) -> O(N^2) N^2가 가장 지배적이므로 그 외에 영향력이 없는 항은 무시한다. 예를 들어 N이 무한대로 향할 경우 N^2나 N^2+N의 차이가 없어지기 때문. big-O에서 자주 사용되는 실행 시간과 실행 속도 O(1) < O(log n) < O(n) < O(n l.. 자바스크립트 class keyword를 이용한 클래스 정의 ES6로 넘어오면서 자바스크립트에서의 클래스 정의 방법이 직관적이고 간단해졌다. class MyClass { constructor(value) { // 생성자 this.value = value; } someAction() { // 메서드 } } 앞서 설명한 4가지 instantiation방법과 비교해보면 훨씬 코드가 줄어들고 class라는 키워드 덕분에 클래스를 명시적으로 선언할 수 있음을 알 수 있다. 추가적으로 기존의 코드로도 OOP언어들에서 가능한 상속을 자바스크립트에서 비슷하게 따라할 수 있었는데 코드가 전체적으로 보기 힘들고 긴 방법을 써야만 했다. 하지만 extends라는 키워드를 통해 그것 또한 간단하게 구현이 가능하다. class MyChildClass extends MyClass { co.. Data Structure(Linked List, Hash Table) Linked list는 자료를 저장할 때 그 다음 순서의 자료가 있는 위치를 데이터에 포함시키는 방식으로 자료를 저장한다. 배열에 비해 데이터를 추가/삽입 및 삭제를 쉽게 할 수 있다는 장점이 있지만 데이터를 탐색하기 위해선 순차적으로 진행이 되기 때문에 탐색 속도가 떨어진다는 장점이 있다. Linked list의 property와 method(단순 연결 리스트에 해당) -Property head : list내의 가장 첫번째 요소에 해당하는 참조를 가지고있음 tail : list내의 가장 마지막 요소에 해당하는 참조를 가지고있음 node : value를 저장하는 저장소와 다음 순서의 자료의 참조를 가지고 있는 next를 가지고있음 -Method addToTail : list의 맨 뒤에 노드를 추가 rem.. prototype 과 __proto__ 객체 지향 프로그래밍 안에 prototype을 넣지 않고 따로 카테고리를 생성해서 prototype을 넣은 이유가 있다. 사실 자바스크립트는 객체 지향 언어인 Java, C++과는 다르게 prototype을 이용해서 상속 비슷하게 작동시키는 원리이기 때문이다. 서론이 길었는데 prototype은 javascript에서 함수를 생성했을 때 자동으로 생성되는 원형에 해당하는 객체에 접근하게 해주는 프라퍼티이다. 그리고 new키워드를 이용해 함수로 객체를 생성하게 되면 자바스크립트는 함수.prototype에 있는 내용을 전부 인스턴스화 시키게 된다. 여기서 기억해야할 점은 함수만 prototype을 가진다는 점이다. 함수로 객체를 생성하기 위한 객체원형을 가진다는 뜻이다. 브라우저에서 개발자 툴로 실제로 함수.. Javascript에서 Object를 생성하는 여러가지 방법들 1. Functional 함수를 통해 object 생성 하지만 인스턴스가 만들어 질 때마다 position, move에 대한 메모리를 매번 차지한다. var Car = function() { var someInstance = {}; someInstance.position = 0; someInstance.move = function() { this.position += 1; } return someInstance; }; var car1 = Car(); var car2 = Car(); car1.move(); 2. Functional Shared 함수를 통해 object를 생성하지만 메소드는 따로 분리하여 extend시켜주기 때문에 원본 메소드에 대한 메모리만 사용되서 메모리 효율이 좋아짐. var exten.. Data Structure (Stack, Queue) 스택이란 선입후출 후입선출의 LIFO(Last In First Out)개념을 가진 자료구조로 입구가 위에만 열린 박스로 비유를 들면 편하다. 박스에 책을 넣는다고 가정했을 때 입구가 위에 하나뿐이기 때문에 아래서부터 차례대로 하나씩 쌓아 올려야하고 역으로 빼는 경우엔 아래의 책을 빼기 위해선 가장 위에 책부터 하나씩 빼야하는 특징이 있다. stack의 property와 method -Property DataStorage : 스택의 데이터를 보관하는 저장소 Top : 스택의 가장 위(마지막에 들어온 데이터)에 대한 인덱스 -Method Push : 스택의 가장 위에 데이터를 넣는 메소드 (매개변수O [넣을 자료], 리턴값O [넣은 후의 개수], Mutable) Pop : 스택의 가장 위의 데이터를 빼는 메.. 이전 1 2 다음
