Node.js 설치
- LTS로 다운로드하세요
- vscode에 Vue 확장프로그램을 추가하세요(오피셜인 것으로)
- 크롬에는 Vue.js devtools를 추가하세요
- 설정에서 시크릿 모드와 파일 URL에 대한 액세스를 허용하세요
Vue를 하세요
- vue는 클라이언트 사이드 렌더링이라 초기 로딩이 조금 느리지만 서버가 가볍고 새로고침 없이도 화면 내용을 바꿀 수 있다
- 보통 리액트 많이 쓰는데 님들은 현대오토에버의 주문에 따라 vue를 배워야 한다
- 하지만 vue의 장점을 어필해보자면
- HTML 코드의 변화가 적음
- React 는 JavaScript 안에서 HTML 을 사용 (JSX)
- 웹 퍼블리셔와 프론트엔드 개발자의 업무 분리 수월함
- React 보다 쉬운 문법
- HTML, CSS, JavaScript 로 철저히 분리되어 가독성이 훨씬 좋음
- 완만한 학습곡선
- HTML 코드의 변화가 적음
- SPA가 뭐냐면요
- Single Page Application
- 하나의 HTML 페이지에서 동작하는 웹 애플리케이션으로, 초기 로딩 시 모든 리소스를 로드. 이후에는 필요한 데이터만을 서버로부터 비동기적으로 받아, 화면의 일부만 동적으로 갱신
- JavaScript를 통해 클라이언트 측에서 콘텐츠를 동적으로 생성 및 업데이트하며, 전체 페이지를 다시 로드하지 않아도 사용자와의 상호작용에 빠르게 반응
- 장점: 서버 부담 감소, 화면 각 부분을 컴포넌트로 나눠서 개발, 프론트/백 독립적 개발 가능
- 단점: 최초 로딩 느림, SEO 불편
- vue의 특징
- 컴포넌트 기반 구조를 통해 UI를 독립적이고 재사용 가능한 단위로 구성할 수 있어 유지보수와 확장이 용이
- 양방향 데이터 바인딩을 지원하여 모델과 뷰 간의 실시간 데이터 동기화가 가능, DOM 조작을 줄임
- 가상 DOM(Virtual DOM)을 사용해 효율적으로 DOM 변경을 감지하고 최소한의 렌더링으로 성능을 향상
- 단방향 데이터 흐름도 지원, 상위-하위 컴포넌트 간 데이터 전달이 명확하며 예측 가능한 코드 작성이 가능
- 템플릿 문법이 직관적이고 HTML 기반이므로 웹 개발자들이 쉽게 접근
- 공식 도구(Vue CLI, Vue Router, Pinia 등)와 에코시스템이 잘 갖추어져 있어 프로젝트 설정부터 상태 관리, 라우팅까지 통합적인 개발이 가능
Vite도 쓰실겁니다
- 비트라고 읽으세요
- 번들러와 개발 툴이 하나로
- 번들러(빌드): 개발을 위해 조각조각 나눠서 쓴 코드들을 다 합쳐준다. SPA로 만들어줌.
- 개발 서버도 드려요
- 주요 명령어
npm run build: 배포용 디렉토리 생성됨 → 이것만 있으면 배포가 되는거임
프로젝트 생성
- 일단
npm을 쓸 수 있어야 한다. 노드를 설치하세요. - 터미널에
npm create vue@latest입력하면 프로젝트 생성 시작됨 - 일단 이름을 짓고
- 추가로 넣을 기능들을 선택하고
- 생성 완료하면 됨
npm install→npm run dev하면 로컬에서 확인 가능. 기본 포트는 5173
폴더 정리를 하세요
public: 주로 바꿀 일 없는 정적 파일을 넣음. 소스코드 아니고, import하는 거 아니고, 파일명을 바꾸지 않을 것.src: 코딩하는 그 코드들이 들어가는 곳src/assets: 소스코드에서 이용하는 정적 파일들이 들어가는 곳. 컴포넌트가 직접 참조하는 것들이 들어감.src/App.vue: vue의 root 컴포넌트. 애플리케이션 전체의 레이아웃과 공통 요소를 정의함src/main.js: Vue 애플리케이션을 초기화하고, App.vue를 DOM에 마운트하는 시작점. 필요한 라이브러리를 import 하고 전역 설정을 수행함.index.html: 기본 HTML 파일. main.js가 App.vue를 렌더링해서 여기에 갖다놓는다.package.json: 이 프로젝트에 어떤 패키지, 어떤 스크립트를 썼는지 명시함. 파이썬으로 치면 requirement.txt 같은 거임. 이 프로젝트 실행하려면 최소한 이런 건 있어야 한다~ 문서임.package-lock.json: 정확하게 무슨 버전 넣었는지 똑바로 명시하는 문서.npm install하면 알아서 설치된다
나는 프론트까지는 못해먹겠다
구조는 얼추 알겠는데요
반복문이라든가 이런저런 동적 업데이트 로직이라든가 하는 것들을
왜 굳이 백엔드 안시키고 프론트가 직접 하는지 모르겠어 일단 코드가 너무 보기 불편하게 써있잖아
파일 확장자는 .vue 인데 실상 안에 들어가는 건 HTML 안에 스크립트와 스타일과 바디 전부 다 쓰기 이런 식이라 진짜 이렇게밖에 쓸 수 없다고?? 하는 생각이 들어서 정이 안감,,,