Main/Vue.js Programming
-
NPM = Node Package Manager 노드의 패키지들을 관리해주는 매니저이다. 패키지를 관리해요?? 특정 라이브러리와 라이브러리와의 의존관계를 다 파악해서 설치하기가 어렵다. 라이브러리끼리 호환되는 버전이 있는데, 그런 버전들을 NPM 이 관리해준다. npm 초기화 하기 ! NPM 은 먼저 프로젝트 폴더에서 npm 을 쓸거라고 하는 초기화 단계를 수행한다. npm init -y -y는 왜 붙어있나요? npm init 을 수행하면 package.json 이라는 파일이 프로젝트에 만들어 진다. 이때 여러가지 라이브러리와 관련된 것들을 작성하는데, -y를 넣지 않으면 질문지가 10개 정도 나오고 그거에 일일이 작성을 해주어야 한다. -y을 붙여서 일단 빈 껍데기의 package.json을 만든다고 ..
NPM 이란? 설치 및 빠른 활용법 알아보기NPM = Node Package Manager 노드의 패키지들을 관리해주는 매니저이다. 패키지를 관리해요?? 특정 라이브러리와 라이브러리와의 의존관계를 다 파악해서 설치하기가 어렵다. 라이브러리끼리 호환되는 버전이 있는데, 그런 버전들을 NPM 이 관리해준다. npm 초기화 하기 ! NPM 은 먼저 프로젝트 폴더에서 npm 을 쓸거라고 하는 초기화 단계를 수행한다. npm init -y -y는 왜 붙어있나요? npm init 을 수행하면 package.json 이라는 파일이 프로젝트에 만들어 진다. 이때 여러가지 라이브러리와 관련된 것들을 작성하는데, -y를 넣지 않으면 질문지가 10개 정도 나오고 그거에 일일이 작성을 해주어야 한다. -y을 붙여서 일단 빈 껍데기의 package.json을 만든다고 ..
2023.08.02 -
ES6 정리 Const & let 새로운 선언 방식 기존의 var로 선언한 변수를 const 와 let으로 선언 블록단위인 {} 으로 변수의 범위가 제한 됨 const : 한번 선언한 값에 대해 변경할 수 없음 let: 변경할 수 있는 변수를 선언할 때 사용 *const와 let 모두 선언은 1번만 할 수 있음. 값을 재정의하는 것은 let 만 가능 ES5의 특징 - Hoisting Hoisting 이란? 바닥에서 천장으로 끌어올린다는 의미로 선언한 var a=10; 의 변수를 맨위로 끌어올림 function 과 var 를 최상단으로 끌어올린다. function sum(){ return 10+ 20; } var a = sum(); function sum() { return 20 + 30; } 여기서 a ..
Javascript ES6 5분만에 정리하기ES6 정리 Const & let 새로운 선언 방식 기존의 var로 선언한 변수를 const 와 let으로 선언 블록단위인 {} 으로 변수의 범위가 제한 됨 const : 한번 선언한 값에 대해 변경할 수 없음 let: 변경할 수 있는 변수를 선언할 때 사용 *const와 let 모두 선언은 1번만 할 수 있음. 값을 재정의하는 것은 let 만 가능 ES5의 특징 - Hoisting Hoisting 이란? 바닥에서 천장으로 끌어올린다는 의미로 선언한 var a=10; 의 변수를 맨위로 끌어올림 function 과 var 를 최상단으로 끌어올린다. function sum(){ return 10+ 20; } var a = sum(); function sum() { return 20 + 30; } 여기서 a ..
2023.07.31 -
Axios 를 통해서 Vue.js에서 API를 호출할 수 있다. 먼저 설치는 아래와 같이 진행한다. npm install axios --save 설치를 하고나서 src > api 폴더를 만들어주고, 그 아래에 index.js 를 만든다. 이후 아래와 같이 임포트를 먼저 해주고, baseUrl 를 설정해준다. 이후 함수에 따라서 원하는 Axios 리턴 함수를 작성하여 준다. 마지막으로 export 를 하여 함수를 리턴해주면, 다른 컴포넌트에서 사용할 수 있다. import axios from 'axios'; //자동으로 노드모듈에서 가져오는거임 // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v..
[Vue.js] Axios 간단하게 사용하기Axios 를 통해서 Vue.js에서 API를 호출할 수 있다. 먼저 설치는 아래와 같이 진행한다. npm install axios --save 설치를 하고나서 src > api 폴더를 만들어주고, 그 아래에 index.js 를 만든다. 이후 아래와 같이 임포트를 먼저 해주고, baseUrl 를 설정해준다. 이후 함수에 따라서 원하는 Axios 리턴 함수를 작성하여 준다. 마지막으로 export 를 하여 함수를 리턴해주면, 다른 컴포넌트에서 사용할 수 있다. import axios from 'axios'; //자동으로 노드모듈에서 가져오는거임 // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v..
2023.03.18 -
Vue.js 프로젝트 실행 중 Parsing error: No Babel config file detected for 에러가 뜨면, 오류로 계속 잡혀있는게 불편하므로 없애고 시작해야한다. 워킹디렉토리가 잘 안잡혀서 그런걸 수 있는데, 해당 프로젝트 폴더만 열어서 실행하면 해결되겠으나, 여러 프로젝트 왔다갔다 하는경우엔 아래에 설정을 추가하여 Auto로 Detect하게 만들어준다. Ctrl+Shift+P (Command + Shift + P) -> Open Workspace Settings(JSON) 선택하면 settings.json이 열리는데, 아래의 코드를 넣으면 해결된다. "eslint.workingDirectories": [ {"mode": "auto"} ]
[Vue.js] Parsing error: No Babel config file detected 해결방법Vue.js 프로젝트 실행 중 Parsing error: No Babel config file detected for 에러가 뜨면, 오류로 계속 잡혀있는게 불편하므로 없애고 시작해야한다. 워킹디렉토리가 잘 안잡혀서 그런걸 수 있는데, 해당 프로젝트 폴더만 열어서 실행하면 해결되겠으나, 여러 프로젝트 왔다갔다 하는경우엔 아래에 설정을 추가하여 Auto로 Detect하게 만들어준다. Ctrl+Shift+P (Command + Shift + P) -> Open Workspace Settings(JSON) 선택하면 settings.json이 열리는데, 아래의 코드를 넣으면 해결된다. "eslint.workingDirectories": [ {"mode": "auto"} ]
2022.09.22 -
vue --version 을 쳤을 때 다음과 같이 버전이 잘~ 나온다면 프로젝트를 생성할 준비가 완료 된 것이다. 이제 그러면 프로젝트를 만들어보자 vue create vue-project01 뷰 플젝만들기 프로젝트이름 그럼 위와 같이 나올텐데 여기서 vue3로 선택해준다. (화살표로 내려서 엔터) 그럼 열심히 뷰 프로젝트를 만들고 있다. 생각해보니 비쥬얼 스튜디오 코드로 해야된다는걸 설명안했는데, 비쥬얼 스튜디오 코드 깔아서 터미널 켜서 하면된다. (0번챕터로 기본프로그램 셋팅 써야겠다 ㅠㅠ) 다 만들면 아래처럼 뜬다 여기서 npm run serve 를 입력해서 페이지를 실행시켜보자. npm run serve를 하게 되면 node.js가 돌면서 로컬에서 웹페이지를 띄워준다. 이렇게 나오면 주소 커맨드 ..
[2] 프로젝트 만들고 실행하기 & 라우팅에 관한 이해 & prefetch에 관하여vue --version 을 쳤을 때 다음과 같이 버전이 잘~ 나온다면 프로젝트를 생성할 준비가 완료 된 것이다. 이제 그러면 프로젝트를 만들어보자 vue create vue-project01 뷰 플젝만들기 프로젝트이름 그럼 위와 같이 나올텐데 여기서 vue3로 선택해준다. (화살표로 내려서 엔터) 그럼 열심히 뷰 프로젝트를 만들고 있다. 생각해보니 비쥬얼 스튜디오 코드로 해야된다는걸 설명안했는데, 비쥬얼 스튜디오 코드 깔아서 터미널 켜서 하면된다. (0번챕터로 기본프로그램 셋팅 써야겠다 ㅠㅠ) 다 만들면 아래처럼 뜬다 여기서 npm run serve 를 입력해서 페이지를 실행시켜보자. npm run serve를 하게 되면 node.js가 돌면서 로컬에서 웹페이지를 띄워준다. 이렇게 나오면 주소 커맨드 ..
2021.11.04 -
우선 구글에서 node.js 를 쳐서 공식홈페이지에가서 다운받는다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운받는 2개중에 LTS버전을 받아준다. 안정적인 버전이란 뜻 설치를 쭉쭉해주고 node --version 치면 이렇게 나온다. 이제 vue 를 설치해보자 npm install -g @vue/cli 잘 설치가 되었는지 vue --version 을 쳐서 확인해본다 위와 같지 나오지 않고 command not found : vue 라고 에러가 떳었다. 이 문제는 vue 명령어 엔터 했을 때 vue 프로그램을 찾아서 실행해야 하는데 vue ..
[1] Mac에서 vue.js 설치하고 환경변수 설정하기(command not found : vue 오류 해결방법)우선 구글에서 node.js 를 쳐서 공식홈페이지에가서 다운받는다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운받는 2개중에 LTS버전을 받아준다. 안정적인 버전이란 뜻 설치를 쭉쭉해주고 node --version 치면 이렇게 나온다. 이제 vue 를 설치해보자 npm install -g @vue/cli 잘 설치가 되었는지 vue --version 을 쳐서 확인해본다 위와 같지 나오지 않고 command not found : vue 라고 에러가 떳었다. 이 문제는 vue 명령어 엔터 했을 때 vue 프로그램을 찾아서 실행해야 하는데 vue ..
2021.11.02