Programming/Javascr¡pt 18

이제는 Cookie 대신 Web Storage 가 대세

이제는 Cookie 대신 Web Storage 가 대세 ​ HTML Web Storage 참고자료 : https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API 웹 스토리지를 이용하면 웹 어플리케이션은 데이터를 사용자의 브라우저에 내부적으로 저장 할 수 있습니다. HTML5 이전에는 어플리케이션의 데이터가 Cookie 에 저장되어야 했는데요, 그로 인해 매번의 서버에 대한 요청마다 포함되어야 했었습니다. 웹스토리지는 더 보안상 안전하며 훨씬 큰 데이터를 저장 할 수 있습니다. 심지어 웹사이트의 퍼포먼스에도 전혀 영향을 주지 않습니다. ​ Cookie는 브라우저마다 최대 갯수와 최대 사이즈가 미묘하게 다르기는 하지만, 일단 최대 4096 bytes의..

제발 한국인이라면 자바스크립트 Object를 Map 처럼 사용하지 맙시다.

제발 한국인이라면 자바스크립트 Object를 Map 처럼 사용하지 맙시다. ​ Photo by Steve Johnson on Unsplash. ​ 1. Introduction 오늘 코딩하던 중에 Javascript 에서 만든 Map을 Controller 쪽으로 어떻게 넘길지에 대해 고민 하는 일이 있었습니다. JavaScript 에서는 Object 를 사용하면 왠만하면 다른 언어에서의 Map 과 유사하게 사용 할 수 있기 때문에 딱히 Map을 사용 해 본 적이 없었는데요. ​ 특히 나중에 자바에서 스프링 부트에서 제공하는 JsonParser 를 이용하면 JSON 데이터를 List 아니면 Map 으로 Parsing을 하더라고요. Object 형태로 보내지 않고 Map을 Marshalling 해서 보낸다면 ..

Programming/Javascr¡pt 2021.09.02 (3)

Vue.js 사용 하기 4 ) PostgreSQL로 간단 게시판 작성 해보기 - 조회 및 수정 기능 추가

Vue.js 사용 하기 4 ) PostgreSQL로 간단 게시판 작성 해보기 - 조회 및 수정 기능 추가 ​ Vue.js 사용 하기 3) postgreSQL 게시판에서 Modal 이용하기 에 이어지는 글 입니다. ​ 마지막으로 Vue를 활용해 게시판을 조금 더 "사용할 수 있음" 에 가깝게 수정 해 보았습니다. ​ 일단 개별 글의 "조회" 기능을 추가 하였습니다. 이에 따라 게시판 목록 에서는 삭제 버튼이 사라졌습니다. 각 글의 제목을 누르면 개별 글을 조회 할 수 있도록 하였습니다. ​ 수정 버튼을 누르면 게시글 수정이 가능합니다. 게시글 수정은 게시글 작성 모달을 그대로 재활용하며 상황에 따라 다르게 작동하도록 하여 코드의 양을 줄이고 변경에 용이하도록 하였습니다. ​ 게시글 작성을 보면 아시겠지만 ..

Javascript로 페이지 리다이렉트 하는 방법. location.href vs location.replace

Javascript로 페이지 리다이렉트 하는 방법. location.href vs location.replace javascript를 사용하며 다른 페이지로 이동 하는 방법은 몇 가지가 있습니다. 일단 추천하지는 않지만 jQuery를 사용한다면 $(location).attr('href', 'https://shanepark.tistory.com'); 같은 방법을 쓸 수 있겠죠? ​ 하지만 보통 가장 많이 썼던 방법은 window.location.href = 'https://shanepark.tistory.com'; 였을 겁니다. 대다수의 상황에서 window.location.href 는 별 문제 없이 작동하지만, 해당 리다이렉트 방법을 사용하면 안되는 경우도 있을..

Vue.js 사용 하기 3) postgreSQL 게시판에서 Modal 이용하기

Vue.js 사용 하기 3) postgreSQL 게시판에서 Modal 이용하기 Vue.js 사용 하기 2 ) PostgreSQL로 간단 게시판 작성 해보기에 이어지는 글입니다. ​ 이번글에서는 Vue.js 의 기본 Component 중 하나인 Modal 기능을 이용 해 보겠습니다. ​ 전 글에서 만든 게시판 입니다. 아무리 대충 만들었다고 하지만 글 작성이 같은 페이지에 있으니 보기가 참 불편합니다. 글 작성하는 부분을 Modal로 빼 보도록 하겠습니다. ​ Vue.js 공식 홈페이지의 Modal 관련한 부분은 https://vuejs.org/v2/examples/modal.html 에 있습니다. 해당 코드를 그대로 사용 해 보도록 하겠습니다. ​ style.css .modal-mask { positio..

Vue.js 사용 하기 2 ) PostgreSQL로 간단 게시판 작성 해보기

Vue.js 사용 하기 2 ) PostgreSQL로 간단 게시판 작성 해보기 ​ Vue.js, SpringBoot, PostgreSQL, Hibernate 중 익숙하지 않은 기술이 있는 분은 아래의 두 포스팅을 먼저 참고하시면 코드를 좀 더 쉽게 읽으실 수 있습니다. Vue.js 사용 하기 1 ) 기본 문법 윗 글에 이어지는 글입니다. SpringBoot + PostgreSQL + Hibernate ) 간단한 게시판 만들기 해당 글에서 SpringBoot + PostgreSQL + Hibernate 로 만들어둔 간단 게시판 api를 활용해서 Vue.js 로 화면을 만들어 보겠습니다. ​ 이번에는 Vue.js 를 이용해 아주 간단한 게시판 페이지를 렌더링 해 보도록 하겠습니다. ​ 전체적인 패키지 구조는 ..

Vue.js 사용 하기 1 ) 기본 문법

Vue.js 사용 하기 1 ) 기본 문법 ​ ​ Vue.js란? 공식 홈페이지에서 Vue.js는 유저인터페이스를 만들기 위한 진보된 프레임워크라고 소개하고 있습니다. 핵심 라이브러리는 오직 view layer 에 포커스가 맞춰져 있습니다. 사용하기 쉽고 다른 라이브러리들이나 이미 생성된 프로젝트들과도 쉽게 통합 할 수 있습니다. 또한 최신 기술들과 지원하는 라이브러리들과 함께 사용한다면 정교한 단일 페이지 어플리케이션을 만들 수도 있다고 합니다. 개발자들에게 익숙한 프로그래머스 또한 Vue.js로 개발되었습니다. 스프링 부트 프로젝트를 하나 생성해보도록 하겠습니다. 사실 Vue.js는 자바스크립트 프레임워크기 때문에 Node.js 를 쓰건 SpringBoot를 사용하건, 아니면 아에 그냥 .html 파일..

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

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

Programming/Javascr¡pt 2021.07.04 (1)

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

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

Programming/Javascr¡pt 2021.06.04 (3)

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를 적용해줍니다. 이제 위의 자바스크립트 코드가 필요합니다. 코드 전문을 먼저 보여드리고 나서, 함수를 한..

반응형