전체 글
-
Javascript Toast Tree 에시 (무료 Tree 라이브러리 tui tree 예시)DEV/javascript 2022. 12. 18. 23:28
무료 Tree 라이브러리를 찾다가 Toast tree(tui tree)를 발견하여 사용해 보았다. 생각보다 허술하여 커스텀 해서 쓴 부분이 많았다. 이 글에서는 무료 Tree 라이브러리인 tui tree 예시를 작성해 두었다. sample.html sample.js const initTree = () => { /** * [트리 샘플 데이터] * text : 트리에서 출력되는 이름 * code : *임의로 생성한 값. 해당 트리 클릭 시, 특정 url이나 code값을 가져와야 한다면 Object 넣어서 쓰면 나중에 접근이 가능하다. * state : 해당 요소가 Root인 경우 해당 카테고리를 기본적으로 open 상태로 둘지, closed 상태로 둘지 결정. (해당 옵션을 넣지 않으면 default는 op..
-
CSS 이미지 비율 맞추기, 이미지 사이즈 맞추기 (object-fit)DEV/css 2022. 12. 18. 19:29
img { width: 300px; height: 150px; object-fit: cover; } object-fit fill (기본값) : 주어진 너비와 높이에 딱 맞도록 사이즈를 조절, 비율 조정 X contain : 가로세로 비율을 유지한 채로 사이즈가 조절, 비율 조정에 의해 빈 공간이 생김. cover : 가로세로 비율을 유지한 채로 사이즈가 조절, contain과 다르게 이미지를 확대해 컨테이너를 완전히 채움. none : 아무것도 하지 않고 본래의 이미지 사이즈를 유지함. 이미지가 사이즈가 큰 경우 중앙을 기준으로 사이즈를 조절함. scale-down none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절. * IE 지원 안한다고 알고 있음.
-
Chrome Extension 만들기 (크롬 확장 프로그램 만들기 / 등록)DEV/javascript 2022. 11. 30. 16:01
이번 프로젝트 솔루션에서 사람들은 필요로 하지만 지원하지 않는 기능이 있었다. 단지 열려있는 모든 탭을 닫아주면 되는 것인데 하나하나 x버튼을 눌러 닫아야 하는 불편함이 있었다. 해당 기능 구현이 어려운 것도... 리소스를 잡아먹는 것도 아닌데 왜 해당 기능을 지원하지 않는지 잘 모르겠다... 아무튼 해당 솔루션은 그 위치에 추가 기능으로 구현하기 어려웠고 다른 방법을 생각해냈다. 옛날부터 해보고 싶던 것, 바로 "크롬 확장 프로그램 (크롬 웹 스토어 앱) 만들기" 옛날에는 만들고 싶던 기능이 있었으나 작년의 나는 Javascript 하나 할 줄 몰랐기에... (사실 별거 아니었을 텐데 변명이다.) 아무튼 예전에 만들고 싶던 기능들은 모두 까먹었고... (기억나는 나머지는 필요도 없어졌다...) 이번 프..
-
React node로 react app 만들기 및 실행DEV/react 2022. 11. 29. 17:10
*node가 설치되어 있어야 함. react app을 만드는 명령어는 다음과 같다.npx create-react-app [앱 이름]// ** 위 create-react-app은 더이상 권장되지 않는다.// 1.vite로 createnpm create vite@latest [앱 이름]// 2. react 선택// 3. 원하는 구성 선택 (js, ts, ...) 설치 후 하단 명령어를 통해 해당 폴더로 진입 및 실행cd [앱 이름]// 패키지 다운로드npm installhttps://reactjs.org/docs/create-a-new-react-app.html Create a New React App – ReactA JavaScript library for building user interfacesre..
-
Javascript 바닐라JS에서 Excel 사용하기 (sheetJS 예제)DEV/javascript 2022. 11. 29. 10:54
이번에 순수 Javascript에서 (Vanilla Javascript) 엑셀 쓰는 라이브러리가 필요했다. 널리 쓰이는듯 한 sheetJs를 이용하여 간단한 예제를 작성해보았다. sheetJs Sample1.js (데이터 생성 및 저장) // Excel에 입력할 값은 다양한 형식으로 사용 가능하며, // 시트를 만들 때(데이터를 넣을 때) 형식에 맞는 함수를 사용해 주면 된다. // 아래 data는 단순 예시. let data = [ { key1: 'value1_1', key2: 'value1_2', }, { key1: 'value2_1', key2: 'value2_2', }, ... ]; const excel = async (data) => { // 1. workbook 생성 let wb = XLSX...