Programming/Web5 bootstrap modal 창을 사용하여 수정 기능을 구현하는 것이 좋을까? 페이지가 좋을까? bootstrap의 modal을 사용하여 데이터를 저장하고 수정하는 기능을 구현하던 중에 같은 modal을 사용하여 수정 기능을 구현할 때 코드가 복잡해짐을 느꼈다. 한가지 form에 두 기능을 넣으려니 복잡해지는게 당연하겠지만 새로운 페이지에 작업시에는 request의 parameter를 사용하여 비교적 깔끔하게 처리를 할 수 있다. 내 경우에는 table에서 특정 row의 수정 버튼을 선택하면 해당 row의 데이터가 채워진 수정 modal 창을 출력 해주려는 것이었는데, 이를 위해 테이블의 row에 해당하는 tr 엘리먼트를 참조하여 그 하위 td 엘리먼트 안의 text 데이터를 가져와서 form안을 채워주어야 한다. 그나마 선택한 테이블 row의 데이터를 얻어오는 것을 map을 사용하여 코드양을 줄이.. 2016. 4. 1. iCheck jquery plugin은 change 이벤트가 다르다. checkbox를 사용하던 중 당연히 될 것으로 생각했던 change와 click 이벤트가 동작하질 않았다. class attribute로 iCheck 플러그인을 사용한 것 외에는 별다를 것이 없어서 당연히 동일한 인터페이스가 제공될 것으로 생각하고 계속 삽질만 했다. 결국에는 iCheck class를 사용하면서 이벤트 함수가 다르다는 것 떄문이었다. iCheck에서는 change 이벤트의 이벤트 명이 ifChanged 였다. 내가 가져다 사용하는 플러그인을 제대로 알지 못하면 이런 문제가.. 한참 삽질한 후에 제대로된 결과를 얻을 수 있었다. 2016. 4. 1. tabs를 사용해보았다. 사내에서 사용할 관리 툴을 웹으로 제작해보며 오늘은 bootstrap의 tabs를 사용하게 되었다. bootstrap을 이용해서 그냥 가져다 쓰기만 하면 되겠거니 하고 쉽게 생각했었는데 레이아웃은 쉽게 만들 수 있었으나 이 후에 각 탭 마다 저장 기능이 존재하여 submit을 수행하면서 몇가지 고민을 하게 되었다. 우선 tabs가 아닌 단일 페이지를 제작할 경우에는 submit이 하나만 존재하면 되므로 하나의 form element로 깔끔하게 구현이 되었는데 tabs를 사용하다보니 한 페이지 내에서 여러 페이지를 구현하는 것 처럼 되어서 각 탭마다 별도의 form을 만들어야 했다. 그렇지 않으면 handler를 통한 작업을 수행하면서 불필요한 데이터들까지 submit을 통해 전달되므로 비효율적이었다. 그.. 2016. 3. 29. 웹 페이지에 소셜 플러그인 추가하기 웹페이지에 소셜 공유 링크 추가하기구글이나 트위터, 페이스북에서는 트윗하기, 좋아요 버튼에 대한 API를 제공한다. 코드까지 제공해주기 때문에 API 제공 페이지에서 복사해서 간단하게 사용할 수가 있다.구글과 페이스북은 현재 페이지의 URL을 알아서 링크해주기 때문에 문제가 되지 않았는데 페이스북 API의 경우에는 현재 페이지의 URL을 직접 넣어주어야 했다. 그래서 이 부분을 동적으로 생성해주어야 하는데 Jekyll을 이용해서 간단하게 해결할 수 있었다.Jekyll로 현재 페이지 URL 만들기Jekyll 홈페이지를 참고해서 현재 페이지의 URL을 얻어 올 수 있는 Variable이 page와 site라는 것을 알 수 있었다. page는 단어 그대로 현재 페이지에 대한 정보를 담고 있고 site에는 이 .. 2016. 3. 27. 이전 1 2 다음