React (13) 썸네일형 리스트형 Next14 App Router react-quill 사용 (build 시 prerendered error 해결) react-quill 이란?- html editor를 활용할 . 수있는 라이브러리- 러닝커브가 낮아 많이 사용- next13에서 사용한 코드를 next14 App Router로 작성 중 build 시 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생 react-quill 사용방법1. react-quill 설치yarn add react-quill 2. 코드 작성//Next13import ReactQuill from "react-quill";import "react-quill/dist/quill.snow.css";const Editor = () => { const Quill = ReactQuill.Quill;.. React - Recoil 사용 중 놓쳤던 특징 더보기 Recoil 특징 - 해당 상태를 구독하는 구성요소를 가진 함수가 리렌더링된다. 문제상황 회원가입 후 Recoil을 사용하여 회원의 유무를 판단하고 PrivateRoute와 PublicRoute에서 useRecoilState를 사용했더니 다음 페이지로 넘어가야 되는 부분이 렌더링 되고 나서 PrivateRoute와 PublicRoute가 또 실행되어 원하지 않는 페이지로 이동 과정 1. PublicRoute 와 PrivateRoute 에서 UserStateCheck Recoil 변수를 사용 x => token 값의 유무로 판단 // PublicRoute.js const userCheck = useRecoilValue(UserCheckState) return userCheck ? element : .. Axios - http -> https 변경 시 오류 문제상황 SSL 인증서를 붙혀서 통신 URI가 `https://api.salesync.site`로 변경됨 해당하는 URI에 맞춰 JS 요청 엔드포인트 변경 ./src/api/BaseUrl.js 변경 전 const URL = "[http://api.salesync.site"](http://api.salesync.site"); export default URL; 변경 후 const URL = "[https://api.salesync.site"](https://api.salesync.site"); export default URL; 오류 배포시 통신 오류가 뜨고 데이터를 조회할 수 없음 분명 `https`로 변경했으나 `http`로 통신이 감 # 해결시도1 😀참조 : [https://velog.io/@shin.. React - Flask - Mysql 연동 1. 프로젝트 생성 react C:\react>npx create-react-app data-app C:\react>npm start Flask C:\react>mkdir server C:\react>pip install Flask DB workbench 사용하여 database를 만든 후 table을 생성했습니다. create database testConnection; use testConnection; CREATE TABLE `testTable` ( `id` int unsigned AUTO_INCREMENT NOT NULL , `name` int unsigned NOT NULL , `age` varchar(30) NOT NULL , PRIMARY KEY ( `id` ) ); 데이터 삽입 INSERT.. React - Hooks _ useState / useEffect /useRef Hooks : 함수형 컴포넌트에서 클래스형 컴포넌트에서 제공하는 기능(state,ref, life cycle function 등)을 지원하기 위해서 도입된 함수 1) useState : 함수형 컴포넌트에서 상태(state)를 관리하기 위해서 사용 [상태변수 초기값, 상태변수를 변경하는 함수 ] 배열을 반환하는 함수 const [name,setName] = useState(''); App.js import Info from './Info'; function App() { return ( ); } export default App; Info.js => 사용자이름과 별명을 관리하는 컴포넌트를 구현 import { useState } from "react"; function Info() { const [name.. React - Ref Ref : DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는데 사용되는 특별한 속성 render 메소드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공 1. 사용방법 1) 콜백 ref useRef 를 이용 class MyComponent extends Component { const handler = () => { this.myref.focus(); } render() { return this.myinput = x } />; } } 2) React.createRef() API를이용 => current 사용하는거 잊지 말기 class MyComponent extends React.Component { constructor() { super(); this.myref = R.. React - 이벤트 핸들링 이벤트 핸들러 : 이벤트가 발생했을 때 처리되는 함수 1. 리액트에서 이벤트를 사용할 때 주의사항 1) 이벤트 이름은 카멜 표현식을 사용 첫 글자를 대문자로 적되, 맨 앞에 오는 글자는 소문자로 표기하는 것 ex) onClick , onChange... 2) 이벤트 핸들러로 자바스크립트 코드를 사용할 수 없고, 함수 형태로 전달 HTML ⇒ react ⇒ console.log('클릭되었습니다.') } /> 3) 이벤트는 DOM 요소(element)에만 사용이 가능 { ... } }> ... ⇐ div는 HTML DOM 요소이므로 이벤트 설정이 가능 { ... }> ... ⇐ MyComponent는 컴포넌트이므로 이벤트 설정이 불가 2. 리액트에서 처리할 수 있는 이벤트 종류 https://legacy.r.. React - 상태변수 state / setState() 상태변수 state : 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값 상태 변수의 값이 변경되면 리렌더링이 발생 클래스형 컴포넌트는 setState() 메소드를 이용, 함수형 컴포넌트는 useState() 훅 함수가 반환하는 함수를 이용해서 값을 변경해야 함 1. 클래스형 컴포넌트 App.js import Counter from './Counter'; function App(){ return( ); } export default App; 1) 클래스형 컴포넌트에서 state 사용 import { Component } from 'react'; class Counter extends Component{ constructor(props){ super(props); this.state = { number : .. 이전 1 2 다음
