milliwonkim의 블로그

참고 리액트는 프레임워크가 아닌 라이브러리이지만 쉽게 통합해 부르기 위해, 이하 프레임워크로 통합한다 생산성 저하: 프론트엔드 프레임워크는 기본적인 템플릿, 라우팅, 상태 관리 등을 제공하여 개발자들이 보다 쉽게 개발을 진행할 수 있습니다. 프레임워크를 사용하지 않을 경우 이러한 기능들을 직접 구현해야 하므로 생산성이 저하될 수 있습니다. 유지보수의 어려움: 프론트엔드 프레임워크는 일관된 코드 스타일과 구조를 제공하여 코드의 유지보수를 용이하게 합니다. 프레임워크를 사용하지 않을 경우에는 개발자마다 코드 스타일이나 구조가 다를 수 있어서 유지보수가 어려울 수 있습니다. // 리액트를 사용하지 않은 예제 function App() { const button = document.createElement('b..

https://mine-it-record.tistory.com/577 DOM(Document Object Model) 생성 - 생명주기: DOMContentLoaded, load, beforeunload, unload 1. DOMContentLoaded => DOM 트리 완성 즉시 발생함. => img 및 CSS 등 외부 자원 기다리지 않음 => 여러 스크립트 태그가 존재한다면 => 모든 스크립트가 실행된 이후 DOMContentLoaded가 실행됨 (이유: DOMContentLoaded에 DOM 조작 관련 로직이 있을 수 있기 때문) // a // b // c // 실행순서 b => c => a => document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립..

뷰포트를 ref로 인식한 값을 이용해서 뷰포트 넓이에 따라 Vuetify의 Hamburger Icon와 네비게이션메뉴를 조건부 렌더링하도록 하는 로직을 구현해보았습니다 ALLIGHT {{ headerButton }} header width가 640px이 넘은 경우 header의 width가 640px 이하인 경우 resize를 하는 로직을 react의 hook처럼 외부화 시킬 수 있습니다. // @/hooks/useResize.ts import { onMounted, onUnmounted, Ref } from '@vue/composition-api'; interface IRefs { clientWidth: number; } function useResize(refs: Ref, result: Ref): v..

Reset CSS를 담당하는 App.scss를 main.ts에서 import하면 됩니다. import { createApp } from 'vue'; /* import the fontawesome core */ import { library } from '@fortawesome/fontawesome-svg-core'; /* import font awesome icon component */ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; /* import specific icons */ import { faUserSecret } from '@fortawesome/free-solid-svg-icons'; import AOS from 'aos'..

Vue의 Composition API에서는 기존의 data()를 this로 접근하는 방식 대신, ref와 reactive로 접근하는 것으로 변경됐습니다. 거두절미하고, ref, reactive를 사용하는 방식은 다음과 같습니다 정확한 내용은 아니며, 사용할 때 얻었던 경험을 미루어 말씀드립니다. 참고링크입니다. https://v3.ko.vuejs.org/api/refs-api.html#toref Refs | Vue.js Refs 이 섹션에서는 싱글 파일 컴포넌트 문법을 사용해 예제를 설명하겠습니다. ref 내부에 값을 가지면서 반응적이고 변경 가능한 ref 객체를 반환합니다. ref 객체는 단 하나의 프로퍼티를 가지는 v3.ko.vuejs.org // ref는 초기화할 내용이 객체가 아닌 경우에 주로 사..