아이니그마

https://github.com/webpack/webpack-dev-server/issues/4142 options has an unknown property 'disableHostCheck'. · Issue #4142 · webpack/webpack-dev-server Bug report Actual Behavior devServer: { port: 3001, disableHostCheck: true, headers:{'Access-Control-Allow-Origin':'*'} }, Expected Behavior don't have error How Do We Reproduce... github.com 위글을 보고 해결했다 정확히 같은 오류 였다 disableHostCheck: true, => a..

프로세스 -백엔드 호출 함수 구축->watch로 라우터변경감지->백엔드 호출 함수 호출 1.페이지 정보를 받아오는 함수를 만든다 -this.$store.dispatch('basicStore/getInfolist', { url: url});을 호출해 store의 state를 바꿔준다 2.페이지교체버튼/검색버튼을 만든다 -this.$router.push(changeUrl);를 이용해 url를 변경해준다 3.watch로감지 watch로 router변화를 감지후 변경된다면 페이지 정보를 받아오는 함수를 호출한다 나는 $route가 안되면서사진 처럼 '$route'했더니 됐다 결과 작업 브랜치 https://github.com/novb1492/SUPERMAN_FRONT_ADMIN/blob/feature/produ..

이전프로젝트의 무분별했던 네비바를 다시 설계했다 1.view에서 권한별로 component로 나눈다 2.각 컴포넌트에서 해당페이지에 맞는 네브바 목록 호출하기 3.필요 컴포넌트 묶어놓기 admin manage user 4.각 기능 컴포넌트별로 권한 확인하기 결과 admin manage user 작업브랜치 https://github.com/novb1492/SUPERMAN_FRONT_ADMIN/tree/feature/regi-companynum/src

매장정보를 조회 할 수 있는 페이지를 만들고 있었다 매장등록과 매장정보(수정)은 같은 컴포넌트를 사용한다 여기서 문제가 생겼다 구조 StoreDetailPage.vue에서 StoreDetail컴포넌트를 호출하고 그안에 editor/카카오지도 컴포넌트가 있다 문제 매장정보조회시 정보들을 가져다 뿌리는데 editor/카카오지도 컴포넌트가 먼저 호출되서 순서가 뒤바뀐다 해결 여러방법을 시도 했다 그리고 watch로 해결했다 action에서 api통신후 Mutaions에서 state값을 바꿔준다 그떄 randDone이라는 변수를 true한다 기본값은false StoreDetail컴포넌트에 watch를 건다 randDone이 변경 된다면 watch가 감지한다 그러면 그때 editor호출 및 resultPost를 ..

https://velog.io/@skyepodium/VUEX-store-%EC%97%AC%EB%9F%AC-%EA%B0%9C%EB%A5%BC-%EB%AA%A8%EB%93%88%ED%99%94%ED%95%98%EA%B8%B0 VUEX store 여러 개를 모듈화하기 vuex 에서 store를 여러개 만들고 쉽게 사용해봅시다. velog.io 아주 좋은 글을 발견했다 만들면 끝! 이제 저 이름들을 붙혀서 불러주면된다 참고로 store에 namespaced: true,가 있어야한다 ...mapGetters와this.$store.dispatch에 각 store이름을 붙혀서 호출하면된다

1.개발자센터에서 자바스크립트 키를얻는다 2.카카오 지도를 호출한다 자세한설명 -https://apis.map.kakao.com/web/guide/ 코드 1.index.html에 sdk호출을 세팅한다 - 2.지도를 호출한다 -mount 시킨다 vuex문법이 있는데 vue로 하려면 this.setDomSize(window.innerWidth,window.innerHeight) =>new window.kakao.maps.Map(mapContainer, mapOption); 바꿔서 사용하면된다 저 'init' 액션 안에 동일한 코드가 있다 여기서 중요한점 window.kakao로 해줘야 index.html의 sdk에서 가져올 수있다 3.사이즈 지정과 리사이즈 이벤트 mount에 이벤트 리스너를 걸어 놓았다 r..

이전까지와 다르게 페이지가 이동해도 checkbox값을 유지시켜야 할 일이 생겼다 솔직히 귀찮아서 구축안하고 그냥 다른 방법으로 넘긴 적이 있는데 이렇게 된거 만들었다 1.checkbox의 id값을 담을 배열을 하나 만든다 2. 페이지 이동시마다 id를 줘서 확인한다 - index of를 이용해서 확인 3. 체크박스 클릭 시 들어있으면 삭제 없으면 추가를 해주면 된다 checkState -페이지 이동시마다 체크박스 배열에서 확인하는 함수 nextTick -vue에서 자체 제공하는 기능이다 해당 태그가 생성된 뒤에 실행시켜준다 checkcheckedArr -해당 요소의 위치를 반환하는 함수 indexof은 자바스크립트 기본 제공 기능이다 없다면 -1 반환해준다 clickCheck -체크박스 클릭시 작동하는..

react/vue를 다루기 시작 하면 기존 html에서 익숙하지 않았던 컴포넌트 라는 아주 중요한 개념이 등장한다 개인적인 사용이유 1.새로고침이 없이 랜더링된다 -이게 생각보다 spa를 구현해보면 있고 없고 차이가 크게 느껴지게된다 (물론 자바스크립트도 가능하지만) 2.재사용 -물론 기존에도 자바스립트로 묶어서 쓰거나 하면되지만 좀더 편하게 재사용이 가능하다 1.부분랜더링 -처음 주소는 그냥 입력한기능이다 ㅋㅋ 뿌듯해서.. gif로 변환만 하면 엄청 끈긴당(실제로는 아주 부드럽게 잘작동한다) 2.재사용 -화면을 봐보자 이 화면은 총 몇개의 컴포넌트로 이뤄졌냐면 (사람마다 다르겠지만) 네비바/사이드바/companyPage(부모컴포넌트)/registStorePage(company/1 자식컴포넌트)/에디터/..

url을 이용해서 페이징을 구현하는 흐름을 만들어 야한다 흐름 다음/이전 버튼을 클릭-> url을 변경-> 재 랜더링 1. 다음 이전 버튼에 url을 바꿔주는 로직을 작성한다 -vue의 라우터가 들고 있는 기능을 활용한다 2.url이 변경된다 -url이 변경되면 부모 컴포넌트 혹은 현재 컴포넌트에 watch로 감지한다 3. 재 랜더링 -주석은 무시하면 된다 내 로직 기준 해당 url 자식 컴포넌트의 함수를 호출해 재 렌더링을 시킨다 -주석은 무시하고 그냥 다시 서버에 요청하는 로직을 호출한다 새로고침 없이 페이지 이동이 되고 뒤로/앞으로 가기 버튼/이탈 후 뒤로/앞으로 가기시에도 잘 대응된다 훨신 좋게 소스를 바꿨다 https://cordingmonster.tistory.com/266?category=1..

vue를 사용하다 보면 컴포넌트 통신은 필수적으로 일어난다 그때 사용하면된다 -refs, props 부모-> 자식 1.props 주로 초기 변수 전달을 위해 사용했다 줄 때(부모) v-bind:변수 이름:변숫값 v-bind->: 줄여서 표현 가능하다 받을 때(자식) props안에 변수 이름을 쓰고 사용할 때는 this. 변수 이름으로 사용한다 2.refs 주로 자식 함수를 호출하기 위해 사용했다 사용법 this.$refs. 태그에 지정한 ref값. 지정 컴포넌트 안에 함수 3.emit 자식 -> 부모 1. 자식 this.$emit('명칭', '전달할 변수') 2. 부모 v-on:명칭="호출할 함수" 아주 쉽게 컴포넌트 통신을 할 수 있다