이안의 평일코딩

오류해결 git push시 나는 오류로 두가지 경우에 나타났다. 1. branch가 없는 경우 2. 원격 저장소와 로컬 저장소의 상태가 다른 경우 branch가 없는 경우 먼저 branch를 지정해주지 않은 경우에는 아래와 같이 설정한다. git branch -m main 개인 혼자 프로젝트를 push하는 경우엔 위와 같이 그냥 main으로 설정해주면 되고, 다른 branch를 사용할거면 아래와 같이 한다. git branch 작명 그리고 다시 push해주자. 원격 저장소와 로컬 저장소의 상태가 다른 경우 이 경우에는 다른 상태의 원격 저장소의 코드를 먼저 pull해줘야 한다. git pull 그리고 다시 push를 하자. git status를 이용해 현재 git 상태를 확인하는 것도 오류해결에 도움이 ..

오류해결 이미 origin이 있기 때문에 지워 주고 다시 origin 주소를 추가하면 된다. git remote rm origin git remote add origin 연결할repository주소

Composition API 프로젝트가 커지면 데이터와 관련된 함수 찾는 것도 일이다. 지금까지 했던 문법은 Options API고 Composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다. 편한걸로 컴포넌트마다 Composition 또는 Options 선택하면 된다. Composition API 써서 개발하려면 setup() 안에 코드를 짠다. setup() 안에서 데이터 생성, 조작, methods, computed, watch, hook걸기 등 거의 모든 기능개발을 setup 한 곳에서 가능하다. 먼저 vue에서 {ref}를 import 해온다. setup() 안에서 데이터 생성하는 법은 ref(데이터) 함수를 사용하면 된다. 모든 데이터를 refrence data type으로 감..

style scoped vue파일들에 있던 css는 하나로 합쳐지는데 싫으면 style scoped를 사용하자. scoped가 있으면 다른 vue파일로 전염되지 않는다.

PWA(Progressive Web App) Progressive Web App을 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있다. PWA를 발행하기 위해 먼저 라이브러리를 설치한다. vue add pwa PWA의 구성요소로 manifest.json과 service-worker.js있다. manifest.json은 앱의 이름, 아이콘, 테마색상 등을 설정할 수 있고, service-worker.js는 어떤 html, css, js 파일들을 캐싱할건지 명시하는 파일이다. (오프라인 이용가능) 두 파일은 빌드할 때 자동으로 생성된다. (dist 폴더안에 있는 파일들을 올려주면 된다) npm run build PWA의 설정을 바꾸고 싶으면 vue.config.js라는 파일을 프로젝트 폴더안에 생성한다. m..

computed와 map methods vs computed 함수를 만들 때 methods :{}가 아닌 computed : {}를 사용해보자. export default { name: 'App', data(){ return { counter : 0, } }, methods: { now(){ return new Date() }, }, computed: { now2(){ return new Date() }, }, } methods 함수는 사용할 때마다 실행되지만, computed 함수는 사용해도 실행되지 않는다. 계산결과 저장용 함수로 쓸 수 있고 자원절약이 된다. {{now()}} {{counter}} {{now2}} {{counter}} // computed 함수는 이름만 쓴다 버튼 버튼을 누르면 co..

actions ajax요청과 같이 시간이 오래걸리는 것을 처리하기 위해서는 actions을 이용한다. 비동기식 처리를 지원하는 코드는 다음줄 부터 실행하려는 경향이 있기 때문에 의도치않는 버그가 생길 수 있고, 코드가 길어져 복잡해질 수 있다. 그래서 mutations: {}가 아닌 ajax 요청하지 않고 actions: {}에서 한다. 더보기 게시물 ajax를 요청해보자. store.js import axios from 'axios'; import { createStore } from 'vuex' const store = createStore({ state () { return { more : {}, } }, actions : { getData(){ axios.get('URL.json') .then((..

state 변경 state 변경은 store.js만 한다. state 이상이 생기면 store.js를 보자. store.js import { createStore } from 'vuex' const store = createStore({ state () { return { name : 'lee', age : 20 } }, mutations :{ changeName(state){ state.name = 'park' }, changeAge(state, payload){ //state.age++; state.age += data } } }) export default store; 먼저 store.js에 state를 수정하기 위한 방법을 mutations에 함수 정의한다. 전달할 데이터를 App.vue에서 pa..