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

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

Django ninja api 호출시 사전 Form 요소 검사 - Schema 활용

Django에서 ninja api를 정의하여 호출하는 경우, 데이터베이스의 중복이나 불일치 등등 DB와 연동하여 판단하는 것 말고 폼 객체에 필드 값이 일단 사전에 올바른지 간단하게 체크하는 것이 필요하다. 보통 이런경우 api에서 처리해도 되지만 Schma를 정의해서 처리하는 방법이 있다. 자체 공부용으로 정리하는 것이므로 두서 없어도 그냥 넘어가주세요. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) ninja api 구현 함수에 보면 아래와 같이 되어 있다. @api_router.post("register", response={201: None, 409: Mess..

• format_list_bulleted Tech/Django
• · 2021. 11. 16.
• 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

장고 개발 팁 - ORM 클래스 생성시 상속 전용으로 만들기

장고에서 ORM 을 사용하는 경우 Model 을 만들면 Class 객체 하나를 테이블로 만들어 버리게 된다. 그냥 추상 클래스로 상속해서 쓰게 하려는 경우 낭패가 된다 이때 사용하는 키워드가 Meta 라는 것이 있네. from Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) class 내에 "class Meta:" 라는 것을 하나 더 두고 abstract = True 로 속성을 설정하면, 이 class 는 DB 테이블로 변환되지 않고 상속에 쓸 수 있는 class 로 남겨둔다. 즉, TimeStampModel 에 보면 "updated_at" "created_at" 이라는 필드가 다른 테이블에 거의 공통으로 사용되고 있어 이 부분을 한 곳에 정리해 두고 상속해서 쓰도록..

• format_list_bulleted Tech/Django
• · 2021. 11. 10.
• textsms

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

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

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

리액트를 쓰는 이유? 함수형 컴포넌트를 쓰는 이유?

리액트를 쓰는 이유 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 난 전문가가 아니니 강사님의 고견을 그대로 수용하도록 하자. 간략하게 보면, 1. 광대한 커뮤니티 - 도움 줄 사람이 많다. 2. 확장성 - 머 사람이 많으니 확장성도 높다. 이미 만들어진 라이브러리가 강력하다 3. 리액트 네이티브 지원 - 앱으로의 확장이 가능하다 4. 경쟁상대 (?) - 상대 우위에 있다는 말씀이신듯... 5. 채용에 유리하다 - 공부하시는 분들이 워낙 많으니깐... 리액트 함수형 컴포넌트의 대두~~~ 함수형 컴포넌트를 쓰는 이유는? Hooks 를 통해 life cycle 을 해결할 수 있다. => 그리고, custom Hooks 를 별도의 함수로 만들고 여러 곳에서 불러 쓸 수 있다. 비즈니스 ..

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

MSA, BFF, MFA - Micro Services Architectures

프론트엔드 개발자가 알아야 하는 구조들 설명 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 3가지 정도만 알면 된다고 하시네. 내용은 평이한데 이 구조대로 설계해서 구현하는 것은 별개의 이슈이다 MSA - 마이크로 서비스 아키텍쳐 많이 들어 보던 용어 그냥 서비스를 각각 기능에 맞춰서 작게 쪼개서 작성하자. Micro Frontends 프론트엔드도 MSA 처럼 각각 서비스별로 구현해 두고 iframe 이나 모노레포 방식으로 활용하자. 개념은 비슷한 것이다. 쪼갠다고 무조건 좋은가? 결국 서비스는 모아서 보여지는 것인데 결국 공급자의 고민이 여기에서 많이 되어야 한다. API Gateway 유사하지만, 서비스의 일부 로직, 혹은 데이터 변환, 데이터 정제 필터링 등의 기능을 제공해 ..

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