안녕하세요 상훈입니다. React.js 를 사용하던 와중 history를 사용하려고하는데 에러가 발생하였습니다. export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: 내용은 'useHistory' 라는 함수가 존재하지 않는다는 내용이었습니다. 리액트의 버전이 올라가면서 또 사용되지 않는 내용인데요, 이전 내용 이렇게 사용하던 내용들이 이제는 아래와 같이 사용해주시면 됩니다. 더욱 간결한 함수의 등장으로 이제는 useHistory를 사용하지 않습니다! 이상입니다. 도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 참고 Attempted impo..

FrontEnd/React.js 2022. 3. 4. 14:18

안녕하세요 상훈입니다. React.js 에서 Route를 사용하는데, 아래와 같은 에러가 발생하였습니다. Uncaught Error: [Searchpage] is not a component. All component children of must be a or 내용인 즉슨, Routes 컴포넌트 내에는 자식 요소로 Route 혹은 React.Fragment 만 들어갈 수 있다는 뜻입니다. 그러므로, 코드를 변경하도록 하겠습니다. 자세히 확인해보시면, Route 컴포넌트 내에 element라는 속성을 삽입하여 그 속에 객체로 원하는 컴포넌트들을 삽입하였습니다. 이상입니다. 도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

FrontEnd/React.js 2022. 3. 4. 12:48

안녕하세요 상훈입니다. React.js 에서 Switch 를 사용하려고 하는데 아래와 같은 에러가 발생하였습니다. ERROR in ./src/App.js 20:37-43 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesF..

FrontEnd/React.js 2022. 3. 4. 11:43

안녕하세요 상훈입니다. Javascript에서 데이터의 한글 유무를 정규표현식으로 확인하고 싶을 때 사용하시면 될 것 같습니다. 저는 split을 이용해 한글을 기점으로 자르는 함수를 생성하기도 하였습니다. const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/ // 사용 사례 : 한글을 기준으로 문자열 자르기 koreanData = '124515가123124' const data = koreanData.split(korean) // [ 124515, 123124 ]

FrontEnd/JavaScript 2022. 2. 28. 14:39

안녕하세요 상훈입니다. Nuxt.js 에서 Components를 삽입하는 방법은 Vue.js 와 동일합니다. 바로 App.vue | Index.vue 에서 components를 넣는것이죠. 하지만, 차이점이 존재합니다. Vue.js -> Nuxt.js 에서는 import를 굳이 해줄 필요가 없습니다. 예시를 보여드리자면, 컴포넌트를 삽입하였는데, script의 import가 존재하지 않는 것을 확인할 수 있습니다. 결과창에서도 Hero 컴포넌트가 잘 게시되어져 있는것을 확인 할 수 있습니다. 이게 가능한 이유는 Nuxt.config.js 에서 확인이 가능합니다. 해당 내용의 주석을 해석하자면, 자동으로 컴포넌트를 import 해주는 것입니다! 이상입니다.

FrontEnd/Vue.js 2022. 2. 27. 22:07

npm 관련한 명령어를 실행할 때마다 아래와 같은 에러가 발생하였다. npm WARN logfile Error: EPERM: operation not permitted, unlink 'C:\Users\AppData\Local\npm-cache\_logs\2022-02-25T02_50_32_498Z-debug-0.log' npm WARN logfile error removing log file C:/Users/AppData/Local/npm-cache/_logs/2022-02-25T02_50_32_498Z-debug-0.log [Error: EPERM: operation not permitted, unlink 'C:\Users\AppData\Local\npm-cache\_logs\2022-02-25T02_..

FrontEnd/JavaScript 2022. 2. 25. 13:58

안녕하십니까 상훈입니다. Vue.js 3, Vite를 이용하여 해당 프로젝트를 실행시키는데 아래와 같은 에러가 발생하였습니다. 해결방법 main.js 에 작성하였던 history: createWebHistory 부분 때문에 에러가 발생한 것 입니다. createWebHistory 를 사용하기 위해 import를 하셨을 겁니다. 그런데, createWebHistory 는 함수로 작성해야합니다. 해당 에러가 사라지게 됩니다. "도움이 되셨다면 광고 한 번 클릭해주세요. 블로그 운영에 힘이 됩니다. 감사합니다. 참고 [Solved] Vue3 Error: Cannot use ‘in‘ operator to search for ‘path‘ in undefined | ProgrammerAH when creating ..

FrontEnd/Vue.js 2022. 2. 24. 20:30

Vue.js 2, Vuetify, router, vuex, vue-chart.js 를 이용하여 프로젝트 외면을 꾸며주었다. 물론 프로젝트 자체를 확인해보면 router, vuex를 사용하지 않은 것을 확인할 수 있다. Vuetify의 active를 사용하여 버튼을 클릭하면 검정색 글씨로 변하는 버튼이 된다. 유튜브 강의 를 통해 볼 수 있었습니다. 강의 내용은 주로 Vuetify 내용을 다루고 있습니다.

FrontEnd/Vue.js 2022. 2. 20. 18:01