Jay

아래 문구를 리액트 반복문으로 써보자. 사과 - 맛있다 바나나 - 맛있다 포도 - 맛있다 귤 - 맛있다 복숭아 - 맛있다 메론 - 맛있다 수박 - 맛있다 2차원 배열로 일단 만들어보자. {[['사과', '맛있다'], ['바나나', '맛있다'], ['포도', '맛있다'], ['귤', '맛있다'], ['복숭아', '맛있다'], ['메론', '맛있다'], ['수박', '맛있다'], ].map((v) => { return ( {v[0]} - {v[1]} ); })} {/* 사과 - 맛있다 바나나 - 맛있다 포도 - 맛있다 귤 - 맛있다 복숭아 - 맛있다 메론 - 맛있다 수박 - 맛있다 */} ); } } 객체로 하는거도 위 방법과 유사하다. {[ { fruit: '사과', taste: '맛있다'}, { frui..

require은 node의 모듈 시스템이다. const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root'); const NumberBaseball = require('./WordRelay'); const Hot = hot(NumberBaseball); ReactDom.render(, document.querySelector('#root')); 즉 파일에서 module.exports에 numberbaseball class를 넣어주면 그거를 다른 파일에서 require해서 불러올 수가 있다. class NumberBaseball { } 부분이 module.e..

기존 코드를 hooks로 전환 해보자. state와 ref 부분을 바꿔준다. // 기존 WordRelay.jsx const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word: '짜장면', value: '', result: '', }; onSubmitForm = (e) => { e.preventDefault(); if (this.state.word[this.state.word.length - 1] === this.state.value[0]) { this.setState({ result: '딩동댕', word: this.state.value, value: '', }); ..

핫 리로딩 하는 두 패키지를 설치해준다. npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 개발용 서버도 필요하니까 설치해준다. npm i -D webpack-dev-server 그리고 package.json파일에서 dev 부분을 webpack serve --env development로 바꿔준다. (기존 명령어는 webpack-dev-server --hot라고 쓰인다.) "scripts": { "dev": "webpack serve --env development" }, webpack.config.js에서 코드를 추가해준다. 플러그인이 장착이 되고 빌드할 때마다 plugin이 실행된다. babel loader에 plugin을 넣어준다. babel..

lecture폴더에 있는 WordRelay.jsx를 아래와 같이 틀을 잡아주고 시작한다. const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word: '제로초', value: '', result: '', }; render() { return ( {this.state.word} ); } } module.exports = WordRelay; // wordrelay.jsx const React = require('react'); const { Component } = React; class WordRelay extends Component { state = { word:..

webpack.config.js파일에 있는 presets에 설정을 적용하고 싶다 그러면 아래와 같이 배열로 해서 원하는 브라우저에만 맞춰서 해줄 수 있다. 크롬 버전이 70버전이라 치면언 69와 70버전만 호환이 되게 해준다. // webpack.config.js module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { target: { browsers: ['> 5% in KR', 'last 2 chrome versions'], }, debug: true, }], '@babel/preset-react', ], plugins: [], }, }], }, 아래와 같이 한국에서 ..

npm 명령어를 통해서 웹펙으로 빌드해준다. npm i react react-dom npm i -D webpack webpack-cli npm i -babel-loader @babel/core npm i -D @babel/preset-env npm i -D @babel/preset-react webpack.config.js 작성해준다. const path = require('path'); module.exports = { mode: 'development', devtool: 'eval', // hidden-source-map resolve: { extensions: ['.jsx', '.js'] }, entry: { app: './client', }, module: { rules: [{ test: /\.j..

터미널 창에서 그냥 webpack를 치면 아래 문구가 발생 webpack webpack : 'webpack' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십 시오. 위치 줄:1 문자:1 + webpack + ~~~~~~~ + CategoryInfo : ObjectNotFound: (webpack:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 그래서 명령어로 등록을 따로 해주어야 한다. 또는 package.json파일에 script에다가 적어주면 된다. "s..

(리액트 기본 설정 방법) npm init을 하면 package.json파일이 생성된다. npm init React 개발에 필요한 모든 패키지들을 package.json파일에 넣어준다. { "name": "lecture", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "jay", "license": "MIT" } 터미널에서 리액트와 리액트 돔이 필요 설치해준다. npm i react react-dom 리액트 개발할 때 필요한 웹펙을 설치 해준다.(- 주의, -D는 개발에서 밖에 안쓰인다는 의미이다.) n..

HTML에서 JS파일을 쓰는 방법은 간단하다. 아래와 같은 형식으로 작성한다. 리액트는 위에서 src가 되는 부분이다. 이 부분을 모르면 Webpack 할 때 문제가 생긴다.(React를 JS 파일로 만들어 주는 것) 즉 쪼개진 JS파일을 HTML이 실행할 수 있는 JS로 합쳐주는 역할이다. HTML에서 첫번째 리액트 컴포넌트를 만들어보자.(root에 리액트를 넣는 과정) 아래 참고 사이트에서 script 부분을 복사해오자. createElement는 html 태그를 만드는 것이라고 생각하자. 그리고 첫번째 컴포넌트를 만든다.(extends로 상속을 해온다.) 클래스는 기본적으로 constructor가 있다고 생각하자. 그리고 like 버튼을 화면에 어떻게 표시할 건지를 render 메소드를 통해서 결정..