티스토리

#006888

검색하기

블로그 홈

#006888

r-0o0-j.tistory.com/m

개발 정리 블로그 배구 정리 블로그

구독자: 9

방명록 방문하기

주요 글 목록

[React] React-Router로 Git Page 설정하기 React 앱을 Git Page에 배포하면서 react-router를 이용해 라우터를 설정하고 Git page에 올리면 Tada 하고 배포가 잘 될꺼 같지만 빈화면이 나온다... https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing Deployment | Create React App npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths l.. 공감수 1 댓글수 0 2022. 10. 20.
[React] Chart 라이브러리 비교하기 Reacts에서 트리맵 차트를 사용하기 위해서 트리맵 차트를 제공하는 여러 가지 라이브러리를 찾아보고 데이터를 쉽게 다루면서 쓸 수 있는 라이브러리 세 가지를 비교하여 봤습니다. 1. React Google Chart 2. React Apex Chart 3. high Charts React Official 각 라이브러리마다 Column, Line, Treemap 차트를 비교해보겠습니다. npm trends에서 각각의 라이브러리가 공식적으로 발표한 React 라이브러리 다운로드 비교하여 보았을때 high chart가 많이 다운 받은 것으로 보여집니다. 1. React Google Chart [ 1 ] 설치 yarn add react-google-charts # or npm i react-google-cha.. 공감수 0 댓글수 0 2022. 3. 21.
[React] Error : A component is changing an uncontrolled input of type text to be controlled index.js:1451 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components 구성 요소가 제어할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않음에서 제어됨으로.. 공감수 0 댓글수 0 2021. 10. 12.
[React] Error : Element type is invalid: expected a string Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. React로 개발하다가 오랜만에 본 에러 같은데... 뭔지 모르겠는 그런 에러.... 프로젝트 코드를 작성할 때는 VSCode 스니펫을 이용해서 기본 작성이 된 상태에서 하다보니 거의 만나기 어려운 에러인데 간단한 테스트를 할 때 codesand.. 공감수 0 댓글수 0 2021. 10. 7.
React Quill Image Resize Code 2021.04.22 - [[YERIEL] 개발일기/React] - React-Quill Image resize React-Quill Image resize React project 중 Text Editor를 추가하는데 한글 지원 되는 Editor가 React-quill 밖에 없어서 React-quill 적용 중 React Quill로 이미지를 리사이징하기 위해 모듈을 추가하는데 이것때문에 딥빡 할 줄이야...... r-0o0-j.tistory.com 이미 React Quill Image Resize에 대해서 블로그를 썼지만 전체 코드 공유에 대해서 댓글로 요청이 많아서 2탄으로 code에 대한 블로그를 작성하려고 합니다. 제 code는 react 함수형 컴포넌트로 되어 있고 Container - Pres.. 공감수 0 댓글수 2 2021. 8. 19.
[React] Html2Canvas를 이용하여 화면 캡쳐하기 a tag와 Html2Canvas 라이브러리를 사용해서 react 화면 캡쳐 기능 만들기 1. a Tag https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. developer.mozilla.org a tag의 href와 download를 이용해서 image를 다운 받을 수 있습니다. 2. Html2Canvas https://html2canvas.hertzen.com/ html2canvas - Screenshots .. 공감수 0 댓글수 0 2021. 7. 20.
[React] 페이지 이동시 scroll 복귀 history.push를 통해서 page를 이동하는 과정에서 scroll이 아래에 있는 경우 페이지 이동 할 때 그대로 유지가 되는 문제를 발견 어떻게 하면 좋을까 고민하다가 useEffect를 사용해서 component 렌더링시 스크롤을 위로 복귀 시키는 코드 추가 import React, {useEffect} from 'react'; const ScrollOn = ()=>{ useEffect(()=>{ document.getElementById('scroll-container').scrollTop=0; },[]) return ( scroll on ) } id가 scroll-container인 div는 scroll이 생기는 div이고 이 div를 찾아 스크롤 위치를 0으로 지정 해주면 간단히 끝 공감수 0 댓글수 0 2021. 5. 20.
React Material-UI Sort Table Custom Hook 이용하기 Material-UI를 이용해서 오름차순, 내림차순이 가능한 정렬 테이블을 만드는 중에 React의 장점 중 하나가 component를 재사용 할 수 있는 것인데 Sort 기능을 사용하기위해서 똑같은 함수를 재선언 하여 사용하고 있는 제 자신을 발견 했습니다. 두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리하여 사용하는데 React는 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다! 1. Material-UI Sort Table Material-UI에서 제공하는 Sort Table코드를 제가 사용하기 위해서 분석한 코드 입니다. SortTableContainer... 공감수 2 댓글수 0 2021. 5. 11.
[React] 라이브러리 없이 Div Slideshow 구현하기 메인 화면에 주요 컨텐츠 Image와 약간에 설명이 있는 div를 slideshow로 보여주고 싶어서 찾아보니 custom hook을 사용하거나 다양한 library를 이용하는 코드들이 대부분이었다. 사실 library로 손쉽게 구현하고 싶었으나 library를 더 추가하고 싶은 마음이 없어서 조금더 찾아보니 W3에서 html와 javascript로 작성해준 slideshow 코드를 발견했다. www.w3schools.com/w3css/w3css_slideshow.asp W3.CSS Slideshow Displaying a manual slideshow with W3.CSS is very easy. First, set the slideIndex to 1. (First picture) Then call s.. 공감수 1 댓글수 0 2021. 4. 30.
React-Quill Image resize React project 중 Text Editor를 추가하는데 한글 지원 되는 Editor가 React-quill 밖에 없어서 React-quill 적용 중 React Quill로 이미지를 리사이징하기 위해 모듈을 추가하는데 이것때문에 딥빡 할 줄이야....ㅠㅠㅠ yarn add quill-image-resize-module 먼저 모듈 설치를 합니다. React-quill image resize를 검색하면 튜토리얼이나 도큐먼트에 나오는 모듈입니다. import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; import ImageResize from 'quill-image-resize-module' Quill.registe.. 공감수 3 댓글수 13 2021. 4. 22.
Material-UI TextField 속성 error와 JavaScript test()를 이용한 validation (유효성검사) JavaScript가 제공하는 test메서드와 TextField가 제공하는 error와 helperText를 이용하여 간단히 validation 구현 JavaScript 정규식표현을 이용한 test메서드 활용하기 let checkSpc = /[~!@#$%^&*()-=_+{}|,./?;':"]/; let checkKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; let checkEng = /[a-z | A-Z]/; //대문자 소문자 구분 checkSpc.test('a') // false checkSpc.test('ㄱ') // false checkSpc.test('!') // true checkKor.test('a') // false checkKor.test('ㄱ') // true checkKor.test('!') .. 공감수 1 댓글수 0 2021. 3. 23.
Material-UI Table Header 고정하기 Material-ui Table 속성 StickyHeader 이용하기 태그를 이용하여 header를 고정 시키려면 style의 top의 값을 이용하여 직접 계산해서 만들어줘야하는데 Material-ui의 Table에는 친절하게 StickyHeader가 있다. 아래의 코드는 height의 크기를 지정하고 scroll로 table을 내리면 헤더가 고정되지 않고 전부 내려간다. import React from 'react'; //material import import Paper from '@material-ui/core/Paper' import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; i.. 공감수 5 댓글수 0 2021. 1. 30.
React에서 Material-UI 이용하기 1. Material-UI 소개 Material-UI이는 React UI Framework 종류 중 하나입니다. Material-UI 홈페이지에서도 Material-UI를 React components for faster and easier web development. Build your own design system, or start with Material Design. 라고 소개하고 있네요. 2. Material-UI 설치 1. React 프로젝트 생성 //npm 이용 npm init react-app material-tutorial //yarn 이용 yarn create react-app material-tutorial npm과 yarn 둘 중 편한것을 이용하여 프로젝트를 생성합니다. 2. M.. 공감수 0 댓글수 0 2021. 1. 26.
리액트에서 화살표 함수 사용하기 import React from 'react'; const App = () => { return ( ); }; export default test; javascript 함수표현 function 키워드에 비해 구문이 짧고 this, argument, super, new.targer 을 바인딩 하지 않는다. 익명함수 ( 매개변수 ) => { statement } //매개변수가 없을때 () => { statement } statement의 유일한 문장이 return 이면 return과 { } 를 생략 가능하다. const { input, todos } = useSelector(({ todos }) => ({ input: todos.input, todos: todos.todos, })); { } 안에 반드시 리.. 공감수 0 댓글수 0 2020. 9. 19.
'React' must be in scope when using JSX import 부분에서 React 없이 { createContext, useState}만 있었더니 'React' must be in scope when using JSX 에러 발생 공감수 0 댓글수 0 2020. 9. 16.
error : Expected an assignment or function call and instead saw an expression no-unused-expressions 대충 이해하자면 사용하지 않은 문법이나 기능을 불렀다고 예상한다는거 같음... 오타거나 문법이 틀렸거나.. 역시 문법이 틀렸었어.... 괄호 종류의 기능들을 아직 모르겠다...ㅋㅋ ㅜㅜㅠㅠ 공감수 0 댓글수 0 2020. 9. 3.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.