Below you will find pages that utilize the taxonomy term “Javascript”

Vue3, app의 instance를 다른 모듈에서 사용하기

토요일.

main.js에 구축했던 Google Login모듈을 리팩토링 하려고, google.service.js를 하나 만든것 까지는 좋았는데.

app.use(‘xx’)를 사용 할 수가 없었다.

알아야 하는 사항들

  • main.js에서 만든 createApp()은 인스턴스를 생성한다.
  • getCurrentInstance()를 사용해서 다른 모듈에서 접근이 가능하다.
  • app을 끄집어 내기 위해서는 appContext를 사용해야 한다.
import { getCurrentInstance } from "vue";
function xx() {
  const instance = getCurrentInstance();

  // app에 접근해서 plugin을 주입한다.
  instance.appContext.app.use(PluginObject, PluginOption);
}
read more

Vue3 + script setup과 onMount()에 대한 생각

금요일.

Vue3를 살펴보면서 (아직 잘 몰라서 드는 생각이겠지만) 문서가 Vue2와 Vue3가 혼재하면서 아직 잘 모르는 사람이 찾기에는 어렵다는 생각을 많이 하게 된다.

사실은 Facebook Login기능을 붙이다가 전에 구현한 Google Login기능이 main.js에 덩그러니 있는것을 보고 모듈쪽으로 이동시키려고 시도하면서 시작된 것이었다.

Vue에서만 사용하는 단어인지는 모르겠지만 SFC(Single File Component)라는 단어가 있는데, 컴포넌트가 어딘가에 포함된 것이 아니고, 그 자체가 하나의 파일로 만들어져 있는 경우를 지칭한다고 생각된다.

어쨌거나, Vue3 혹은 Vue를 설명하는 많은 문서들에서 setup()내에 onMount()를 기술하고 있는 것을 볼 수 있는데, 내 경우에는 어찌해도 그녀석이 호출되지 않는 현상이 있었다.

read more

Vite + Vue3 그리고 compilerOptions.isCustomElement

일요일.

eslint와 prettier설정관련 해서 결국 다른 템플릿으로 바꾸는 작업을 하고있었다.

거의 컴파일 오류를 다 잡고 개발에서 열심히 돌려보니 로직은 잘 돌아가는데 콘솔창에 Vue warning이 열심히 떨어지고 있다.

[Vue warn]: Failed to resolve component: ui5-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

이전 Template에서는 되고 새로운 Template에서는 안되는 것인가?

원래 이것은 vite.config.js에서 태깅을 해 뒀던 것이었다.

export default defineConfig({
  plugins: [vue({
    template:{
      compilerOptions: {
        isCustomElement: tag => tag.includes(`ui5`)
      }
    }
  })],
  ...

결론부터 말하자면

개발빌드(npm run dev)에서는 발생하고, 운영빌드(npm run build)에서는 발생하지 않는다.

read more

ui5-table이 깨지는 상황

일요일.

Toy Project로 만들고 있는 녀석은 SAP에서 오픈소스로 제공하고 있는 ui5 web-component를 사용하고 있다.

우선 화면을 하나 보면.

1

  • ui5-table-cell.innerHTML에 좀 긴 문자열이 들어가 있지만, 개행되며 정상적으로 Table Layout이 유지되고 있는 것을 볼 수 있다.
  • ui5-table의 특성중 popin 또한 정상적으로 적용이 되어 size와 M-Day column은 아래쪽으로 내려갔다.

두 번째 화면은 아래와 같다.

2

  • 동일한 길이의 문자열인데, table이 깨지면서 옆으로 늘어진 것을 볼 수 있다.
  • 차이점은 저 녀석이 ui5-link라는 점이다.

이런 사항은 개발자도구에서 차이점을 아무리 찾으려 해 봤지만 식별하지 못한 부분이다. 다양한 시도를 통해서 차근 차근 알아가는 수 밖에.

read more

var, let, const 그리고 hoisting

목요일.

먼저 알아야 하는 내용

  • var: 선언 및 초기화 -> 할당
  • let, const: 선언 -> TDZ -> 초기화 -> 할당

함께 알아야 하는 내용

중요한 차이는 var의 경우 전역으로, let, const는 블럭으로 scope를 가진다는 것인데, 어려운 사항은 Java나 C만 하다가 JavaScript를 접하는 사람 입장에서는 hoisting이 발생하는 기준이나 TDZ가 이상한 언어라는 인식을 가지게 되는 것이다.

이렇게 생각하시라

C에는 포인터가 있고 Java Spring Framework에는 Injection이 있는데, 이것을 다른 언어만 아는 사람 입장에서 보면 얼마나 황당하겠는가?

read more