비동기로 데이터를 받아서 처리하는 부분을 그릴 때 전통적으로 for 를 이용한 방법을 많이 쓰게 된다.
var arrData = []; //ajax 같은 비동기 통신으로 자료를 받아서 넣어둠.
var template = '';
for (i=0; i < arrData.length; i++) {
// 여기에 template에 채울 내용을 마크업과 함께 문자열 + 변수 등으로 만들어서 촥촥촥 쌓아서 만듬
}
// jquery를 예로 사용함.
$('#something').append(template);
뭐 이런 방식이다. 직관적인 만큼 코드가 길어지고 보기 흉해지는 단점도 있으며 데이터 양이 엄청날 경우 성능문제도 생긴다.
map의 경우 es5부터인가 추가된 메소드로 생각보다 간단하고 빠른 성능을 제공한다. 물론 나같은 머리가 잘 안돌아가는 개발자들은 처음에 접하면 그 방법을 이해하는데 조금 시간이 걸린다.
var arrData = []; // 역시나 ajax 같은 비동기 통신으로 자료를 받아서 넣어둠
var template = arrData.map(function(v, i) { // es6의 arrow function 을 쓰면 더 간략하게 할 수 있으나 내가 처한 환경은 아직 그렇지 못하다 ㅠ
return '<div>'+v.Name+'</div>'; // div 태그 사이에 템플릿과 데이터를 문자열과 변수로 만들어서 template 라는 함수에 retun 시킴. 첫번째로 받는 v인자 위치에 arrData 가 들어온다고 보면 된다. 그래서 보통 v(alue)라는 약칭으로 쓰는 거 같다.
});
$('#something').append(template);
이렇게 하는 방법이 가능해진다. 물론 조금 더 개량하면
arrData.map(function(v, i) {
$('#something').append('<div>'+v.Name+'</div>'); // div 태그 사이에 템플릿과 데이터를 문자열과 변수로 만들어서 template 라는 함수에 retun 시킴.
});
이렇게도 된다. 방법은 사용자가 편한대로 쓰는게 제일 좋은 것 같다. 다만 for를 사용할 때와 map을 사용할 때를 구분해야할 거 같은데
for의 경우 전달받은 데이터를 어떠한 기준에 의거 판별해야하는.. 즉, if else 문 로직을 태워야 할 경우 for가 유리하고 (if / else if / else 처럼 복잡한 상황을 판별해야할 경우..)
map()의 경우는 단순 3항연산식 정도로 값이나 상태의 판별이 가능할 경우 유리하다.
나는 정규 컴퓨터공학 교육을 받은 개발자가 아니다. 어디까지나 약간의 학원과 철저한 독학으로 여기까지 온 사람인데 시행착오가 엄청났다. 한글로 써 있지만 내가 알아들을 수 없는 말들로 된 설명을 이해하는 과정에서 한자와 영어가 섞인 고급진 단어로 설명하는게 아닌 나만의 글자와 언어로 설명하는 내용의 글들을 종종 남겨보고자 한다. 오늘 예로 들은 map()의 경우도 이해하는데 꽤나 시간이 걸렸다. 이유는 역시나 저 위치에 있는 v는 뭐고 i는 뭐지? 이런 궁금증에 대해 답을 잘 찾지 못했기 때문이다. (멍청하다는 얘기다.)
앞으로도 종종 나만의 쉬운 언어로 이런 글들을 남겨보고자 한다. 이 벨로그를 만들어준 벨로퍼트님도 그렇고 제로초님. 이 두분이 그나마 그런 컨셉으로 잘 설명해주는 거 같아서 그런 방향으로 글을 남겨보고자 한다.
Array.map() 을 사용하여 데이터를 받을 때 boolean 값이 있다면 그건 다 문자열로 바뀜 ㅠㅠ 해결책을 찾아봐야 할 듯 싶음 ㅠ
들어가며 요즘은 플러터나 리액트 네이티브 같은 좋은 녀석들이 많아서 앱 개발의 진입장벽이 많이 낮아졌다. 하지만 우리 회사처럼 하드웨어 디펜던시가 높은 서비스(블루투스 시리얼 통신 같은..)나 거기에 웹으로 된 걸 당장 앱에다 때려넣는 그런 서비스라면 안드로이드 웹뷰를 외면할 수 없다. sessionStorage 안드로이드 웹뷰는 기본적으로 sessi...
비동기로 데이터를 받아서 처리하는 부분을 그릴 때 전통적으로 for 를 이용한 방법을 많이 쓰게 된다. for ~ var arrData = []; //ajax 같은 비동기 통신으로 자료를 받아서 넣어둠. var template = ''; for (i=0; i arrData.length; i++) { // 여기에 template에 채울 내용을 마크업...
sessionStorage에는 boolean 값이 안들어간다. 이거 몰라서 엄청 삽질했다. 2. 생각보다 웹소켓을 다루는 일은 어렵지 않다. 다만 네트워크에 대한 지식이 없으면 삽질을 많이하게 된다. 3. ajax 콜백은 정말 미칠 거 같다. 거기서 빠져나오는 걸 떠나서 콜백에서 작성한 코드들과 그 밖에서 작성된 코드들의 관계가 참 까다롭다. 4. 어렵다 ...
자바스크립트에서 시간을 다루는 데에는 moment.js 만큼 좋은 것이 없다. 포맷변환도 쉽고 사용법도 상당히 직관적이다. 오늘 문제는 ISO 규격으로 시간을 다루던 중 발생됐던 일이다. 나는 흘러간 시간을 구해야하는데 원리는 사실 간단하다. 현재시간에서 기준이 되는 시간을 빼서 1초마다 업데이트 하면 되는 것이다. 하지만 시간이 자꾸 엉뚱하게 만들어지는...
흔히 우리가 아는 mongodb restore 명령어가 있다. "mongorestore -h 127.0.0.1 -d [db이름] ~/덤프경로" 근데 이게 3.0이상에선 되질 않는다. 언제부터 업그레이드 됐는지는 모르겠지만.. 약간의 검색을 하면 답이 나오긴 하는데 아직은 좀 숨겨져(?) 있다. "mongorestore -d [yourdbname] [yo...
for문 사용하다가 map으로 넘어가면 신세계죠... 다만 처음 이해가 어려울뿐...ㅠㅠ