분류 전체보기 (8) 썸네일형 리스트형 런타임/컴파일타임/SWC/Vite/Deno/Bun 들어가기 전.. 제가 연차는 쌓여가는데.. 토이프젝 제외하고 (그 마저도 우리의 npm 웹팩이 잘 해주었으니까..) 빌드한 적도.. 설계한 적도 없어서.. 뒤늦게 공부를 하고 있습니다.. 유지보수 말고 신규 프로젝트도 진행해봐야 하는데...휴.. 런타임(Runtime) 과 컴파일타임(Compiletime) 컴파일타임 프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정 런타임 컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때 컴파일타임 오류 유형 신택스 오류 - 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류 타입 체크 오류 - 파일 참.. 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 =.. 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의 결과값을 반환하며 .. 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 수정 메서드 원본 배열을 수정 접근자 메서드 배열을 다른 형태로 가공해 새로운 배열을 반환 .. 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 .. 공부(&작성)해야 할 것들.. Vuex Array helper methods 시맨틱 태그 Flux 패턴 자세하게 파보기 스벨트 Type script Node.js Javscript ES6 Vue.js 더 깊게 파고들기 Vue.js v-html 쓰지 말라면 어떻게 해야해? 해결방법! Vue.js曰 웹사이트에서 임의의 HTML을 동적으로 렌더링 하면 XSS 취약점으로 쉽게 이어질 수 있으므로 매우 위험하니 신뢰할 수 있는 콘텐츠에서만 v-html을 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하지 마! 그럼 어떻게 하라는건데? 그건 제가 찾아볼 겁니다. 매번 주석 다는거 싫어용 Gastby + gjthub 정적인 blog 만들기 컴퓨터 사이언스 기본적인 디자인 패턴과 알고리즘 너무 많아..! Vuex : Vue.js 상태관리 패턴 라이브러리 이해하기 들어가기 전.. 작년 초 Vue 스터디를 했을 때 vuex에 대한 주제도 나왔었습니다. 다 같이 읽기는 했지만 당시에는 낯설었던 용어들에 이해를 제대로 하지 못한 상태로 넘어간 것 같네요. 그런 상태로 사용했었는데.. 제대로 이해하기 위해 오늘은 Vuex에 대해 적어볼까 합니다. Vuex? 상태 관리?? Vuex는 Vue.js 에 대한 상태 관리 패턴 + 라이브러리입니다. Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다. 또한, 애플리케이션에서 Flux 아키텍쳐를 구현하는데 도움을 주는 라이브러리이기에 Vuex를 제대로 설명하기 전, 상태 관리와 MVC 패턴과 Flux 패턴에 대해 가볍게 짚고 넘어가겠습니다. 상태 관리란? 상태(state)는 뷰 data 속성과 비슷합니.. css : Flex 알아가기 들어가기 전.. 제 첫 포스팅입니다. 이번에 프론트엔드 면접을 보면서 flex 관련 질문이 나왔고 시원하게 대답을 하지 못했습니다. ㅠ-ㅠ 반성하자는 의미에서 flex에 대한 포스팅을 적습니다.. FLEX? 너 뭐하는 놈이야? css의 flex. 이야기가 많이 나오죠. 요즘 흔히들 말하는 자랑할 때의 FLEX? 언어유희입니다. 하하..! (MDN曰) flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 적절한 정렬 기능을 제공했기 때문입니다. 물론, 이나 float inline-block 등으로 정렬하는 경우도 있지만, clear를 꼭 해줘야 하거나 inline-block의 기본 여백 등 문제가 있기에 우리는 flex 를 사용하는 것이 좋습니다. Flex(Flexible Box)는 엘리먼.. 이전 1 다음
