DR_Developer

React 컴포넌트의 생명주기 사람이 태어나고, 성장하고, 죽는 것처럼 React 컴포넌트는 생명주기를 갖는다. 바로, " 생성 - 업데이트 - 제거"의 과정이 그것이다. 생성될 때 (Mount) constructor로 정의해놓은 것들이 실행되고 render되면서 mount(생성)된다. 업데이트될 때 (Update) 업데이트는 props나 state가 변경되었을 때 발생한다. 제거될 때 (Unmount) 상위 컴포넌트가 하위 컴포넌트를 더이상 그리지 않을 때, unmount(제거) 된다. (클래스 컴포넌트 기준으로) 모든 컴포넌트는 render 메서드를 갖는다. render 메서드는 웹 컴포넌트를 실제 DOM 요소에 그려주는 역할을 한다. render 메서드는 제거될 때를 말고는 모두 실행되는데, 그 전..

1. Virtual DOM이란? virtual DOM은 실제 DOM을 추상화한 자바스크립트 객체이다. 실제 DOM이 갖고있는 속성들(id, class, style, innerHTML 등)을 virtual DOM도 갖고 있다. 하지만 DOM API(getElementById, querySelector 등)는 갖고 있지 않기 때문에 실제 DOM보다는 가볍다. 2. Virtual DOM의 예시 let domNode = { tagName: 'div', attributes: { id: 'container', class: 'container', style: 'background-color: red;' }, children: [ { tagName: 'h1', attributes: {}, children: ['Hell..

1. Ref란? ref는 DOM을 직접적으로 건드려야하는 때 사용합니다. 순수 js로 컴포넌트를 제어하는 방식으로, ref는 current 프로퍼티를 가진 객체입니다. 2. id가 아니라 ref를 사용하는 이유는? id는 DOM에서 유일해야하는데, React 컴포넌트는 여러번 사용될 수 있기 때문에 id를 사용하는것이 적절하지 않습니다. 반면에, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문입니다. 3. ref를 사용하는 방법 3-1. 클래스형 컴포넌트에서 사용하는 방법 React.createRef 메소드를 사용합니다. 변수명.current로 접근할 수 있습니다. React 16.3 버전부터 사용 가능합니다. class RefSample extends Component { input..

React Query에는 2가지의 Status가 있다. 이 2가지 Status의 상태와 그것이 가지는 의미를 구분하여 파악해보자. 1. Query Status 의미 - 실제로 받아온 data 값이 있는지 없는지를 나타내는 상태값 확인 방법 - useQuery의 결과값에서 status 값을 통해 확인 가능하다. 3가지 종류의 상태 값을 갖는다. - 1. pending : 데이터를 아직 받아오지 못한 상태일때. - 2. success : 데이터를 성공적으로 받아왔을 때. - 3. error : 데이터를 받아오는 중에 에러가 발생했을 때. 2. Fetch Status 의미 - queryFn() 함수가 현재 실행되는중인지 아닌지를 나타내는 상태값 3가지 종류의 상태 값을 갖는다. - 1. fetching : 쿼..

0. iteration protocol의 등장 배경 ES6 이전에는 순회 가능한 데이터 컬렉션(자료구조)가 명확한 통일된 규약 없이 각자의 구조를 갖고 나름의 방식(for...in문으로 순회한다던지...forEach문으로 순회한다던지...)으로 순회할 수 있었다. 그러나 ES6부터는 이 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하였다. 그리고 이 이터러블이 for...of문, 스프레드 문법, 배열 구조분해할당(destructuring)을 사용할 수 있게 된다. 각각의 순회가능한 자료구조(Array, String, Map/Set 등)를 데이터 공급자 라고 하고, 그것을 순회하여 사용하는 방식(스프레드문법, for..of문, 배열 디스트럭처링 할당 등)을 데이터 소비자라고 하..

[Monorepo] yarn workspace 모노레포 환경 내의 컴포넌트가 다른 패키지에서 import 되지 않을 때 해결법 (@babel/runtime) 1. 문제 상황 프로젝트를 시작하면서 yarn berry workspace를 통해 모노레포 환경을 구축하였다. 위 그림과 같이 프로젝트의 주요 목표가 될 '서비스 어플리케이션'들끼리 공통적으로 사용할 컴포넌트들을 package 폴더 안에 '공통 컴포넌트 패키지'로 만들어 컴포넌트 재사용성을 높이고자 하였다. Cannot find module babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray 그러나 다음과 같은 메시지를 뱉으며 불러오지 못하는 문제를 겪었다. 2. 원인 진..

요즘 프론트엔드 개발자 공고에서 빠지지 않는 것 중 하나는 바로 Typescript 활용 능력이다. 'Typescript가 타입을 지정하고 큰 프로젝트에서는 안정성이 좋다' 이런 얘기들은 많이 들어봤지만 구체적으로 어떤 특징을 갖고, 왜 협업과 큰 프로젝트에서 좋은지 javascript와 비교해보면서 구체적으로 살펴보고자 한다. 정적 타입 언어 vs 동적 타입 언어 Typescript는 정적 타입 언어이다. Typescript는 정적 타입 언어이다. 정적이다는 영어로, static이며 동적(dynamic) 이라는 단어와 반대되는 뜻이다. 한마디로 움직이지 않고 정해져있다는 뜻인데, 그렇다면 타입이 정적이다는 무슨 뜻이고 동적이다는 무슨 뜻인걸까? function sum ( a: number, b: num..

방법 1 const arr = ["a", "b", "c", "d", "e"] const i = 2; const ileft = arr.slice(0, i) const iright = arr.slice(i+1); const newArr = ileft.concat(iright); console.log(ileft) console.log(iright) console.log(newArr) 방법 2 const arr = ["a", "b", "c", "d", "e"] const i = 2; const newArr = [...arr] newArr.splice(i, 1); console.log(newArr);