마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 javascript 로 원시 이진 데이터(raw binary data)를 조작하여 canvas 를 통해 이미지를 출력한다.흔하게 경험하는 것도 아니고, 사용하는 일도 많지는 않다.하지만 글을 통해 기본적인 canvas 원리와 binary 이해에 도움이 되리라 생각한다. raw 데이터로써, 바이너리 형태인 파일이 존재한다.즉, 이 raw 데이터의 파일은 이미지 포맷(png, jpg, etc..) 형태도 아닌, RGB 형태도 아니다.이러한 raw 데이터를 가지고, 흑백 이미지를 출력할 것이다. 대부분 이미지 포맷이 된 형태의 파일을 넘겨받기 때문에, 앞단에서는 대부분 이러한 행위를 하지 않는다.하지만 자바스크립트에서 raw 데이터를 조작하는 것이 점차 늘어가고 있고, 늘어갈 것이다.아무튼 이 글에서..

이 글은 Chrome Autoplay Policy 변화에 의한 에러 이슈를 다룬다.주제는 정책의 목적, 장점 그리고 에러를 해결하기 위한 방안을 살펴본다.웹 개발을 하다가, video/audio 태그를 통한 자동 재생을 요구할 경우에 경험할 수 있다.공식 문서 - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 본인은 예전에 개발 기능 중 비디오와 오디오를 자동 재생해야을 진행하다가, 다음과 같은 에러를 발생하는 경험을 했다.결론은 정책적인 이슈라서, 자세히 보지않고 넘겼다.그러던 중, 최근 다시 한번 문제를 경험했다.그로인해, 궁금증을 해결하는 과정에서 개발 외적인 요소에서의 정보도 얻을 수 있어, 글을 남기게 되었다...

이 글은 removeEventListener 관련된 주제로 글을 다룬다.이벤트 리스너를 관련해서 원하는 결과를 얻지 못한 경험이 있다면, 읽어보길 바란다.그리고 자연스럽게 this 와 call, bind, apply 와 같은 메소드를 익힐 수 있을 것이다.참고한 링크 - https://kostasbariotis.com/removeeventlistener-and-this/ 글을 진행하기 전에, 사전에 필요한 것들을 많은 용도가 있지만 여기서는 간략히 다뤄본다. addEventListenerremoveEventListenerbindcall, apply 이벤트 리스너 등록을 위해 addEventListener 메소드를 사용한다.등록된 이벤트 리스너를 제거하기 위해 removeEventListener 메소드를 ..

이 글은 백준 알고리즘 문제 2805번 "나무 자르기" 를 풀이한다.많은 제출량과 비교적 낮은 정답률이지만, 쉽게 풀이할 수 있는 문제이다.문제 풀이 방법으로는 단순 "이분 탐색" 을 이용한다.문제 링크 - https://www.acmicpc.net/problem/2805이분 탐색 - http://mygumi.tistory.com/72 상근이는 나무 M미터가 필요하다. 근처에 나무를 구입할 곳이 모두 망해버렸기 때문에, 정부에 벌목 허가를 요청했다. 정부는 상근이네 집 근처의 나무 한 줄에 대한 벌목 허가를 내주었고, 상근이는 새로 구입한 목재절단기을 이용해서 나무를 구할것이다.목재절단기는 다음과 같이 동작한다. 먼저, 상근이는 절단기에 높이 H를 지정해야 한다. 높이를 지정하면 톱날이 땅으로부터 H미터..

이 글은 자바스크립트 객체의 네이티브 메소드 중 하나인 hasOwnProperty 를 다룬다.간혹 코드에서 사용하는 모습을 경험했을 것이다.언제 써야하는지? 왜 쓰는지? 에 의문을 가지고 있다면 이 글을 읽어보길 바란다.MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty 우선 hasOwnProperty 메소드가 하는 일은 객체가 특정 프로퍼티에 대한 소유 여부를 반환한다. const obj = { a: 1 }; obj.hasOwnProperty("a"); // true obj.hasOwnProperty("b"); // false 해당 객체에 특정 프로퍼티가 존재하면 t..

이 글은 ES8(ECMA2017) 스펙에서 정의된 async/await 키워드를 다뤄본다.async/await 를 사용하기 위해서는 Promise 의 이해는 필요하다.이 글에서는 다루지 않고, 오로지 async/await 에 초점을 맞춰 예제 위주로 진행한다.실질적인 사용에 있어, 도움을 줄 수 있는 글이 될 것이라 생각한다.참고한 글 - https://developers.google.com/web/fundamentals/primers/async-functions ES8 에서 정의된 비동기 함수(async function) 는 용어 그대로, 비동기 처리를 위함이다.async/await 를 사용하는 가장 큰 이유는 코드 품질의 향상이다.코드를 읽기 좋게 해주고, 작성에 있어서도 굉장한 간결함을 나타낸다. ..

이 글은 백준 알고리즘 문제 1652번 "누울 자리를 찾아라" 를 풀이한다.제출량이 많고, 정답 비율이 40% 인 문제.DFS, BFS 문제처럼 보이지만, 쉽게 해결할 수 있는 문제이다.본인에게는 다른 접근을 생각하는 자극을 준 문제이다.문제 링크 - https://www.acmicpc.net/problem/1652 일 년 동안 세계일주를 하던 영식이는 여행을 하다 너무 피곤해서 근처에 있는 코레스코 콘도에서 하룻밤 잠을 자기로 하고 방을 잡았다.코레스코 콘도에 있는 방은 NxN의 정사각형모양으로 생겼다. 방 안에는 옮길 수 없는 짐들이 이것저것 많이 있어서 영식이의 누울 자리를 차지하고 있었다. 영식이는 이 열악한 환경에서 누울 수 있는 자리를 찾아야 한다. 영식이가 누울 수 있는 자리에는 조건이 있다..

이 글은 Vue.js 의 트랜지션(transition) 을 통해 애니메이션을 조작하는 법을 다룬다.Vue.js 는 공식 문서가 정말 이해하기 쉽게 설명하고 있다.그렇기에, 기본적인 내용은 자세히 다루지 않는다.기본적인 지식을 문서를 통해 확인한 후, 이 글을 실제 응용하는 방법을 목적으로 참고하길 바란다.글은 예제를 통해 진행된다.관련 예제 - https://kxk7j2vwr.codesandbox.io/공식 문서 - https://kr.vuejs.org/v2/guide/transitions.html 트랜지션의 일반적인 정의는 DOM 의 삽입, 삭제, 갱신 등에 관련된 효과라고 볼 수 있다.이러한 효과는 페이지 단위에서는 싱글페이지(SPA) 활성화로 인해 페이지 전환에 따른 애니메이션을 많이 경험하거나 구..