요즘 멋있는 웹에는 위와 같은 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..

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

React 프로젝트를 생성하면 기본적으로 Padding, Margin 등 CSS가 적용되어 있습니다. 또한, 브라우저마다 태그를 렌더링 하는 기본 스타일이 다릅니다. 따라서 원하는 디자인을 구현하기 위해 기본적인 CSS를 초기화 시켜주는 작업이 필요합니다. 😀 📝CSS 초기화 방법 https://meyerweb.com/eric/tools/css/reset/index.html CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and ..

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 뜻합니다. 주로 React, Vue, Angular 등의 프론트엔드 프레임워크에서 사용되고, 각각 조건부 렌더링을 처리하는 특별한 문법이 제공됩니다. 그렇다면 어째서 조건부 렌더링이라는 개념이 등장하게 되었고, 왜 필요한 건지 알아봅시다. 😎 📝조건부 렌더링 사용방법 ⦁ 웹 개발 초기 환영합니다! 사실 조건부 렌더링은 초기 웹 개발부터 존재한 개념입니다. React와 같은 프론트엔드 라이브러리의 등장 이후 점점 더 많이 사용되기 시작한 개념이지만, 웹 개발에서 조건부 렌더링을 사용하는 것은 이전부터 일반적인 방법 중 하나였습니다. 당시에는 동적인 UI를 구현하기 위해 JavaScript와 HTML을 활용했습니다. ⦁ 프론트엔드 프레임워크..

2012년 마이크로소프트가 발표한 타입스크립트는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. Stack Overflow에서 개발자가 가장 좋아하고 관심을 가지는 프로그래밍 언어 2위로 선정되었습니다. 또한, 개발자 채용공고를 보면 우대사항에 타입스크립트가 거의 항상 기재되어 있습니다. 이젠 거의 필수 교양이 되어버린 타입스크립트에 대해서 알아봅시다. 📝 타입스크립트의 특징 ⦁ 컴파일 언어, 정적 타입 언어 자바스크립트(JS)는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견합니다. 하지만 타입스크립트(TS)는 컴파일 언어입니다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 JS코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을..

State는 부모 → 자식으로 밖에 값을 전달하지 못한다고 배웠습니다. 하지만 컴포넌트를 분리했을 때 자식 컴포넌트에서 연산한 데이터를 부모에서 사용하고 싶은 경우가 있습니다. Redux 등 전역 상태관리 라이브러리를 사용하지 않고도 할 수 있는 방법을 찾았습니다.😀 함수를 전달하면 됩니다. 👍 📝 자식 컴포넌트 → 부모 컴포넌트 ⦁ 📑 부모 컴포넌트 //전달 함수 const [audio, setAudio] = useState({}) const getAudio = (x) => { setAudio(x) } //return 문 ... //state 넘기듯이 함수도 넘길 수 있습니다. ✔ 자식 컴포넌트에 전달할 함수를 선언합니다. 해당 함수를 자식에서 사용하면 결과적으로는 부모 컴포넌트의 State가 변경되어..