리덕스를 도입할 때 주저하게 만드는 장벽들
○ 개요
몹엑스, 아폴로, 컨텍스트 API 등 리덕스를 도입하기도 전에 이미 선택적인 고민을 하게 만듭니다. 리덕스를 도입한 후에도 사가, 펜더, 옵져버블등의 미들웨어의 도입에서도 선택 장애가 발생하는 문제들이 리덕스 선택을 주저하게 만듭니다.
2020년 리덕스는 좋은 선택지 일까요? 리덕스는 언제 그리고 어떻게 사용해야 활용도를 높일 수 있을까요? 에어비앤비 결제 시스템과 3차원 시각화 시스템에 적용한 리덕스 활용 사례를 살펴보며 리덕스의 효용 가치를 같이 살펴보고자 합니다.
○ 목차
- 형상관리를 어렵게 하는 요소들
- MobX vs Redux
- 단방향 데이터 흐름(Flux)
- 미들웨어 살펴보기
- 리덕스와 미들웨어 활용 데모
- Typescript와 GraphQL 도입 사례
리덕스를 도입할 때 주저하게 만드는 장벽들
○ 개요
몹엑스, 아폴로, 컨텍스트 API 등 리덕스를 도입하기도 전에 이미 선택적인 고민을 하게 만듭니다. 리덕스를 도입한 후에도 사가, 펜더, 옵져버블등의 미들웨어의 도입에서도 선택 장애가 발생하는 문제들이 리덕스 선택을 주저하게 만듭니다.
2020년 리덕스는 좋은 선택지 일까요? 리덕스는 언제 그리고 어떻게 사용해야 활용도를 높일 수 있을까요? 에어비앤비 결제 시스템과 3차원 시각화 시스템에 적용한 리덕스 활용 사례를 살펴보며 리덕스의 효용 가치를 같이 살펴보고자 합니다.
○ 목차
- 형상관리를 어렵게 하는 요소들
- MobX vs Redux
- 단방향 데이터 흐름(Flux)
- 미들웨어 살펴보기
- 리덕스와 미들웨어 활용 데모
- Typescript와 GraphQL 도입 사례
Ajax 기술 문서(작성자 : 김연수)
(첫 회사에 입사하여 만든 사내 배포용 기술 문서)
Ajax In Action 도서를 참고하며 자료를 만들었으며, 이 자료를 만들면서 AJAX에 대한 많은 이해를 하게 됐던 거 같다.
작성일자는 잘못된 것이고, 2007년에 만들고 발표한 것으로 추정된다.
4. 폼 요소들을 활성/비활성화하기
$(“#sameAsShipping”).change(function(){
if(this.checked){
$(“#billingInfo input:text”).attr(“disabled”, “disabled”).each(function(i){
// ShippingInfo에 해당하는 text box의 내용을 변수로 담아서
var valueFromShippingInput =
$(“#shippingInfo input:text:eq(“+ i + “)”).val();
// billingInfo의 text box에 삽입
$(this).val(valueFromShippingInput );
});
}else{
$(“#billingInfo input:text”).removeAttr(“disabled”);
}
}).trigger("change");
5. 폼 요소들을 활성/비활성화하기
$(“#shippingInfo input:text”).bind(“keyup change”, function(){
// Same as Shipping이 체크되어 있으면 실시간 update
if($(“#sameAsShipping:checked”).length){
var i = $(“#shippingInfo input:text”).index(this);
var valueFromShippingInput = $(this).val();
$(“#billingInfo input:text:eq(“ + i + “)”).val(valueFromShippingInput);
}
});
6. RadioButton 요소를 자동으로 선택하기
$(“#chooseSource input:text”).blur(function(){
if($(this).val() != “”){
$(this).siblings(“input:radio”).attr(“checked”, true);
}
});
‒ Other가 선택되면 자동으로 텍스트박스에 포커스 가도록 하기
$(“#chooseSource input:text”).each(function(){
var $inputTxt = $(this);
var $radioBtn = $inputTxt.siblings(“input:radio”);
$inputTxt.blur(function(){
if($inputTxt.val() != “”){
$radioBtn.attr(“checked”, true);
}
});
$radioBtn.change(function(){
if(this.checked){ $inputTxt.focus(); }
});
});
7. 전용 링크를 사용하여 모든 Checkbox 요소들을 활성/비활성화하기
• Select All / Deselect All 이라는 링크를 사용하여 checkbox 요소
들이 선택되고나 선택되지 않게 하기
$(“fieldset .selectAll”).click(function(event){
// 링크 이동 안 일어나도록 함
event.preventDefault();
$(this).siblings(“input:checkbox”).attr(“check”, “checked”);
});
$(“fieldset .deselectAll”).click(function(event){
event.preventDefault();
$(this).siblings(“input:checkbox”).removeAttr(“checked”);
});
8. 단일 토글을 사용하여 모든 checkbox 요소들을 선택/선택해제 하기
• checkbox 요소의 토글을 이용하여 모든 checkbox 요소들을 선
택하거나 선택해제하기
$(“filedset .toggle:checkbox”).each(function(){
var $toggle = $(this);
var $checkboxes = $toggle.siblings(“input:checkbox”);
$toggle.change(function(){
if(this.checked){
$checkboxes.attr(“checked”, “checked”);
}else{
$checkboxes.removeAttr(“checked”);
}
});
});
9. Select 요소에 옵션 추가 및 제거하기
• .appendTo() method 사용
‒ <option> 추가
$(“#add”).click(function(event){
event.preventDefault();
var optionName = $(“newColorName”).val();
var optionValue = $(“newColorValue”).val();
$(“<option/>”.attr(“value”,optionValue).text(optionName).appendTo(“#colors”);
});
‒ <option> 제거
$(“#remove”).click(function(event){
event.preventDefault();
var $select = $(“#colors”);
$(“option:selected”, $select).remove();
});
10. 문자의 개수에 의한 자동 탭 기능 구현하기
$(“fieldset.autotab input”).bind(“keydown keyup”, function(event){
var keyCode = event.which;
var ignoreKeyCodes = “,9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,”;
if(ignoreKeyCodes.indexOf(“,” + keyCode + “,”) > -1){return;}
// KeyDown의 경우 backspace 무시
if(keyCode == 8 && event.type == “keydown”){return;}
var $this = $(this);
var currentLength = $this.val().length;
var maximumLength = $this.attr(“maxlength”);
if(keyCode == 8 && currentLength == 0){
$this.prev().focus();
}
if(currentLength == maximumLength){
$this.next().focus();
}
});
11. 남아있는 글자의 개수를 표시하기
• Textarea에 글자수 제한 걸었을 때 현재 남은 글자수 표기
$(“.remaining”).each(function(){
var $count = $(“.count”, this);
var $input = $(this).prev();
var maximumCount = $count.text() * 1;
var update = function(){
var before = $count.text() * 1;
var now = maximumCount - $input.val().length;
if(now < 0){
var str = $input.val();
$input.val(str.substr(0,maximumCount));
now = 0;
}
if(before != now) $count.text(now);
}
$input.bind(“input keyup paste”, function(){setTimeout(update,0)});
update();
});
12. 텍스트 input 요소에 특정 글자만을 수용하기
• Keydown, blur event, 정규표현식 사용
$(“.onlyNumbers”).bind(‘keydown’,function(event){
var keyCode = event.which;
var isStandard = (keyCode > 47 && keyCode < 58); // 키보드 숫자
var isExtened = (keyCode > 95 && keyCode < 106); // 키패드 숫자
var validKeyCodes = “,8,37,38,39,40,46,”; // ← , Del, Arrow Key
var isOther = (validKeyCodes.indexOf(“,” + keyCode + “,”) > -1);
// 숫자 입력이 아니거나, valideKeyCode 내의 것이 아니면 키 입력 취소
if(isStandard || isExtended || isOther)
return true;
else
return false;
}).bind(‘blur’, function(){
var $input = $(this);
var value = $input.val();
// [^0-9] : 0~9 범위에 속하지 않는 문자, + : 1개 이상 일치, g : 모든 문자열에 대해 검사
var pattern = new RegExp(‘[^0-9]+”, “g”);
value = value.replace(pattern, “”); // 정규식에 해당하는 문자는 없는 문자(“”)로 치환
$input.val(value);
});
13. Ajax를 사용하여 폼을 전송하기
• $.get(), $.post() method 이용
‒ $.get(url [, data] [, success(data, textStatus, jqXHR)] [, dataType]);
‒ $.post(url [, data] [, success(data, textStatus, jqXHR)] [, dataType]);
→ url : 값을 전송할 url ( form 요소의 action 과 동일 )
→ data : 서버로 전송할 값(데이터), query String 혹은 map
→ success : 서버요청이 성공했을 때 실행시킬 콜백함수
→ dataType : 서버로부터 전송 받을 데이터 형식 (xml, json, script, text, html)
var data = $(“#keyword”).val();
$.get(“/lib/searchZip.php”, data, function(data){
$(“#srchPostLayer”).hide();
$(“#zipcode”).val(data);
}, text);
14. 폼 유효성 검사하기
• 폼 요소들이 유효한지 검사하여 폼이 오류가 없는 경우에만
submit 이벤트를 진행
$(“form”).submit(function(evnet){
var isErrorFree = true;
// 폼요소들이 유효한지 검사하여
$(“input, select, textarea”).each(function(){
if(valuedateElement.isValid(this) == false)
isErrorFree = false;
});
// 유효성 결과에 따라 submit을 진행(true 반환) 혹은 취소(false 반환) 시킴
return isErrorFree;
});
15. 폼 유효성 검사하기
• 폼 요소들의 유효성 검사
var validateElement = {
isValid : function(element){
var isValid = true;
var $element = $(element);
var id = $element.attr(“id”), name = $element.attr(“name”), value = $element.val();
var type = $element[0].type.toLowerCase();
switch(type){
case ’text’ :
case ‘password’ :
case ‘textarea’ :
if(value.length == 0 || value.replace(/\s/g, ‘’).length == 0)
isValid = false;
break;
// text, password, textarea 에 value 값이 없으면 오류처리
}
return isValid;
}
};