JQuery - on('change') vs change() 어떤 것을 쓰나?

이벤트 함수를 등록해서 쓰고 싶은데, 2가지 방식이 있네 on('change') vs change() 둘다 맞는데, 머 정답이라기 보다는 그냥 on(이벤트, function() {}); 형태로 사용하는 것을 강권합니다. 동적으로 생긴 컴포넌트도 쓸수있도록 하려면 on('change',... 를 쓰라고 하네요. JQuery 클릭 이벤트 on("click") 과 click() 의 차이 JQuery on("click")과 click() on("click") 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 아래 예.. lookingfor.tistory.com Pexels에서 Karo..

• format_list_bulleted Tech/프론트엔드
• · 2022. 9. 30.
• textsms

Jquery - 동일한 ID 가 여러개 있는 경우 click 이벤트 다 받기

동일한 ID를 쓰고 있는 객체의 이벤트를 받아 처리할 때는 그냥 $(#사용중인ID).on('click', .... 이렇게 사용하면 맨 처음 객체만 반응하는 경우가 나타났다. 나만 그런가? ㅋㅋ 암튼 아이디를 동일하게 사용해도 사용된 모든 객체에 이벤트를 발생하려면 아래와 같이 복수개를 처리할 수 있는 selector 형태로 불러 써야 한다. $("[id='사용중인ID']").on('click', function () { return confirm("Are you sure you want to delete?"); }); 간단하지만 실수하기 쉽다. 참고 페이지는 아래 https://stackoverflow.com/questions/8498579/how-does-jquery-work-when-there-are..

• format_list_bulleted Tech/프론트엔드
• · 2022. 6. 24.
• textsms

JQuery - select 선택 값 가져오기

select 선택 값을 jquery로 가져오기, 너무 쉽지 그냥 select 선택해서 val() 하면 되는거 아냐~~~~~ 했다가 ㅋㅋㅋ 실패 NoneType 이 올라오는데 ㅋㅋㅋ 아래처럼 해야 한다. var selvalue = $('#selectbox_id').find(":selected").text(); https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown jQuery Get Selected Option From Dropdown Usually I use $("#id").val() to return the value of the selected option, but this time it doesn't ..

• format_list_bulleted Tech/프론트엔드
• · 2022. 5. 7.
• textsms

JQuery - 체크박스 선택시 input 활성화 및 포커스 주기

폼 객체를 한줄씩 쭉 나열되어 있고, 체크박스가 맨 앞에 있어서 체크를 하면 해당 줄이 활성화 되도록 하는 것 많이 정답들이 나와 있지만, 간단하게 구현한 결과를 저장 $("input:checkbox").on('click', function() { var target_input_name = "#" + $(this).val() + "_quantity" if ( $(this).prop('checked') ) { console.log($(this).val()) $(target_input_name).prop("disabled", false); $(target_input_name).focus(); } else { $(target_input_name).prop("disabled", true); $(target_in..

• format_list_bulleted Tech/프론트엔드
• · 2022. 5. 2.
• textsms

JQuery Ajax 로 form submit 하기 - form value 그대로 가져오기

요거 쉬운거 같은데, 예제들이 죄다 json으로 바꿔서 API 호출하는 형태로 되어 있는 것이 많네. 그냥 html 페이지에 있는 form submit을 jquery ajax 함수로 호출하는 방법을 정리해 두자. 이걸 한 이유는 submit 하고, 바로 그 정보를 이용해서 새창을 띄우도록 하려고 하니깐 ajax async false 로 동작 시켜야 했기 때문이다. 그냥 코드를 보자. $("#sel2").click(function(e){ e.preventDefault(); // avoid to execute the actual submit of the form. var button = $(this); var form = $("#mainform"); var actionUrl = form.attr('actio..

• format_list_bulleted Tech/프론트엔드
• · 2022. 4. 29.
• textsms

JQuery - select 박스 선택시 일부 disable 설정하기

그냥 노트 저장용, 선택된 값에 따라 특정 Input 을 비활성화 시킬 때 사용하는 코드 attr removeAttr prop 이런 것들을 잘써야 하네. $("[name$='-group0']").on("change", function(){ // //selected value // console.log($(this).val()); // console.log($("option:selected", this).attr("value")); // //selected option element // console.log($("option:selected", this)); // console.log($("option:selected", this).text()); // console.log($(this).find("op..

• format_list_bulleted Tech/프론트엔드
• · 2022. 4. 27.
• textsms

Pandas - datetime 시간대 변경 방법

판다스의 Dataframe 에 저장된 필드의 datetime 의 시간대를 한꺼번에 바꿔보려고 여기저기 검색 일단 시간대 변경을 위해 tz_convert('Asia/Seoul') 메소드를 사용해야 할 것으로 이해하고, 출처: https://rfriend.tistory.com/505 [R, Python 분석과 프로그래밍의 친구 (by R Friend)] 판다스 dataframe 에 전체 필드 데이터에 바로 할 수 있는 장점이 있네. 근데 약간 편법같은걸로 햇는데 정답인줄을 모르겟음 계속 dt 형변환해서 메소드 호출하고 이렇게 써야 하나? resultDf['Start Time'] = resultDf['Start Time'].dt.tz_convert(TIME_ZONE).dt.strftime('%H:%M:%S')..

• format_list_bulleted Tech/프론트엔드
• · 2022. 3. 22.
• textsms

JQuery - 비슷한 id 가진 객체 이벤트 같이 처리하기

HTML id 를 비슷하게 줘서 이벤트 처리를 하나로 하고 싶은 경우가 많다. 동일하게 주기는 찝찝하고, 뒤에 인덱스 같은거 붙여서 같은 기능을 하는 놈들을 비슷한 id로 묶어 뒀는데, 개별적으로 이벤트 처리하려니 영 맘이 안내킨다. 간단하게 JQuery 쓰면서 정규식 비스무리한 거 쓰면 해결!! 원본 글로 방문해서 보는 것을 추천 - https://m.blog.naver.com/cutesboy3/221080367471 for의 index를 부여해서 id값을 부여하여 id가 클릭시 클릭 이벤트처리하는 방법을 아래 스크립트(정규식)으로 처리 할수 있다. $("[id^='useGo_']").click(function() { // 기능 구현하기 }); 간단하게 설명을 하면 //id가 testid로 시작하는 엘..

• format_list_bulleted Tech/프론트엔드
• · 2022. 3. 16.
• textsms

JQuery / JS에서 사용되는 코드 조각들

JQuery 혹은 자바스크립트 에서 사용되는 코드 조각들을 여기에 일단 유용한 것만 모아두자. 참고 - 셀렉트박스 유지를 위한 스크립트 페이지의 쿼리 파라메터를 읽어와서 기존 값을 유지하는 코드 함수, 그대로 가져왔는데 왠만하면 아래 글쓴이 링크로 가서 읽어보세요. (여긴 그냥 제 참고용으로 남겨둡니다. 설명은 원본글에서 읽으세요 ^^;;;) https://wayhome25.github.io/django/2017/03/01/django-99-my-first-project-5/ // get url query string var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.locatio..

• format_list_bulleted Tech/프론트엔드
• · 2021. 12. 10.
• textsms

Datatables JS 라이브러리로 데이터 다루기

데이터를 테이블로 표현하는 아주 좋은 라이브러리 Datatables 를 소개해 보려 한다. jquery 기반으로 시작된 듯 하나 요즘 트렌드에 맞게 서버사이드 스크립팅 머 이런것도 지원하는 것으로 보인다. 아주 많은 선구자들이 있으니 있다는 것을 아는 것이 중요하다. 아래 글을 꼭 참고하자. Grid 라이브러리-Datatables 사용법/예제 Grid 라이브러리-Datatables 사용법/예제 최근 사용하게 된 datatables 라이브러리에 대한 약간의 설명을 공유하고자 합니다. datatables는 데이터 그리드를 다루는 라이브러리로 '이 기능이 있었으면' 하는 부분은 거의 갖추고 있습니다. 한 kutar37.tistory.com 진짜 내용은 꼭 위 원본 글에 들어가서 보시기 바란다. 완전 만족할 듯..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 22.
• textsms

DataTable - JS 데이터 테이블 표현

Data를 테이블 표현하는 것은 모든 데이터 서비스의 기본이다. 매번 이 부분을 구현하고 검색하고, 페이지네이션에 Export 기능까지 따로따로 하는데 이 모든것이 이미 구현이 되어 있다. Datatable.net 꼭 이 라이브러리를 활용하자. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) DataTable 일단은 한번 보면 안다. 아래 예제 사이트로 가서 봐라 데이터를 표현하는 테이블은 이걸 써야 한다. https://datatables.net/examples/ajax/objects.html 간단하게 Vue.js 를 이용하여 구현한 코드를 보자. Django 에서 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 15.
• textsms

Vue.JS Delimiters 표기 바꾸기

Vue.JS Delimiters 를 기본적으로 {{ }} 이걸 많이 쓴다고 하는데, 이건 다른 곳에서도 쓰이는 표기라, 중복으로 사용되면 무엇인 적용될 지 잘 모르겠죠 그래서 일단 편한것으로 바꿔서 사용해 보자. 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) 아래 코드는 delimiters 를 [[ ]] 형태로 변경해서 사용하는 예제이다. 코드상에서 id="vue_div" 로 선언된 부분에서는 jinja2 같은 어떤 템플릿 베이스 엔진이 동작하더라도 여기에 정의한 대로 [[ ]] 로 쓰이는 변수, 문장들은 vue.js 껏으로 이해해서 동작이 된다. 간단하지만, 일단 나 같은 초보자들은 일단 알..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 12.
• textsms

Vue.JS 클릭 이벤트 표기 - @click v-on:click

Vue.js 에서 DOM 에 클릭 이벤트 처리를 하고 싶다면 이벤트를 정의하면 된다. 그 정의 방법은 "v-on:eventname" 이런식으로 정의하면 된다. - 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) 공식 사이트에서 예제를 가져오면, https://vuejs.org/v2/guide/events.html We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. For example: Add 1 The button above has been clicked {{ co..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 12.
• textsms

자바스크립트 함수 파라메터 표현법 변경 이유

함수 선언 부의 변천 - 선언부만 봐도 먼지 확실하게 알 수 있도록 변천되어 왔다. 복잡해 보이지만, 더 명료해 지는 스펙이다. 암묵적인 arguments 가 ...args 로 변경 초기값을 줄 수 있고, Object 를 넣어 줄 수 있다 {...} 형태로 그냥 짧은 정리 팁~

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms

실제 애플리케이션 개발 - 데이터 플로우, 유저 시나리오 작성

실제 서비스를 개발 하려면 필수적으로 2가지 작업을 해야 한다는 것 같다. 데이터 플로우 작성과 유저 시나리오 작성 머 대충 개발하면서 정리해 나가면 된다고 생각하는데, 많이 경험하신 분들은 이렇게 개발을 시작하나 보다. 꼭 따라 해보는 것이 여러모로 도움이 될 듯 한데 (ㅋㅋㅋ 하기 싫은 작업들이네) 암튼 조은씨의 실무 강의에서 설명된 부분은 몇가지 추려 보면 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 우선 데이터 플로우 Data Flow 판서 내용 서비스라면 인증 방식을 정해야 하고, 인증이 되냐 안되냐에 따라 다른 뷰를 보일 수 있으니 분리하고 데이터가 내부 데이터 인지 외부 데이터 인지 판단해서 구분해 두는 것도 중요하다. 여기서 내부 데이터라 함은 그냥 프로젝트 빌..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms