IT기록 isaac

[Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN) Vue.js는 CLI, CDN 방식의 프로젝트 개발 환경을 제공하고 있는데, CLI를 권장합니다. Vue.js CLI 먼저 Vue.js CLI방식으로 프로젝트 개발 환경을 세팅합니다. 메인 페이지의 Install 버튼을 눌러서 Vue.js 개발 환경을 세팅할 수 있는데요. 먼저 Node.js를 설치해야 합니다. Windows 사용자라면, Node.js공식 홈페이지에 접속해서 Node.js LTS 버전을 설치해주시면 되고, 리눅스(Linux)/맥(Mac) 사용자라면 쉘 명령어로 설치할 수 있습니다. Node.js가 설치가 되었다면, 다음 명령어를 사용해 Vue 빌드 툴의 설치와 Vue 프로젝트를 생성할 수 있습니다. ..

[Vue.js] img 태그 src 속성 사용 시 이미지가 나타나지 않는 경우 해결 기본 html 문법처럼 img 태그와 src 속성 세팅을 했는데 이미지가 보이지 않는 경우이다. 이미지는 vue-cli 프로젝트에서 src > assets 폴더 내에 위치해있다. html 문서에서는 img태그를 사용해서 이미지를 불러올 때 다음과 같이 작성한다. 하지만 vue에서 위와 같이 작성하면 이미지가 나타나지 않았다. html 형식으로 작성을 했을 때 코드를 열어보면 다음과 같이 세팅이 되어 있는데, 링크가 저렇다면 정적 파일 위치에 접근해야 한다. 여기서 해결해낸 방법으로 2가지 방법이 있다. 1. Web Server 파일 접근 방식 (정적 파일 접근) 2. WAS 파일 접근 방식 (동적 파일 접근) 위 두가지 ..

[Vue.js] Vue 3 기초 문법 데이터 바인딩 (Data Binding) Vue에서 데이터 바인딩 하는 방법에 대해서 알아보겠습니다. 아래는 xxx.vue 라는 파일에서 데이터 바인딩을 하는 코드를 나타냅니다. // App.vue {{text}} data() { return { name : value } } 로 표현을 해도 되고 data : () => ( { name : value } ) 로 표현해도 됩니다. name에 세팅한 value값을 html 코드상에서 사용하려고 하는 위치에 {{ }} 콧수염 괄호에 세팅한 data의 name 값을 넣어주면, name에 세팅된 value가 출력됩니다. Vue 데이터 바인딩은 style에도 적용할 수 있습니다. 태그의 속성으로 사용될 때에는 콜론(:)속성명을 ..