희락코딩

return용도 함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환합니다. 이때 값을 명시하지 않으면 undefined를 반환합니다. 아래와 같은 명령문은 모두 함수 실행을 중단합니다. return; return true; return false; return a+b /3; return x; return;만 있는 경우는 아래 예시처럼 사용 할 수 있습니다. if문의 조건이 충족하는 경우 해당 함수를 실행을 중단하고 함수 자체에서 빠져나가는 것을 의미합니다. function () { if(num === 0){ return; // 위의 조건을 만족하면 해당 함수를 중단 } //...샬라샬라~ }

Parsing error : Cannot find module 'next/babel' next.js를 처음 접한 사람이라면 누구나 공감하는 에러인 것 같다. 코드를 작성하다 갑자기 vs코드 파일창이 빨간색으로 오류가 있는것마냥 표시가 되어 있을 것이다... 하지만 브라우저에서는 아무 문제 없이 잘 된다... 그래도 보기 싫어서 찾아 보았다 해결방법은 간단하다. .eslintrc 파일에 가서 아래 코드를 추가 하였다. { "extends": ["next/babel","next/core-web-vitals"] } 참고 자료

npm ERR! code ERESOLVE 라이브러리 설치 도중 unable to resolve dependency tree 문구와 함께 에러가 발생했따.. 원인은 버전 문제였고 간단히 해결 할 수 있는 문제였다. 설치시 npm install --force or npm install --legacy-peer-deps 둘중 하나를 뒤에 붙이면 된다. 문제는 해결 했지만 이 명령어가 무엇인지 궁금해져서 찾아 보았따. --force를 하면 package-lock.json에 몇가지의 다른 의존 버전들을 추가할수 있다. --legacy를 하면 peerDependency가 맞지 않아도 일단 설치한다. 결론은 force를 통해 우회적으로 해보고 안되면 legacy를 사용해서 진행하면 될 것 같다! 참고1 참고2 참고3

버튼 클릭시 reload되는 현상 문제 원인 - 우선 button이 form 태그 안에 있을 경우 발생합니다. 그이유는 form태그안에 있는 버튼은 기본적으로 type이 submit 으로 설정되어 있어서 어떠한 이벤트를 주었을 때 버튼 클릭을 하면 reload가 되는 현상이 나타 납니다. 일반 버튼일 경우 상관 없지만 form 태그 안에 버튼이 있는 경우에는 따로 type을 설정하지 않으면 reload현상이 나타납니다. 해결볍 1 html에서 button 태그 type을 button으로 설정합니다. //문제 코드 수정 // 해결 코드 수정 해결법 2 자바스크립트에서 event.preventDefault()로 제어 해줍니다. preventDefault()는 브라우저의 기본 동작을 제어 해주는 역할을 합니다..

vuex 사용법 vuex는 props와 custom event로 데이터 주고받는게 힘들때 사용합니다. vuex를 설치하면 js 파일하나에다 모든 데이터를 저장 할 수있습니다. 그럼 모든 컴포넌트를 그 데이터를 직접 꺼내고 수정할 수 있어 프롭스 필요없이 모든 컴포넌트가 데이터에 직접 접근이 가능합니다. 그리고 vue파일과 데이터, 규모가 클 때 사용합니다. 리엑트에서 리덕스 개념으로 생각하면 편합니다. vuex 셋팅 우선 터미널에서 vuex를 설치합니다. npm i vuex@next --save그리고 js파일을 만들어 아래와 같이 기본 셋팅을 합니다. // store.js import (createStore) from 'vuex` const store = createStore({ state(){ ..

mitt mitt은 상위-상위 컴포넌트나 아니면 동떨어진 컴포넌트에 데이터를 전송 할 때 사용하면 매우 유용합니다. 사용법도 간단합니다. 우선 설치부터 하기! npm i mitt설치가 끝나면 main.js파일에 가서 mitt 환경 셋팅을 합니다. import { createApp } from 'vue' import App from './App.vue' // mitt 라이브 셋팅 import mitt from 'mitt' let emitter = mitt(); let app = createApp(App); // 글로벌한 변수 보관함 app.config.globalProperties.emitter = emitter; app.mount('#app') 사..

slot문법 자식이 부모데이터를 사용하고 싶을때 사용합니다. 다만 프롭스는 src, style속성에서도 사용가능하지만 slot은 html태그이기 떄문에 html태그처럼만 사용이 가능합니다. 1. 자식 컴포넌트 태그를 이용해서 데이터를 표시할 곳을 정합니다. 2. 부모 컴포넌트 부모는 데이터 이렇게 자식컴포넌트 사이에 데이터를 작성해서 보냅니다. {{filterData[i]}}

vue Nested routes & push 특정 페이지 안에서 route를 나누고 싶을 때 사용한다. 예를들어 /detail/0/comment로 접속하고 싶다면 /detail/0 뒤에 children을 만들어 추가해주면 된다. 여기서 주의할 것은 children의 path에 /을 제외해서 상대경로로 적어준다. 안녕하세요 예를 들어 위에 있는 children 컴포넌트를 만들었다고 가정을 하고 시작했을때 이컴포넌트를 아래와 같이 등록 해준다. // router import { createWebHistory, createRouter } from "vue-router"; import List from './views/List.vue'; import Home from './views/Hom..