-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
24.03.31 23:57 작성 24.03.31 23:59 수정 조회수 96
0
저는 개발 지식이 별로 없는 디자이너로, 작은 개인 프로덕트를 운영하고 있습니다.
제가 할 줄 아는 게 html하고 css 정도라서 그냥... 어케어케 자바스크립트를 복사하고 쥐어짜내(??) 작동하는 것을 만들긴 했는데, 각 요소를 순수 자바스크립트로 제어하는 게 쉽지도 않고, 디버깅도 너무 어렵더라구요. 그래서 자바스크립트(와 미량의 제이쿼리...)로 작동하는 부분만 vue로 전환하고, 이후의 코드나 기능도 업데이트해나갈 생각으로 수강해나가기 시작했습니다. 지금은 Vue CLI 부분까지 들었는데요. 좀 헷갈리는 부분이 있고, 이 강의가 설정한 타겟 유저와는 좀 다른 상황인 것 같아 질문을 드리고자 합니다.
1# Vue2와 Vue3
저는 완전 최초 도입이라 Vue3을 써야 할 것 같은데, 강의가 Vue2 기준으로 만들어져있고 플러그인이나 문법이 조금씩 다른 것 같아요. 저는 js를 썩 잘하지 못하는데 Vue3 강의 없이 가도 되는지, 제가 구매한 레벨2 강의까지만 들어도 제가 원하는 목적을 달성할 수 있는지 궁금해요. 땜빵을 해야 하거나 만들고 싶은 게 생기면 자바스크립트 문법 학습을 매번 하긴 하는데 잘 알아서 정확하게 쓰는 게 아니라 대충 쓰는 것에 가깝긴 하거든요.
제가 바라는 건 브라우저-서버 통신 한번 왔다갔다만 하면 자바스크립트가 전체 페이지 새로고침을 해야 하는 걸 개선하거나.. 토글이나 서브메뉴 UI같은 걸 좀 쉽게 구현했으면 하는 정도인데요. 제가 원하는 목적을 위해 Vue3 강의가 꼭 필요한지, 전반적으로 어느 정도 수준의 강의까지 들으면 되는지 궁금합니다.
2# Vue CLI
저는 flask 서버에 template 폴더 안에서 html/css로 제어하고, localhost에서는 테스트 서버로 확인을 했었는데요. Vue CLI는 뭔가 다 Vue 포맷으로 짜면 나머지는 다 변환해주겠다! 그런 느낌의 프로그램이더라고요. 저의 상황에서 Vue 클라이언트를 사용하는 게 맞는지, 아니면 그냥 처음 가르쳐주신 대로 스크립트를 넣는게 맞는지 궁금합니다. (그리고 너무 알못 질문 같지만 Vue Cli를 사용하면 AWS EC2같은 실서버에도 이런걸 전부 설치하는지 궁금해요.)
답변을 작성해보세요.
0
인프런 AI 인턴
2024.04.01
안녕하세요, 인프런 AI 인턴입니다.
nobodyknows님의 경우, html/css/js를 이미 사용하고 계시며 이를 Vue.js로 일부 전환하고자 하시는 상황으로 이해됩니다. Vue.js를 사용함으로써 좀 더 수월한 개발 경험과 유용한 기능들을 활용할 수 있을 것입니다.
1# Vue2와 Vue3에 대해서
Vue3는 Vue2에 비해 성능 개선 및 여러 새로운 기능을 제공합니다만, 기본적인 개념과 사용 방법은 크게 다르지 않습니다. 따라서 Vue2 기반의 강의를 통해 Vue의 기본적인 개념과 사용법을 익히는 것만으로도 Vue3을 사용하는 데 큰 무리가 없을 것입니다. 단, Vue3의 경우 Composition API와 같은 새로운 기능을 이용하려면 Vue3에 대한 학습이 추가로 필요할 수 있습니다. 여러분의 목적인 브라우저-서버 통신의 개선, UI 구현 등은 Vue2에서도 충분히 가능하므로 기본적인 Vue.js 강의는 여러분의 목적 달성에 도움이 될 것입니다. 하지만 Vue3에 대해 좀 더 알고 싶으시다면, Vue3에 대한 추가 학습을 권장드립니다.
- vue CLI 3 과 vue3: Vue CLI와 Vue.js 버전에 대한 질문에 대해 지식공유자께서 Vue2와 Vue CLI4.x 버전을 추천드린 내용이 있습니다. Vue3로 넘어가기 위한 준비에도 도움이 될 것 같습니다.
2# Vue CLI에 대해서
Vue CLI는 Vue.js 프로젝트를 손쉽게 구성할 수 있도록 도와주는 도구입니다. 컴포넌트 기반의 개발이나 싱글 페이지 애플리케이션(SPA)을 만들 때 매우 유용하게 사용됩니다. Flask와 같은 서버 사이드 어플리케이션과 함께 사용하는 경우, 일반적으로 Flask는 API 서버로 사용하고, Vue.js는 프론트엔드 부분을 담당하게 됩니다. Vue CLI를 통해 생성한 프로젝트는 빌드 과정을 거쳐 정적 파일들을 생성하고, 이를 실서버에 배포하는 방식으로 사용할 수 있습니다. 따라서 Vue CLI 활용이 여러분의 프로젝트에 맞을 수 있습니다.
AWS EC2 같은 서버에 배포하는 경우, Vue CLI로 빌드된 정적 파일을 Nginx나 Apache와 같은 웹 서버를 통해 호스팅하는 것이 일반적입니다. 자세한 설정은 서버 환경과 배포 전략에 따라 달라질 수 있습니다.
- Vue CLI 2 버전 공부: Vue CLI 버전에 대한 답변으로 최신 버전 사용을 권장하는 내용이 있습니다. 여러분의 프로젝트에 Vue CLI를 적용하는 것에 대한 기본적인 가이드라인을 제시해줍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
nobodyknows
질문자2024.04.01
vue cli 버전은 5.0.8인데요, main.js와 app.vue 내용이 강의와 좀 다르기도 하고(내용이 달라서 오는 불안감...) Vue Cli를 로컬호스트 mac에 설치했던 것처럼 EC2 ubuntu에도 설치해야 하나 궁금했습니다. 뭔가 정적 파일로 export할 수 있는 기능이 있어서 이미 nginx와 flask로 돌아가고 있는 html 템플릿에 편집해서 넣어주면 되는 것인지... 혼란한 질문이지만 미리 답변 감사드립니다.
답변 1