리엑트 패키지 소개 - classnames
이번에 소개할 리엑트 패키지는 classnames. 에러가 있을 때만 input box 색을 변경하는 경우처럼, 조건에 따라 css class를 추가/삭제 하고 싶을 때 아래 처럼 쓰는 경우가 있을거야.
Tips
backgroundImage: `url(${Background})` https://stackoverflow.com/questions/49305787/how-could-i-pass-two-props-from-jsx-to-scss styled-component 이미지 미리보기 URL.createObjectURL(event.target.files[0]) medium
Axios
axios.post('http://127.0.0.1:8000/accounts/', {'protocol':'ETH', 'token': 'ETH', 'type': 0, 'balance': 0}, {withCredentials: true, auth: {username: 'admin@gmail.com', password: '1 23123123'}}).then(function(res){console.log(res)}).catch(function(ex){console.log(ex.respo nse.data)});
Javascript에서 constants 관리하기
/components/users/constants.js const userStatesActive = 0; const userStatesInActive = 1; const userStatesLabels = { [userStatesActive]: "active user", [userStatesActive]: "active user" }; export default { userStatesActive, userStatesInActive, userStatesLabels }; /components/users/userStates.jsx import {userStatesLabels} from './constants' ... render{ const {state} = this.props; return ( <span>{userStatesLabels[state]}</span> ) };
React + ESLint + VSCode
VSCode eslint 설치 command + shift + p Install Extensions Search ‘ESLint’ Click Install 저장시 eslint 자동 고침 설정 command + , Search ‘ESLint’ Turn on auto fix on save eslint-config-airbnb 적용 // Package 확인 npm info "eslint-config-airbnb@latest" peerDependencies // with CRA v2.0 npm install eslint-config-airbnb --save // without CRA npx install-peerdeps --dev eslint-config-airbnb eslint-config-prettier 적용 npm install eslint-config-prettier --save .eslintrc extends: [ prettier ] eslint config .eslintrc 파일 생성 module.exports = { env: {...