티스토리

김나나 코딩일기

검색하기

블로그 홈

김나나 코딩일기

onlynana.tistory.com/m

김나나_ 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[JavaScript/ES6] getter, setter ( for 데이터 무결성) 📌 getter, setter- 오브젝트 내의 함수들을 괄호 없이 쓸 수 있게 만들어주는 키워드- 데이터의 무결성을 보존하기 위해 쓰는 키워드 원본 데이터는 immutable 해야 한다. (immutable = 불변)데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는 것이 아니라 함수로 간접적으로 다루는 게 대세이다. 📌 함수로 object 데이터 꺼내기var 사람 = { name : 'Kim', age : 30, nextAge(){ return this.age + 1 }} nextAge 는 내년 나이를 출력해주는 함수이다. 🔎 굳이 왜 nextAge 를 활용할까?- object 안의 데이터가 복잡할 수록 함수를 이용하는 것이 데이터를 꺼내기가 쉽다.- 내부에 있는 name,.. 공감수 0 댓글수 0 2024. 8. 27.
[JavaScript/ES6] class 로 상속 기능 구현하기 / extends, super 📌 class 문법 사용 하는 방법class 부모 { constructor(){ this.name = 'Kim' }}var 자식 = new 부모(); 📌 상속 가능한 함수를 추가하려면?sayHi 라는 함수를 상속가능한 함수를 추가하려면, class를 배우기 이전에는1. constructor 안에 this.sayHi 형식으로 추가하기2. prototype 에 추가하기두 가지 방법이 있었다. class 를 활용하면,1번은 아래와 같이 쓴다. (constructor 안에 정의!)class 부모 { constructor(){ this.name = 'Kim'; this.sayHi = function(){ console.log('hello') } }}var 자식 = new 부모(); 새로.. 공감수 2 댓글수 2 2024. 8. 27.
[JavaScript/ES5] Object.create (ES5) - 상속 이용하기 Object.create() 는 ES5 출시 때 나온 문법이다. (class 문법에 밀려 인지도는 낮음) 자식이라는 object 는 부모를 prototype 으로 두게 된다. 자식 오브젝트의 age 를 변경하고 싶다면? 자식의 자식(=손자) 을 만들려면? 손자에 age 가 있는 지 확인한다. 없다면, 자식에 age 가 있는 지 확인한다.자식.age = 20 이므로 20이 출력된다. 요즘 개발자들은 class, extends 문법을 이용하여 상속의 상속기능을 만든다고 한다. 공감수 0 댓글수 0 2024. 8. 27.
[JavaScript/ES6] prototype(프로토타입) - 상속 기능 구현 / prototype 특징 자바스크립트에서는 cunstructor 말고도 상속기능을 구현할 수 있는 장치가 하나 더 있다.바로 prototype(프로토타입) 이다. 다음과 같이 MakeProd 라는 상속자함수가 있다고 하자.function MakeProd (name, price) { this.name = name; this.price = price; this.부가세 = function() { console.log('부가세는 ' + this.price * 0.1 + '원 입니다.'); }}var prod1 = new MakeProd('shirt', 50000);var prod2 = new MakeProd('pants', 60000); makeProd 안에넌 prototype 이라는 항목을 내부에 몰.. 공감수 0 댓글수 0 2024. 8. 27.
[JavaScript/ES6] cunstructor (= Object 생성 기계) cunstructor = 오브젝트를 복사해서 찍어낼 수 있는 새로운 문법object 자료 복사 기계를 만들 땐 function 이라는 함수만드는 키워드를 빌려서 이용하면 된다. 학생부를 찍어낸다고 가정하면,아래와 같이 만들면 된다.this 는 새로 생성되는 오브젝트(= 인스턴스) 를 뜻한다. function makePerson() { this.name = 'kim'; this.age = 20;} 이제 makePerson 이라는 자료 복사 기계에서 새로운 오브젝트를 뽑고 싶다면?new 키워드 활용하면 된다.// constructorfunction makePerson() { this.name = 'kim'; this.age = 20;} var person1 = new makePerson();var .. 공감수 0 댓글수 0 2024. 8. 27.
[JavaScript/ES6] 함수의 default 파라미터 / 함수의 arguments / Rest 파라미터 default 파라미터function plus (a, b = 5) { console.log(a + b);}plus(1); // 6 출력 b 의 값을 넘겨주지 않았지만, default 파라미터로 5를 지정했기 때문에 1 + 5 = 6 이 출력된다. - 수학 연산자 사용 가능ex) b = 5 * 2 - 다른 파라미터와 연산도 가능function plus (a, b = 5 * a) { console.log(a + b);}plus(2); // 2 + 5 * 2 = 12 출력 - 함수입력 가능function plus (a, b = test() ) { console.log(a + b); // 2 + 10 = 12 출력}plus(2);function test () { return 10} 함수의 argu.. 공감수 0 댓글수 0 2024. 8. 26.
[JavaScript/ES6] Spread Operator (... 연산자) / apply, call 함수 Spread Operator (... 연산자) : 괄호를 제거해주는 연산자 var arr = ['hello', 'world'];console.log(arr);console.log(...arr); 문자에 붙이면 어떻게 될까?var str = 'hello';console.log(...str); console.log('h', 'e', 'l', 'l', 'o'); 를 출력 하는 것과 동일하게 출력된다. 문자도 array 와 비슷하다. array 처럼 인덱스를 붙여서 출력할 수 있다. 어디에 활용할까?1) Array 합치기/복사var arr1 = [1, 2, 3];var arr2 = [4, 5, 6];var arr3 = [...arr1, ...arr2]; var arr1 = [1, 2, 3];var arr2 .. 공감수 0 댓글수 0 2024. 8. 26.
[JavaScript/ES6] Tagged Literals (문자 헤채분석기능) 문자와 변수를 구분하여 추출할 때 유용한 기능이다. var name = '홍길동';function 해체분석기(문자들,변수들) { console.log('문자들 > ', 문자들); console.log('변수들 > ', 변수들);}해체분석기`안녕하세요. 제 이름은 ${name} 입니다`; 함수를 실행시킬 때 소괄호가 아니라 ` (백틱) 문자를 붙이면 된다. 첫번째 파라미터는 `백틱` 내의 순수 문자만 골라서 Array 로 만들어 놓은 파라미터두번째 파라미터는 `백틱` 내의 ${} 변수를 담는 파라미터이다. 공감수 0 댓글수 0 2024. 8. 26.
[JavaScript/ES6] var, let, const / hoising, 전역변수, 참조 📌 var, let, constvarlet const재선언 O재선언 X재선언 X재할당 O재할당 O재할당 Xfunction (함수레벨){ } (블록레벨) { } (블록레벨) let, const 는 var 에 비해 엄격하다! 라고 기억하면 편하다. const 로 오브젝트를 선언하면, 오브젝트 자체를 재할당하는 것은 불가능하나, 오브젝트 내의 데이터는 변경 가능하다. 만약에 오브젝트 내의 데이터도 변경 불가능하게 하고 싶다면 ?Object.freez() 라는 자바스크립트 기본함수 사용 (오브젝트 내의 오브젝트 까지 freeze 하진 않음) if 문 내에서 쓴 var 은 if 문 밖에서도 쓸 수 있다.function test () { var a = 'a';}if (true) { var age = .. 공감수 0 댓글수 0 2024. 8. 26.
[JavaScript/ES6] Arrow function 📌 기본함수 & arrow fuction 선언 및 호출// 자바스크립트에서 함수를 만드는 방법 두 가지// 1)function test () { console.log('test 함수 입니다.')}// 2)var test2 = function () { console.log('test2 함수 입니다.');}// 함수 실행하는 방법test();test2();// arrow fuctionvar test3 = () => { console.log('test3 함수입니다.')}// 화살표 함수의 실행test3(); 📌 arrow function 을 쓰는 이유1. 함수 본연의 기능을 아주 잘 표현함function 문법을 사용하는 이유?1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (+.. 공감수 0 댓글수 0 2024. 8. 26.
[JavaScript/ES6] this 총 정리 결론 빨리 알고 싶을 땐 정리 로 이동해서 보믄 된다 📌 그냥 쓸 때 : window 태그 안에 바로 this 를 쓰면 window를 뜻한다 📌 일반 함수 : window window란?window 는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다. 전역변수를 선언하면 window 객체에 저장된다. 함수도 마찬가지이다. 🔎 그냥 쓰거나, 함수 안에서의 this 는 window 를 뜻한다 📌 strict mode 일 때 함수 안에서의 this : undefined strcit mode에선 var 키워드 없이 변수를 선언하거나, 변수를 arguments라는 키워드로 선언하거나 하는 실수들을 방지해준다. 📌 method(오브젝트 내의 함수) 안에서의 this : 해당 오브젝트 그 자체.. 공감수 0 댓글수 0 2024. 8. 19.
[Bootstrap] 부트스트랩 아이콘 적용하기 (Bootstrap Icons) https://icons.getbootstrap.com/ Bootstrap IconsOfficial open source SVG icon library for Bootstrapicons.getbootstrap.com 1. 터미널에서 npm 으로 설치 (CDN 으로도 가능)npm i bootstrap-icons 2. 원하는 아이콘 선택 3. svg 형태로 이용하고 싶을 때 code copy 그대로 복붙하면 잘 노출된다. 커스터마이징 하고 싶다면하단의 examples 활용하자 (개발자 모드켜서 html 확인하면서 활용 가능) 공감수 0 댓글수 0 2024. 8. 14.
[Vue/코딩애플/part3] 13. Composition API 관련 사용법들 (style scoped, reactive(), toRefs(), watch, computed, vuex store, methods 함수) 📌 style scopedvue 파일들에 있던 CSS 는 하나로 합쳐짐 팔로워 {{ a.name }} 전 포스팅에서 만들었던 MyPage.vue 에 css 가 없음에도 이쁘게 노출 됐던 것은 css 파일이 하나로 합쳐졌기 때문임 Post.vue 에 해당하는 css 가 있었다. 근데 특정 vue 파일에만 css 를 적용하고 싶다면?안에 css 를 작성하면 된다. 📌 ref() 와 비슷한 reactive()데이터를 만들 때 두 가지 방법이 있다.1. ref() - primitive 자료형 2. reactive() - array, object 자료형 (reference data type) reactive 에는 보통 array, object 를 집어.. 공감수 0 댓글수 0 2024. 8. 6.
[Vue/코딩애플/part3] 12. Composition API (ref, onMounted()) options API 를 이용하면 .vue 파일이 길어지게 된다.methods, computed 가 엄청 많아지면 코드가 복잡해진다.이러한 단점을 보완한 것이 Composition API 이다.computed, methods, watch, data() 이런걸로 쪼갤 필요 없이 관련 기능을 한 곳에서 쭉 코드를 짜면 된다.(대신 문법이 조금 복잡해짐) 🔎 컴포넌트마다 options API, Compostion API 를 선택할 수 있다. 📌 Compostion API 를 이용하여 마이페이지 만들기 Compostion API 를 이용해 마이페이지를 만들어보자components 파일에 MyPage.vue 를 생성했다. 팔로워 사용자명 MyPage.vue 는 Container.v.. 공감수 0 댓글수 0 2024. 8. 6.
[Vue/코딩애플/part3] 11. 디버깅 하기 위한 Vue devtools 설치하기 (for Vue3) 1. chrome 웹 스토어에서 vue-devtools 검색 2. 최신 devtools 설치하기예전에 나온건 vue2 를 위한 확장프로그램이라고 한다. 3. 설치가 완료되면 개발자 모드 열어서 확인하기 저 화살표 눌러서 vue 를 선택하면 된다. 잘 나오는 것을 확인할 수 있다. - 프로젝트에 라우터를 설치했으면 현재 route, parameter 등도 확인할 수 있다.- state 도 수정 가능설정을 바꾸면 props 도 수정 가능하다. - Timeline 메뉴에서 지금까지 어떤 이벤트가 동작했는 지도 체크 가능 공감수 0 댓글수 0 2024. 8. 6.
[Vue/코딩애플/part3] 10. Progressive Web App (PWA) 📌 PWA (Progressive Web App)PWA 를 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있게 만들 수 있다.앱처럼 보이지만 사실은 웹임 PWA 되려면 다음 두 가지가 필요하다.1. manifest.json2. service-worker.js 라이브러리를 이용하여 위의 두 가지 파일을 만들어보자 설치만 하면 npm runb build를 입력할 때 PWA 가 알아서 셋팅된다. 배포하면 바로 PWA 로 사용 가능하다. 1. 터미널에 다음을 입력한다. (npm 도 이용가능함)vue add pwa 설치가 끝나면 registeServiceWorker.js 파일이 생긴다 우리 프로젝트를 build 할 때 manifest.jsonservice-worker.js 를 생성해준다. 2. 터미널에 n.. 공감수 0 댓글수 0 2024. 8. 6.
[Vue/코딩애플/part3] 9. methods와 comptued 차이점 / vuex - mapState, mapMutatiuons 📌 mothods VS computedvue 에서 함수 다루는 방법 두 가지1. methods : { }2. computed : { } methods 함수는 사용할 때마다 실행된다. computed 함수는 사용해도 실행되지 않는다. vue 파일이 로드 됐을 때 한 번 읽힌다. 그리고 그 값을 간직한다. (처음 실행하고 값을 간직함)리턴 값의 내용이 변경되면 재실행되긴 함계산결과저장용 함수들 이라고 생각하면 된다. computed 함수 호출할 때는 괄호 사용 X / 함수 이름만 쓴다computed 에 now 라는 함수가 있다하면now (O)now() (X) method를 이용해 현재시간을 나타내는 now()computed를 이용해 현재시간을 나타내는 now2() 함수를 정의했다.버튼을 누르면 카운터가 .. 공감수 0 댓글수 0 2024. 8. 5.
[Vue/코딩애플/part3] 8. vuex - actions/dispatch (ajax, 오래 걸리는 작업 실행하기) 📌 actions - dispatchajax 또는 오래 걸리는 작업을 하는 곳actions : { 함수들 정의 } mustations 안에다가 ajax 요청을 하면 되지 않을까? NO name 바꾸는 mutations 함수 실행 후age 바꾸는 mutations 함수를 순차적으로 실행하고 싶다.근데 만약에 name 바꾸는 함수가 너무 오래 걸린다면 name 함수 실행이 끝나기전에 age 를 바꾸는 함수가 실행될 수 있다.즉, 순차적 실행을 보장할 수 없다. (자바스크립트는 ajax처럼 비동기식 처리를 지원하는 코드는 잠깐 제껴두고 다음줄 부터 실행하려 한다 actions 안에 ajax or 오래걸리는 작업을 함수로 정의한다.actions : { // ajax 또는 오래걸리는 작업들 getD.. 공감수 0 댓글수 0 2024. 8. 5.
[Vue/코딩애플/part3] 7. Vuex - store의 state 변경하는 방법(mutations, $store.commit) 1. store.js 에 state 수정 방법을 정의한다. 2. 수정하고 싶으면 store.js 에 부탁한다.state 수정 방법을 mutations : { } 에 정의하면 된다. // store.jsimport { createStore } from 'vuex'const store = createStore({ state() { return { // state 보관은 여기에 name : 'kim', age : 20 } }, mutations : { // state 수정 방법 정의 }})export default store 'kim' 이라는 name 을 'park' 으로 변경하고 싶다면 다음과 같이 정의한다.// store.jsmutations : { .. 공감수 0 댓글수 0 2024. 8. 5.
[Vue/코딩애플/part3] 6. vuex 설치 컴포넌트 간에 데이터를 주고 받는 것은 귀찮다.- 상위 -> 하위 컴포넌트 전송은 props 사용- 하위 -> 상위 컴포넌트 전송은 custom event- mitt 라이브러리 사용 컴포넌트 간 관계가 많아지고 복잡할 수록 관리하기가 힘들다.vuex 를 쓰면 이 문제를 해결 할 수 있다.한 파일에 데이터를 모두 몰아넣고 그 파일에 있는 데이터를 모든 vue 파일이 꺼내쓸 수 있다.단점은 코드가 길어진다. 컴포넌트, 데이터가 많을 땐 vuex를 쓰는 것이 낫고그 외엔 props를 쓰는 것이 좋다. vuex : 상태관리 (데이터관리) 라이브러리- vuex 사용 시 데이터를 한 곳에서 관리하기 때문에 디버깅이 쉽다- 큰 프로젝트 만들 때 많이 쓰는 라이브러리 vuex 설치1. 터미널 열고 vuex 설치 명령어.. 공감수 0 댓글수 0 2024. 8. 5.
[Vue/코딩애플/part3] 5. 멀리 있는 컴포넌트간 데이터 전송 시키기(mitt) 📌 mitt 라이브러리 설치FilterBox.vue -> Container.vue -> App.vue 까지 데이터를 전송시켜보자 단순히 바로 위 상위 컴포넌트로 데이터를 전송할 때는 custom event 를 쓰면 됐었다.상위상위 컴포넌트로 데이터로 전송시키고 싶을 때는 mitt 라이브러리를 이용할 수 있다. 1. 터미널을 열고 mitt 라이브러리 설치한다.npm install mitt 2. main.js 에 mitt 라이브러리 등록import { createApp } from 'vue'import App from './App.vue'import mitt from 'mitt'let emitter = mitt();let app = createApp(App)app.config.globalProperti.. 공감수 0 댓글수 0 2024. 8. 5.
[Vue/코딩애플/part3] 4. props 대신 slot 📌 slot 으로 부모 -> 자식 데이터 전송법1. 자식은 구멍 뚫기// FilterBox.vue 2. 태그 사이에 데이터 넣기// Container.vue 데이터~~~ 데이터~~~ 가 자리에 들어간다. 필터명을 노출시키고 싶다면 {{ filter }} slot 보다 간단하지만태그 안에 데이터바인딩 할 때만 slot 사용 가능하다. (속성에 바인딩 불가) / HTML 태그처럼만 사용 가능 🔹 Named Slots : slot 여러 개 사용하는 법1. 자식 컴포넌트에서 2. 부모 컴포넌트에서보낼거보낼거 이름은 자.. 공감수 0 댓글수 0 2024. 8. 5.
[Vue/코딩애플/part3] 3. tab 만들기 / URL.createObjectURL() 📌 Tab 만들기// App.vue 내용0 내용1 내용2 버튼0 버튼1 버튼2 data () { return { data, moreNum : 0, step : 0 // tab 구분값 }} step 이 0이면 내용0 이 노출,step 이 1이면 내용1 이 노출된다. 버튼에 클릭이벤트를 넣음으로써 step 의 state 를 변경시켜준다. ⚡ 여러 페이지를 만들 때 vue-router 를 써도 되지만 간단한 UI 는 탭으로 만들어도 된다.⚡ 중요한 데이터들은 웬만하면 상위 컴포넌트에 저장하자 (App.vue) 📌 서버 없이 업로드한 이미지 다루기 / URL.createObjectURL()이미지 업로드한 걸 HTML 에 보여주려면 업로드 한 걸 서버로.. 공감수 0 댓글수 0 2024. 8. 2.
[Vue/코딩애플/part3] 2. 서버에 ajax 요청하기 더보기 버튼을 만들어서 서버에 요청하는 방법을 실습해보자. GET 요청 : 데이터 서버에서 가져올 때POST 요청 : 서버로 데이터를 보낼 때 GET or POST 요청하면 브라우저가 새로고침됨ajax 를 쓰면 새로고침 없이도 GET or POST 요청이 가능하다. 🔎 AJAX 요청하려면 ?1. axios 라이브러리 사용2. 기본 fetch 함수 사용(호환성 때문에 대부분 1번 사용) 📌 axios 설치하기1. 미리보기 띄운 것이 있다면 끄고 터미널 열기2. npm install axios (에러나면 yarn add axios) 📌 axios 로 ajax 요청하기실습 전 더보기 버튼을 미리 만들어두자.더보기 버튼을 누르면1) 서버에서 추가 게시물을 가져오고2) 그 게시물을 컴포넌트에 노출시킨다 .. 공감수 0 댓글수 0 2024. 8. 2.
[Vue/코딩애플/part3] 1. 인스타그램 프로젝트 생성 & 레이아웃 만들기 / style 속성 데이터 바인딩 part3 는 복습 & 새로운 개념 적용을 하며 프로젝트를 만드는 것이기 때문에 프로젝트에 필요한 개념 & 코드만 정리하고 넘어가려고 한다.직접 실습하는 것이 제일 실력이 향상된다. 📌 뷰스타그램(vuestargram) 레이아웃 생성프로젝트명을 vuestagram 으로 생성했다.레이아웃 구성은 App.vue 안에 Container.vue 가 있고, Container.vue 안에 Post.vue 가 있다.html, css 를 적용하고 화면에 노출시킬 데이터를 app.vue 에서 import 하고 데이터 바인딩 & props 를 적용했다. 잘 적용되었다. 아직 이미지는 데이터 바인딩 하기 전이다. 📌 stylge 속성 데이터 바인딩style="" 여기에 object 데이터 형태로 여러가지 css 속성을.. 공감수 0 댓글수 0 2024. 8. 2.
[Vue/코딩애플/part2] 7. build / Github pages 로 배포하기 우리가 실습을 통해 만든 Vue 페이지를 다른 사람들도 볼 수 있게 배포하려면 build용 파일을 생성해야 한다.웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있다.=> 브라우저는 .vue 파일을 읽을 수 없다 그래서 build 를 하면 브라우저 친화적인 HTML CSS JS 파일로 바꿔준다빌드 된 것을 웹에 올리면 이제 다른 사람들도 내 사이트를 방문할 수 있다. 📌 Vue 프로젝트 build 하기1. vue 프로젝트에서 터미널 열기2. npm run build or yarn build // 에러가 있으면 build 되지 않음 3. Vue 프로젝트 내 dist 폴더 생성 확인 dist 폴더 안에 index.html , css파일, js 파일이 전부 담겨 있다.build 하면 파일 .. 공감수 0 댓글수 0 2024. 8. 2.
[Vue/코딩애플/part2] 6. Hash mode vs HTML mode / Navigation guards 📌 Hash mode vs HTML mode현재는 아래와 같이 셋팅했다.import { createRouter, createWebHistory } from 'vue-router'const router = [];const router = createRouter({ history: createWebHistory(), routes,}) history: createWebHistory() 로 셋팅했음 요 부분을 다르게 셋팅할 수 있다.import { createRouter, createWebHashHistory } from 'vue-router'const router = [];const router = createRouter({ history: createWebHashHistory(), routes,}.. 공감수 0 댓글수 0 2024. 8. 1.
[Vue/코딩애플/part2] 5. Nested routes & push 함수 📌 Nested routes특정 페이지 안에서 route 를 나누고 싶을 땐 nested route 를 쓴다. /detail/0/author 로 접속하면 작가 소개 페이지로 이동시켜주고 싶다면?/detail/0/comment 로 접속하면 댓글 페이지로 이동시켜주고 싶다면? detail 페이지 안에서 또 페이지를 쪼개는 것을 Nested routes 라고 한다. 컴포넌트를 숨겼다가 보여 주는 식으로 만들어도 되지만,다른 URL 로 나누고 싶다면 nested routes 를 쓴다. children : [ { path: "경로", component: "컴포넌트" }, { path: "경로", component: "컴포넌트" },] i.. 공감수 0 댓글수 0 2024. 8. 1.
[Vue/코딩애플/part2] 4. URL 파라미터 활용하기 (상세 페이지 여러 개 만들기) / 404 페이지 노출시키기 현재 노출되고 있는 블로그 리스트가 3개이니, 상세페이지도 총 3개가 필요하다.이럴 때 활용할 수 있는 것이 URL 파라미터이다. /detail/N 으로 접속하면N번 게시글을 보여주도록 해보자. router.js 의 path 에/detail/:id /:id 를 붙여주면 된다. /detail/:id/:id2/:id3/:id4처럼 파라미터를 여러 개 붙여줄 수 있다. /detail/아무문자로 접속하면 /detail 로 보내준다는 의미이다(콜론 => 아무문자 의미한다고 생각) // router.js{ path: "/detail/:id", component: Detail,}, /detail/0 으로 접속해도,/detail/1 로 접속해도Detail.vue 를 보여주게 된다. detail/0 일.. 공감수 0 댓글수 0 2024. 8. 1.
[Vue/코딩애플/part2] 3. vue-router 설치 / 기본 라우팅 실습 📌 vue-router 설치 / 라우팅 실습1. vue-router4 버전 설치npm run serve 가 실행 중이라면 터미널을 종료 시키고 새로운 터미널을 연다.터미널에 다음을 입력한다. npm install vue-router@4 설치 완료된 것을 확인하려면 package.json 을 확인하자 2. 라우터 파일을 만든다.main.js 에서 라우터 설정을 해야 하는데 코드가 길어서 다른 파일에 만든 후 가져오는 것이 일반적이다.src 파일 밑에 router.js 파일을 만든다. router.js 안에는 아래 코드를 복붙한다. import { createWebHistory, createRouter } from "vue-router";const routes = [ { path: "/경로", .. 공감수 0 댓글수 0 2024. 8. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.