new1cm

 4원을 두 사람이 각각 62.5%, 37.5% 나누어 가지는 상황입니다.  받는 금액은 2.5원, 1.5원이 되는데, 이 금액을 표시하는 페이지가 있다고 했을 때, 시스템적으로 소수점을 표시하지 않는다고 하면 어떻게 해야 할까요?  버림을 하게 되면 2원, 1원 표기가 되고, 합계는 3원이 되어 이상하게 보입니다.  올림을 하게 되면 3원, 2원 표기가 되고, 합계는 4원이 되어 이 또한 이상합니다.  반올림을 하면? 둘 다 .5로 끝나기 때문에 올림을 한 것과 같은 결과가 나오게 됩니다.  이 문제를 어떻게 처리하나 찾아보니 '은행원의 반올림'이라는 것을 알게 되었습니다.  이 방식은 반올림을 할 때, 5의 경우 윗자리 가장 가까운 짝수로 처리한다는 것입니다.  즉, 5는 0, 15는 20, 25는 20, 35는 40, 이런 식으로 처리하는 것입니다.  이 방식을 사용위 위의 소수점을 처리한다면 2.5원, 1.5원은 2원, 2원으로 표기되며 총 금액이 4원으로 맞게 됩니다.  하지만 '은행원의 반올림'에도 문제가 있습니다.  일단 2.5원을 받을 사람이 자신의 금액에 2원이라고 되어 있으면 기분이 나쁘겠죠.  금액이 적어진 것도 그렇지만 누구는 버림을 하고 누구는 올림을 했으니 공평하지 않다고 생각할 겁니다.  그리고, 두 사람이 50%로 공평하게 나눈다고 하면 근본 문제가 해결되지 않습니다.  3원을 둘로 나누어 1.5원씩 나누어 가진다고 했을 때, 이 금액은 "은행원의 반올림'을 해도 2원씩 표시되어 총 금액이 원금인 3원보다 높은 4원이 표시됩니다.  결국에는 이런 부분에서는 시스템적으로 반올림 사용을 최소화 하는 게 답이 아닐까 생각하게 됩니다.

 영어 단어 외우는 것과 별개로 알파벳 순서를 중간에서 바로 떠올리려고 하면 버벅댈 때가 있습니다.  특히 알파벳 오름차순이나 내림차순으로 되어있는 목록을 찾을 때(예를 들면 책으로 된 영어사전이라던가...) 바로 떠오르지 않아 답답한 경우가 있어서 앱을 하나 만들었습니다.  표시되는 알파벳을 보고 다음이나 이전 알파벳을 선택하는 단순한 게임입니다. https://play.google.com/store/apps/details?id=com.nextcharactergamenew1cm  ***아이폰 개발 환경은 갖추고 있지 않아서 안드로이드만 올라가 있습니다.***

 자바스크립트에서 특정한 값으로 초기화된 배열을 만드는 방법은 아래와 같습니다. const arr1 = new Array(10).fill(0); // [0,0,0,0,0,0,0,0,0,0] const arr = new Array(10).fill().map((value, index, array) => index + 1); // [1,2,3,4,5,6,7,8,9,10]  'new Array(10)'를 사용해 길이가 10인 비어있는 배열을 만들 수 있습니다.  '.fill()'을 사용하면 단일 값으로 배열 내부를 채울 수 있습니다. '.fill(0)'이나 '.fill(null)'처럼 원하는 값을 넣을 수 있습니다.  단일 값이 아니라 순차적으로 변하는 값으로 초기화를 하기 위해서는 이어서 '.map()'을 사용하면 됩니다. 인자값에 함수를 정의하면 함수의 반환 값으로 새로운 배열을 만들어 반환합니다.  주의할 점은 'new Array()'를 사용해 만들어진 빈 배열은 '.map()'이 돌아가지 않습니다. '.fill()'을 사용해 어떤 값이라도 먼저 초기화를 해야 '.map()'이 돌아갑니다.

 Node.js의 child_process.spawn을 사용해 외부 프로그램을 실행할 때 실행파일의 바로가기를 사용하려고 합니다.  하지만, 바로가기 파일을 그냥 호출하면 오류가 발생합니다. 그때는 아래 코드와 같이 'shell: true'옵션을 설정해야 합니다. // Node.js v14.x const { spawn } = require('child_process'); spawn('C:/Users/my/Desktop/Program.lnk', args, { shell: true });  윈도우 바로가기의 파일 확장자인 '.lnk'를 꼭 붙여야 하며, 실행시 인자값이 없는 경우는 args에 null을 넣으면 됩니다.  관련된 질문 페이지 :  https://stackoverflow.com/questions/41497183/spawning-a-lnk-windows-shortcut-with-node-js-gives-unknown-error  child_process.spawn 공식 문서 :  https://nodejs.org/dist/latest-v14.x/docs/api/child_process.html#child_process_child_process_spawn_command_args_options

 '<?php'로 시작하는 PHP 파일에서 종료 태그인 '?>'를 생략하는 것은 단순히 편하기 때문이 아닐까 생각했습니다.  문득 정확한 이유가 있을까 찾아보니, 좀 더 명확한 이유가 있었습니다.  종료 태그를 넣은 다음에 실수로 공백이나 줄 바꿈이 추가되면 뜻하지 않은 문제가 발생할 수 있기 때문에 이를 방지하기 위함이라고 합니다.

 PHP에서 JSON형식으로 '{}'값을 반환해야 하는 상황이 생겼습니다.  지금까지 연관배열을 사용해 JSON을 만들었는데, 아무것도 들어있지 않은 값은 '[]' 형태의 배열이 반환됩니다.  찾아보니 JSON으로 변환 할 때 '{}'를 만들기 위해서는 'new stdClass()'로 빈 객체를 넣어주라고 합니다. $empty = []; echo json_encode($empty); // "[]" $empty = new stdClass(); echo json_encode($empty); // "{}"

검색해서 찾은 페이지 링크. https://syuda.tistory.com/146

 PHP를 사용하여 카페24 쇼핑몰에 사용되는 앱을 만들고 있습니다.  앱의 관리자 페이지를 접근할 때 사용자 인증을 해야 하는데, 카페24의 페이지를 거쳐서 접근하는 사람만 앱의 관리 페이지에 접근할 수 있게 하는 방식입니다.  쉽게 말해서 카페24가 제공하는 버튼을 눌러 들어와야 내가 만든 서버에 로그인이 됩니다. 때문에 사용자가 정확한 경로로 접근 했는지 확인을 해야 합니다. 그 방법으로는 요청 파라미터 값으로 들어오는 hmac 값을 검증하는 게 있습니다. ( 개발자 문서 )  PHP를 사용해 검증하는 소스를 다음과 같이 만들었습니다. $hmac = $_GET['hmac']; $key = [SECRET_KEY]; $url = [REQUEST_URL]; // 주소에서 쿼리 문자 분리. // URL인코딩 되어있는 요청받은 그대로의 주소를 가지고 추출한다. $query = parse_url($url, PHP_URL_QUERY); $query = substr($query, 0, strrpos($query, '&')); // 해시값 생성. $hash = base64_encode(hash_hmac('sha256', $query, $key, true)); $pass = ($hmac === $hash);  쿼리 문자열은 파라미터를 가공해 만들지 말고, 요청 URL을 통으로 얻어 앞 부분과, 뒤쪽 hmac 부분을 제거한 다음에 사용하는 것을 추천합니다.  요청 URL은 URL 인코딩이 되어 있습니다. hmac 부분이 빠진 쿼리 문자열은  URL 인코딩된 그대로 해시값을 만들어야 합니다. 다만 생성된 해시값과 비교할  hmac 값은 URL 디코딩된 값을 사용해야 합니다.

 라라벨에서는 컨트롤러에서 유효성 검사를 통과하지 못하고 되돌아왔을 때, 해당 페이지가 오류를 표시할 수 있는 적절한 코드로 되어있다면 검사를 통과하지 못한 대상에 무엇이 문제인지 표시할 수 있습니다.  제가 알고 싶었던 것은, '원하는 때에 원하는 내용으로 유효성 메시지를 표시하는 방법'이었습니다. 그래서 이와 관련된 내용을 찾았고, 찾은 내용은 아래 링크입니다. [ stack overflow ]  방법은 소스코드 내에서 'Illuminate\Validation\ValidationException' 오류를 원하는 메시지로 생성하여  throw 하면 됩니다. use Illuminate\Validation\ValidationException; ... throw ValidationException::withMessages([ 'file' => ['파일 오류'] ]);  예시로 적은 위 코드는 유효성 검사를 해야 하는 항목 중에서 이름이 file로 지정된 요소에 '파일 오류'라는 메시지를 전달합니다.

 Vue3 를 사용하다보면 템플릿에서 임의로 이벤트를 만들어야 하는 경우가 있습니다.  이벤트 이름을 정할 때 띄어쓰기는 어떻게 처리하나 고민했지만 다행이 Vue3 가이드에서 이와 관련된 내용을 찾을 수 있었습니다. ( 링크 )  HTML은 대소문자를 구분하지 않으며, 'v-on' 이벤트리스너는 항상 자동으로 소문자 변환하기 때문에 카멜 표기법(camelCase)이나 파스칼 표기법(PascalCase)은 의미가 없다고 합니다. 거기다 이벤트의 이름은 템플릿 내에서 별도의 변수로 사용되는 경우가 없기 때문에 케밥 표기법(kebob-case) 사용을 권장한다고 합니다. <input type="text" @my-change-event="onClick">

 PHP를 사용해 외부 FTP 서버에 파일을 업로드 하려고 합니다.  아래 코드와 같은 흐름으로 작성을 했지만, 크기가 0인 파일만 만들어지고 데이터는 올라가지 않네요. // Error code. $ftpConn = ftp_connect($ftpHost, $ftpPort); ftp_login($ftpConn, $Id, $password); ftp_put($ftpConn, $file, $path, FTP_BINARY)); // timeout ftp_close($ftpConn);  찾아보니 FTP 서버의 환경에 따라서 '수동모드'를 작동해야 한다고 합니다. 'ftp_pasv()' 함수로 해당 설정을 할 수 있는데, 값을 true로 설정해도 업로드가 안되는 것은 여전했습니다. // Error code. $ftpConn = ftp_connect($ftpHost, $ftpPort); ftp_pasv($ftpConn, true); ftp_login($ftpConn, $Id, $password); ftp_put($ftpConn, $file, $path, FTP_BINARY)); // timeout ftp_close($ftpConn);  결국 답을 찾았습니다. 어이없게도 코드의 순서가 잘못되어 있었습니다. 'ftp_login()' 이후에 해당 옵션을 설정해야 정상적으로 작동을 합니다. $ftpConn = ftp_connect($ftpHost, $ftpPort); ftp_login($ftpConn, $Id, $password); ftp_pasv($ftpConn, true); // 로그인 다음에 설정해야한다. ftp_put($ftpConn, $file, $path, FTP_BINARY)); ftp_close($ftpConn);

 git을 처음 깔았을 때 설정해야 하는 값을 적어봅니다. # 사용자 이름과 이메일 저장. git config --global user.name "name" git config --global user.email "email@email.com" # 메인 브런치 이름 변경. (master를 사용하지 않는 방향으로 바뀌고 있다.) git config --global init.defaultBranch main # 줄바꿈 문자 관리. (윈도우와 리눅스의 설정값이 다르다.) git config --global core.autocrlf true #윈도우 git config --global core.autocrlf input #리눅스  core.autocrlf는 줄바꿈 문자를 설정하는 옵션입니다. 저장소에 저장할 때 줄바꿈 문자를 통일하기 위한 설정입니다. 윈도우에서는 true 값을 설정하여 저장시에는 LF로 변환, 불러올 때는 CRLF로 변환 되도록 합니다. 리눅스에서는 input 값을 설정하여 저장시에는 LF로 변환, 불러올 때는 변환없음으로 처리합니다. 결과적으로 저장소에는 LF 줄바꿈 문자만 들어가게 됩니다.

 Vue.js 를 사용하여 하나의 이벤트에 두 개 이상의 핸들러 등록이 필요한 경우 아래와 같이 쉼표로 구분하여 등록이 가능합니다. <button @click="onClickA(), onClickB()" type="button"> </button>  주의사항으로  핸들러를 등록할 때는 변수형이 아니라 실행문으로 처리해야 합니다.  이렇게 실행문 형태로 핸들러를 등록 할 때 내부에서 이벤트 인자값이 필요한 경우에는 아래와 같이 '$event'를 인자로 추가하면 됩니다. <button @click="onClickA($event), onClickB($event)" type="button"> </button>

비주얼 스튜디오 코드에서 내가 작성한 글자의 수를 알고 싶을때 WordCounter 라는 플러그인을 사용하면 됩니다. 비주얼 스튜디오 코드가 설치되어 있는 PC에서 위에 있는 링크 페이지에서 'install'버튼을 누르면 에디터가 실행되면서 설치가 됩니다. 아니면 간단하게 에디터 플러그인 관리 화면에서 'wordcounter'검색하면 해당 플러그인을 설치할 수 있습니다. 플러그인이 설치되면 입력하는 글자에 대한 정보가 에디터 하단에 표시됩니다.

언제부터인가 '비주얼 스튜디오 코드'에서 HTML 소스를 수정할 때 태그의 열림이나 닫힘 부분에 커서가 있으면 양쪽에 커서가 생기는 기능이 적용되어 있었습니다. 커서가 태그 이름에 있을 때만 적용됩니다. 아마도 태그를 수정할 때 유용하라고 만든 기능 같습니다. 하지만 저는 어색하고 불편해서 이 기능을 끄려고 합니다. 구글에 검색해도 해당 옵션에 대해 나오는 게 없었는데, 그냥 에디터 설정에 들어가서 '커서' 라고 검색하니 해당 옵션이 나왔습니다. '일치하는 HTML 태그에서 미러링 커서를 활성화/비활성화합니다.' (Mirror Cursor On Matching Tag) 위 옵션을 체크해제하면 해당 기능을 막을 수 있습니다.

Three.js를 사용하여 대상을 표현하는데 자글거리는 증상이 나옵니다. 카메라를 이동해서 가까이 가면 증상이 나오지 않지만 멀리 떨어지면 나오는 증상이었습니다. 대상을 구성하는 요소들이 겹치면서 자글거리는 것 같다고 생각이 들었지만 어떻게 처리해야 하는지 알 수 없었습니다. 그러다가 다음과 같은 글을 찾았습니다. https://github.com/jeromeetienne/AR.js/issues/401 댓글에 나와있는 답변에서 아래와 같은 내용을 봤습니다. var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }); 공식 문서에서 "WebGLRenderer" -> "logarithmicDepthBuffer" 항목을 찾아보니 다음과 같은 설명과 예시를 볼 수 있었습니다. https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer ( ctrl + f -> logarithmicDepthBuffer 검색 ) https://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer 이 옵션은 깊이에 관련된 옵션으로 보였고, 옵션을 적용하니 문제는 쉽게 해결되었습니다.

Three.js를 사용한 3D 공간에 캐릭터를 표시했습니다. 카메라를 이리저리 움직이며 보던 중에 가까이 접근하면 머리카락이 사라지는 증상을 알게 되었습니다. 이 문제를 찾아보기 위해 구글에 검색을 하니 비슷한 질문을 찾게 되었습니다. https://discourse.threejs.org/t/mesh-disapear-when-camera-close/2914 https://stackoverflow.com/questions/50501392/mesh-disapear-when-camera-close 보여지고 있는 object3D 객체의 "frustumCulled"값에 false를 넣으면 됩니다. 카메라에 보이지 않아도 렌더링 대상에 넣어주는 옵션으로 보입니다. https://threejs.org/docs/index.html#api/en/core/Object3D.frustumCulled 저는 mesh에만 적용하여 사용 했는데 소스는 다음과 같습니다. object3D.traverse(function (obj) { if (obj.isMesh) { obj.frustumCulled = false; } }); Object3D.traverse() 를 사용해 내부를 돌면서 mesh만 골라 "fustumCulled"를 설정하는 겁니다. 이렇게 하니 문제가 해결되었습니다. 이 문제는 애니메이션이 있는 대상에서 자주 일어난다고 합니다.

윈도우 PHP 환경에서 로컬에 있는 MySQL 조회가 느린경우 우선적으로 DB접근 경로를 "localhost"문자열 대신 "127.0.0.1"을 입력하는 게 좋습니다. "C:\Windows\System32\drivers\etc\hosts" 파일도 건드려 보긴 했지만 효과가 없었고(재부팅을 해야 했나?), IP를 직접 입력하는 게 제일 깔끔했습니다.

Windows PowerShell에서 Symbolic link 만들기. 파워쉘에서 심볼릭 링크를 만들기 위해서 관리자 모드로 실행해야 합니다. 관리자 모드에서 아래 나오는 명령어를 입력하면 됩니다. (전부 소문자로 적어도 작동을 하지만 대소문자를 구별하면 읽기 편합니다.) New-item -itemType SymbolicLink -path "./linkPath" -target "./targetPath" D 드라브의 심볼릭 링크를 만드는 예.

모바일 브라우저는 소리를 포함한 영상을 자동재생할 수 없습니다. YouTube도 그렇고, video 태그도 그렇고, 음소거를 해야 자동재생이 가능합니다. 그럼에도 iOS에서는 무조건 막는 경우가 있는데 사용하는 폰이 절전모드인지 확인해 봐야 합니다. 절전모드로 되어있는 아이폰에서는 자동재생이 무조건 막히는 것을 확인 했습니다. (제가 가지고 있는 안드로이드 폰의 경우, 절전모드로 되어 있어도 자동재생이 가능 했습니다.)