자바스크립트(3)
-
[TypeScript] 자바스크립트(js) 파일 임포트하여 사용하기
최근 NativeScript + Vue3(w/TypeScript)로 하이브리드 앱 개발을 계속 하고 있다. 사실 타입스크립트 사용은 고려대상에 없었으나, 네이티브스크립트 + 뷰3 하이브리드 앱 베이스가 타입스크립트 기반으로 되어 있어서 어쩔 수 없이 사용하고 있다. 타입스크립트의 장점은 명확한 타입 사용을 강제하여 코드 품질을 향상시키고 이슈가 될 만한 것들을 컴파일 시 알 수 있게하여 고품질의 코딩을 가능케 한다라고 나와 있으나.. 사실 엄격한 코딩룰이 있기 때문에 코딩을 하면서 신경 쓰이는 게 한 두가지가 아니고.. 이로인해 코딩 속도가 더욱 떨어지는 느낌이다 ㅠㅠ 구글링 하다 보면, Vuex 적용 시 타입스크립트 모듈화에 익숙해지면 훨씬 편하다곤 하는데 아직 그 정도의 실력자가 아닌지라 적응하는게 ..
2023.09.20 -
[Vue3] Composition API 사용 예시 (Vue2와 비교)
뷰3로 버전업이 되면서 변경된 점 중 하나만 Composition API 의 추가여부이다. 뷰2와 어떤 부분이 달라지는지 다음의 예시로 감을 잡아보자. 예시) 할 일 목록에 할 일을 추가하고, 완료 상태를 토글할 수 있는 기능 Vue3 컴포지션 API 사용하여 만든 예시(함수 내부에서 상태와 로직을 명확하게 구성하여 관리하여 재사용성 및 가독성이 좋음) // 화면 표시 부분 Add Pending Tasks {{ task.text }} Complete Completed Tasks {{ task.text }} Uncomplete // UI 커스텀 Vue2 로 만든 예시(data, computed, methods) Add Pending Tasks {{ task.text }} Complete Completed ..
2023.09.15 -
[Vue] 컴포넌트 라이프 사이클 훅 (Lifecycle hook)
안드로이드에서와 마찬가지로 Vue(이하 뷰)에서도 라이프 사이클은 매우 중요한 부분이다. 컴포넌트가 생성 ▶ 파괴되는 과정에서 발생하는 각각의 라이프 사이클 훅 메서드를 적절히 활용해야 상황에 맞는 다양한 메서드를 응용하여 웹 또는 하이브리드 앱을 만들 수 있으며, 원하는 메서드를 적절한 타이밍에 실행할 수 있다. 아래는 뷰의 대표적인 라이프 사이클 훅이다. beforeCreate: 컴포넌트 인스턴스가 초기화되자마자 가장 먼저 실행되는 훅. 이 시점에는 데이터나 이벤트, 라이프 사이클 메서드 등이 아직 설정되지 않는다. created: 컴포넌트 인스턴스가 생성된 직후 실행되는 훅. 데이터와 메서드가 초기화되어 있어서 이 안에서 데이터를 변경할 수 있지만, 아직 DOM에 마운트되지 않아 DOM을 조작할 수..
2023.08.30