Programming language/Java script 11

Javascript) 웹사이트 혹은 웹 어플리케이션에 단축키 추가하기

Javascript) 웹사이트 혹은 웹 어플리케이션에 단축키 추가하기 최종프로젝트를 진행하며, 막바지에 추가했던 '단축키' 기능입니다. 생각보다 어렵지는 않은데 발표할때 반응은 꽤나 좋았던 걸로 기억합니다. 실제로 싱글페이지로 웹 어플리케이션을 설계 하면서, 그 난이도 상승에 비해 얻은 설계상 이점이 크지 않다고 느꼈지만 반대로 싱글페이지가 아니었으면 추가하지 못했을 기능 중 하나 입니다. ( 뭐 억지로 할라면 했겠지만 싱글페이지가 아니라면 그 의미가 떨어지는 기능입니다) 1. 아이디어와 디자인 단축키 아이디어는 Google Docs와 Figma 에서 얻었습니다. 요즘 왠만한 어플리케이션들은 정말 전부 웹에서 자유자재로 실행할 수 있게끔 세상이 흘러가고 있다고 생각되는데요, 우연히 단축키 기능을 찾게 되..

자바스크립트) 한글 마지막 글자에 따라 로/으로, 을/를 어울리게 출력해주기

자바스크립트) 한글 마지막 글자에 따라 로/으로, 을/를 어울리게 출력해주기 저는 한국어가 참 어려운 언어라고 생각합니다. 특히나 우리는 자연스럽게 을/를 , 로/으로 등을 붙여서 사용하지만, 컴퓨터는 그렇지 못합니다. 외국인들도 참 어렵게 느끼는 부분입니다. 위에서 보이는 것 처럼 을/를 로/으로 를 구분하지 못해서 참 어색하게 출력되는 부분이 있습니다. 이 부분을 해결 해 보려고 합니다. 일단 받침이 있는 단어인지 아닌지를 먼저 체크해주는 함수를 만듭니다. // 받침이 있는 문자인지 테스트 해주는 함수 입니다. const isSingleCharacter = function(text) { var strGa = 44032; // 가 var strHih = 55203; // 힣 var lastStrCode..

btoa 혹은 atob 사용해 BASE64 <-> UTF-8 인코딩 할때 한글 깨짐 해결

btoa 혹은 atob 사용해 BASE64 UTF-8 인코딩 할때 한글 깨짐 해결 Github에서 저장소의 readme 파일을 불러와 화면에 렌더링 해 주는 기능을 구현 하고 있는 중, 한글이 깨져버리는 현상이 발생했습니다. 위에서 보이듯, github 에서는 readme 파일을 base64 로 인코딩 해서 보내주는데요, let decoded = atob(res.content); 이렇게 해서 출력 했더니 한글이 깨지는 현상이 발생 했습니다. https://github.com/dankogai/js-base64 dankogai/js-base64 Base64 implementation for JavaScript. Contribute to dankogai/js-base64 development by creati..

jQuery contextMenu를 활용해 우클릭 메뉴 만들기

위에 보이는 css 와 js 들이 필요합니다. 우클릭 할 영역을 만들어 줍니다. right click me 영역에 초기 설정 코드를 넣어줍니다. $(function(){ $.contextMenu({ selector: '.context-menu-one', items: { // name: { name: "Text", type: 'text', value: "Hello World", events: { keyup: function(e) { // add some fancy key handling here? window.console && console.log('key: '+ e.keyCode); } } }, sep1: "---------", // yesno: { name: "Boolean", type: 'check..

이제 alert 대신 toastr 사용하자 ! Toastr 사용 하기

https://github.com/CodeSeven/toastr CodeSeven/toastr Simple javascript toast notifications. Contribute to CodeSeven/toastr development by creating an account on GitHub. github.com 더보기 toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. toastr 이란 ? toastr 은 non-blocking 알람을 띄우는 Javasrip..

TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor)

TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor) cdns에 2.0.0 버전 지원이 끊겼고, 사용법도 조금 달라져 2021년 7월 23일에 최신 버전 기준으로 글을 업데이트 했습니다! https://ui.toast.com/ TOAST UI :: Make Your Web Delicious! | TOAST UI :: Make Your Web Delicious! Calendar provides monthly, weekly, multi-weekly, daily views, and more, as well as a basic pop-up UI you can use to add/edit/delete your schedules. You can manage your schedule ..

JavaScript 드래그 할 수 있는 HTML 요소 만들기

종종 HTML 요소의 드래그가 필요한 때가 있습니다. 드래그를 통해 상태값을 변경하거나, 간단하게 설정을 적용시킬 수 있을때 특히 유용합니다. 저희가 준비중인 프로젝트에서는 칸반 보드가 들어갈 예정인데 이를 위해 꼭 필요한 기술입니다. 일단 칸반 카드로 쓸 div를 만들어 줬습니다. .kanbanCard { cursor: move; position: absolute; background-color: #2196F3; color : white; border: 1px solid #d3d3d3; text-align: center; } cursor:move로 마우스를 올렸을때 십자표시로 커서가 바뀌도록 css를 적용해줍니다. 이제 위의 자바스크립트 코드가 필요합니다. 코드 전문을 먼저 보여드리고 나서, 함수를 한..

javascript 카카오 아이디로 로그인하기 구현

아래 문서는 Kakao SDK for JavaScript(이하 JavaScript SDK) 사용법을 설명합니다. https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 아래 문서에서는 예제 코드들을 확인 할 수 있습니다. 카카오에서 코드를 쉽고 간결하게 잘 짜두었고, 주석도 친절히 잘 달아주어서 어렵지 않게 여러가지 다양한 기능을 사용해 볼 수 있습니다. 개인적으로 API 는 카카오쪽이 가장 마음에 들었습니다. developers.ka..

javascript 네이버 아이디로 로그인하기 구현

Python 에서 Flask의 활용을 공부하던 중이었지만, 사실상 Flask는 서버 역할만 하고, javascipt로만 구현되어있기 때문에 javascipt 카테고리로 구분하였습니다. 사실상 로그인 구현에 필요한 모든 코드는 NAVER Developers 에 모두 잘 정리가 되어있습니다. 그걸 받아다가 원하는 포맷으로 가공해서 사용하기만 하면 됩니다, 하지만 막막하고 어려움을 겪을 수 있으니 한번 정리해보겠습니다! developers.naver.com/docs/login/web/web.md Web 애플리케이션 - LOGIN 네이버 아이디로 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 ..

Javascript 에서 쿠키 사용하기

Javascript 에서 쿠키 사용하기 자바 수업시간에 쿠키와 세션에 대해 배웠습니다. 서버에서 이루어지는 세션은 그렇다 쳐도, 어차피 사용자의 컴퓨터에 저장될 쿠키데이터를 위해 서블릿까지 추가하는건 좀 부담스러워서 쿠키를 다루는 사항들은 웹페이지에서 바로 다뤄보려고 합니다. 진행중인 프로젝트에서 처음으로 쿠키를 사용할 곳은 '아이디 저장' 기능입니다. 아직 테스트중인 페이지이기 때문에 시안이 좀 투박하나 양해 부탁드립니다. 아이디 저장을 해놓고 로그인을 하면 다음부터 해당 페이지에 접속했을때에는 굳이 아이디를 한번 더 칠 필요가 없도록 구현하려고 합니다. 안그래도 본 프로젝트에서 이메일주소를 아이디로 쓸 계획을 하고 있다보니, 아이디 입력이 번거로워 꼭 필요한 기능입니다. 프로젝트가 어느정도 완성궤도에..

반응형