Chart.js 적용법과 특징
·
추가 공부/Web
이번 국비 최종 프로젝트 관리자 페이지에메인 페이지에 차트로 대시보드로 보이도록 만들 예정이라 Chart.js 관련을 찾아보고자 찾아보았다.적용법과 특징을 확인해서 작성해둔다. Chart.js 특징1. 간단하게 사용가능사용자 친화적인 API를 제공쉽게 차트를 생성하고 구성가능 2. 다양한 차트 유형Chart.js는 다양한 차트 유형을 지원차트 유형으로는 선 그래프, 막대 그래프, 원형 그래프, 꺾은선 그래프 등 3. 반응형 디자인Chart.js는 반응형 디자인을 지원하여 다양한 디바이스와 화면 크기에 맞춰 차트가 자동으로 조정 4. 상호작용 가능사용자가 차트를 클릭하거나 마우스 오버 이벤트 처리가능사용자가 차트에 대한 추가 정보를 얻고 특정 데이터 강조 가능 5. 가벼운 라이브러리Chart.js는 가벼운..
Spring boot 사전 지식 채우
·
추가 공부/Web
1. Spring Framework란스프링 프레임워크(Spring Framework)는 JAVA를 위한오픈 소스 프레임워크로서 간단하기 스프링(Spring)이라고도 합니다.이는 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공한다고 합니다.(Spring == Spring Frameword)  2. Spring Framework의 특징은 다음과 같다.위키백과(Spring)경량 컨테이너로서 자바 객체를 직접 관리한다. 각각의 객체 생성, 소멸과 같은 라이프 사이클을 관리하며 스프링으로부터 필요한 객체를 얻어올 수 있다.스프링은 Plain Old Java Object 방식의 프레임워크이다. 일반적인 J2EE 프레임워크에 비해 구현을 위해 특정한 인터페이스를 구현하거나 상속을 받을 필요가 없어 기존에 ..
CKEditor5 사용해보기 2
·
추가 공부/Web
2. CKEditor 이미지를 서버에 저장하고 해당 내용을 출력해보기CKEditor_insert.jsp 글 작성  CKEditor.js이전 포스팅에서 import 한 Cktest와 editorConfig 를 js 파일에서 사용하기 위해 추가해주고 사용합니다.//editorConfig.js에서 CKEditor 설정 정보 불러오기import { editorConfig } from 'editorConfig';import { ClassicEditor } from 'CKtest';//CKEditor 생성console.log('CKEditor 생성');//CKEditor 생성하기위한 위치를 설정해줍니다.//editorConfig = 이전 포스팅에서 설정한 CKEditor의 설정입니다.ClassicEditor..
CKEditor5 사용해보기 1
·
추가 공부/Web
1. CKEditor 사용 준비하기CKEditor CDN 설정 및 import 설정 CKEditorConfig.js 만들기import { AccessibilityHelp, Autoformat, AutoImage, Autosave, BlockQuote, Bold, CloudServices, Essentials, Heading, ImageBlock, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, Paragraph, SelectAll, Si..
CKEditor5 연동
·
추가 공부/Web
이번 중간프로젝트에서 CKEditor 를 연동하지 않았지만추후 추가할 수 있기 때문에 공부해본다. 우선 아래에 CKEditor공식 사이트에서 지원하는 CDN을 추가해줍시다https://ckeditor.com/ckeditor-5/download/#cdn CKEditor 5 - Download Latest VersionDownload a ready-to-use CKEditor 5 Build. Install, download or serve a ready-to-use rich text editor of your choice.ckeditor.com   CDN이 추가되었다면 Script 태그에 type 속성 Importmap을 활용하여변수 이름을 지정하고 CDN 파일의 URL을 매칭 시켜줍니다. URL 매칭이 완..
JSP Selenium 사용해보기 3 Naver 지도 크롤링
·
추가 공부/Web
package craw;import java.time.Duration;import java.util.ArrayList;import java.util.Set;import org.openqa.selenium.By;import org.openqa.selenium.Keys;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.chrome.ChromeOptions;import org.openqa.selenium.support.ui.ExpectedConditions;import org.openqa.sele..
JAVA에서 mkdir 사용해보기
·
추가 공부/Web
이번 프로젝트를 하면서 이미지 폴더를 내 PC에 저장하는 방법을 사용하고 있다.허나 프로젝트를 공유할때 종종 주소 값이 다른 문제가 발생한다. 해당 문제의 발생을 줄이기 위해 java 에서 특정 주소에 폴더를 생성하는 코드를 작성하였다. 1. 내가 생성할 폴더명 지정 String[] folders = {"grade_folder","crew_img_folder","profile_img"}; //등급 이미지 폴더 , 크루 이미지 폴더 , 사용자 프로필 폴더 우선 String[] 문자열 배열로 생성할 폴더 이름을 저장해줍니다. 2. 서버 주소 불러오기String folder_path = sce.getServletContext().getRealPath("/"+data+"/"); getServletConte..
JSP Selenium 사용해보기 2
·
추가 공부/Web
이번에는 href 태그의 주소를 찾아 해당 링크로 들어가는 것이 아닌태그를 찾아 해당 태그를 클릭해서 페이지를 이동하는 방식으로 진행해보았다. 위 사이트에서 게시판 글 하나 클릭하고 아래 사진에서 글 제목과 내용을가져오는 코드를 작성했습니다. import java.time.Duration;import java.util.ArrayList;import java.util.List;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.support...
개발자가 되고 싶은 곰
'추가 공부/Web' 카테고리의 글 목록