[Javascript] Full calendar(스케줄 달력)의 사용법

안녕하세요. 명월입니다. 이 글은 웹에서의 full calendar(스케줄 달력)의 사용법에 대한 글입니다. 우리가 웹 프로그램을 작성하게 되면 보통 네이버 같은 포털 사이트보다 회사나 여러가지 그룹등에서 사용하는 커뮤니티 사이트나 일정 관리 사이트가 많이 개발할 듯 싶습니다. 그 프로젝트에서 가장 많이 쓰이는 프레임워크 라이브러리가 WYSIWYG 에디트로 웹 환경에서 메모장 같이 사용되는 에디트 기능이라고 생각합니다만, 그 외에는 아마 스케줄을 설정하는 달력 프레임워크 라이브러리가 아닐까 생각합니다. 달력 프레임워크에 관해서도 여러가지 프레임워크가 존재합니다만, 개인적으로 full-calendar라는 라이브러리가 가장 편하지 않을까 싶어 소개하고자 합니다. 링크 - https://fullcalendar..

Open source/Javascript, Jquery, CSS 2021. 7. 15. 20:20

[Javascript] 그래프 오픈 라이브러리(jqplot)

안녕하세요. 명월입니다. 이 글은 그래프 오픈 라이브러리(jqplot)에 대한 글입니다. Jqplot의 관한 글은 제가 5년전에 처음 소개하고 잊고 지내다가 지금에서야 Jqplot에 대한 자세한 소개와 설명을 합니다.최근에는 그래프 관련 오픈 라이브리러가 워낙 많아서 jqplot보다 좋은 라이브러리가 참 많습니다. 예를 들면 google chart도 있고 high chart는 정말 많이 사용하는 그래프 라이브러리입니다.high chart는 유료이고, google chart는 아직 저도 다루어 보지 않아서 잘 모르겠습니다. 찾아보니 high chart도 무료로 사용할 수 있는 영역이 있네요.jqplot은 정말 가볍고 싸게 사용할 수 있는 차트이지 않을까 싶습니다. 최근 사이트 관리도 안 하나 봅니다. 엉망..

Open source/Javascript, Jquery, CSS 2020. 2. 24. 22:38

[Javascript] 브라우져 화면 캡쳐 라이브러리(html2canvas)

안녕하세요. 명월입니다. 이 글은 Javascript에서 브라우져 화면 캡쳐 라이브러리(html2canvas)에 대한 설명입니다. 웹 프로그램을 만들어서 서비스를 할 때, 예상치 못한 버그를 만날 때가 있습니다. 그 때마다 유저가 어떤 방식으로 조작을 하다가 에러가 발생했다고 피드백을 받는 경우가 많은데 아무래도 화면 캡쳐까지 이루어지지 않을 경우 버그를 찾기 힘들때가 있습니다. 그 때, 이 캡쳐 라이브러리를 통해서 브라우저 상태를 캡쳐해서 서버로 전송을 하게 되면 많이 유용하게 사용할 듯 싶습니다. 링크 - https://html2canvas.hertzen.com screen shot Hello world! 예제 screen shot 여기까지 Javascript에서 브라우져 화면 캡쳐 라이브러리(htm..

Open source/Javascript, Jquery, CSS 2019. 11. 22. 19:57

[Javascript] Select2 (Select searching, multiselect, ajax)

안녕하세요. 명월입니다. 이 글은 Javascript 라이브러리 Select2 (Select searching, multiselect, ajax)에 관한 글입니다. 우리가 웹 프로그램을 하면서 유저로 부터 데이터를 받기 위해서는 input textbox, checkbox 또는 textarea, select 오브젝트 등을 많이 이용합니다. 그 중에서 input textbox를 가장 많이 이용하겠지만, 주어진 데이터를 선택하기 위한 select 오브젝트도 많이 사용될 듯 싶습니다. 일반 select를 사용하기 되면 아래와 같은 이미지가 되겠네요. 일단은 예제로 option을 40개 정도 만들었는데 select에 붙였습니다. 사실 이렇게 써도 문제가 되지는 않습니다. 근데 40개일 뿐인데도 select opt..

Open source/Javascript, Jquery, CSS 2019. 8. 27. 18:25

[Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리)

안녕하세요. 명월입니다. 이 글은 Javascript에서 날짜 포맷 설정하는 방법(moment 라이브러리)에 대한 글입니다. 웹에서 날짜 포맷을 설정하는 방법은 웹서버에서 설정해서 표시하는 방법과 클라이언트(브라우저)에서 설정하는 방법이 있습니다. 웹 요청(Web request)로 날짜를 표시하는 방법에 대해서는 그냥 웹서버에서 해야하지만 ajax로 날짜 데이터를 받거나 클라이언트 내에서 날짜 포맷을 설정하는 경우에는 Javascript로 처리해야합니다. 링크 - [C#] 날짜 포맷 링크 - [Java] 날짜 포멧 설정(SimpleDateFormat) 기본적으로 Javascipt로 날짜를 표시하면 다음과 같이 표시됩니다. 저같은 경우는 PC OS가 일본어 버젼이라 Japan standard로 표시되네요...

Open source/Javascript, Jquery, CSS 2019. 8. 22. 23:27

[Javascript] 알람 메시지 라이브러리(toastr 라이브러리)

안녕하세요. 명월입니다. 이 글은 알람 메시지 라이브러리(toastr 라이브러리)에 관한 글입니다. 사실 알람 메시지는 Javascript에서 alert 함수로 사용할 수 있습니다. 그러나 alert 함수는 호출될 때 스크립트가 멈추기도 하고 비동기(setTimeout)을 사용할 수도 있습니다만 먼저 모양이 이쁘지가 않습니다. 이걸 좀 이쁘게 또 부트스트랩의 디자인과 비슷한 알람 라이브러리가 toastr 라이브러리입니다. 링크 - https://github.com/CodeSeven/toastr toastr에서 메시지를 호출하는 함수는 다음과 같습니다. 함수명 예제 toastr.info info (클릭 해보세요!!) toastr.success success (클릭 해보세요!!) toastr.warning ..

Open source/Javascript, Jquery, CSS 2019. 8. 21. 23:59

Google OAuth 사용법

안녕하세요. 명월입니다. 이 글은 Google의 oAtuh2를 이용하는 방법에 대한 글입니다. 최근 로그인 인증 기능에 대해서 대형 포털 혹은 소셜 등에서 많이 제공하고 있습니다. 간단하게 우리가 뉴스 기사 등에 댓글을 달아도 굳이 그 사이트에 로그인이 아닌 Naver나 Daum, 페이스북, 구글 로그인 만으로 댓글을 달 수 있습니다. 그 기능에 oAuth2를 통한 로그인 기능입니다. 저는 구글의 oAuth2를 하는 방법에 대해 소개를 하지만 oAuth2는 거의 표준이기 때문에 다른 포털에서도 90% 비슷하게 사용할 수 있습니다. oAuth2를 이용하기 위해서는 먼저 Google console에 접속하셔서 어플리케이션 등록을 해야합니다. google console - https://console.deve..

Open source/Javascript, Jquery, CSS 2019. 6. 18. 09:00

[CSS] 구글 폰트 (Google font) 이용하기

안녕하세요. 명월입니다. 이 글은 구글 폰트에 대한 소개하는 글입니다. 우리가 홈페이지던가 웹 페이지를 만들 때 폰트를 신경 안 쓸 수가 없습니다. 특히 블로그에 글을 작성할 때는 더욱더 신경을 씁니다. 왜냐하면 웹 문서가 아무리 사진과 동영상이 많아져도 아직은 주류가 글이고 글씨 폰트로 블로그에 대한 품격이 보이기 때문입니다. 예전에는 무료 폰트가 많지 않아서 한글날에 무료 배포 폰트던가 웹 사이트를 검색해서 폰트 나눔을 한다고 하면 받아서 사용하곤 했었습니다. 무료 폰트도 좋은 폰트가 많았는데 이상하게 오래 쓰지를 못하겠더라고요. 그나마 제가 블로그 개선 전에 필기체 같은 무료 폰트 구해서 사용했었는데, 글이 많아지면 눈이 아프더라고요.. 폰트 때문에 가독성도 많이 떨어지고 떨어지니 글을 끝까지 읽지..

Open source/Javascript, Jquery, CSS 2019. 5. 31. 22:33

JqGrid

안녕하세요. 명월입니다. 이번에는 Jquery를 이용한 grid를 사용해 보도록 하겠습니다. 실제 우리가 웹을 통해 도표적인 수식 값등을 나타낼 때는 table 태그를 사용해서 표를 작성해서 나타내는 것이 보편적이고 가장 많이 하는 형태입니다. Grid의 경우는 의외로 모듈이 무겁고 설정하기 까다롭기 때문에 실제로는 많이 사용하지는 않습니다. 그러나 그런만큼 장점 또한 분명히 있기 때문에 정말 필요하다 싶을 때 사용하면 되겠습니다. 먼저 Grid의 장점이라고 하면 제일 먼저 소트기능입니다. 물론 테이블 내에서도 우리가 소트 기능을 만들 수 없는 것은 아니지만 꽤 많은 시간을 할애해서 만들어야 하기 때문에 간단한 테이블에서는 만들기가 꺼려지는 것입니다. 그럴 때 그리드를 가져와서 사용하면 편하겠습니다. 먼..

Open source/Javascript, Jquery, CSS 2015. 7. 14. 09:00

Jquery Mobile

안녕하세요. 명월입니다. 이번 시간에는 저번 Jquery-UI에 이어 Jquery-Mobile에 대해서 알아보도록 하겠습니다. 우리가 web을 작성하고 각자 핸드폰으로 접속을 해보면 우리가 늘 보던 모바일 스타일의 웹 문서가 아닌, 글씨가 매우 작은 형식의 웹문서로 보이겠습니다. 이는 모바일의 해상도 문제인데 스마트폰의 크기는 작지만 해상도가 PC모니터와 비교해서 떨어지지가 않고 높은 퀄리티의 화면이기 때문에 브라우저는 저 해상도로 인식하지 않고 문서를 보여주기 때문에 글자 크기가 매우 작게 보여지는 현상이 나타나는 것 입니다. 그래서 우리는 각 웹 문서를 모바일에 맞게 크기를 설정해 주어야 하는데, 모든 문서를 설정해서 사용해야 합니다. 그런데 Jquery 라이브러리 중에서는 이 모바일 전용의 API가..

Open source/Javascript, Jquery, CSS 2015. 7. 13. 09:00

Jquery UI

안녕하세요. 명월입니다. 이전 포스팅에서는 Jquery와 Css에 대해서 공부했습니다.. 그러면 지금부터는 Jquery에서 제공하는 API에 대해서 공부하겠습니다. Jquery – UI : 링크 Jquery UI는 기본적으로 웹에서 제공하는 Input태그는 물론 프로그래스바, 팝업, 슬라이드 메뉴 등을 제공합니다. 사용자가 Css와 Jquery를 이용해서 제공하는 테마를 사용하지 않고 만들어서 사용할 수 있지만 오브젝트를 일일이 만들어서 사용하면 생산성도 많이 떨어지기 때문에 직접 만드는 것보다는 검정된 라이브러리를 사용하면 생산성을 올리고 품질을 좀 더 향상시켜서 개발할 수가 있습니다. 먼저 Jquery-UI 웹 페이지에 접속해서 Demos 탭 항목에 접근하여 Jquery-UI의 기능에 대해 좀 더 살..

Open source/Javascript, Jquery, CSS 2015. 7. 12. 23:03

그래프 오픈 라이브러리 - JqPlot

안녕하세요. 명월입니다. 이번에 소개할 오픈 소스 라이브러리는 웹 서비스 상에 그래프를 그릴 수 있는 라이브러리입니다. 웹 서비스는 문서적인 형식과 성격이 강하기 때문에 그림을 그리거나 그래프를 나타내기가 힘듬니다. 그러나 이 라이브러리를 이용하면 간단하게 그래프를 그릴 수 있습니다. 활용이 잘 되서 많은 곳에서 쓰였으면 좋겠습니다. 링크 - [jqPlot 사이트 바로가기] 라이브러리 다운 받기 사실 이 글을 쓸 때만 해도 저는 jqplot밖에 몰랐습니다. 지금이야 jqploy보다 더 좋은 그래프 라이브러리가 많이 있지만, 블로그 전체 검토하면서 이 글을 다시 보니 예전 기억이 생각납니다. 저는 지금은 jqplot을 사용하지 않지만 제 기억으로는 구조가 정말 간단하고 쉽게 그래프를 만들 수 있었던 걸로 ..

Open source/Javascript, Jquery, CSS 2012. 9. 16. 09:55