AI Platform / Web

0. 들어가면서 react는 많은 jsx파일이나 js 파일로 컴포넌트가 만들어진다. 그렇다면, 각각의 컴포넌트에 데이터를 전달할 수 있어야한다. 쉽고 간단하게 설명해 보겠다. 1. 부모 컴포넌트 데이터를 보낼 컴포넌트다. 이 컴포넌트 안에는 3개의 다른 컴포넌트( DownTest1, DownTest2, DownTest3 )를 만들었다. // src/component/UpTest.jsx import React from 'react'; import DownTest1 from './DownTest1'; import DownTest2 from './DownTest2'; import DownTest3 from './DownTest3'; const UpTest = () => { return ( Parent Comp..

autofocus nextjs/react 사용시 component 내부를 들어가면, 자동으로 input 창에 커서가 들어가게 하는 방법을 알아보자. 그리고 antd, material UI 등등의 툴에서도 input 태그에 autoFocus/autofocus를 넣어도 작동을 안하는 경우가 있다. 이러한 해결책을 코드를 통해 적어보도록 하겠다. 디테일한 설명은 빼고 바로 코드로 적어보겠다.(react/nextjs 관련 설명은 제외한다.) 만약 vanilla js에서 사용하는 관련 설명은 아래의 링크를 보고오자. [form] input 태그을 focus 하기 1. useRef 설정 input과 같은 DOM 요소(element)를 수정해야한다면, 가장 먼저해야할 것은 어떤 요소를 변경/수정 할 것인지에 대한 선..

위의 에러나 났다면, 간단히 crossorigin을 crossOrigin으로 변경해주면 된다. html의 태그에 class를 className이라 적는 것과 같은 에러라고 생각하면 된다. 기본적으로는 build가 잘 안 될 수 있기 때문에 변경해주고 다시 build를 하면 실행이 될 것이다. // 변경전 // 변경후 crossOrigin으로 변경을 하면 위의 Error는 발생하지 않는다.

react로 구현을 하다보면, useState를 활용하여 데이터를 저장하고 수정한다. state란 한국어로 상태이다. 즉, 이러한 상태관리인 데이터관리를 효율적으로 하는 방법에 대해 알아보자. 당연한 말이지만, 상태 설계는 개발자마다 중요하게 생각하는 부분이 다르기 때문에 정답은 없다. 그리고 상태 설계는 한번 설계되어 프로젝트가 진행되면 고치기가 쉽지 않다. 따라서 상태 관리에 대한 많은 고민을 하고 프로젝트를 시작해야한다. 잘못된 상태 설계는 성능 이슈는 물론 유지보수 관점에서도 큰 영향을 끼친다. 우선은 리액트를 기준으로 상태 관리에 대해 적어보려한다. 기본적으로 redux를 사용하지 않으면 우리는 데이터를 props로 컨포넌트간에 전달을 시켰다. 이러한 데이터는 전달된 컴포넌트에 국한 되어 영향을..

아래의 내용을 통해 React에서 다루는 핵심 개념을 이해하고 구현하는 방법을 알아보자. 개발자라면, 한 번정도는 읽어야할 공식문서 실습 부분을 한국어로 정리했다. 추가로 frontend를 구성하고 있는 nodejs에 대한 정보는 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 React란 react는 사용자 인터페이스, 즉 fontend를 구축하기 위한 직관적이고 효율적이자 유연한 JavaScript 라이브러리이다. 그리고 Component라고 불리는 코드의 조각들을 이용하여 복잡한 UI를 구성한다. 컴포넌트를 구성하는 방식은 여러가지가 있다. 먼저 React.Component의 하위 클래스를 사용하여 아래와 같이 컴포넌트를 만드는 것이 가능하다. class Shoppi..

export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' 위의 애러가 난다면, router에서 history를 사용하기위해 설정 도중에 에러가 떴을 것이다. 만약 아래와 같이 실행을 했는데 안된다면, 나와 같은 이유에서 안되는 것이기 때문에 해결책을 참고하자. 1. history를 쓰려면 아래와 같이 import를 한다. import { withRouter } from "react-router-dom"; 2. 아래와 같이 export를 한다. export default withRouter(App); 3. 사용하고자 하는 컴포넌트에서 history를 props로 받아서 사용한다. import React from "r..

특정 버튼을 눌렀을 때, 페이지를 최상단으로 이동시키고 싶다. 그러나 react에서는 컴포넌트들로 UI가 나누어져있기 때문에 바로 구현하는 것이 어렵게 느껴진다. 하지만, 아래의 내용을 참고한다면 쉽게 구현할 수 있을 것이다. 추가적인 다른 react/nodejs 정보는 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 ScrollToTop 아래와같이 기본적으로 페이지 이동 시 우리는 리액트 라우터 라이브러리를 사용한다. 기본 개념을 애래에서 참고하자. [React] React Router 페이지 이동 리액트 라우터 를 활용해서 아래와 같이 페이지 이동을 하면, 스크롤이 최상위로 가지 않고 이동된 위치에 고정되는 현상이 발생한다. html 코드 import { Link } ..

리액트(react)에서 html과 css를 활용하여 image를 배경화면으로 두고 앞쪽 가운데 글을 넣는 방법에 대해 적어보겠다. 다른 react/nodejs에 대한 기초 지식은 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 기본적으로 css는 module을 사용했다. module을 사용하면, 중복 현상이 일어나지 않아서 좋다. 사용법은 이름을 만들 때 .module.css를 붙여서 만들어주면된다. 그리고 아래와 같이 jsx에서 import styles from '모듈 위치' 로 불러와서 className 부분에 추가를 해서 사용하면 된다. import styles from './intro.module.css' const INTRO_IMAGE = '/images/miss..