Front-end
-
JS
런타임/컴파일타임/SWC/Vite/Deno/Bun
들어가기 전.. 제가 연차는 쌓여가는데.. 토이프젝 제외하고 (그 마저도 우리의 npm 웹팩이 잘 해주었으니까..) 빌드한 적도.. 설계한 적도 없어서.. 뒤늦게 공부를 하고 있습니다.. 유지보수 말고 신규 프로젝트도 진행해봐야 하는데...휴.. 런타임(Runtime) 과 컴파일타임(Compiletime) 컴파일타임 프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정 런타임 컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때 컴파일타임 오류 유형 신택스 오류 - 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류 타입 체크 오류 - 파일 참..
-
Vue.js
Vue3 - 동영상 url로 썸네일 직접 만들기... (Canvas/vue3/typescript)
들어가기 전.. 하.. 이번에 동영상 썸네일 만들라고 하셔서 작업하는데.. 자꾸 canvas에 안그려져서 무척이나 당황스러웠다.아무튼 좌충우돌 해결해서 나중에 이런 작업이 또 생기면 보려고 기록차 글을 남깁니다.아직 하자가 있습니다. 비율이 깨진다는 하자요. 다음에 수정해야겠어요. html (template) javascript (vue - typescript) // ...중략 props: { file: { type: Object, required: true, }, originFileList: { type: Array as PropType, }, }, setup(props, {emit}) { const videoOriginElement = ref(); const videoThumbnailElement =..
-
JS
ECMAScript2021 - 최신 JS 기능 5가
들어가기 전.. 안녕하세요 오랜만에 포스팅하게 되었습니다! 아래 영상을 보고 정리 및 공유하게 되었습니다 ☺ String.prototype.replaceAll 어떤 패턴에 일치하는 모든 부분이 교체된 새로운 문자열을 반환합니다. 기존 replace 에서 문자열 안에 있는 글자를 다른 글자로 모두 대체 하려면 정규표현식을 사용했어야 했습니다. replaceAll 사용 방법은 아래와 같습니다. const txt = 'money plz..uu..'; console.log(txt.replaceAll('u','^')); //money plz..^^.. Promise.any() iterable(반복 가능한 Array 객체)한 Promise들 중 하나라도 성공하면 첫 번째로 성공한 Promise의 결과값을 반환하며 ..
-
JS
Array prototype methods
들어가기 전.. 드디어 Array prototype methods 차례가 왔습니다! 빠바바밤~~! 기존 ES5에서 넘어온 것도, ES6, ES7에서 추가된 함수도 있습니다. 모든 method를 다 작성할 것은 아닙니다.. 제 기준으로 그저 자주 사용할 수 있는 ..? 주관적인 기준으로 몇 개 뽑았습니다. Array.prototype methods 배열은 Array 타입 객체입니다. Array.prototype의 프로퍼티를 상속받습니다. Array prototype에는 수 많은 method가 정의되어 있습니다. 모든 배열은 이 method를 사용할 수 있습니다. Array.prototype's method list 수정 메서드 원본 배열을 수정 접근자 메서드 배열을 다른 형태로 가공해 새로운 배열을 반환 ..
-
CSS
translate() 그리고 absolute positioning
들어가기 전.. 안녕하세요. 오늘의 주제는 absolute와 translate! 비슷비슷한 녀석들을 데리고 왔습니다. absolute positioning 가장 가까운 static이 아닌 조상 엘리먼트에게서 상대적으로 위치가 지정됩니다. ※ html ※ css .relative { width: 100%; height: 300px; position: relative; } .absolute { position: absolute; bottom: 40px; right: 40px; } ※ result position : relative 저는 relative 값을 갖고 있는 부모 엘리먼트입니다. 제가 static이였다면 제 자식 absolute 엘리먼트는 제 상위나 body를 기준 삼을 것입니다. position ..
