코딩병원

Frontend/Debug Log

Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. 해결 방법

이번 글에서는 Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. 에러 해결 방법에 대하여 알아보겠습니다. Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. [에러가 발생한 코드] App.js import React from 'react'; import TestComponent from './TestComponent'; const App = () => { return 리액트 } export default App; TestComponen..

2022. 1. 20.

Frontend/Debug Log

Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. 해결 방법

이번 글에서는 Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. 에러 해결 방법에 대하여 알아보겠습니다. Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. [에러가 발생한 코드] App.js import React from 'react'; import TestComponent from './TestComponent'; const App = () => { return 리액트 } export default App; TestComponent.js impor..

2022. 1. 19.

Frontend/Debug Log

Parsing error: Unterminated JSX contents. 해결 방법

이번 글에서는 Parsing error: Unterminated JSX contents. 에러 해결 방법에 대하여 알아보겠습니다. Parsing error: Unterminated JSX contents. [에러가 발생한 코드] import React from 'react'; function App() { return ( ) } export default App; [에러 원인] JSX에서는 위 코드처럼 태그를 닫지 않으면 오류가 발생합니다. 위의 input 태그는 열려있지만 닫혀있지 않고 있습니다. [해결 방법] 태그를 닫아주시면 됩니다. 위의 코드에 input 태그 사이에 별도의 내용이 들어가지 않은 경우에는 처럼 작성할 수 있습니다. 이러한 태그를 self-closing 태그라고 부릅니다. 태그를 선..

2022. 1. 18.

Frontend/React

[React] Virtual DOM vs DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다. Virtual DOM을 알아보기 전에, 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야 합니다. [DOM이란?] Document Object Model의 약어입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다. 코딩병원에 오신 것을 환영합니다. itprogramming119 * 위 소스 HTML의 DOM 트리 [DOM은 과연 느릴까요?] 요즘 DOM API를 수많은 플랫폼과 웹 브라우저에서 사용하는데 이 DOM에는 치명적인 한 가..

2022. 1. 17.

Frontend/Debug Log

Functions are not valid as a React child. 해결 방법

이번 글에서는 Functions are not valid as a React child. 에러 해결 방법에 대하여 알아보겠습니다. Warning: Functions are not valid as a React child. [에러가 발생한 코드] App.js import React from 'react'; import { Route, Routes } from 'react-router-dom'; import ReactRouter1 from './ReactRouter1'; function App() { return ( ) } export default App; ReactRouter1.js import React from 'react'; function ReactRouter1(props) { return( pa..

2022. 1. 16.

Frontend/Debug Log

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. 해결 방법

이번 글에서는 A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 에러 해결 방법에 대하여 알아보겠습니다. A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . [에러가 발생한 코드] import React from 'react'; import { Route, Routes } from 'react-router-dom'; import ReactRouter1 from './ReactRouter1'; import ReactRouter2 from './ReactR..

2022. 1. 15.

Frontend/Debug Log

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 해결 방법

이번 글에서는 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 에러 해결 방법에 대하여 알아보겠습니다. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. [에러가 발생한 코드] import React from 'react'; import Route from 'react-ro..

2022. 1. 14.

Frontend/Debug Log

<{모듈참조명} /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 해결 방법

이번 글에서는 is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 에러 해결 방법에 대하여 알아보겠습니다. is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. [에러가 발생한 코드] import React from 'react'; import {Route} from 'react-router-dom'; function App() { return ( // 에러가 발생한 코드 ) } export default App; [에러 원인] React에서 HTML 요소에는 소문자를 ..

2022. 1. 13.

Frontend/React

[React] 쿠키 값, 시간 설정하는 방법

[쿠키란?] 쿠키란, 사용자가 접속한 웹 사이트의 서버를 통해 사용자 컴퓨터에 설치되는 정보를 말합니다. 보통 크롬과 같은 웹 브라우저에 쿠키가 저장됩니다. 쿠키는 사용자 정보를 저장하거나 마케팅을 위한 목적으로 사용될 수 있습니다. [react-cookies 설치] cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install react-cookies --save [예제] 예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다. react-cookies를 통해 쿠키 만료 시간을 10년 후로 설정해보겠습니다. App.js import React, { Component } from 'react'; import CookiesSave from '...

2022. 1. 12.

Frontend/React

[react] redux 미들웨어 정리 및 예제

[미들웨어란?] redux 미들웨어는 액션을 dispatch 함수로 전달하고 리듀서가 실행되기 전과 실행된 후에 처리되는 기능을 말합니다. redux 패키지에서 지원하는 applyMiddleware 함수를 사용하면 미들웨어를 간단하게 구현할 수 있습니다. [미들웨어 생성] 스토어 > 액션 > 미들웨어 > 리듀서 > 스토어 순으로 데이터가 기록이 됩니다. CallMiddleWare 함수는 다중 커링 구조로, 세 가지 인자를 순서대로 받습니다. 첫 번째 인자는 store, 두 번째 인자는 다음 미들웨어를 호출하는 함수로 예제에서는 미들웨어가 1개이기 때문에 reducer를 호출합니다. 커링(Currying) 함수 const CallMiddleWare = store => nextMiddle => action ..

2022. 1. 11.

Frontend/React

[React] redux-logger 사용 방법

redux 미들웨어를 사용하여 개발을 진행할 때, 리듀서가 실행되기 전과 실행된 후를 log로 비교할 때 보기 어려웠던 점을 redux-logger 라이브러리로 보다 편리하게 확인하여 비교할 수 있습니다. [redux-logger 설치] cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install --save react-redux [적용] 여러개의 미들웨어도 적용 가능합니다. 미들웨어가 여러개인 경우 인수 순서대로 진행이 됩니다. import {createStore, applyMiddleware} from 'redux'; import {createLogger} from 'redux-logger'; import reducers from './re..

2022. 1. 10.

Frontend/React

[React] react-redux 정리 및 예제

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

2022. 1. 9.

Frontend/React

[React] redux 데이터 변경하는 방법

[redux란?] redux는 컨텍스트와 마찬가지로 데이터를 필요한 컴포넌트에서만 요청해 사용할 수 있습니다. 컨텍스트는 부모 컴포넌트에서 생성한 데이터에 모든 자식 컴포넌트에서 접근할 수 있습니다. 하지만 redux에서는 컴포넌트 외부의 스토어라는 곳에서 관리합니다. 그래서 컴포넌트의 위치에 상관없이 스토어에 접근해 데이터를 사용하고 변경할 수 있습니다. redux는 데이터를 스토어 > 컴포넌트 > 액션 > 리듀서 > 스토어의 과정을 통해 변경합니다. [redux 세팅] 혹시 redux가 설치가 안되어 있다면, cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install --save redux [예제] 예제를 통해서 어떤 식으로 동작하는지 알..

2022. 1. 8.

Frontend/React

[React] Context로 부모 데이터 변경하는 방법

Props는 데이터가 부모에서 자식 컴포넌트로 단방향으로만 이동할 수 있습니다. 하지만, Context를 사용하면 자식 컴포넌트에서 부모 컴포넌트의 데이터를 변경할 수 있습니다. [예제] 예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다. 버튼을 클릭하면 ContextApi 컴포넌트의 state 값을 가져오는 예제입니다. App.js import './App.css'; import ContextApi from './Component/ContextApi'; function App() { return ( ); } export default App; ContextApi.js import React from 'react'; import Children from "./contextChildren"; co..

2022. 1. 7.

Frontend/React

[React] Context 사용 방법 및 예제

Context란? 리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있기 때문에 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨주는 것이 일반적입니다. 그러나 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수록 코드는 복잡해집니다. A컴포넌트에서 제공하는 데이터를 D컴포넌트에서 사용하려면 props를 하위 컴포넌트로 필요한 위치까지 계속해서 넘겨야 합니다. 이러한 기법을 props drilling이라고 합니다. 이러한 props drilling을 극복하기 위해 등장한 개념이 바로 Context입니다. Context를 사용하면, 이러한 명시적인 props 전달 없이도 선언한 하위 컴포넌트 모두에서 자유롭게 원하는 ..

2022. 1. 6.

Frontend/React

[React] 고차 컴포넌트란? (HOC, Higher-Order Component)

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 즉, 컴포넌트를 인자로 받거나 반환하는 함수입니다. * 하이오더 컴포넌트(HOC, Higher-Order Component) 라고도 많이 불립니다. [주의 사항] render 메서드 안에서 고차 컴포넌트를 사용하시면 안됩니다. 컴포넌트의 정의 바깥에 HOC를 적용하여 컴포넌트가 한 번만 생성 정적 메서드는 반드시 따로 복사해야 합니다. 메서드를 반환하기 전에 컨테이너에 복사 hoist-non-react-statics를 사용하여 모든 non-React 정적 메서드를 자동으로 복사 정적 메서드를 컴포넌트와 별도로 내보내기 ref는 전달되지 않습니다. React.forwardRef API 사용 [예제..

2022. 1. 4.

Frontend/Javascript

[Javascript] 커링(Currying) 함수란?

커링(Currying)은 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수입니다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야 합니다. 커링을 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있습니다. * 커링과 같이 함수 자체를 인자로 받거나 반환하는 함수를 '고차 함수' 라고 부르기도 합니다. [일반적인 함수] function add(num1, num2) { console.log(num1 + num2); } add(5, 8); // 13 [커링(Currying) 함수] 커링을 사용하면 num1 하나를 파라미터로 받고, 그 다음으로 num2를 파라미터로 받아서 함수를 재사용할 수 있습니다. function add(num1, num2) { return n..

2022. 1. 3.

Frontend/React

[React] Ref란?

Ref는 'reference'의 약자로, '참조'라는 뜻입니다. react에서 element의 값을 얻거나 수정할 때 보통 javascript, jquery를 사용합니다. 이때 id나 class와 같은 속성으로 element에 접근합니다. Ref를 사용하면 element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있습니다. [Ref를 사용해야 할 때] 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 Ref 사용을 지양해야 합니다. 예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen 이라는 pr..

2022. 1. 2.