[JavaScript] React.js를 이용하여 QR Code 생성하기

React.js를 이용하여 QR Code 생성하기

 

 

 

 

-

회사에서 JS, React 관련 과제가 주어졌다.

아직 맨땅에 헤딩이지만, 좋은 레퍼런스가 많아서 무사히 완료(?)

온라인 스터디에서 배운 내용과 연관성이 있어서 정리할 겸 기록

각 작업순서와 관련된 상세 포스팅을 따로 게시할 예정이다.

 

진행된 작업순서: NodeJS > React > Babel > Webpack > Material-ui > qrcode

 

 

 

 

NodeJs

• 브라우저 외부에서 JS를 실행 할 수 있는 환경 (=런타임 환경)

$ npm init -y

 

React

• 가상돔을 이용하여 돔의 변화 처리 → 실제돔에 변화를 일으키지 않고 변화를 가상돔에 기록한 후 그리는 방식
• Create React App은 새 React 싱글 페이지 어플리케이션을 만들기에 적합
• React를 사용할 때는 생산성을 높이기 위해, 모던 빌드 파이프라인을 함께 구성하는 것이 좋음
  (패키지 매니저: yarn, npm / 번들러: webpack, browserify / 컴파일러: babel)
• 자바스크립트 코드에서 ES6, JSX 사용 권장

$ npx-create-react-app 앱 이름

현재 디렉토리 아래에 '앱 이름' 폴더가 생기고, 필요한 라이브러리가 준비됨

 

Babel

• JavaScript 코드를 변환하는 역할 ex) ES6 이상의 문법을 ES5 아래의 문법으로 변경
  → 버전이 낮은 브라우저에서 js가 작동하도록 함
• 필요한 모듈
  → babel/core : 바벨이 동작하기 위해 필요한 핵심 모듈
  → preset : 규칙을 담고 있는 상자

$ npm i -D @babel/core @babel/preset-env

 

Webpack

• JS 파일들을 묶거나 압축하는 등의 일을 할 수 있게 도와줌
• 필요한 모듈
  → babel-loader : webpack은 javascript 파일 단위를 다루는 모듈 번들러.
  코드를 읽고 변환하는 역할은 babel이 담당 할 수 있도록, babel-loader 함께 사용
  → webpack-cli : 커맨드 라인에서 webpack 명령어를 사용 할 수 있게 도와줌
  → webpack-dev-server : 개발 환경을 편하게 만들어주는 개발 서버

$ npm i -D webpack webpack-cli webpack-dev-server babel-loader

 

Material-ui

• React UI Framework / 다양한 기본 아이콘 제공
• 사용법 → 사용하고자 하는 항목 import! → 사용! → (응용)styles 이용, 각 component 커스터마이징!
• 공식 홈페이지에 모든 component 예제가 코드와 함께 제공

$ npm install @material-ui/core

(응용)커스터마이징 → Material-ui에서 제공하는 Template에서 사용하는 방법
(해당 작업에서는 Card 컴포넌트 사용)

import React from "react";
import { Container, makeStyles, Button } from "@material-ui/core/styles"; // styles 기능 추가
import QRCode from 'qrcode'

function App() { 
	const classes = useStyles() // 변수에 styles 할당 

	return ( 
    	<Container> 
    		<Button className={classes.btn} variant="contained" color="primary">Generate</Button> 
    	</Container> 
    )
}

const useStyles = makeStyles(theme => ({ // style 요소 선언 
	container: { 
    	marginTop: 10 
    }, 
    btn: { 
    	marginTop: 10, 
        marginBottom: 20, 
        marginLeft: 10 
    } 
 })); 
 
 export default App;

 

QRCode

$ npm install qrcode.react

 

실행 화면

$ npm start

 

참고
: https://www.youtube.com/watch?v=7Ntot5ClGIY&t=1228s

: https://velog.io/@sunkim01/React-Material-UI-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0