7월, 2018의 게시물 표시

자바스크립트로 언더바표기를 낙타표기로 전환하는 법

 `DATA_NAME`형태의 값을 `dataName`로 변환하는 자바스크립트 let name = 'DATA_NAME'; name = name.toLowerCase().replace(/_[a-z]/g, function (str) { return str[1].toUpperCase(); }); console.log(name);  전체 값을 `str.toLowerCase()`를 사용해 소문자로 변환합니다.  `/_[a-z]/g' 정규표현식을 사용해 앞에 언더바가 붙은 소문자 알파벳을 찾습니다. 당연히 매칭되는 값은 `_n`같이 `_`로 시작하는 두 글자 문자열이 됩니다.  자바스크립트의 `str.replace('a', 'b')`는 두 번째 인자에는 교체될 문자열이나 함수를 넣을 수 있습니다. 두 번째 인자에 함수를 넣으면 매칭되는 대상을 첫 번째 인자로 받습니다. 그리고 이 함수가 반환한 값으로 대상을 교체하게 됩니다. 그렇기 때문에 정규표현식으로 감지되는 문자열에서 두 번째 값만 대문자로 변환하여 반환하면 원하는 형태를 얻을 수 있습니다.

자바스크립트에서 깊은 복사를 간편하게 하기

 자바스크립트 변수에 있는 값을 새로운 변수에 넣었을 때 숫자나 문자열 같은 경우는 값이 복사가 됩니다. var a = 1; var b = a; b = 2; console.log(a); //b의 값이 바뀌어도 a 값은 바뀌지 않는다.  하지만 object와 같은 객체가 들어가 있는 변수는 내부의 값이 같은 대상을 가리키게 됩니다. var c = {x: 1}; var d = c; d.x = 2; console.log(c.x); //c와 d가 같은 대상을 가리키고 있기 때문에 변경된 값이 출력된다.  간편하게 깊은 복사를 하는 방법은 아래와 같습니다. var e = {x: 1}; var f = JSON.parse(JSON.stringify(e)); f.x = 2; console.log(e.x); // 문자열로 반환된 값을 다시 객체로 변환하였기 때문에 값이 복사되었다.  주의사항, 간편하게 사용할 수 있다고 복사에 무조건 사용하면 안 됩니다. 객체의 메소드와 같이 함수는 복사되지 않기 때문입니다. 복사 대상이 가지고 있는 값의 특성을 고민해야 합니다. 자신이 만든 클래스로 구현된 인스턴스를 복사하는 것이라면 별도의 함수나, clone 메소드를 구현하여 값을 복사하는 게 좀 더 좋다고 생각합니다. (반복문이나 재귀를 사용하여 값을 일일이 새로운 객체에 넣는 방법.)

개인적으로 사용할 3D 콘텐츠를 받을 수 있는 사이트

이미지
 테스트를 위해 무료로 3D 콘텐츠를 구할 수 있는 곳을 찾다가 좋은 곳이 있어 정리합니다. Sketchfab  자신이 만든 3D 콘텐츠를 판매하거나 공유할 수 있으며 커뮤니티 기능을 지원하는 사이트입니다. 미리 보기가 가능하기 때문에 구경하는 재미도 있습니다.  개인적인 목적으로 3D 콘텐츠가 필요하다면 상단의 explore 항목에서 다운로드 가능한 대상을 검색하면 됩니다.   다운로드를 위해서는 회원가입이 필요합니다.  결과 페이지의 상단에 filters를 사용해 추가 조건으로 목록을 추릴 수 있습니다.  스토어에 들어가면 디테일이 뛰어난 작품들을 볼 수 있습니다. 구매는 하지 않더라도 미리 보기로 구경하는 재미가 있습니다.

무료 순서도(플로우차트, 마인드맵) 프로그램 draw.io

이미지
 순서도를 그릴 일이 생겨 검색을 하다가 알게 되었습니다. draw.io  그림판이라던가 문서프로그램으로 만들 때 가장 거슬리는 부분이 각 요소의 정렬입니다. 이 프로그램은 모눈 단위로 이동을 하므로 쉽게 위치 잡기가 가능합니다. 또 화살표를 그리기도 쉽고 각 요소끼리 연결해 두면 알아서 따라가는 것도 마음에 듭니다. 이미지라던가 html로 출력도 쉽고, 여러 면에서 상당히 좋다고 생각되는 프로그램입니다.  위 링크에 들어가면 웹 브라우저에서 바로 사용할 수 있습니다. 개인적으로는 크롬 브라우저를 추천합니다. 들어가자마자 저장 위치 설정이 나옵니다. 설정 전에 언어를 한글로 바꾸면 사용이 쉽습니다. (화면을 새로 고치면 한글로 됩니다.) 저는 그냥 PC에 저장하고 불러오는 것으로 설정 했습니다. 새 다이어그램 만들기를 선택하면 여러 가지 기본 틀이 있습니다. 필요에 따라 선택하면 됩니다. 웹 브라우저에서 사용하는 게 좀 별로라고 한다면 사용하고 있는 PC에 설치하는 버전도 있습니다. 윈도우, 맥, 리눅스에서 사용할 수 있습니다. [ 다운로드 링크 ] 위 링크를 누르거나 웹 에디터의 설정의 "도움말 > Get Desktop" 항목을 눌러 다운받을 수 있습니다. 저는 윈도우10을 사용하고 있어서 윈도우용을 설치 했습니다. 저장이라던가 불러오기에 있어서 좀 더 이점이 있지만 전반적으로 웹 버전 그대로의 모습을 가지고 있습니다. (하이브리드 앱으로 만든 것 같네요.) 언어 설정도 웹과 같습니다. 새로 고침을 하라고 나오면 프로그램을 껐다가 다시 켜면 됩니다.