본문 바로가기

분류 전체보기143

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... 2021. 5. 11.
Spring Boot - 외부 API Json 방식으로 호출 하기 도서관 정보 나루에서 제공해주는 API를 json 방식으로 호출하여 화면에 보여주기 https://www.data4library.kr/ 도서관 정보나루 function setCookie( name, value, expiredays ) { var todayDate = new Date(); todayDate.setDate( todayDate.getDate() + expiredays ); document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" } function closeWin(idx www.data4library.kr 프로세서 흐름 : 도서관 이용자의 최근 대여 도서 5건의 isbn.. 2021. 5. 6.
[Javascript] {} to [] Javascript Object to List {} : Object [] : List const a = {star:1, moon:2, sun:3} const b = Object.entries(a) console.log(b) //[["star",1] "moon",2], ["sun",3]] const c = Object.keys(a) console.log(c) //["star", "moon", "sun"] const d = Object.values(a) console.log(d) //[1, 2, 3] 2021. 4. 30.
[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.
728x90
반응형

티스토리툴바