전체 글(175)
-
[Tomcat]_한국어 패치_(feat. Intellij)
발생] 위 사진은 tomcat UTF-8 을 적용시켜 정상적으로 한국어가 나오는 모습입니다. 만약에 인코딩이 잘못될 경우 요상한 글씨가 표현되거나 이상한 문자열 코드가 나오게 됩니다. 해결] 1.글로벌, 프로젝트 인코딩 설정 Ctrl + Alt + S --> Setting 에서 File Encodings 부분의 Global Encoding Project Encoding 을 UTF-8 로 변경 합니다. 2.Tomcat 설정 변경 Tomcat의 Edit Configurations 선택 VM options 에 -Dfile.encoding=UTF-8 을 추가합니다. 만약 여전히 깨질 경우에는 빌더를 clean 을 해줍니다. ( target 파일 삭제 후 재 빌드) 정상적으로 적용이 된 것을 확인할 수 있습니다.
2022.07.22 -
[IntelliJ]_Cannot open library ISSUE with Debugger mode
현상 Spring 이 설치되어 있는 IntelliJ 프로젝트에서 실행은 정상적으로 작동하나, 디버그모드 실행시 아래와 같은 빨간색 오류코드 발생 NPT Cannot open libaray 과 함께 Event log 에는 intellij Applicastion Server was not connected before run configuration stop reason Unable to ping --- 이 발생할 경우 첫 빌드 시작시 경로에 Users 다음 한국어가 껴있는지 확인한다. 인코딩이 잘못 되어있을경우 오류가 발생한다. 해결방법 1. User 이름 변경 2. JDK 경로 한국어가 들어가지 않는 경로로 변경한다.
2022.07.19 -
[bxSlider]_Added non-passive event listener to a scroll-blocking ISSUE
문제발생 bxSlider 내부에 button 이벤트가 작동하지 않는 문제 위와 같이 bx슬라이더 div 내부의 onclick 이벤트가 각종 bx 슬라이더 이벤트에 의해 작동하지 않고 있는 현상 발생시 해결 1. bxSlider v4.2.1d 이상 버전 으로 업데이트 https://github.com/stevenwanderski/bxslider-4/releases Releases · stevenwanderski/bxslider-4 Responsive jQuery content slider. Contribute to stevenwanderski/bxslider-4 development by creating an account on GitHub. github.com 2. bx 메소드에 아래중 한가지 옵션 추가..
2022.07.15 -
[Polyfill]_Spring 에서 Polyfill 사용법
이전에 Babel 과 Polyfill에 대해 알아보았습니다. https://yn971106.tistory.com/140 [Babel]_Babel 과 Babel-polyfill 이란? 개요 프론트 개발을 하면서 ()=> ( 화살표 함수 ) `` ( 템플릿 코드 ) forEach filter 등 최신문법을 사용하여 개발하였습니다. IE 테스트 단계에서 문제가 발생했습니다. IE의 경우 ES6 이상의 문법을 사 yn971106.tistory.com 이번에는 webpack, nodeJS 환경에서 npm으로 설치하는 방법이 아닌 Spring -> Script 단에서 Polyfill을 사용하는 방법에 대해 알아보겠습니다. 사용 이유 크로스 브라우징을 구현하기 위함. Spring( 웹 ) 환경에서 Internet E..
2022.07.11 -
[Babel]_Babel 과 Babel-polyfill 이란?
개요 프론트 개발을 하면서 ()=> ( 화살표 함수 ) `` ( 템플릿 코드 ) forEach filter 등 최신문법을 사용하여 개발하였습니다. IE 테스트 단계에서 문제가 발생했습니다. IE의 경우 ES6 이상의 문법을 사용하게 되면 오류가 발생합니다. 한국에서는 공공기관의 경우 Active X 사용으로 인해 Internet Explorer 의 사용 비중이 높습니다. 따라서 IE 환경도 고려를 해야 합니다. 이를 해결할 수 있는 방법이 Babel, Babel-Polyfill 사용입니다. 1. Babel Babel 은 자바스크립트 컴파일러 입니다. 컴파일이란 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정입니다. 즉 Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ (..
2022.07.11 -
[select2]_select2 옵션, 설정 ,심화 _(select2 예제)
심화 지난 설치에 이어서 좀더 많은 옵션을 부여해보도록 하겠습니다. 설치는 다음 포스트 참고 https://yn971106.tistory.com/138 [select2]_select2 설치, 기본 설정 사용 목적 기본적으로 html 에서 제공하는 select 의 경우 목록이 적으면 상관이 없지만, 만약 몇십~몇백개의 options 가 있다면, 화면도 다 가릴 뿐 더러, 실용성도 떨어질 겁니다. 일정 목롤을 보여 yn971106.tistory.com 목적 Ajax 와 같은 비동기 통신으로 불러온 데이터 리스트를 select options에 표현하고 사용자가 select2에서 선택한 값을 기준으로 변하는 formDate 생성하기 흐름 select2 의 options 목록을 ajax와 같은 비동기 통신으로 값..
2022.07.05 -
[select2]_select2 설치, 기본 설정
사용 목적 기본적으로 html 에서 제공하는 select 의 경우 목록이 적으면 상관이 없지만, 만약 몇십~몇백개의 options 가 있다면, 화면도 다 가릴 뿐 더러, 실용성도 떨어질 겁니다. 일정 목롤을 보여주고, 스크롤바가 생기며, options 을 검색할수 있으면 해결이 됩니다. 이를 구현하기 위해 사용했던 select2 플러그인을 소개합니다. 설치 공식 Git 사이트에 접속합니다. https://github.com/select2/select2/tree/develop/dist GitHub - select2/select2: Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, an..
2022.07.05 -
[bootstrap-datepicker]_부트스트랩 데이트 피커 설치,운용
사용목적 프론트를 개발하면서 달력을 표출해야 하는 경우가 많습니다. 이때 달력을 쉽게 그리고, 옵션을 부여할 수 있는 bootstrap-datepicker 플러그인 을 사용하여 쉽게 그릴 수 있습니다 설치 공식 git 주소인 아래의 주소에 접속합니다. https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs) A datepicker for twitter bootstrap (@twbs). Contribute to uxsolutions/bootstrap-datepicker development..
2022.07.05 -
[Moment.js]_JS 날짜 라이브러리
Moment.js 라이브러리란? 자바스크립트 날짜관련 라이브러리 중 가장 많이 사용했었던 라이브러리 입니다. 너무 큰 사이즈 차지 등의 문제로 더이상 업데이트는 하지 않는 라이브러리 입니다. 하지만 오래된 프로젝트, 혹은 간간히 사용되기 때문에 정리해 보았습니다. 공식 사이트:https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", ..
2022.07.04 -
[ajax]_함수 실행 순서 (실행 순서 배정하기)
문제 요인 실전에서 여러개의 함수를 선언, 사용 하고 전역변수처럼 사용하는 지역변수에 값을 수정할 때 원하는 순서대로 진행이 되지 않아 debug를 하는 경우가 많습니다. 대부분 값을 가져오는 동안 해당 값을 가져가거나, 통신속도가 느려, 환경마다 값이 달라지는 문제가 발생하기도 합니다. 이럴때는 데이터를 받아올 때 까지 기다렸다가 진행해야합니다. 보통은 await 라는 기능을 사용합니다. 여기서는 ajax 통신 등 데이터를 받아와 저장하는 경우 await 를 사용하지 못하거나, 사용하지 않고 흉내내는 방법을 설명합니다. 여러개의 함수를 선언하고 $(document).ready(function() { }) 내부에 함수를 정렬하게 되어도, 내부 실행 속도에 따라서 순서가 천차 만별입니다. 예시를 보겠습니다..
2022.07.01 -
[$.ajax]_ajax 통신 중단, + 마지막 요청만 받아서 수행하기
목적 ajax와 같은 비동기 통신시 여러개의 동일 요청이 들어오면 가장 마지막 요청만 받아서 수행하도록 구성 비동기 통신을 구현하면서 다음과 같은 현상이 발생합니다. 게시판 페이징 처리를 했다고 가정합니다. 네트워크가 느리거나, 데이터가 많아서 로딩이 오래걸리는 경우 페이징을 1~5까지 빠르게 넘길 때 데이터가 이 속도를 따라오지 못해서 느리게 쫒아오는 경우가 있습니다. 이럴경우 로딩이 안되고 다른페이지 로드시 오류가 발생할 수도 있고, 시각적으로도 올바르지 못합니다. 이럴때 사용하는 메소드는 abort() 메소드 입니다. abort() 를 사용해서 동일한 ajax 호출시. 이전 요청을 삭제하고 지금 받은 요청을 처리하는 식으로 코드를 짜면됩니다. let ajax = null; // function no..
2022.07.01 -
[코드 리뷰]_메뉴 목록, 게시 글 목록 생성시
보호되어 있는 글입니다.
2022.07.01