본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section7] 83. VS Code에 'Vetur' 확장프로그램 추가하기 Vue 개발을 도울 확장프로그램을 추가해보자. # Vetur - Vetur은 Visual Studio Code에 꼭 설치해야하는 확장프로그램이다. - 이걸 설치하면 IDE(여기서는 Visual Studio Code)가 App.vue 파일을 인식할 수 있을 뿐만 아니라, Vue의 전반적인 개발까지 도와준다. (ex: 코드자동완성) 훨씬 나은 개발경험 보장. - 그러므로 Vetur는 Vue 개발자에게 없어서는 안될 확장 프로그램이다. ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
[Udemy Vue 완벽가이드 Section7] 82. Vue 코드 및 '.vue'파일 검사하기 # src 폴더 - src(source) 폴더에는 우리가 코드를 작성할 모든 JS파일이 있다. - 결국, 우리의 메인 작업 디렉토리는 src 폴더. - 이 src폴더에 Vue 애플리케이션 코드를 작성할 예정. ## main.js 파일 - 이 main.js파일이 메인 진입점이다. - 여기에 지금까진 쓴 적 없는 import 구문이 있다. 이 import 구문은 JS의 기본 코드. 한 파일에서 다른 파일로 코드를 불러오는 JS 기능이다. 더보기 * ES 모듈에 대하여 ↓ 2023.08.16 - [JavaScript] - 자바스크립트 ES6모듈 내보내기/불러오기(export/import) * note: Vue 프로젝트는 main.js 파일을 먼저 로드하고 실행하도록 설정되어있다. 1/ import { crea..
[Udemy Vue 완벽가이드 Section7] 81. 생성된 프로젝트 검사하기 vue create 명령어를 통해 생성된 프로젝트를 보면, 폴더에 여러 파일과 하위 폴더가 보인다. 프로젝트 폴더의 루트 레벨에는 여러 개의 구성 파일이 있다. 현재 .browserslistrc, .eslintrc.js, .gitignore 등은 신경쓰지 않아도 된다. 정확하게 알지 않으면, 기본 설정 그대로 두자. # package.json파일 1/ scripts - npm run serve와 같은 명령어로 실행할 스크립트를 정의한다. 개발서버를 가동하기 위해 npm run serve를 썼다. - 해당 script들을 보면, 내부적으로 Vue CLI로부터 가져온 뭔가를 사용한다는 걸 알 수 있다. ex: "vue-cli-service serve" 2/ dependencies - 의존성으로 쓰인 프레임워..
dependencies와 devDependencies의 차이점 package.json 파일을 보면 dependencies와 devDependencies가 있다. # dependencies - 애플리케이션 동작과 직접적으로 연관된 라이브러리 설치 # devDependencies - 개발할 때 필요한 라이브러리 설치. - devDependencies에 포함된 라이브러리는 실제 배포할 때 포함되지 않기 때문에 빌드 시간을 줄일 수 있다. 따라서 애플리케이션에 필요한 라이브러리가 아니라면, devDependencies에 설치하면 좋다. ex: eslint, prettier와 같은 라이브러리 # 구분하는 이유 배포할 때 어떤 라이브러리를 포함시킬 것인가. dependencies에 설치된 라이브러리는 배포할 때 포함되지만, devDependencies에 설치된 라이브러리는 개..
[Udemy Vue 완벽가이드 Section7] 80. Vue CLI 설치 및 사용하기 Vue CLI는 지금까지 사용해 온 Vue 프레임워크와는 다르며, 부가적인 도구일 뿐이다. Vue 개발팀이 관리하는 도구. Vue CLI는 내장된 특정 도구와 특정 구성을 이용해서 프로젝트 생성에 도움을 준다. 더욱 현실적이고 큰 규모의 애플리케이션을 구축할 수 있도록 프로젝트를 생성하고 관리하는데 도움이 된다. Vue CLI는 필요로 하는 특정 도구를 내부에서 사용한다. → Node.js 1/ Node.js 설치. - 왜냐하면 Vue CLI가 내부적으로 Node.js를 사용하기 때문이다. - Node.js를 다운받으면, Node.js와 함께 따라오는 또다른 도구로 npm도 설치된다. - npm이란, node package manager를 의미. 시스템에 Vue CLI를 설치하거나 프로젝트에 필요한 추가..
[Udemy Vue 완벽가이드 Section7] 77. 더 나은 개발자 경험이 필요한 이유 웹 개발 서버의 필요성 외에도, 개선된 개발 설정(setup)으로 전환해야하는 이유가 더 있다. 개선된 개발 설정에는 '개발자 경험'도 개선된다. 지금까지의 코드 작성 방식은 작동은 하지만 결함을 안고 있다. # 현재 상태 (Current State) 1/ We always need to reload the page whenever we make any change. - 현재는 코드를 변경할 때마다 페이지를 새로고침 해야했다. - 예를 들어, JS파일에서 data를 변경해보자. 화면에서 확인하려면 JS파일을 저장한 다음, 페이지를 '새로고침'해야 한다. 그렇게 나쁜 결함같지는 않아 보이지만, 긴 시간 웹 애플리케이션 작업을 할 경우 수많은 코드를 작성하고 테스트하면서 매번 새로고침하는건 성가신 일이다. ..
[Udemy Vue 완벽가이드 Section7] 76. 개발 서버가 필요한 이유 개선된 setup들이 필요한 이유를 알아보자. # We Need A Proper (development) Web Server. - 필요한 setup 중 하나는, 적절한 '(개발) 웹 서버'이다. 이게 무슨 뜻일까? 1. We use the file:// protocol instead of the https:// protocol. - "Double-clicking" index.html doesn't run the app under realistic cincrumstances. 지금까지 index.html 파일을 더블클릭해서 브라우저를 보면서 Vue 애플리케이션을 테스트하였다. 물론 작동은 하지만 현실성은 떨어지는 방법. 우리가 원하는 테스트 방식이 아니다. - index.html 파일을 더블클릭하게되면 h..
[Udemy Vue 완벽가이드 Section7] 75. 섹션 소개 먼저, 코드를 작성하는 방식을 변경해야한다. 현재 setup은 하나의 JS파일을 사용하고, 이를 단일 HTML 파일에서 불러오고 있다. //app.js const app = Vue.createApp({ data() { return {}; }, methods: {}, }); app.mount("#assignment"); 하지만, 이러한 setup은 확장이 어렵다. 더 크고, 더 현실적인 애플리케이션을 구축하기 시작하면 이러한 setup에서는 문제가 발생한다. 따라서 이번 섹션에서는 Vue CLI를 사용하여, 보다 나은 개발설정을 살펴볼 예정. 더 나은 프로젝트 설정을 제공하는 추가 도구를 사용하면, Vue앱을 작성하고 더 큰 규모의 Vue앱을 구축하는데 도움이 된다. Vue CLI가 무엇인지, 이 추가 도..

티스토리툴바