[React] 리액트 QR 코드 생성하기 (qrcode.react)
·
Front-End/React
프로젝트에서 주소를 복사하기 위해서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..
[Next.js] TypeError: jsxDEV is not a function 해결 방법 (캐시 에러)
·
Front-End/Next
// 에러 로그⨯ 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 ..
[MySQL] Workbench 데이터 1000개 제한 해제 방법
·
DB/MySQL
워크벤치는 기본적으로 Query Results Limit Rows가 설정되어 있습니다. 이 제한을 해제하는 방법을 짧게 알려드리겠습니다. 😀 📝 방법 ⦁ Settings 클릭 ⦁ Limit Rows 체크 해제 ⦁ 결과 확인 이상 미세한 팁이었습니다 ~ 참고 문헌 :
[API 테스트 툴] 포스트맨(Postman) 인증 토큰 설정하기
·
etc
포스트맨이란? https://hyunki99.tistory.com/93 [API 테스트 툴] 포스트맨(Postman) 사용방법 정리 Postman은 API 개발 및 테스트를 위한 협업 도구입니다. 웹 개발할 때 유용하게 사용할 수 있습니다. 백엔드 코드 작성하고, 굳이 프론트에서 요청 코드 작성해서 테스트하지 않아도 되서 편리합니 hyunki99.tistory.com 토큰 인증이 필요한 API의 경우, 요청의 헤더에 토큰을 전달해야 합니다. 포스트맨의 Global Variable(전역 변수) 기능을 사용해서 간편하게 적용할 수 있는 방법을 소개하겠습니다. 😎 📝 포스트맨 설정 ⦁ 환경 설정 ✔ 환경을 추가한 후 Variable에 Bearer [토큰 값]을 추가합니다. ✔ 주의) 해당 환경이 선택되어 있어..
[React] Zustand란? 사용하는 이유! (상태 관리 라이브러리, 사용 방법 예시)
·
Front-End/React
Zustand는 독일어로 '상태'라는 뜻으로 React 생태계에서 사용하는 상태 관리 라이브러리입니다. 현재 Redux가 압도적으로 많이 사용되고 있지만, 문법이 더러운 편이라 학습에 시간이 필요합니다. Post Redux로서 사용자가 빠르게 늘고 있는 힙한 곰돌이 친구 Zustand에 대해서 알아봅시다. 😎 📝 사용하는 이유 ⦁ React에서 데이터는 단방향 기본적으로 React의 데이터 흐름은 State & Props를 사용해 단방향으로 이루어져야 한다는 원칙이 있습니다. 이러한 데이터 흐름은 단순하고 예측 가능하며, 컴포넌트 간의 관계를 명확히 정의하기 때문에 유지 보수성을 향상시킵니다. ⦁ 음.. 컴포넌트가 너무 많으면? 하지만 데이터를 전달하는 과정에서 거쳐야 하는 컴포넌트가 너무 많은 상황이라..
[React Native] react-native-vector-icons 아이콘 깨짐 현상 해결방법 (엑박)
·
Front-End/React Native
react-native-voctor-icons를 설치했는데, 아이콘이 깨지는 현상이 발생했습니다. 해결 방법 알아봅시다. 😀 📝 해결 방법 https://github.com/oblador/react-native-vector-icons#android GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: C..
[네트워크] 브라우저 주소창에 URL을 입력 시 일어나는 일 정리 (DNS)
·
CS 지식
📌 웹 브라우저 주소창에 www.google.co.kr 을 입력하면 어떤 일이 일어나나요? 개발 직무 면접 시 자주 등장하는 질문입니다. 이는 웹 사이트가 사용자에게 보이기까지의 네트워크 과정을 알고 있는지 확인하는 질문입니다. 이 과정에서 웹 브라우저, PC의 운영 체제, 인터넷 서비스 제공업체, 웹 사이트를 호스팅 하는 서버, 해당 서버에서 실행되는 서비스에 대한 지식 등이 약간씩 필요합니다. 이 지식을 통해 웹 사이트 성능 문제의 위치를 파악하고 사용자에게 안전한 경험을 제공하고 있는지 확인하는 것이 중요합니다. 😎 📝요약 미리보기 1. 웹 브라우저에 URL을 입력하고 Enter 키를 누릅니다. 2. 웹 브라우저가 도메인의 IP 주소를 조회합니다. (먼저 캐시를 찾고, 그다음 DNS를 검색합니다.)..
[ChatGPT] 챗지피티 API란? 사용방법 정리
·
etc
ChatGPT는 Open AI가 만든 딥러닝 프로그램으로 대화형 인공지능 챗봇입니다. Open AI는 2023년 3월에 ChatGPT API라는 새로운 서비스를 출시했습니다. 이 서비스를 사용하면 챗GPT를 나의 앱이나 제품에 쉽게 통합할 수 있습니다. 다만, API 사용은 유료이며 대화에 사용된 토큰의 크기에 따라 과금됩니다. 어떻게 사용하는 건지 함께 알아봅시다.😀 📝API Key 얻기 https://platform.openai.com/overview OpenAI Platform Explore developer resources, tutorials, API docs, and dynamic examples to get the most out of OpenAI's platform. platform.ope..