node.js6 [Vue.js] Vue CLI(Command Line Interface) 터미널 명령어를 통해 Vue.js 개발환경을 더 쉽게 해주는 도구라고 보면 되고 아래와 같은 기능을 제공한다.자바로 따지면 레거시 스프링을 사용하다 스프링부트를 만난 기분인 듯프로젝트 생성개발서버 실행프로덕션 빌드추가 플러그인 설치vue.js의 기본 설정 및 구성을 쉽게 변경할 수 있는 설정 파일과 옵션 제공※ 사전에 npm 최신버전(LTS 권장) 설치 되어 있어야 함설치(npm 또는 yarn으로 설치) 😃npm install -g @vue/cli# ORyarn global add @vue/clivue project 생성 🙂vue create my-project#(생성할 프로젝트 명)# ORvue uivue project를 생성할 경로로 이동 후 명령어 입력 시 프리셋을 선택하라고 표시됨(Vue 3선.. 💻 it/development 2025. 11. 19. [Vue.js] 싱글 파일 컴포넌트에서 컴포넌트 사용 하위 컴포넌트 import 후 사용App.vue app AppHeader.vue Welcome to My App reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21464&tab=curriculum 학습 페이지 www.inflearn.com2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용App.vue app AppHeader .vue {{ propsdata }}yaga.tistory.com2023.07.29 .. 💻 it/development 2025. 11. 19. [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 App.vue app AppHeader .vue {{ propsdata }} reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21465&tab=curriculum 학습 페이지 www.inflearn.com 💻 it/development 2025. 11. 19. [Vue.js] 싱글 파일 컴포넌트에서 event emit 속성 이용 App.vue app AppHeader.vue {{ propsdata }} send reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21466&tab=curriculum 학습 페이지 www.inflearn.com 💻 it/development 2025. 11. 19. [Vue.js] 싱글 파일 컴포넌트에서 axios 통신 post 방식으로 데이터 전송#ajax 통신 위한 lib 설치npm i axiosApp.vue id: password: login get방식으로 데이터 조회 조회 queryString(?empId=dev&empNm=로다주&empEmail=dev@naver.com) 추가 시 아래처럼 사용const data = { empId: this.empId, empNm: this.empNm, empEmail: this.empEmail }//2번 째 인자값에 위에서 만든 object 추가axios.get(url, { data })reference: https:/.. 💻 it/development 2025. 11. 19. [Node.js] 무한 스크롤 적용 소스 (feat. mobile) 개발환경백엔드프론트엔드Express.js(Node.js 기반 웹 프레임워크)EJS 템플릿 엔진(Embedded JavaScript)라우트router.get('/searchHistoryScroll', MyController.getHistoryIndexUsePaging);라우트 파일에서 /searchHistoryScroll url을 MyController의 getHistoryIndexUsePaging 함수와 매핑컨트롤러// 상단 정의 부분 const axios = require('axios');// 라우트에 정의된 함수exports.getHistoryIndexUsePaging = async(req, res) => { let pageNo = req.query.page[0]; // 조회할.. 💻 it/development 2025. 8. 31. 이전 1 다음