거의 알고리즘 일기장

예전에 재밌게 했던 html canvas와 바닐라 js 를 이용해 효과들을 만든 기억이 떠올라 다시 만들어보았다. 워밍업으로 간단한 눈효과를 만들어보았다. 처음 막상 하려고 하면 어떻게 하지 막막할수도 있지만, 구현사항은 간단하다! 눈 class를 만든다. 눈 클래스에서 협력할 기능은 다음과 같다. 1. requestAnimationFrame function에 실행할 draw function을 만든다.(눈그림을 그릴) (draw) 2.resize시에 동작할 function을 만든다. (resize가 되면 stageWidth, stageHeight가 바뀜으로) (init) 내부 function은 다음과 같다. 1. 그리기 전에 위치를 업데이트 해주어야 눈이 내리는것처럼 될것이다. 그러므로 위치 update..

상황 vite 사용시 multi page application을 만들고 싶을때, build할때에 대한 세팅은 공홈에 존재한다. https://vitejs.dev/guide/build.html#multi-page-app Vite Next Generation Frontend Tooling vitejs.dev 그리고 제대로 동작함을 테스트해보았다! 근데 dev서버일때의 대한 문서는 아무리 봐도 존재하지 않는다. 어떻게 할까?? 서칭 다행히 관련 issue를 금방 찾을수 있었다. https://github.com/vitejs/vite/issues/2958#issuecomment-1065810046 `transformIndexHtml` hook gets the wrong html filepath when runn..

만약에 이전 글을 읽지 않으셨다면, 이전 글을 먼저 보고 읽어주세요! https://kunkunwoo.tistory.com/282 이전 글에 이어서 설명드리겠습니다! 기존의 빌드도구 기존의 빌드 도구들은 Webpack, rollup, parcel이 있습니다. webpack webpack은 가장 유명한 번들러이고 cra라는 유명한 react boilerplate에서도 사용되는 번들러입니다. 그만큼 가장 안정적이며 생태계가 크다는 장점을 가지고 있습니다. 또한, 개발 편의를 위한 기능들을 기본적으로 많이 제공합니다. 단점으로는 느리고 configuration이 복잡하며 공식문서가 겁나 별로입니다. 정리 제일 유명한 모듈 번들러 제일 안정적임 가장 생태계가 큼 개발서버에서 개발 편의를 위한 기능들을 많이 제공..

몇달전에 회사에서 이 내용을 가지고 세미나를 했었는데, 이 발표 내용을 블로그 글로 옮겨보았습니다! 몇달전 발표내용이라 현재 상황과 조금 다른 부분이 있을수 있습니다! 이 글의 목표 !! 웹 프론트 생태계에 대한 이해 (transfiler가 왜 필요한지? Module bundling이 왜 필요한지? 에 대한 이해) 기존의 빌드 도구와 차세대의 빌드 도구의 차이점 사전지식 Transfile compile의 경우, 한 언어로 작성된 소스 코드를 다른언어로 변환하는 것을 의미합니다. 예를 들면 C언어로 작성된 소스코드를 기계어로 변환하는 과정을 compile이라고 할 수 있겠습니다. transfile은 한 언어로 작성된 소스코드를 비슷한 수준의 추상화(Abstraction)를 가진 다른 언어로 변환하는 것을 ..