본문 바로가기
728x90
반응형

Programming/Javascript5

[JavaScript] html drag and drop - list draggable 가장 간단한 방법은 아무래도 jQuery 라이브러리를 쓰는게... 하지만 내가 작성한 소스에서는 어떤 방법을 써도 먹통이었다ㅜㅜ.. 간단한 기능 하나에 시간을 낭비하는 삽질은 언제 끝이날것인가....... 대부분 아래 소스로 구현이 가능하니 이 방법이 먹는다면 아무래도 이게 제일 나은 듯 싶다.. Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Sortable | jQuery UI Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the.. 2021. 5. 7.
[JavaScript] window.open 새 창을 열 때 WindowName이 같으면 새 창이 겹쳐서 열리는 문제 html이나 jsp에서 onclick으로 함수를 호출하여 새 창을 열 때 창 이름이 같으면 새 창이 겹쳐서 열리는 문제가 발생 이걸 말로하려니 되게 설명하기가 어려운데 예시를 들어 설명을 해봐야겠다.. A B param1 : '안녕' param2 : '헬로' param1 : '안녕' param2 : '하이' 리스트에서 A, B 두 개가 있을 때 param1이라는 데이터가 중복된다. 이럴 때 WindowName을 param1로만 한다면, A를 클릭해서 새창을 띄우고 B를 클릭한다면 A의 새창이 B의 새창으로 바껴버리는 문제가 생긴다. 따라서 데이터가 다른 param2를 WindowName에 추가하여 각각 다른 새 창으로 열리게끔 설정해준다. window.open(url, param1+param2); win.. 2020. 12. 30.
[JavaScript] Handlebars Template Engine Template Engine 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어로 프로그램 로직과 프레젠테이션 계층을 분리하기 위한 수단이다. Handlebar.js Handlebar.js(이하 핸들바)는 자바스크립트의 템플릿 엔진 중 하나로 Mustache를 기반으로 구현한 템플릿 인자(콧수염 모양의 {{}} bracket을 이용하여 data를 표현하는 것)를 이용하면 html 페이지에서 HTML+Bracket의 구성으로 디자이너와 개발자가 협업할 때 도움이 된다. Handlebars handlebarsjs.com 출처 : https://programmingsummaries.tistory.com/381 기본적인 바인딩 구조 사용자 정의 헬퍼 기본 제공 헬퍼 예제.. 2020. 8. 14.
[JavaScript] JSON(JavaScript Object Notation) maven 라이브러리 사용 JSON (JavaScript Object Notation) 클라이언트와 서버간의 정보를 교환하기 위한 데이터 형태로, 속성과 값을 넣어 전달하고자 하는 객체를 JSON 형태로 Ajax를 통해 전송한다. ex) 시스템A와 시스템B가 협업을 하여 데이터를 교환할 때 사용하는 공통적인 데이터 문법이라고 볼 수 있다. 기본 사용법 (자세한 문법 : www.w3schools.com/js/js_json_intro.asp ) var obj = { "프로퍼티" : 값}; jackson-databind json, xml 응답을 편하게 할 수 있도록 도와주는 maven 라이브러리 pom.xml에 코드 작성 com.fasterxml.jackson.core jackson-databind 2.9.9 json 포맷의 데이터를 .. 2020. 8. 12.
동기(Synchronous)와 비동기(Asynchronous )의 개념과 차이점 출처 : https://webclub.tistory.com/605?category=501058 1) 동기식 처리 모델(Synchronous processing model) 동기식 처리 모델은 직렬적으로 task를 수행한다. 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게된다. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후의 태스크들은 블로킹(blocking, 작업중단)된다. function func1() { console.log('func1'); func2(); } function func2() { console.log('func2'); func3(); } function func3() { cons.. 2020. 8. 2.
728x90
반응형