소금빵의 인공눈물

lazy-loading이란? 앱의 초기 구동시 모든 컴포넌트의 리소스를 가져오지 않고, 리소스를 컴포넌트 단위로 분리시켜 필요한 것들만 다운로드합니다. 특히 대규모 프로젝트에서 사용하는 컴포넌트가 많아질수록 로드하는 시간이 길어지는데 이를 줄이는데 유용합니다. 사용 방법 router.js에서 component import 하는 부분을 함수로 변경합니다. const routes = [ { path: '/page/home/detail', name: 'DetailPage', meta: { menuAth: 'menu0001' }, component: () => import('../page/home/homeDetail.vue'), //함수화 } ] export default routes 주의점 app.vue 또는..

defineExpose란? vue3에서 defineExpose란 자식 컴포넌트에서 선언된 함수(API)를 부모 컴포넌트에서 직접적으로 호출(import)하여 사용할 수 있는 함수입니다. 사용 방법아래 코드는 Composition API 에서 defineExpose를 사용하는 간단한 방법입니다. 1. childComponent.vue 자식 컴포넌트에서 expose할 함수 선언 2. 부모에서 함수 호출 자식함수호출!

vue를 개발하던 중 이런 에러가 떴다. 검색해보니 해당 오류는 같은 컴포넌트를 한 번 더 호출해서 이미 해당 경로인데 우케 또 일루가냐~~ 라는 에러라고한다. 하지만 가야합니다 원래는 코드는 router-link로 html에서 꽂았는데 여기선 해결방법이 없어보여서 함수로 뺐다. 1. 클릭하는 html 요소에 해당 함수를 박는다. @click="repoCheck(el.name)" @keyup="repoCheck(el.name)" 2. el.name 요소를 전달받은 repoCheck 메소드는 router에 push를 하는 동시에 에러가 나는 것을 catch하여 무시하기로 한다! methods: { repoCheck(rn) { this.$router.push({ name: 'repositoryFile', p..

npm 모듈 설치시 npm ERR! 하면서 뜨는 에러들 너무 킹받는다. 해결방법 : npm install [설치할모듈] --save --legacy-peer-deps

[사건의 발단] Git같은 서비스를 개발중이라 디렉토리 들어갈때마다 n개의 라우트 경로를 생성해야 될 일이 생겼다. 일반 string으로 'testdir1/testdir2/testdir3' 으로 넣으면 'testdir1%2Ftestdir2%2Ftestdir3' ㅇ..이래 ㅋ 구글링해도 %2F에 관해선 거~~~의 안나왔다. 그나마 route 공홈에서 언급을 했는데 이런말을 한다. 심지어 %2F 가 들어가면 Url 복붙해서 다른페이지로 열었을때 HTTP404 Bad Request 떠서 더 안됨 [삽질의 시작] route 공식에서는 중첩라우트 만드는 방법에 대해 이렇게 설명한다. https://router.vuejs-korea.org/ko/guide/essentials/route-matching-syntax...

1. click이벤트 지정 @click은 v-on:click과 같은 의미다 테이블의 인자값을 넘기기 위한 row.name 변수와 $event핸들러(DOM의 이벤트 활성화)를 넣어주었다. 2. method 안에서 받은 이벤트를 콘솔로 찍어본다. (event 생략가능) clickRepo(name) { console.log(name); },

router-link-exact-active : router-link to에 지정한 path에 해당하는 path만 적용router-link-active : router-link to에 지정한 path의 하위 path 모두 적용 예제코드) scss#header-nav { padding: 30px; z-index: 1; a { font-weight: normal; color: #2c3e50; text-decoration: none; &.router-link-active { color: #f17f42; font-weight: 600; } } }

8081에서 spring boot로 띄운 8080서버로 api를 요청해야한다 이때 cors 에러가난다 해결방법은 vue.config.js... devServer: { // historyApiFallback: true, proxy: { '/user*': { target: process.env.VUE_APP_API_URL, changeOrigin: true, }, '/repo*': { target: process.env.VUE_APP_API_URL, changeOrigin: true, }, },user로시작하는 모든 요청에 env파일에 요청한 url 로 들어가게해놓고 응답올때도 마찬가지로 cors를 뚫기 위해 changeOrigin true로 해줬다 api 설정 파일에서function repositories..

함수의 매개변수에 재선언을 하지 말라는 의미 함수의 매개변수가 참조형인경우 같은 주소값을 가지고 있기때문에 참조형의 프로퍼티를 수정하면 원본이 변하게 됨 이는 개발자가 의도치 않은 side Effect를 만들 가능성을 높힘 바꾼 코드 const sdata = res.data; sdata.created_date = sdata.created_date.replace('T', ' '); sdata.created_date = sdata.created_date.replace(-1, -4); this.data = sdata; console.log(sdata); [참고] https://velog.io/@dregonc/%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EB%A1%9C-%EB%B0%9B%E..

table 구조 No 아이디 사용자 주소 이메일 권한 가입일자 강제탈퇴 {{idx+1}} {{ row.id }} {{ row.name }} {{ row.address }} {{ row.email }} {{ row.role }} {{ row.created_date }} 탈퇴 - 중요한 포인트 - (row, idx) in [불러온데이터] - key는 필수 - 여기서 row는 행이고 지정된 값이니 임의로 바꾸지 말 것 - idx는 데이터 외의 테이블의 인덱스값이다. {{idx+1}} 부분을 보면 어떤 느낌인지 알거임 script 부분 export default { name: 'AdminView', components: { }, computed() { }, mounted() { this.getUsers(); }..