My Boundary As Much As I Experienced

들어가며... 회사에서 React Native를 처음 배우기 시작했다. React랑 거의 유사한 개발 경험을 제공한다고 하더니.. 생각보단 다르다! 일단 태그부터 다르다. div라던가 styled-components와 작별을 하게 됐다. (RN환경에서도 styled-component나 emotion을 사용할수는 있다고는 하나 사수님께서 말하길 모바일에서 별로 성능이 좋진 않다고 한다.) 사실 '태그'라고 부르는 것조차 조금 잘못된 느낌이다. React Native 공식문서에 보면 코어 컴포넌트라고 부른다고 한다. 리액트 네이티브에서 스타일링 하는 법 & 코어 컴포넌트의 기본 속성 리액트 네이티브는 css파일을 쓰지 않는다. 웹이 아니기 때문! 기술 면접 때 계속 말하던 DOM 파싱하고 CSSOM 파싱하고..

오늘 알게 됐는데, { [Date.now()]: { text: "" } } 처럼 Date.Now()같이 동적인 값을 객체의 key로 설정하고 싶을 때 대괄호로 묶는다. TypeScript에서 객체의 타입 지정해줄 때 { [key]: value }같은 형식으로 하는게 TypeScript 문법인 줄 알았는데 ES6 문법이었다🫢 사용 사례1. Date.now()처럼 겹칠 수 없는 id값을 동적으로 key값으로 부여할 때 const addToDo = (text: string) => { const item = { [Date.now()]: text }; setToDo({...toDo, item}); } 사용 사례2. 인덱스 같은 부분을 지속적으로 증가시켜 key로 할당할 때 const prefix = 'prop';..

https://school.programmers.co.kr/learn/courses/30/lessons/42577 오랜만에 프로그래머스로 복귀했다. 레벨2 남은거 다 풀고 레벨3 풀기 시작해야겠다. 문제 수준: 레벨2 문제 요약: 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 sol..

클래스 컴포넌트란?클래스 컴포넌트는 React에서 사용되는 컴포넌트의 한 종류이다.이전에는 주로 클래스 컴포넌트가 주류였지만, 최근에는 함수형 컴포넌트와 훅을 이용한 상태 관리가 더욱 표준적으로 쓰인다. 클래스 컴포넌트는 render() 메서드를 포함하여 여러 생명주기 메서드를 사용할 수 있다는 특징이 있다.(임의로 메서드를 추가하는 것도 가능하다.) 함수형 컴포넌트에서는 hook로 이런 주기를 조작할 수 있으나 그 자유도는 클래스형보다 낮다. 클래스 컴포넌트의 특징- React.Component 클래스를 상속받아서(extends하여) 정의된다.- render() 메소드로 view로직을 처리함- 생명주기 메서드를 사용할 수 있음 라이프 사이클 메서드의 분류라이프사이클 메서드의 종류는 총 9가지이지만 크게..

앞서, 트리구조란? 이전 포스팅에서 본대로 트리구조는 아래와 같이 자바스크립트로 심플하게 구현할 수 있다. 그러나 아래 구조에서는 한 Node에 3개 이상의 자식노드도 제한없이 추가할 수 있다. class Tree { constructor(value) { this.root = new Node(value); } } class Node { children = []; constructor(value) { this.value = value; } push(value) { this.children.push(new Node(value)); } } 그러므로 이진탐색에 쓰이기 위한 트리구조는 좀 더 제약이 필요한데, 실제 구현은 다음 포스팅 때 하겠다. 그전에 일단 이진트리가 무엇인지에 대해 정확히 알아보도록 하자. 이..

트리 구조란? 트리(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 개발 환경의 변화 - 코딩을 덜 필요로 하며, 다양한 툴, 언어, 사람, 로직 등에 의해 이루어짐 - 하나의 환경 혹은 하나의 언어를 사용하던 과거와 달리, 현재 트..