본문 바로가기

JavaScript5

sweetalert2 메시지 줄 바꿈(개행) 기존 팝업창 메시지 줄바꿈 태그를 추가한 메시지 줄바꿈 태그를 인식할 수 있게 기존 text속성을 html로 바꿔준다. 수정 전 Swal.fire({ text: errorMessage, ... }) 수정 후 Swal.fire({ html: errorMessage, ... }) 줄바꿈 적용된 화면 ref https://wontree.tistory.com/entry/sweetalert-%EB%A9%94%EC%8B%9C%EC%A7%80-%EC%A4%84%EB%B0%94%EA%BF%88newline-%EC%95%88%EB%90%A0%EB%95%8C-%EC%B2%B4%ED%81%AC-%ED%8F%AC%EC%9D%B8%ED%8A%B8 2022. 3. 11.
element-tiptap Editor 시작하기에 앞서 tiptap Editor 📄 공식 사이트 🕶️ 깃허브 주소 처음에는 공식 tiptap 라이브러리를 사용하려고 했으나 구현이 제대로 되지 않았고 Extension 중에 Color 기능이 내가 만드려고 하는 게시판에 있어서는 사용자 친화적이지 않다고 생각했다. 그래서 그 다음으로 찾았던 라이브러리가 tiptap-vuetify 이다. tiptap-vuetify 🕶️ 깃허브 주소 마지막 업데이트가 2020년이긴 하지만 디자인도 훨씬 마음에 들고 기능들도 깔끔해서 사용해 보려고 했는데 새로 생성되거나 커스텀된 extension은 없었고 native-extensions를 사용해서 기존 tiptap 라이브러리의 기능을 사용하면 내가 라이브러리를 변경하려는 의도와 맞지 않아서 더 찾아 보기로 했다. e.. 2022. 3. 2.
JavaScript 간단한 함수로 다국어 처리하기 Validation을 하면서 에러메시지를 다국어 처리했어야 했는데 굳이 라이브러리를 쓰지 않아도 될 것 같아서 간단히 함수와 메시지 파일을 만들어 처리했다. locale 정보 가져오기 기존 서버 코드가 쿠키에 locale 정보를 저장하게 되어 있어서 getLocale 함수를 생성해서 값을 가져온다. validation.js function getLocale() { var lang = 'ko'; var cookies = document.cookie; var splitCookies = []; if (cookies) { splitCookies = cookies.split('='); lang = splitCookies[1] } return lang; } default 값은 'ko'로 설정한다. document... 2021. 11. 21.
jQuery validation plugin(Form validation 사용법) Form Validation Plugin jQuery Validation 플러그인을 이용하면 클라이언트 사이드에서 다양한 커스텀 옵션들을 통해 form validation을 쉽게 처리할 수 있다 . 이미 생성되어 있는 메소드를 활용해도 되고 개발자가 필요한 기능이 있으면 직접 메소드를 만들 수 있어 활용도가 높은 편이다. 에러 메시지들은 디폴트 값인 영어로 표출되지만 37개의 언어를 지원한다고 하는데 나는 다국어 처리를 위해서 에러 메시지를 그대로 활용하지는 않았다. Form Validation Plugin 활용하기 이번에 회원가입 기능을 구현하기 위해 플러그인을 사용했던 방법들을 정리해 봤다. 🚩 자바스크립트 파일 다운로드 https://github.com/jquery-validation/jquery-.. 2021. 11. 19.
자바스크립트 정규표현식(Regular expressions) 💡 정규표현식(정규식)이란? 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴. RegExp의 exec메소드, test메소드, 그리고 String의 match메소드, replace메소드, search메소드, split메소드와 함께 쓰인다. 💡 정규식을 만드는 방법 정규식 리터럴(슬래쉬로 감싸는 패턴) 사용하기 var re = /ab+c/; RegExp 객체의 생성자 함수 호출하기 var re = new RegExp("ab+c"); 💡 메타문자 문자 의미 예제 \ 특수문자 예외처리(escape) naver\.com& - 온점을 일반 문자로 취급 ^ 문자열 시작 ^[a-z] - 소문자로 시작하는 문자열 $ 문자열 끝 com& - com으로 끝나는 문자열 . 임의의 문자 하나 sh.on - s.. 2021. 11. 16.