본문 바로가기

Framework에 해당하는 글들

34 Articles matched
목록이 없습니다.
[Angular JS] [$injector:nomod] Module is not available! 프론트엔드 프레임워크 중 하나인 Angular JS를 사용하다보면 종종 아래와같은 에러 메시지를 브라우저 콘솔창에서 마주하게 된다. [$injector:nomod] Module is not available! 위와 같은 메시지가 나오는 경우는 몇 가지 경우가 있는데 Angular JS는 에러메시지를 뭉뚱그려서 보여주는 경향이 있다. 일단 가장 먼저 의심해봐야 할 것은 코드다. Angular JS가 사용되는 JS파일의 코드가 문법오류가 있을 수 있다.혹은 사용하려는 모듈(에러메시지에 등장하는 모듈)을 import(연결 혹은 포함) 하지 않고 사용하려고 할 때 위의 에러가 발생할 수 있다. 다음으로는 해당 Angular JS가 사용되는 JSP파일 혹은 다른 View 쪽 파일에 포함시키지 않고 사용중이지는 않..
[jQuery] 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event) jQuery 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event)최근들어 스마트폰의 등장과 함께 반응형 웹이 인기다. 작은 화면의 기기에 PC에서 보여주던 내용들을 전부 담아서 보여주려고하니 여간 까다로운게 아니다. 이번에는 쇼핑몰에서 보이는 UI인데 유명한 쇼핑몰들의 UI를 살펴보면 거의다 비슷비슷 하다.그중 내가 구현 하고 싶었던 UI는 상세페이지에서 어떤 메뉴가 있을 때 스크롤 시 그 메뉴가 화면 상단에 따라오는 UI이다. 소스 (Source) $(window).scroll(function() { let wrap_el = $('#ebric_mobile_wrap'); // 전체 wrap 요소 let tab_top = $('.info-type-select..
[Angular JS] 동적 요소 바인딩 (angularjs dynamic element binding) Angular JS 동적 요소 바인딩 (angularjs dynamic element binding)프론트엔드 프레임워크 중 하나인 Angular JS(앵귤러 제이에스)를 사용하다 보면 가끔 jQuery(제이쿼리)에서 사용하듯이 DOM을 동적으로 붙여주고 싶을 때가 있다. 이 때 단순히 angularjs 안의 내장되어있는 jqlite를 통해서 clone() 함수로 html을 복사한 후에 append() 함수나 after()함수로 붙여준다면 그 안에 바인딩 되어 있는 이벤트들은 동작하지 않을 것이다. 그럴 때 다음과 같이 $compile을 활용하면 된다. var prod_el = angular.element('#set_product_row'); var clone_el = prod_el.clone(); //..
[jQuery] ajax beforeSend에서 중단 시키는 방법 (stop $.ajax on beforeSend) jQuery(제이쿼리) $.ajax 함수에서 beforeSend 시점에 중단하는 방법 jQuery(제이쿼리)에서 $.ajax 쓰다보면 beforeSend 시점에서 함수를 중단하고 싶은 경우가 생긴다. ( 예를 들어 beforeSend에서 검증을 한다든지 설정 시 비어있는 값이 있는경우에는 alert를 띄우고 중단시키고 싶은,, ) 이 때 beforeSend에서 return false를 하면 beforeSend함수 자체는 중단이 되고 그 안에서 해당 라인 다음 로직은 수행되지 않겠지만 정작 ajax로 해당 url의 컨트롤러, 서블릿의 반환이 성공적으로 이루어졌을 때 수행되는 success 영역을 막진 못할것이다. 이런 상황에서 success로 넘어가지 않고 beforeSend에서 중단하고 싶은 경우 다음과..
[Spring] 스프링 기초(시작) 이것만 알고가자 : 동작 개념 Spring(스프링)을 처음 접하게 되면 그 사이즈부터 구조까지 한 번에 이해하기 힘들고 전반적인 개념을 알아듣기조차 힘들어요 ( 물론 아닌사람도 있겠지만 ..) 아직도 완전히 알지는 못하지만 그래도 처음 스프링프로젝트를 접했을 때 이 개념이 이 글이 조금이라도 도움이 되었으면 좋겠다고 바라면서 그리고 나 또한 이 구조를 잊지 않기 위해서 정리해 보려고 해요 Spring(스프링) Request Life Cycle (요청 생명 주기) - 동작 개념 제가 처음 Spring을 접했을 때 핵심개념인 DI(Dependency Injection)이며 IOC(Inversion Of Control) 컨테이너 등 이런 개념들은 둘째 치고 도대체 어떻게 프로젝트가 동작하는지 너무너무 답답하고 막막했어요 어디서부터 공부를 ..
[jQuery] keyup, keydown, keypress 차이 jQuery Key Event 오늘은 간단한 포스팅이에요 개발을 하다가 문득 궁금해서 검색해본 내용을 정리하려고 합니다 jquery에서는 브라우저를 통해서 사용자의 수많은 행동을 처리할 수 있는데요 그 많은 이벤트 중에 이번에 다룰 이벤트는 키보드(키입력)에 관련된 이벤트입니다 Keypress, Keydown, Keyup 먼저 간단하게 표로 정리하고 시작! 이벤트종류 실행시점 비고 keypress 사용자가 키를 눌렀을 때 키를 누르고 있을 때 계속 실행 keydown 사용자가 키를 눌렀을 때 키를 누르고 있을 때 단 한번만 실행 keyup 사용자가 키에서 손을 땠을 때 테이블 내용으로도 충분히 이해될 정도로 간단한 개념이에요! up과 down에 차이는 이름에서 느낌이 왔는데 press와 down은 어떤 ..
[jQuery] event.preventDefault(), event.stopPropagation() HTML 사용자 이벤트 전달 원리 우리가 매일 사용하는 인터넷 즉, 웹에서는 사용자들이 가장 많이 발생시키는 이벤트 중 하나는 바로 클릭! 사용자가 클릭을 하는 순간 HTML상의 요소들은 클릭을 당한(?) 요소부터 그 요소의 부모님들(?) 부모 요소까지 모두 같이 반응을 하게 되는데요 ( 참고로 이러한 현상을 버블업[Bubble Up] 이라고 해요 ) 이런 현상을 이벤트가 전파, 확산 된다고 하는건데요 영어로는 propagation이라고 합니다 예를들어 다음과 같은 HTML 코드가 있을 때 12345 Test cs a태그를 클릭하게 되면 그 상위 요소인 li 그리고 ul 까지 그 이벤트가 전파된다는 것입니다~ event.stopPropagation() 그러면 제목에서 언급했던 event.stopPropa..
[jQuery] Ajax Rendering jquery 플러그인으로 ajax를 사용하여 rendering을 할 때 유용한 방법을 정리하려고 한다 페이징을 할 때 페이징 마다 ajax함수를 호출해서 랜더링을 하는 방법도 있지만 목록 전부를 불러와서 페이징 시 DB접근 없이 랜더링 하는 방법이다 전역 변수에 랜더링할 목록 데이터 저장 우선 jquery 전역변수를 선언하고 ajax함수를 따로 만들어서 랜더링할 목록 데이터를 저장한다 ( 이게 최선은 아닐 수 있지만 일단 할 수 있는 방법을 정리해놓으려고 한다 ) 이렇게 저장 해놓으면 나머지 활용하는 방법은 입맛대로 사용하면 된다 123456789101112131415161718192021222324var $data = ""; // 목록데이터를 저장할 전역변수 // ajax 함수 전달인자var param..