여우의 개발일지

구글 차트 만들어보기

잠든여우

2022. 8. 14. 23:02

|

URL 복사

안녕하세요 요즘 통계 부분 개발을 맡아서 하고 있고

차트 라이브러리는 구글 차트를 이용하여 개발하고 있습니다.

이 글에서는 중점적으로 다룰 내용은 제가 통계 부분을 개발하면서 알게 된 점,

느낀 점과 간단한 예제를 다뤄보겠습니다.

구글 차트에는 여러 가지 차트를 제공해 주고 있는데요.

여러 가지 차트 중에 파이 차트(Pie Chart)를 다뤄볼게요.

사실 사이트에 보면 바로 사용할 수 있도록

예제 코드가 많이 있으니 참고하면 좋을 것 같아요.

https://developers.google.com/chart

그럼 예제 코드를 살펴볼게요.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        /* 2차원 배열로 만들어서 데이터를 넣어도 됩니다. (아래 주석처리된부분) */
        // var data = google.visualization.arrayToDataTable(data);
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
        // 'titlt'뿐만 아니라 더 많은 option이 있습니다.
        // 저는 여기서 엄청 고생을했습니다.
        var options = {
          title: 'My Daily Activities'
        };

        /* 
            차트가 그려질 요소에 id값을 정확하게 적어주세요
            HTML에서 유일한 요소에 차트가 그려져야 되니깐 id로 지정하는게 좋아요
        */
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

https://jsfiddle.net/api/post/library/pure/

위 예제는 구글 차트 사이트에서 제공하는 예제입니다.

option에 들어갈 내용들은 나중에 정리해서 올리도록 하겠습니다.

위에 링크를 통해서 실행을 시키면 아래에 사진처럼 차트가 예쁘게 그려집니다.

나중에 설명하겠지만 차트에 보이는 모든 건 option에서 컨트롤할 수 있어요.

간단하게 오른쪽에 있는 범례를 왼쪽으로 보내려면 legend: 'right'를 추가해 주면 됩니다.

legend에 값은 'bottom', 'labeled', 'left', 'none', 'right', 'top'

legend.position	bottom	범례의 위치가 차트 아래쪽으로 배치됩니다.
	labeled	조각 데이터 값에 연결하는 선을 그립니다.
	left	범례의 위치가 차트 왼쪽으로 배치됩니다.
	none	범례가 보이지 않습니다.
	right	범례의 위치가 차트 오른쪽에 배치됩니다.
	top	범례의 위치가 차트 위쪽에 배치됩니다.

정석으로 범례의 위치를 지정하면 legend: {position: 'right'} 이렇게 작성하면 되고

legend: {position: 'labeled'} 설명은 조금 생소할 수 있어요.

위에 사진처럼 각 조각에 연결되는 선이 그려지고, 이것도 css나 js로 충분히 제어가 가능합니다.

(역시 갓 Stack Overflow)

제가 구글 차트를 이용하여 개발하면서 느낀 점이 여기서 나옵니다.

구글 차트 옵션을 잘만 사용하면 원하는 차트를 쉽게 그릴 수 있겠다.

라는 생각을 하게 되었습니다.

* 구글 차트를 그릴 때 그려질 요소가 완전히 그려지고 그려야 예제에 보이는 예쁜 차트가 그려집니다.

(차트를 그릴 때 요소가 그려지지 않은 상태이면 한쪽이 찌그러진 파이를 볼 수 있습니다..)

저작자표시 변경금지 (새창열림)

유닉스 타임 스탬프 변환하기

잠든여우

2021. 11. 3. 18:27

|

URL 복사

날짜 형식으로 많이 사용하는게 많이 있어요.

그 중에 유닉스 타임 스탬프에 대해서 적어봅니다.

유닉스 타임 스탬프란? - 위키백과

1970년 1월 1일 00:00:00부터 현재까지 초로 환산한 수

오늘은 자바스크립트로 유닉스 타임 스탬프으로 변환하고

다시 날짜로 변환하는 코드를 작성할거에요.

먼저 간단하게 HTML코드를 작성해줍니다.

index.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<title>유닉스 타임스탬프변환</title>
        
		<!-- jQuery CDN -->
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        
		<!-- CSS -->
		<link href="./assets/css/index.css" rel="stylesheet" />

		<!-- Javascript -->
		<script src="./assets/js/index.js"></script>
	</head>
	<body>
		<div>현재시간: <span id="time_now"></span></div>
		<div>현재 -> 타임스탬프: <span id="conv_timestamp"></span></div>
		<div>타임스탬프 -> 현재: <span id="conv_times"></span></div>
	</body>
</html>

Javascript를 좀 더 간편하게 사용하기 위하여

jQuery라는 Javascript 라이브러리를 사용합니다.

오늘 글의 핵심!! index.js를 볼게요.

index.js

"use strict";
$(function(){
    const today = new Date();

    // 현재시간을 구하는 함수
    const time_now = () => {
        // 년, 월, 일
        let year = today.getFullYear();
        let month = ( '0' + ( today.getMonth() + 1 ) ).slice(-2);
        let day = ( '0' + today.getDate() ).slice(-2);

        // 시, 분, 초
        let hour = ( '0' + today.getHours() ).slice(-2);
        let minutes = ( '0' + today.getMinutes() ).slice(-2);
        let seconds = ( '0' + today.getSeconds() ).slice(-2);

        // 결과값 합치기
        let merge = ''.concat(year, '-', month, '-', day, ' ',
                    hour, ':', minutes , ':', seconds );
        
        // 결과값 리턴
        return merge;
    };

    // 타임스탬프를 구하는 함수
    const timestamp_conv = (time) => {
        let timestamp = new Date(time);
        
        // 결과값 리턴
        return timestamp / 1000;
    };

    // 타임스탬프를 현재시간으로 바꾸는 함수
    const times_conv = (time) => {
        time = new Date( time * 1000 );

        // 년, 월, 일
        let year = time.getFullYear();
        let month = ( '0' + ( time.getMonth() + 1 ) ).slice(-2);
        let day = ( '0' + time.getDate() ).slice(-2);

        // 시, 분, 초
        let hour = ( '0' + time.getHours() ).slice(-2);
        let minutes = ( '0' + time.getMinutes() ).slice(-2);
        let seconds = ( '0' + time.getSeconds() ).slice(-2);        

        // 결과값 합치기
        let merge = ''.concat(year, '-', month, '-', day, ' ',
                    hour, ':', minutes , ':', seconds );
        
        // 결과값 리턴
        return merge;
    };

    let timenow = time_now();
    let timestampconv = timestamp_conv( timenow );
    let timesconv = times_conv( timestampconv );

    $( '#time_now' ).text( timenow );
    $( '#conv_timestamp' ).text( timestampconv );
    $( '#conv_times' ).text( timesconv );
    
});

주석과 함께 코드를 보면 좀 더 쉽게 이해할 수 있어요!

코드를 작성한 후 브라우저에서 index.html를 봅니다.

아래 사진처럼 화면에 보여요.

위에 HTML 코드만 작성 했을땐 시간이 보이지 않아요.

하지만 index.js에서 시간을 처리한 후 보여줘요.

대략적인 코드를 설명해 드릴게요.

위에 "const" 이 부분을 익명 함수 라고합니다.

(const대신 let / var을 사용할 수 있음)

먼저 현재 시간을 구합니다. (new Date를 사용)

slice라는 함수를 사용 하는데요

slice을 너무 잘 정리해주신 곳이 있었어요!

(아래에 참고 자료를 참고하세요)

현재 시간에 사용될 텍스트를 전부 합칩니다.

합칠때는 concat 이라는 함수를 사용했어요.

그리고 리턴값으로 합친 텍스트를 넘겨줍니다.

이번에는 타임스탬프를 구하는 함수를 만들게요.

new Date(time)을 이용하여 아까 Date형식으로 바뀌요.

그리고 나누기 1000을 하고 몫만 취합니다.

(그럼 초만 남기고 밀리초는 지워짐)

이제는 이 타임스탬프 값을 시간으로 바꿔줄게요.

이 타임스탬프 데이터를 날짜 형식으로 바꾸는데

여기에 아까 나눈 1000을 곱해줍니다.

(원래 데이터가 되기위하여)

그러면 아까 현재 시간을 구할때 썼던 방식으로

똑같이 진행하고 결과값을 리턴해주면 끝!

이번 글은 생각보다 짧게 작성 되었네요.

이것으로 이번 글을 마치도록 할게요.

참고

1. 자바스크립트 익명 함수 알아보기

2. silce함수 알아보기

게으른여우가 운영중인 웹 개발 커뮤니티 오픈채팅방!

누구나 들어올수 있고 채팅에 제한은 따로없다!

개발자를 준비중인 예비 개발자, 현직 개발자, 개발이 궁금한 사람 등등

웹 개발 커뮤니티 링크를 통해서 쉽게 참여할 수 있어요!

저작자표시 변경금지 (새창열림)

Spring Boot 비동기 메일 전송 구현 (구글 메일)

잠든여우

2021. 10. 9. 20:37

|

URL 복사

이전 글을 작성하다가 다른 사이트에서는

메일이 전송될때 지연시간이 없어요.

그런데 제가 구현한 메일 전송에서는 지연시간이 발생해서

이 문제를 수정하려고 합니다.

지연시간을 없애는 방법은 비동기 처리하여

눈으로 보기에는 지연시간이 없다고 느끼게 됩니다.

메일 전송에 대한 기본적인 내용은

이전 글에서 미리 보고오시면 좋아요!

Spring Boot 메일 전송 구현 (구글 메일)

비동기 처리를 위해 3개 파일에서 부분적으로 수정했어요.

MailauthApplication.java

MailauthController.java

MailService.java

이렇게 위에 세가지 부분을 수정했어요.

먼저 MailService.java 를 수정했어요.

src/main/java/com/mailauth/MailService.java

package com.mailauth;

import java.util.concurrent.ThreadLocalRandom;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.MailException;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Repository;

@Repository
public class MailService {

	@Autowired
	private JavaMailSender javaMailSender;

	@Async
	public void sendMail( String strTo ) {
		// 받는사람을 담을 변수 선언
		String to = strTo;
		
		try {
			// 텍스트로 구성된 메일을 생성할때
			SimpleMailMessage simpleMessage = new SimpleMailMessage();
			
			// 인증키 6자리 랜덤으로 생성 후 초기화
			String authKey = Integer.toString( ThreadLocalRandom.current().nextInt(100000, 1000000) );
			
			// 받는사람 설정
			simpleMessage.setTo( to );
			
			// 제목
			simpleMessage.setSubject("[메일 인증] ㅇㅇㅇㅇ에서 인증번호를 보냈습니다.");
			
			// 메일 내용
			simpleMessage.setText("인증번호는 " + authKey + " 입니다.\n정확하게 입력해주세요.");
			
			System.out.println(javaMailSender);
			// 메일 발송
			javaMailSender.send(simpleMessage);
		} catch (MailException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

수정된 부분은 public int였던것을 public void로 바꿔서

return 값을 제거해줬어요.

그리고 @Async를 추가해서 비동기 처리로 바꿨어요.

이제 MailauthController.java 를 수정할게요.

src/main/java/com/mailauth/MailauthController.java

package com.mailauth;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;


@Controller
public class MailauthController {	
	
	@Autowired
	MailService ms;
	
	/* main */
	@RequestMapping( {"/main.do", "/"} )
	public ModelAndView main() {
		System.out.println( "main() 호출" );
		
		ModelAndView modelAndView = new ModelAndView( "index" );
		return modelAndView;
	}
	/* mail_ok */
	@RequestMapping( "/mail_ok.do" )
	public ModelAndView mail_ok(HttpServletRequest req) {
		System.out.println( "mail_ok() 호출" );
	    ms.sendMail( req.getParameter( "email" ) );
		
		ModelAndView modelAndView = new ModelAndView( "mail_ok" );
		return modelAndView;
	}
}

컨트롤러에서는 mail_ok.do부분을 수정했어요.

return되는 값이 없으니

ms.sendMail( req.getParameter( "email" ) );로 수정

그리고 결과값을 mail_ok로 보내줬던 코드를 제거

이렇게 컨트롤러를 수정했어요.

그리고 마지막으로 Application을 수정할게요.

src/main/java/com/mailauth/MailauthApplication.java

package com.mailauth;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableAsync;

@EnableAsync
@SpringBootApplication
public class MailauthApplication {

	public static void main(String[] args) {
		SpringApplication.run(MailauthApplication.class, args);
	}
}

Application에서는 어노테이션만 추가했어요.

@EnableAsync를 추가해서 비동기 처리를 가능하게 해줬어요.

마지막으로 views에 있는 mail_ok.jsp를 수정할게요.

src/main/webapp/WEB-INF/views/mail_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
	alert('메일이 전송이 완료되었고\n메일이 오지않을경우 다시시도해주세요.');
	location.href="/main.do";
</script>

위에 코드로 짧게 수정되었습니다.

결과값을 받는 로직이 아닌 스크립트로 바로 처리 후

비동기 처리로 메일을 전송하는 방식을 택했어요.

결과는 아래와 같습니다.