# 에러 로그Error: error:0308010C:digital envelope routines::unsupportedQuasar로 구축된 Vue.js 프로젝트에서위와 같은 에러가 발생했습니다. Node.js v17부터 OpenSSL 3.0이 기본적으로 포함되어 있기 때문에이전 버전의 암호화 알고리즘(legacy 알고리즘)을 사용하는패키지나 라이브러리에서는 호환성 문제가 발생하게 됩니다. 해결 방법 함께 알아봅시다. 😀📝 해결 방법 해당 깃허브 이슈를 살펴보면 webpack 4버전에서 이슈가 존재하는 듯 합니다. ⦁ 방법 1. OpenSSL 레거시 모드 활성화 Node.js v17 이상을 유지하면서 문제를 해결하려면 openSSL의 레거시 모드를 활성화해야 합니다.// 방법 1. 실행 명령에 옵션 ..

요즘 멋있는 웹에는 위와 같은 SNS 공유 기능이 꼭 들어있는데요.Web Share API를 사용하면 간단하게 구현할 수 있습니다. 웹 표준 기술인 Web Share API는웹 애플리케이션에서 URL, 텍스트, 이미지 등을다른 앱으로 공유할 수 있게 해줍니다. 기기의 네이티브 공유 인터페이스와 연동되어별도로 개발하지 않아도 사용자의 기기에서 친숙한UI를 제공할 수 있는 장점도 있습니다. 사용방법 함께 알아봅시다. 😀 📝 공식문서https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API Web Share API - Web APIs | MDNThe Web Share API provides a mechanism for sharing text, links..

https://hyunki99.tistory.com/117 [React] 리액트 QR 코드 생성하기 (qrcode.react)프로젝트에서 주소를 복사하기 위해서QR 코드를 생성하고 스캔해야 하는기능을 구현해야 했었는데요. 먼저 QR 코드 생성을 위해서qrcode.react 라이브러리를 사용했습니다.사용방법 알아봅시다hyunki99.tistory.comQR 코드 생성은 이쪽입니다. 😀  저번 포스팅에서 QR 코드를 생성했으니,이번에는 QR 코드 스캔입니다. HTML5의 웹 표준 API인 getUserMedia를 사용하면사용자의 브라우저에서 카메라에 접근할 수 있습니다.이 영상 데이터를 통해서 QR 스캔 등 필요한 기능을 구현할 수 있습니다. 하지만 직접 구현하는 방법은 시간과 노력과 연구가 필요하기 때문..

프로젝트에서 주소를 복사하기 위해서QR 코드를 생성하고 스캔해야 하는기능을 구현해야 했었는데요. 먼저 QR 코드 생성을 위해서qrcode.react 라이브러리를 사용했습니다.사용방법 알아봅시다 😀 QR코드 스캔은 2탄으로 작성할게요📝 라이브러리 소개https://www.npmjs.com/package/qrcode.react qrcode.reactReact component to generate QR codes. Latest version: 4.1.0, last published: 7 days ago. Start using qrcode.react in your project by running `npm i qrcode.react`. There are 970 other projects in the npm..

// 에러 로그⨯ Internal error: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. digest: "3212179931"TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a ..

워크벤치는 기본적으로 Query Results Limit Rows가 설정되어 있습니다. 이 제한을 해제하는 방법을 짧게 알려드리겠습니다. 😀 📝 방법 ⦁ Settings 클릭 ⦁ Limit Rows 체크 해제 ⦁ 결과 확인 이상 미세한 팁이었습니다 ~ 참고 문헌 :

포스트맨이란? https://hyunki99.tistory.com/93 [API 테스트 툴] 포스트맨(Postman) 사용방법 정리 Postman은 API 개발 및 테스트를 위한 협업 도구입니다. 웹 개발할 때 유용하게 사용할 수 있습니다. 백엔드 코드 작성하고, 굳이 프론트에서 요청 코드 작성해서 테스트하지 않아도 되서 편리합니 hyunki99.tistory.com 토큰 인증이 필요한 API의 경우, 요청의 헤더에 토큰을 전달해야 합니다. 포스트맨의 Global Variable(전역 변수) 기능을 사용해서 간편하게 적용할 수 있는 방법을 소개하겠습니다. 😎 📝 포스트맨 설정 ⦁ 환경 설정 ✔ 환경을 추가한 후 Variable에 Bearer [토큰 값]을 추가합니다. ✔ 주의) 해당 환경이 선택되어 있어..

Zustand는 독일어로 '상태'라는 뜻으로 React 생태계에서 사용하는 상태 관리 라이브러리입니다. 현재 Redux가 압도적으로 많이 사용되고 있지만, 문법이 더러운 편이라 학습에 시간이 필요합니다. Post Redux로서 사용자가 빠르게 늘고 있는 힙한 곰돌이 친구 Zustand에 대해서 알아봅시다. 😎 📝 사용하는 이유 ⦁ React에서 데이터는 단방향 기본적으로 React의 데이터 흐름은 State & Props를 사용해 단방향으로 이루어져야 한다는 원칙이 있습니다. 이러한 데이터 흐름은 단순하고 예측 가능하며, 컴포넌트 간의 관계를 명확히 정의하기 때문에 유지 보수성을 향상시킵니다. ⦁ 음.. 컴포넌트가 너무 많으면? 하지만 데이터를 전달하는 과정에서 거쳐야 하는 컴포넌트가 너무 많은 상황이라..