코딩병원

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. 해결 방법

토이 프로젝트를 진행하던 중 아래와 같은 에러가 발생하였습니다. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. [에러 원인] Header 태그가 children을 prop으로 전달하는 과정을 생략해 발생한 타입 에러입니다. Header가 마치 props로 Router에게 넘겨지는 구조로 코드가 작성이 되어있습니다. 넘겨지는 props가 없는데 말이죠. [에러 원인] Header 태그의 자식 컴포넌트들이 props를 넘김 받지 않도록 수정해 주시면 됩니다. root.render( );

2022. 5. 10.

[Javascript] Set 정리 및 예제

Set은 흔히 집합이라고도 합니다. Set(집합)의 개념은 간단합니다. 유한하고 구분되는 객체들의 그룹입니다. 즉, 유일한(중복되지 않는) 항목들의 그룹입니다. 집합은 O(1) 상수 시간에 유일한 항목을 확인하고 추가할 수 있기 때문에 굉장히 중요합니다. 집합이 상수 시간 연산이 가능한 이유는 집합의 구현이 해시 테이블의 구현을 기초로 하기 때문입니다. 다음과 같이 자바스크립트에서는 Set이 기본으로 지원됩니다. 기본 Set 객체에는 속성이 하나만 존재하는 데 size라는 정수 속성입니다. 해당 속성은 집합 내 항목들의 현재 개수를 나타냅니다. const exampleSet = new Set(); [삽입] Set의 주요 특징은 유일함을 확인한다는 것입니다. Set은 항목들을 추가할 수 있지만 중복되는 항..

2022. 5. 5.

[Javascript] 빅오 표기법 정리 및 예제

알고리즘의 시간 복잡도를 f(n)이라고 표현했을 때, n은 입력의 개수를 나타내고 f(n)time은 필요한 시간을 나타내고 f(n)space는 필요한 공간(추가적인 메모리)을 나타냅니다. 알고리즘 분석의 목표는 f(n)을 계산함으로써 알고리즘의 효율성을 이해하는 것입니다. 하지만 f(n)을 계산하는 것은 어려울 수 있습니다. 이런 계산을 하는데 도움이 되는 빅오 표기법의 기본적인 규칙이 있습니다. [계수 법칙] 계수 법칙은 가장 이해하기 쉬운 법칙입니다. 단순히 입력 크기와 연관되지 않은 상수를 전부 무시하면 됩니다. 빅오에서 입력 크기가 클 때 계수를 무시할 수 있습니다. 상수 K>0인 경우 f(n)이 O(g(n))이면 kf(n)은 O(g(n))이다. 즉, 5f(n)과 f(n)이 모두 동일한 O(f(n..

2022. 4. 28.

[Javascript] 시간 복잡도 정리 및 예제

빅오 표기법은 알고리즘의 최악의 경우 복잡도를 측정합니다. 빅오 표기법에서 n은 입력의 개수를 나타냅니다. 알고리즘을 구현할 때 빅오 표기법이 해당 알고리즘이 얼마나 효율적인지 나타내기 때문에 빅오 표기법은 중요합니다. 빅오와 관련된 질문으로 "n이 무한으로 접근할 때 무슨 일이 일어날까?"가 있을 수 있습니다. [시간복잡도의 예] 1. O(1) - Constant Time O(1)은 입력 공간에 대해 변하지 않습니다. 따라서 O(1)을 상수 시간이라고 부릅니다. n의 값이 얼마나 크든 상관이 없습니다. O(1) 알고리즘의 예로 배열에 있는 항목을 인덱스를 사용해 접근하는 경우가 있습니다. function exampleConstant(arr) { console.log(arr[0]); } 2. O(n) -..

2022. 4. 27.

A component is changing an uncontrolled input to be controlled. 해결 방법

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component [에러 원인] input 태그의 value가 undefined 값이 들어갈 수도 있으면 발생하는 에러입니다. uncontrolled input이었다가 controlled input으로 바뀌면서 발생한 것입니다. 즉, 한마디로 초기값이 u..

2022. 4. 23.

[Javascript] push() 대신 펼침 연산자로 원본 변경을 피하는 방법

원본 데이터를 조작하는 경우 예상치 못한 결과를 낳을 수 있습니다. 코드의 앞부분에서 컬렉션의 무언가를 수정하면 훨씬 더 찾기 어려운 버그를 만들 수 있습니다. 조작이 항상 문제를 일으키는 것은 아니지만 잠재적으로 문제가 되는 것은 사실이므로, 가능하면 조작을 피하는 것이 좋습니다. 실제로 리덕스를 비롯한 인기 있는 자바스크립트 라이브러리는 원본을 건드는(조작) 함수를 허용하지 않습니다. 모던 자바스크립트의 상당수가 함수형 프로그래밍 형식을 취하기 때문에 부수 효과와 조작이 없는 코드를 작성해야 합니다. 배열을 조작하기 위해 흔히 사용하는 push() 메서드는 새로운 항목을 배열 뒤에 추가해 원본 배열을 변경합니다. 즉, push로 항목을 추가하면 원본 배열을 조작하는 셈입니다. 하지만, 펼침 연산자를 ..

2022. 4. 21.

This component must be used inside a <RecoilRoot> component. 해결 방법

이번 글에서는 This component must be used inside a component. 에러에 대하여 알아보도록 하겠습니다. This component must be used inside a component 컴포넌트는 태그 내에서 사용해야 한다고 합니다. recoil의 상태관리하는 역할을 보면 당연하다는 생각이 듭니다. 실제로 recoil.org에서 태그의 위치는 루트 컴포넌트에 넣는 것이 가장 좋은 방법이라고 적혀있습니다. 이를 알면서도 저는 에러가 났네요.. 왜 일어났는지는 아래에서 확인해보겠습니다. [에러 원인] 저는 App.tsx에서 를 최상단 루트로 감싸줬는데 에러가 발생하였습니다. 확인해보니 App.tsx가 최상단 루트가 아니더군요.. index.tsx가 App.tsx를 감싸고 ..

2022. 4. 17.

[React] useMemo 사용법 및 예제

[useMemo] useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo에서 Memo는 Memoization을 뜻합니다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. 먼저 시작하기 전에 함수형 컴포넌트에 대해 꼭 아셔야 합니다. 아래 예제를 보면서 같이 살펴보겠습니다. 함수형 컴포넌트는 렌더링 ➡️ Component 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거칩니다. Component가 렌더링이 될 때마다 value라는 변수가 초기화됩니다. 따라서 calculate 함수는 반복적으로 호출됩니다. calculate 함수가 무거운 일을 하는 함수라면..

2022. 4. 6.

[React] useContext 사용법 및 예제

useContext에 대해 이해하려면 먼저 리액트의 Context에 대해 알아야 합니다. Context부터 먼저 살펴보고 useContext로 넘어가겠습니다. Context란? 리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있기 때문에 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨주는 것이 일반적입니다. 그러나 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수록 코드는 복잡해집니다. A컴포넌트에서 제공하는 데이터를 D컴포넌트에서 사용하려면 props를 하위 컴포넌트로 필요한 위치까지 계속해서 넘겨야 합니다. 이러한 기법을 props drilling이라고 합니다. 이러한 props drilling을 극복하기 ..

2022. 4. 4.

[React] useRef 사용법 및 예제

useRef란? useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용이 되는 React hooks입니다. useRef는 useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있습니다. 그러나, useState와 구별되는 큰 차이점 두 가지를 가지고 있습니다. - useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있습니다. - useRef는 그 값이 변하더라도 렌더링을 발생시키지 않습니다. useRef에 대해 본격적으로 알아보기 전에 왜 useRef가 필요한지 먼저 고민해봅시다. 렌더링에 영향을 미치지 않는 고정된 값을 관리하기 위해서 useRef를 사용한다면 useRef를 사용하지 않고 그냥 함수 외부에서..

2022. 3. 27.

[React] useEffect란?

[useEffect란?] 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘입니다. 그리고 이 부수 효과가 '언제' 일어나는지보다 어떤 상태값과 함께 실행되는지 살펴보는 것이 중요합니다. 먼저 useEffect의 일반적인 형태를 살펴봅시다. function Component() { // 첫 번째 인수로는 effect 함수, 두 번째 인수로는 dependency array useEffect(() => { // do Somthing... // effect 이후에 어떻게 정리(clean-up)할 것인지 표시 return () => { .... } }, []) // 빈 배열을 입력하는 경우 렌더링 될 때 마다 실행 } 첫 번째 인수로는 실행할 부수 효과가 포함된 함수들, 두 번..

2022. 3. 25.

[React] useState란?

[useState란?] useState는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅입니다. const [state, setState] = useState(초기값); useState의 인수로는 사용할 state의 초깃값을 넘겨줍니다. 아무런 값을 넘겨주지 않으면 초깃값은 undefined입니다. useState 훅의 반환 값은 배열이며, 배열의 첫 번째 원소로 state 값 자체를 사용할 수 있고, 두 번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있습니다. 만약 useState를 사용하지 않고 함수 내부에서 자체적으로 변수를 사용해 상태값을 관리한다고 가정해보겠습니다. function Component() { let state = 'hel..

2022. 3. 18.

[React] 리덕스 총정리 및 예제

[Redux란?] 1. Redux 등장 배경 MVC 패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였습니다. 즉, 양방향 데이터 흐름이었죠. 양방향 데이터 흐름은 복잡하고 데이터 흐름을 판단하기 힘든 구조입니다. 이러한 해결방법으로 단방향 데이터 흐름이 있습니다. 그게 바로 Redux입니다. Redux는 MVC 패턴에서의 단점을 개선하는 것이 목적이었고 그 해결책으로 단방향 데이터 흐름을 적용하였습니다. View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨줍니다. 이때 Action은 반드시 Dispatcher를 통해서 데이터가 변경됩니다. 변경된 데이터를 Store를 통해 View가 전달받습니다. 2. Redux ..

2022. 3. 13.

react-scripts: command not found 해결 방법

이번 글에서는 react-scripts: command not found. 에러 해결 방법에 대하여 알아보겠습니다. react-scripts: command not found [에러 원인] 명령어를 읽을 수 없다고 로그가 찍힌 것을 확인할 수 있습니다. 아무래도 프로젝트 경로가 기존과 다르거나, 다른 프로젝트를 사용할 때 이런 에러가 종종 발생하고는 합니다. [해결 방법] npm update 혹은, npm Install을 해주시면 됩니다. npm update npm install

2022. 2. 4.

internal/modules/cjs/loader.js:888 해결 방법

이번 글에서는 internal/modules/cjs/loader.js:888 에러 해결 방법에 대하여 알아보겠습니다. internal/modules/cjs/loader.js:888 [에러 원인] react 프로젝트를 다운받고 실행시키려는데 위의 에러가 발생하였습니다. 위의 에러는 @bable/core 모듈을 찾을 수 없다고 나오는데 그 이유는, 전에 사용하던 node_modules에서 만든 경로랑 실행시킬 프로젝트의 모듈이 충돌해서 발생했을 가능성이 높습니다. [해결 방법] 모듈 하나하나를 수정해주는 방법이 있을테지만, 저는 아래와 같은 명령어로 모듈 자체를 지우고 재설치하였습니다. npm remove package-lock.json npm remove node_modules npm install

2022. 2. 3.

[React] 배열로 state 변수 선언하는 이유 (useState)

[state 변수 선언] react에서 함수형 컴포넌트 형식으로 state 변수를 선언할 때, 우리는 아래 코드와 같이 useState() 함수를 사용해서 배열(대괄호)을 이용하여 state 변수를 선언하는 것을 보셨을 겁니다. const [count, setCount] = useState(0); [배열 구조 분해] 첫번째 인덱스에는 변수명을 입력하고, 두 번째 인덱스에는 set을 붙여서 state 변수를 선언하였습니다. const [fruit, setFruit] = useState('banana'); 위 자바스크립트 문법은 배열 구조 분해라고 하고, fruit과 setFruit, 총 2개의 값을 만들고 있습니다. 즉, useState를 사용하면 fruit이라는 첫 번째 값과 setFruit라는 두 번째..

2022. 2. 2.