IT 공부

오늘은 React를 이용하여 MetaMask와 연동해 볼 것이다. 먼저 아래 명령어로 CRA(create-react-app)을 생성하고 web3를 설치한다. $ npx create-react-app project-name $ npm i web3 src 디렉토리 내에 있는 App.js를 아래와 같이 수정한다. /* App.js */ import './App.css'; import useWeb3 from './hooks/useWeb3'; import { useEffect, useState } from 'react'; function App() { const [account, web3] = useWeb3(); const [isLogin, setIsLogin] = useState(false); const [ba..

1. CRA(create-react-app) 2. CRA 커스터마이징 방법 2.1. eject 2.2. create-app-rewired, customize-cra 1. CRA(create-react-app) CRA(create-react-app)는 리액트 프로젝트를 처음 실행할 때 필요한 여러가지 라이브러리나 웹팩의 설정 없이 간편하게 프로젝트를 시작할 수 있게 해준다. CRA 장점 단 하나의 one build dependency를 가지게 되므로 리액트 프로젝트를 구성할 때 필요한 Webpack, Babel, ESLint 등 간의 연결에 대해서 신경쓰지 않아도 된다. Webpack, Babel, ESLint는 처음 프로젝트를 구성할 때 반드시 설정이 필요한 패키지인데, CRA는 프로젝트에 필요한 필수적..

1. Redux Middleware 2. redux-thunk 3. redux-saga 1. Redux Middleware middleware는 소프트웨어 각 분야에서 세부적으로 다르게 뜻한다. 위키백과에서는 OS와 소프트웨어 중간에서 조정과 중개 역할을 하는 중간 소프트웨어라고 지칭한다. 소프트웨어 분야에서는 같은 이름을 가지고 있지만 다른 것을 의미하는 것들이 많아서 유의해야 한다. Redux의 동작 순서는 action이 dispatch된 후 reducer를 호출하여 기존에 있던 state를 dispatch한 action으로 바꾼다. 이때 reducer가 호출되어 state를 바꾸기 전에 동작하는 것이 middleware이다. 보통 Redux에서 middleware를 사용하는 주된 이유는 비동기 작업..

1. React Router 개념 2. React Router 사용방법 1. React Router 개념 우리가 흔히 말하는 '페이지 이동'이라는 기능을 React에서는 React Router를 통해 처리할 수 있다. 라우팅을 간단하게 설명하면, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. React에서는 Routing 관련 라이브러리가 많이 있는데, 그 중 가장 많이 쓰이는 것은 React Router이다. React는 SPA(Single Page Application) 방식이다. 기존의 웹 페이지(MPA 방식)처럼 여러 개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. 새로운 페이지를 로드하지 않고, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가..

1. Redux 개념 2. Redux에서 사용되는 키워드 3. Redux의 3가지 원칙 4. Redux 사용 방법 5. Redux 보완점 1. Redux 개념 Redux는 JavaScript app을 위한 state container이다. React 뿐만 아니라 Angular, jQuery, vanilla JavaScript 등 다양한 framework와 작동되도록 설계되었다. 즉, React만을 위한 Library는 아니다. Redux는 React의 좋은 보완재라고 할 수 있다. 그 이유는 action에 반응하여 상태를 변경하므로 React와 같이 UI를 상태에 대한 함수로 기술하는 framework와 특히 잘 어울리기 때문이다. Q. React에 Redux가 필요한 이유는 무엇일까? React로 프로..

1. useReducer 2. useMemo 3. useCallback 1. useReducer import React, {useReducer} from 'react'; const reducer = (state, action) => { switch(action.type) { case 'CHANGE_ID': return{ ...state, user:{ ...state.user, userid:'jenny2' } } case 'CHANGE_NAME': return{ ...state, user:{ ...state.user, username: action.payload } } case 'ADD_LIST': return{ ...state, notice:[ ...state.notice, {idx:1, subject:..

1. Hook 개요 2. State Hook 사용하기 3. Effect Hook 사용하기 4. Context Hook 사용하기 1. Hook 개요 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle)을 "연동(hook into)"할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않는다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. (Hook은 React 16.8에 새로 추가된 기능이다.) Hook은 일반적인 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다. 최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행할..

오늘은 React로 댓글 CRUD 기능을 구현해 보고자 한다. DB는 따로 연결하지 않고 임시 데이터를 이용하였다. 첫 번째 댓글은 원래 있던 댓글을 불러 온 것이고, 두 번째와 세 번째 댓글은 새로 작성한 것이다. 'X' 버튼을 클릭하면 삭제되고, 댓글의 내용을 클릭하면 수정할 수 있게 바뀐다. 전체 컴포넌트의 구성은 App 컴포넌트 하위에 Comment 컴포넌트가 있고, Comment 컴포넌트 하위에 CommentForm과 CommentList 컴포넌트들이 있다. CommentForm은 입력하는 공간이고, CommentList는 작성한 댓글이 나타나는 공간이다. 이제 세부적인 코드를 살펴보고자 한다. 아래는 App.jsx 파일의 코드이다. import React, {Component} from 're..

1. CSR (Client Side Rendering) 2. SSR (Server Side Rendering) React를 공부하다가 CSR과 SSR이라는 용어를 접하게 되었다. CSR은 Client Side Rendering의 약자이고, SSR은 Server Side Rendering의 약자라는 것에서 눈치를 챘겠지만, 둘의 차이는 페이지의 렌더를 누가 하느냐에 있다. 1. CSR (Client Side Rendering) CSR은 아래와 같은 과정을 거쳐 페이지를 렌더링한다. 서버에서 브라우저에게 response 한다. 브라우저는 JS를 다운받는다. React를 실행시킨다. 페이지가 나오면서 동시에 interact (ex. 클릭)를 할 수 있다. 2. SSR (Server Side Rendering)..

1. css 파일을 import하기 2. css.module 만들기 3. styled-components 패키지 사용 React에서 css를 적용시키는 3가지 방법을 소개해 보려고 한다. 1. css 파일을 import하기 import React, {Component} from 'react'; import './assets/a.css'; import './assets/b.css'; class App extends Component{ state = { value:'hello world~~123' }; render() { return( {this.state.value} ) } }; export default App; App 컴포넌트의 state의 value 값이 'hello world~~123'이라고 되어 ..

1. 구구단 게임 소개 2. 구구단 게임 구현 1. 구구단 게임 소개 위의 그림처럼 태그 안에 숫자를 입력하고 submit 버튼을 클릭하면 해당 숫자에 대한 구구단이 출력되도록 React로 구현해보고자 한다. 2. 구구단 게임 구현 import React, {Component} from 'react'; import GuguForm from './GuguForm'; import GuguList from './GuguList'; class GuguClass extends Component{ state = { value:null }; handleSubmit = e => { e.preventDefault(); this.setState({ ...this.state, value:parseInt(e.target.gu..

1. webpack 소개 2. webpack 사용 환경 구축 3. webpack.config.js 파일 구성 1. webpack 소개 자바스크립트(JS) 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 하지만, 여러 개의 파일로 나누어서 브라우저에 렌더링한다면 그만큼 네트워크 비용이 생긴다는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데, 잘못 작성할 경우 변수 충돌의 위험성도 존재한다. 웹팩(webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 그리고 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정..