[Udemy Vue 완벽가이드 Section7] 77. 더 나은 개발자 경험이 필요한 이유

웹 개발 서버의 필요성 외에도, 개선된 개발 설정(setup)으로 전환해야하는 이유가 더 있다.

개선된 개발 설정에는 '개발자 경험'도 개선된다.

 

 

지금까지의 코드 작성 방식은 작동은 하지만 결함을 안고 있다.

 

# 현재 상태 (Current State)

1/ We always need to reload the page whenever we make any change.

- 현재는 코드를 변경할 때마다 페이지를 새로고침 해야했다.

- 예를 들어, JS파일에서 data를 변경해보자. 화면에서 확인하려면 JS파일을 저장한 다음, 페이지를 '새로고침'해야 한다.

그렇게 나쁜 결함같지는 않아 보이지만, 긴 시간 웹 애플리케이션 작업을 할 경우 수많은 코드를 작성하고 테스트하면서 매번 새로고침하는건 성가신 일이다.

- 또한, 새로고침 시, 웹 애플리케이션의 모든 상태가 손실된다. 즉, 새로고침을 하면 초기 로딩 상태로 되돌아간다.

- 이렇게 작은 것들이 쌓이면 귀중한 시간이 꽤 많이 낭비된다. 개발이 불필요하게 힘들어지고 시간도 당연히 더 오래 걸린다.

 

2/ IDE auto-completion is highly limited.

IDE, 코드 편집기(ex:Visual Studio Code)를 사용하면서 해당 도구에서 얻을 수 있는 지원도 매우 제한적이다.

- 자동완성 기능도 매우 제한적이다. 

ex: Vue.createApp을 호출하는 경우에 Visual Studio Code는 Vue객체 존재조차 모른다.

• .를 입력했을 때, 어떤 메서드를 호출할 수 있는지 VSC는 알려주지 못한다.

 

• createApp에서 'e'를 빼먹어도 (즉, 오타가 날 경우에도) 편집기는 경고가 표시되지 않는다.

 

 

3/ We work in just one file OR we need to handle multiple files with multiple <script src="..."> imports.

- 지금까지는 하나의 HTML 파일과 하나의 JS파일로 작업했다. 추가 파일을 결합할 수는 있었지만, script src태그 등을 사용해 수동으로 불러와야했다.

- HTML 파일이 여러 개일 경우에는 이것도 쉽지 않다. 여러 파일을 가질 수는 있지만, 파일을 전환할 때는 결국 페이지가 새로고침되기 때문에 JS에 저장된 모든 state가 손실된다.

- 따라서, 코드를 분할하거나 읽기 쉽게 작성하는데 한계가 있다.

 

 

 

복잡한 애플리케이션을 구축할수록(코드가 점점 많아질수록), 각 파일의 코드를 더 읽기 쉽게 만들기 위해 코드를 여러 개의 파일로 분할하고 싶어진다.

app.component("friend-contact", {
  template: `
    <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails()">
      {{ detailsAreVisible ? 'Hide' : 'Show'}} Details
    </button>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone:</strong> {{ friend.phone }}</li>
      <li><strong>Email:</strong> {{ friend.email }}</li>
    </ul>
  </li>
    `,
});

friend-contact 컴포넌트에 포함된 template을 보면, 문자열로 정의되어 있는데 꽤 번거롭다.

하지만 이 template을 위 방법 이외에 정의할 더 좋은 방법이 없다.

HTML 파일에서는 정의할 수 없다. 왜냐하면 컴포넌트는 Vue앱처럼 HTML에 mount할 수 없으므로.

 

 

# 원하는 상태 (Wanted State)

1/ Saved changes should be auto-detected and page should reload/update.

- 코드를 변경할 때 마다 변경사항을 저장하면, 자동으로 감지해서 페이지를 자동으로 새로고침한다.

- 더 좋은 것은, 단지 새로고침을 하는 것이 아니라 페이지에서 변경된 부분을 업데이트해서 모든 상태를 최신으로 유지한다. 그러면 시간이 많이 절약된다.

 

2/ IDE should provide better auto-completion and hints.

- 지금 사용중인 코드 편집기의 자동완성과 힌트도 개선되면 좋다. 그러면 오류를 더 빨리 찾아낼 수 있고, 작동하지 않는 코드 작성은 피할 수 있다.

 

3/ We should be able to split code into multiple files and export/import via ES module.

- 컴포넌트의 template을 더 나은 방식으로 정의할 수 있도록 코드를 여러 개의 파일로 쉽게 분할할 수 있다.

- ES 모듈과 같은 모던 JS 기능을 사용해 JS코드를 불러오고 내보낼 수 있으면 좋다.

 

** ES모듈에 대해서 ↓

2023.08.16 - [JavaScript] - 자바스크립트 ES6모듈 내보내기/불러오기(export/import)

자바스크립트 ES6모듈 내보내기/불러오기(export/import)

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.