Frontend42 [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.. 2021. 4. 30. script에서 session 값 가져오기 HTML으로 화면을 만들던 중 session에 있는 값을 화면에 보여줘야 할 일이 생겼다. java에서는 getSession으로 가져오면 됬는데 script에서는 어떻게 가져오는거지?? 방법은 CDATA script 안에서 CDATA 선언하고 안에서 session.세션이름으로 가져오면 끄읕! 2021. 4. 27. 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.. 2021. 4. 22. [javascript] 문자열 포함 확인하기 /includes/match/indexOf/lastIndexOf 자바스크립트 다양한 방법으로 문자열 포함 확인하기 1. String.includes() var str = 'testofstring' str.includes('of') //true str.includes('st') //true str.includes('as') //false includes는 true/false 의 boolean 형태로 반환 해당 문자열을 포함하면 true, 없으면 false 단순하게 true, false 값만 필요할 때 사용 2. String.match() var str = 'testofstring' str.match('of') //["of", index: 4, input: "testofstring", groups: undefined] str.match('st') //["st", inde.. 2021. 4. 16. 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('!') .. 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.. 2021. 1. 30. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
