CodeHoon

안녕하세요 상훈입니다.

react.js에서 return 내에 jsx로 html 요소를 작성해야할 때, 보통은 <div> 태그로 모든 항목을 감싸서 1개의 요소를 반환시키도록 합니다. 

그러나 이를 사용하고싶지 않을 때 Fragment를 사용할 수 있는데요,

이는 React Version 16 이상 사용이  가능합니다.

간단한 예시)

return (
	<div>
    	<h1> Hello? </h1>
    </div>
)

이렇게 return 부분이 작성되어져 있을 때,

return (
	<Fragment>
    	<h1> Hello? </h1>
    </Fragment>
)

혹은

return (
	<>
		<h1> Hello? </h1>
	</>
)

이렇게 작성할 수 있습니다.

안녕하세요 상훈입니다.

React.js 를 사용하던 와중 history를 사용하려고하는데 에러가 발생하였습니다.

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports:

내용은 'useHistory' 라는 함수가 존재하지 않는다는 내용이었습니다.

리액트의 버전이 올라가면서 또 사용되지 않는 내용인데요,

이전 내용

이렇게 사용하던 내용들이 이제는  아래와 같이 사용해주시면 됩니다.

더욱 간결한 함수의 등장으로 이제는 useHistory를 사용하지 않습니다!

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

참고

안녕하세요 상훈입니다.

React.js 에서 Route를 사용하는데, 아래와 같은 에러가 발생하였습니다.

Uncaught Error: [Searchpage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

내용인 즉슨, Routes 컴포넌트 내에는 자식 요소로 Route 혹은 React.Fragment 만 들어갈 수 있다는 뜻입니다.

그러므로, 코드를 변경하도록 하겠습니다.

자세히 확인해보시면,

Route 컴포넌트 내에 element라는 속성을 삽입하여 그 속에 객체로 원하는 컴포넌트들을 삽입하였습니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

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, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams) 

에러의 원인은 React의 버전이 올라가면서 Switch 가 Routes 로 변경되었다고 합니다.

사용 방법은 똑같으니, Switch로 작성하셨던 부분을 Routes로 변경해주시면 됩니다.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

react-router-dom 의 기능에서도 Switch 대신에 Routes를 작성해주시면 됩니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Javascript에서 데이터의 한글 유무를 정규표현식으로 확인하고 싶을 때 사용하시면 될 것 같습니다.

저는 split을 이용해 한글을 기점으로 자르는 함수를 생성하기도 하였습니다.

const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/


// 사용 사례 : 한글을 기준으로 문자열 자르기
koreanData = '124515가123124'
const data = koreanData.split(korean)    // [ 124515, 123124 ]

안녕하세요 상훈입니다.

Nuxt.js 에서 Components를 삽입하는 방법은 Vue.js 와 동일합니다. 

바로 App.vue |  Index.vue 에서 components를 넣는것이죠.

하지만, 차이점이 존재합니다. 

Vue.js -> Nuxt.js 에서는 import를 굳이 해줄 필요가 없습니다.

예시를 보여드리자면,

<Hero /> 컴포넌트를 삽입하였는데, script의 import가 존재하지 않는 것을 확인할 수 있습니다.

결과창에서도 Hero 컴포넌트가 잘 게시되어져 있는것을 확인 할 수 있습니다.

이게 가능한 이유는 Nuxt.config.js 에서 확인이 가능합니다.

해당 내용의 주석을 해석하자면, 자동으로 컴포넌트를 import 해주는 것입니다!

이상입니다. 

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_50_32_498Z-debug-0.log'] { npm WARN logfile errno: -4048, npm WARN logfile code: 'EPERM', npm WARN logfile syscall: 'unlink', npm WARN logfile path: 'C:\\Users AppData\\Local\\npm-cache\\_logs\\2022-02-25T02_50_32_498Z-debug-0.log' npm WARN logfile }

unlink 관련하여 에러 내용인 것 같은데, 도대체 왜 저러는지 이해가 안됐었다. 😂

1. 설치단계에서는 warn 만 있고, error 로 인한 멈추는 현상은 이루어지지 않았다는 점.
2. 실행단계에서는 멈춘다는 점
3. cache 정리를 해봐도 잘 안됐다는 점... 등

그래서 내가 무엇을 했는지 생각해보았고, 문득 생각난 package.json.script 부분을 변경하였던 것이 생각나 해당 부분을 주석처리하고 재실행하였더니, warn 등의 로그들이 출력되지 않았다.

install 부분과 run · start ... 실행 부분에 또 똑같은 에러가 출력되었는데,

그냥 npm을 repair 하였다. 그랬더니 자연스럽게 잘 실행됨.

지금 다시 생각해보면 링크가 꼬였다 혹은 끊어졌다가 어울리지 않을까 싶다.

안녕하십니까 상훈입니다. 

Vue.js 3, Vite를 이용하여 해당 프로젝트를 실행시키는데 아래와 같은 에러가 발생하였습니다.

해결방법

main.js 에 작성하였던 history: createWebHistory 부분 때문에 에러가 발생한 것 입니다.

createWebHistory 를 사용하기 위해 import를 하셨을 겁니다. 그런데, createWebHistory 는 함수로 작성해야합니다.

해당 에러가 사라지게 됩니다.

"도움이 되셨다면 광고 한 번 클릭해주세요. 블로그 운영에 힘이 됩니다. 감사합니다.

참고