react

React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기

서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수에 전달할 변수들을 전달해야 합니다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있으며 이더리움 노드들은 JSON-RPC로만 소통할 수 있는데 web3.js는 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있게 해주는 라이브러리입니다. web3-react란? react 앱에서 Context를 이용해 web3의 Dapp과 관련된 특정 주요 데이터(사용자의 현재 계정, chain id, web3 provider 등)를 최신상태로 유지해..

React | 모바일, 데스크톱기기 구분하여 url 리다이렉트 시키기

이슈 도메인을 PC용, 모바일용으로 분리하면서 모바일 기기에서 PC 도메인으로 접속 시에 css가 깨져 보이고, pc버전과 같은 api를 쓰기 때문에 리다이렉트 하는 주소를 맞춰주어야 하는 이슈가 생기면서 모바일 기기로 PC url을 접속하면 모바일 url로 리다이렉트를 시켜야 하는 필요성이 있었습니다. 고정 메인 도메인으로만 이동하는 것이 아닌, path와 query도 동일하게 변경되어야 했습니다. 목적 모바일 기기에서 PC 도메인에 접속 시, 모바일 도메인으로 변경하기. (PC 프로젝트에서 작업) https://domain.com/search?login=success ⬇️ https://m.domain.com/search?login=success 방법 src> index.tsx 에서 useAgent를..

React | 간단하게 public 경로의 파일 (소개서, 템플릿) 다운로드

1. public 경로에 파일 넣기 2. a태그 추가 회사소개 💡 로컬에서는 잘 나오는데 배포시 다운로드 파일이 열리지 않을 때, 다운로드 파일의 용량이 1KB로 나올 때 = aws로 배포되는 프로젝트라면 아마존 세팅값을 확인해보아야 합니다.

React | 페이스북 픽셀 연결하기 (React Facebook Pixel)

✋🏻잠깐! 들어가기 전에 React-pixel 라이브러리를 사용하여 구현하였습니다. 광고를 통해 들어온 사람들만의 행동을 따로 측정할 수 있도록 하였습니다. 픽셀의 고급 매칭 기능은 자세히 다루지 않습니다. 앞 부분은 설명입니다. 바로 구현하길 원하시는 분은 React Facebook Pixel - 실제사용법 부터 봐주세요 페이스북 픽셀이란? 페이스북 픽셀은 잠재 고객이 광고를 클릭한 이후에 웹사이트에 도착해서 어떤 특정 행동을 하는지 알려 줍니다. 페이스북 픽셀을 사용함으로써 이 타겟을 기반으로 광고 효율을 높일 수 있습니다. 픽셀로 사용자들의 어떤 행동들을 확인할 수 있을까요? 전반적으로 페이지를 보거나, 상품을 구매하거나 문서를 등록하는 행동들을 통계로 확인할 수 있게됩니다. 버튼을 클릭하는 것으로..

React SEO | Sitemap과 robots.txt 생성하기

사이트맵이란? 사이트 맵(Sitemap.xml) 파일 형식 프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이 글은 react-router-sitemap 등의 사이트맵 라이브러리를 사용하지 않고 사이트 맵을 생성합니다. Why? react sitemap 를 검색했을 때 나오는 글들을 참고하여 구현하려다가 오랜시간을 들여 시도해도 sitemap.xml 이 생성되지 않아 직접 javascript로 구현하였습니다.🤦🏻‍♀️ 사이트맵이란? 💡 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야 할 URL을 전달하는 역할 사이트 맵 파일은 해당 사이트의 URL 모두를 XML 파일 형식으로 포함하는데 웹 사이트 운영자는 각 URL과 추가 정보로서 이 ..

React | \n으로 받은 string data를 <br/> 처리하여 줄바꿈하기

string 형식의 데이터를 JSX문법으로 렌더링 할 때 제목, 날짜 등 한 줄짜리 string은 문제없이 출력이 된다. 그렇지만 본문의 내용이든지, 채팅할 때 줄 바꿈 처리는 어떻게 렌더링 해야 할까? JSX문법은 \n 을 줄바꿈으로 읽지 않고 string 형식으로 그대로 출력을 한다. 불러오는 데이터 자체가 문자열이니 \n 을 줄바꿈의 표시라고 읽는것도 말이 안되는 것 같기도 ... 🧐 🍋 받아오는 데이터 형식 react에서는 수많은 데이터의 양으로 반복되는 부분을 줄이기 위해 데이터 파일을 따로 만들어 map을 사용하여 불필요한 코드를 줄여준다. [ { id: 1, title: '첫번째 글', date: '2022-01-01', main: '새해입니다!\n모두모두 건강하세요.', }, { id: 2..

React 초기 세팅, CRA 세팅하기 (Router v6 / styled-component)

node, npm 설치 CRA(Create-React-App) CRA Setting 라이브러리 설치 프로젝트 파일 , 폴더 수정 및 삭제 ESLint + Prettier node, npm 설치 node.js를 설치하면 npm도 함께 설치된다. 설치가 잘 되었는지 확인하려면 터미널을 실행시켜 node-v / npm-v 를 입력후 버전을 확인해준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org CRA(Create-React-App) 💡 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 (toolchain) 리액트는 UI 기능만 제공한..

React | API Data (json) 중복 map 사용 하기

1주차에 보라님이 상수 데이터로 구현했던 nav 바의 카테고리 목록을 2주차에는 백엔드에서 주는 API 데이터로 교체해야하는 상황이 오게 되었다. 보라님의 코드에서 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하는것이 목표이다. 구현 기능 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하기 ⭐Key Point API 데이터 분석 map 메소드 이중으로 사용하여 카테고리 이름 표시 개별 링크 연결 Output Code 🥕 API Data ${BASE_URL}/categories 더보기 { "results": [ { "category_id": 1, "category_name": "샤워", "sub_categor..

React | 상수 데이터 / mock data

상수 데이터 mock data 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다. 상수데이터는 반복되는 UI를 상수 데이터 + Array.map( ) 함수의 조합을 이용해서 간결하게 표현할 수 있어 유지보수가 용이합니다. 상수 데이터의 활용 - 댓글 예제 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있습니다. 상수 데이터 변수는 대문자 + snake case 를 이용해서 변수의 이름을 짓는 컨벤션이 있습니다. 별도의 JS파일로 분리할 경우 export / import를 통해서 필요한 파일에서 사용합니다. JS파일은 데이터를 impor..

React | State & Props & Event

Props Props & event State Event & setState Props props는 컴포넌트의 속성값으로 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다. 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다. Props 객체 //Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Parent Component ); } } exp..

React | Component 와 생명주기

Component란 Class vs Functional Component 컴포넌트 생명주기 Component Lifecycle Component란 component란 재활용 가능한 UI 구성단위를 뜻합니다. 컴포넌트를 사용하면 반복되는 코드가 길어지는 것을 방지해주기 때문에 코드 유지보수에 좋고 해당 페이지가 어떻게 구성되어있는지 한눈에 파악하기가 좋습니다. 또한 컴포넌트는 또 다른 컴포넌트를 포함할 수 있습니다 (부모 컴포넌트 - 자식 컴포넌트) Class vs Functional Component 컴포넌트를 선언하는 방식에는 크게 class형 컴포넌트와 함수형 컴포넌트가 있습니다. Class Component import React from 'react' class Component extends R..

React | JSX 문법의 특징

JSX JSX 문법의 특징 및 준수사항 JSX const element = Hello, world!; 리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다. JSX 문법의 특징 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 합니다. 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다. import React from 'react'; function App(){ return( header1 header2 ) } 2...