저번 글에서는 createElement 함수를 만들고, JSX 문법을 사용하여 가독성을 높여 DOM Element 를 생성하는 방식을 만들었다. 이번 글에서는 상태관리에 대해서 다룰 예정이다. 상태관리가 필요한 이유 내가 생각하는 상태란 사용자가 앱을 사용하면서 하는 행동에 의해 변경되는 값이고, 그 행동에 의해 변경된 UI 를 제공하는 값 이라고 생각한다. 예를들어, 간단히 만든 Todo 앱에서 화면에 보여지는 Todo 목록은 상태라고 볼 수 있다. 사용자가 Add 버튼을 누르면, input 에 입력된 값이 화면에 추가되어 보여지기를 기대하기 때문이다. 어떻게 변경된 UI 를 제공할 수 있을까? DOM Element 추가라면 appendChild 를 하고, 삭제라면 removeChild 를 하면 될까?..

HTML 태그를 JavaScript 로 표현하기 이전에 카카오페이지 클론 을 할 때, HTML 태그를 모두 작성하고, 그 태그를 JavaScript 로 옮겨 사용했던 적이 있다. React 를 맛만봤던 그 당시에는 JSX 처럼 HTML 태그 자체를 템플릿 리터럴(``) 으로 반환하여 사용하면 createElement, appendChild 등의 DOM API 노가다를 하지 않아도 되는 편리함에 취했다. 이전 Hello World 밥먹기 설거지하기 Add 이후 const app = document.getElementById('app'); app.innerHTML = ` Hello World 밥먹기 설거지하기 Add `; 이걸 컴포넌트로 나누어 모듈화 한다면 아래처럼 된다. // src/components/..

Intl.NumberFormat, Number.prototype.toLocaleString 자주 사용하는 Number with comma 만약 10000 이라면 10,000 으로 사용할 수 있도록 하는 util 함수를 만들어 사용하곤 했다. 이 함수를 만들기 위해서 Number.prototype.toLocaleString 을 썼었는데, 오늘 다시 number with comma 에 대해서 검색해보다 내장 객체인 Intl.NumberFormat 에 대해서 알게됐다. 알고보니 Number.prototype.toLocaleString 이 단순히 Intl.NumberFormat 을 호출하는 메서드라고 한다. 만약 number 가 큰 경우는 Performance 상으로 Intl.NumberType 을 쓰는게 더 ..

JavaScript 숫자 범위 + falsy Jamie 가 알고리즘을 푸시다가 Javascript 의 문법적 요소에 관하여 질문을 주셨다. 백준 문제를 푸시는데, 1 의 숫자가 늘어나면서 몇의 자리 숫자일 때 특정 숫자(n) 의 배수가 되는지를 찾는 문제였다. ex) n 이 3 일 때 111 은 3의 배수, 3자리 이므로 3, n 이 7 일 때 111111 은 7의 배수, 6자리 이므로 6 여기서 1의 숫자가 늘어나는 것을 multiple 이라는 변수로 설정하고, multiple * 10 + 1 을 무한반복으로 찾을 때 똑같은 로직인 것 같은데 하나는 시간초과, 하나는 틀렸습니다 가 나온다는 것이었다. // 틀렸습니다 while(true){ if (!(+multiple % num)) return ~~ }..

무엇이 배열로 형변환이 자유로운거지? 평소 자바스크립트에서 "문자열" 을 다룰 때, Array.from() 메서드를 사용하거나 ... (스프레드 연산자) 를 사용해서 문자열 배열의 형변환을 자유롭게 합니다. 1. "ABCDEF" 에서 "D" 를 없애주세요 const string = "ABCDEF"; const strArr = string.split(""); strArr.splice(strArr.indexOf("D"), 1); const newStr = strArr.join(""); console.log(newStr); // "ABCEF" 2. 위에선 indexOf 를 사용했지만, 간단히 고차함수를 사용할 수도 있습니다. const string = "ABCDEF"; const strArr = string...

전역 변수 변수는 자신이 선언된 함수가 호출될 때 생성되는 함수 렉시컬 환경의 생명주기를 따라 소멸됩니다. 가비지 컬렉터(GC) 에 의해서 소멸되는 것인데요, 함수가 호출될 때 생성되는 함수 렉시컬 환경이 어느 곳이든지 참조를 하고 있지 않다면 GC 에 의해서 소멸됩니다. 그렇다면 전역 변수는 어떤 생명주기를 따르게 될까요? var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티 가 되는데요, 그렇다면 전역 변수의 생명주기는 전역 객체의 생명주기와 일치할 것이고, 전역 객체의 생명주기는 코드를 실행하는 환경이 종료되야 종료되므로, 결국 끝까지 GC 에 의해 소멸되지 않게됩니다. 즉, 메모리 누수로 이어지게 됩니다. 전역 객체 브라우저 환경의 모든 자바스크립트 코드는 하나의 전역객체 window 를 공유..

함수와 클로저(closure) 스코프 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 갖는다. var 또한 함수 레벨 스코프 let, const 는 블록 레벨 스코프 // 함수 선언문 -> 함수 호이스팅 function foo(){ } // 함수 표현 식 -> 변수 호이스팅 const foo = function() { } function foo() { if(true) { var color = 'blue'; } console.log(color); // blue } console.log(color); // color is not defined foo(); function bar() { if(true) { let color = 'blue'; } console.log(color); // Reference e..

이슈 JavaScript Ajax 통신의 기존 방식의 코드에서, 크롬환경에서는 이상이 없으나 ie 환경에서 데이터를 get 통신 ( query 입력 값 ) 을 하는 과정에서는 ? (Special Character) 가 전달되었다. 기존 코드 var surveyInfo = ""; for (var i = 0; i < s.length; i++) { surveyInfo = surveyInfo + s[i][0] + ","; surveyInfo = surveyInfo + s[i][1] + ","; } surveyInfo = surveyInfo.slice(0, -1); $.ajaxSetup({cache:false}); $.get('save_survey.jsp?surveyinfo='+ surveyInfo, functi..

Javascript 로 XML을 불러오는 과정에서, 이전에는 잘 되었던 기능이 getElementsByTagName 을 읽지 못하였고, 확인해보니 XML을 불러오기는 하나, responseXML 만 Null 을 반환하는 경우가 생겼다. 기존 코드 var xhttp = new XMLHttpRequest(); var url = "../xml/test.xml" if(xhttp){ xhttp.open("GET", url, true); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.send(); } function myFunction(xml) { v..