CodeHoon

안녕하세요 상훈입니다.

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 는 함수로 작성해야합니다.

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

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

참고

안녕하세요 상훈입니다!

나만의 키보드. 키 한개를 누를때마다 실제 데스크탑 PC 키보드를 타이핑 할 때처럼 발광하는 빛을 보고싶지 않으십니까?

그럴 때 사용할 수 있는 어플리케이션을 소개합니다.

다른 건 몰라도 제가 이건 꼭 공유하고 싶어서 공유드립니다. 같이 이쁜 키보드 쓰자구요~~ 😎

사용 및 설치방법은 아~주 간단합니다!

1. 기본 어플리케이션 중 (혹은 없다면 다운로드) Good Lock 이라는 분홍색 배경의 어플이 있으실겁니다!

요기서 다운로드 받는건데요,

2. Good Lock에 들어가 Family 탭에 들어가서 해당 어플을 다운로드 받아주세요!

Keys Cafe app과 테마파크 app 입니다.

테마파크 어플을 사용 허용 해주셔야 keys Cafe 어플을 사용하실 수 있습니다.

3. Keys Cafe 어플을 실행해서 '나만의 키보드 꾸미기'에 들어가주세요!

4. 이곳에서 나만의 키보드를 적용해주시면 됩니다! 아주 간단하죠?

추가적으로 '효과' 탭에서 효과를 마음대로 설정하실 수 있습니다!

이상입니다!

안녕하세요 상훈입니다!

이번에 삼성에서 새로 출시한 갤럭시 탭 S8 울트라를 구매하였습니다! 🤸‍♀️

이렇게 늦게 리뷰하는 이유는 정품키보드가 오늘 도착해서 부랴부랴 사진찍고 리뷰를 시작하였습니다.

그동안 개인소유 탭이 하나도 없었습니다 ㅠㅠ 그리고 주변에 다들 아이패드를 사용하여 항상 부러움에 허덕이면서 살았는데, 이번에 그러한 부러움을 깨부술 수 있었습니다.

자, 각설하고 리뷰 시작하겠습니다.

갤럭시탭S8U 는 2월 12일 오전 8시 30분에 배송 기사님께 직접 배송 받았습니다.

박스는 아주 얇게 왔습니다! 그리고... 엄청 가벼워요!!! (500g이 안됨) 

드디어.. 언박싱..!

구성품은 펜과 C to C 케이블... 네.. 이번에는 삼성에서 어댑터를 안넣어줬어요...
( 그래서 사전예약 이벤트로 샀습니다 )

뒷면은 은은한 광택이 도는 고급스러운 블랙이었습니다. 손으로 쓸었을때 사삭 소리가 나면서 시원한 촉감에 느낌이 좋아요.

전면은 아주 얇은 베젤, 그리고 빤딱빤딱 거리는 디스플레이로 전자제품을 처음 샀을때의 그 감동 그대로입니다.

그리고 안드로이드를 시작하며, 기존에 갖고 있던 근거리 네트워크 데이터 송수신 기술을 이용하여 현재 갖고 있는 갤럭시 휴대폰의 데이터를 선택복사할 수 있습니다!

저는 256GB의 제품을 구매하였고, 이미지를 다 넣을 필요가 없다 생각하여 이미지를 제외하고 삽입하였습니다.

1분만에 데이터 다 들어갔어요

참고로, 사전구매 혜택은 삼성members 어플리케이션에서 신청이 가능하니 잊지 말고 사용해주세요!

그리고 주말이 지나 수요일 즈음, 사전구매 혜택으로 구매한 Pantone 파우치 세트가 도착하였습니다!
(다른 건 다 취향이 아니라..)

Pantone 박스는 너무 이쁩니다...!

왜 보라색으로 만들었는지 모르겠지만, 저는 검정색 흰색이었으면더 좋았을 것 같더라구요..

보라색의 배색에 위치한 노란색 무선 마우스도 왔어요! 

사용 방법 : 전원을 킨다 - 마우스 휠과 우측 마우스를 2초간 클릭한다. 

마우스가 저소음 마우스라 마음에 들었습니다.

마우스 패드도 왔는데, 음.. 썩 제 스타일도 아니고 마감이 훌륭하지 않아서 일단 지금 쓰던 때묻은 패드를 쓸겁니다.

키보드가 오지 않았던 시점이라 저렇게 펜을 떼어서 지퍼공간 내부에 넣어놓고, 탭 보관하고, 마우스 넣어서 주섬주섬 보따리 상인처럼 들고 다녔습니다.

그런지 어언 10일...... 드디어 받았습니다.

키보드를.

이렇게 키보드 커버를 받게 되었습니다....!! 😥

그런데 갤럭시 S7 + 키보드 커버를 봤을때 키보드 방향으로 탭을 위치하게 하여 무릎 위에서 사용할 수 있게 하는 걸 원했지만, 오리지널은 이 디자인 뿐이더라구요. 🦵 자 고정입니다.... ㅠㅠ

그래도 괜찮습니다. 저는 긍정적이거든요 😎

키보드 커버 구성품입니다.

1. 2개로 분리되는 자석으로 연결 가능한 키패드 영역
2. 탭 뒷면을 보호하는 커버.

어... 일단 장착해보았는데, 무거워요. 😦

저는 괜찮았는데, 여자친구가 들어보고는 무겁다고.. 네, 저도 무거웠습니다.

그리고 함께 온 어피치 실리콘 펜 케이스

사실 저는 라이언이나 다른걸 원하긴 했는데, 저것도 그런대로 괜찮아 보이긴했습니다.

다만. 진짜 치명적인 문제가 있어요

장난하나 ㅋㅋㅋㅋㅋㅋㅋ 

어떡하라구 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그래도 일단 충전⚡은 돼요..(충전이라도 돼서 다행인가....)

마지막으로 타건하는 영상입니다. 볼륨은 작게 해서 들으시는게 최대한 현실과 같습니다.

암튼 잘 쓰겠습니다!!!!

결론

일단 스펙 자체가 너무 맘에들어요.

키보드를 장착하면 자동으로 Samsung Dex 가 전환되는 기능이 있습니다. 아주 좋습니다.

화면사이즈는 14.1인치로, 제가 또 아이패드 프로 3세대와 비교해보았습니다.

이정도 차이나 난다구요!!! 거의 4-5cm...? 될 듯 합니다...! 

후후후후후후...

저는 이제 탭 있는 남자입니다. 아주 멋진.

해당 이벤트는 탭에서 로그인해야지 들어가실 수 있습니다.

요거 좀 불편해요. 휴대폰으로 사이즈는 맞춰져 있는데, 정작 들어갈 수 있는건 탭이라서요... ㅠ

이상입니다. 

갤럭시 탭 구매에 조금이라도 도움이 되셨다면, 광고 잠깐 눌러주세요.
블로그 운영에 큰 힘이 됩니다!!!