코드 땜장이

 웹 개발자라면, 특히나 프런트엔드 개발자라면 wasm은 익히 들었을 것이다. 하지만, 재미로는 많이들 사용 해봤겠지만, 주니어 개발자나 c/c++, rust를 습득하지 않았거나 오래 되신 분들은 재미로 해보기에는 조금 벅찰 수 있으니 포스팅을 작성한다.  위의 즉 이 글은 주니어 개발자, c/c++, rust를 사용하기 싫은 분 들이 대상이다. 아주 간단하게 맛만 보여드릴 테니, 자세한 내용은 다른 포스팅을 보고 습득 하시거나 책을 추천 드린다.  프런트엔드 개발자라면 최소 TypeScript를 들어 보았거나 들어보았을 것이다. 이 포스팅에서는 wasm을 TypeScript를 이용하여 작성 할 것이다.  해당 예제를 하기에 앞서서 최신버전의 Node.js를설치하기 바란다. npm init npm install --save @assemblyscript/loader npm install --save-dev assemblyscript npx asinit .  자 여기까지 왔다면 위와 같은 파일들을 얻을 수 있다. /assembly/index.js // The entry file of your WebAssembly module. export function add ( a : i32 , b : i32 ): i32 { return a + b ; }  위와 같은 함수를 볼 수 있다.  간단하게 위의 코드를 설명 하자면, add라는 함수를 외부에 노출을 시키며, a, b라는 인자를 받으며 각각의 타입은 i32(부호가 있는 32비트의 정수)이고, 인자 a, b를 받아서 i32타입으로 값으로 리턴한다.  간단하게 설명을 해보았는데, 답이 되었으면 좋겠다.  자 여기까지만 보면, 이걸로 속도테스트가 되나?? 이생각이 들 것이다. 맞다. 당연안되겠지 그러니 다음 함수를 추가하자. // The entry file of your WebAssembly module. export function add ( a : i32 , b : i32 ): i32 { retu

 htm에 파일을 드래그앤 드랍을 하여 파일을 업로드 하는 것을 그렇게 어려운 일은 아니다. 그래도 해당 기능이 있으면 꽤나 편한 기능이기에 방식을 소개하면서 해당 코드를 공유 하고자 작성 한다.  여기서 신경써야 하는 이벤트는 두가지 있다. drop이벤트와 dragover이벤트이다. drop이벤트는 딱보아도, 해당영역에 무언가 떨어졌을 때이다  드랍쉽을 생각하면 된다.  당연하게도 drop이벤트에서 파일을 확인 할 수 있게 된다. 자 그러면 dragover는 왜 확인해야 할까?  drop 이벤트도 그렇지만 dragover의 이벤트의 파일 끌기의 브라우저 기본기능이 일반적으로 파일을 오픈하는 행위라서이다. 간단하게만 생각하면 파일을 놓는 순간 파일이 다운로드 될테이다. drop의 기본기능만 껏다가는 계속 파일을 다운로드 받게 될 것이다.  자 아래의 코드들을 확인하자.  특이점은 세가지정도로 분류 할 수 있다. 1. html(루트 엘리먼트) 에 이벤트 리스너. 2. drop-zone이 label이면서 input[type=file]태그 3. drop-zone에 drop과 dragover를 제외한 이벤트 리스터들.  아래는 해석이다. 1. html(루트 엘리먼트) 에 이벤트 리스너.  난 드래그앤 드랍 파일기능을 제공 하는 사이트들에서 꽤 불편하게 느꼇던 것이 뚱뚱한 손가락 오류 였다. 조금만 빗나가면 수많은 파일들이 다운로드 받아졌다. 따라서 기본기능을 제거하기위해 루트엘리먼트에도 이벤트리스너를 달았다.  2. drop-zone이 label이면서 file태그 파일 드래그앤 드랍만 제공할 경우 꽤나 불편한 상황이 올것이다. 특히나 모니터를 여러대 사용하거나 멀티윈도우를 사용하는 경우엔... 그래서 drop 영역을 클릭시 input type="file"이 해당 이벤트를 받을 수 있도록 영역을 라벨로 처리 하였다. 참고로 input type="file"은 display none을 사용하게 되면 위의 기능이 되지 않기에 opaciry

 예전에는 float을 이용하여 layout잡는것에 많이 사용해왔다. 하지만 grid, flex가 생겨나에 따라서 다루기 어려운 float을 더이사 사용 할 일이 없어졌다. float은 간단히 소개 하면 자기 자신이 어떤위치에 있어야 하는가? 를 결정 할 수 있는 속성이다. 다음은 mdn의 소개이다. CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * 출처 :  https://developer.mozilla.org/ko/docs/Web/CSS/float 하지만 아무리 보아도 위의 설명으로는 더 이상 사용 할 일이 없어 보인다. flex, grid로 해결 할 수 있다. 그렇지만 deprecated된 속성이 아니다. 그렇다면 float으로 밖에 할 수 없는 행위가 있을까? 그렇다 있다. 애초에 아래의 내용을 보면 여태까지 float으로 레이아웃을 잡았던 것이 이상하게 느껴질 정도이다. ( 뭐 나도 그렇게 잡아왔고, 그 당시에 html, css 책 들에도 그런 방식으로 소개 되어왔다. ) 위의 효과를 줄 수 있는 방법은 float이 유일할 것으로 보인다. 물론.... width를 고정 시키고 margin과 padding을 사용하여 노가다를 한다면 가능하겠다만... 하지만 위의 효과를 바라는 디자이너도 없겠지.. 자세한 내용은 mdn에서 참고 할 수 있으니 링크 달아 두겠다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images

 웹사이트들을 이용하다보면 아래와 같이 해당 사이트의 메인 이미지와 제일 상단에 제목이 표현 되는 사이트들이 많다. 하지만 아래보시다 시피 따로 처리를 해주지 않는 이상 header가 내용을 보는 동안에 불편을 끼칠 수있다.  옛날에는 스크롤의 탑기준이 어디에 왔는지에 따라서 헤더를 없애거나 백그라운드를 표현을 하면서 아래처럼 표현해왔다.   옛날에는 그랬지만 IntersectionObserver가 추가 됨에 따라서 좀더 편리하게 위의 기능을 처리 할 수 있다. const observer = new IntersectionObserver ((entries) => { console . log ( 'entries' , entries) } , { root : document . querySelector ( '.contents' ) , threshold : [ 0.1 , 0 ] }) const target = document . querySelector ( '.banner' ) observer . observe ( target ) ; 사용 방법은 위와 같다.  IntersectionObserver( handler, options ) handler : 위의 설정기준으로 target엘리먼트가 루트엘리먼트에서 보이지 않을때와 10프로 미만 혹은 10프로 초과 혹은 보이지 않을때 호출이 된다. 호출시 첫번째 인자로 IntersectionObserverEntry[]를 전달해준다.  options : root 감시대상들의 상위요소이다.                    threashold  임계값 목록이다. 아래는 IntersectionObserver를 이용하여 header에 백그라운드를 추가하는 샘플 코드입니다.  아래와 같은거 말고도 제일 스크롤이 제일 하단에 충돌 했을때 컨텐츠를 더 불러오는 등의 효과를 넣는것도 가능합니다.