기본 콘텐츠로 건너뛰기

React 사용법

# typescript로 된 react app 만들기

$ npx create-react-app my-app --template typescript

# typescript 용 react dom 설치

$ npm i --save react react-dom typescript

# typescript node 설치

$ npm i --save-dev @types/react @types/react-dom @types/node

# typescript tsconfig.json 설정

{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": "./src",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

# ESlint 설치

$ npm install -D eslint

$ npx eslint --init // react app / / 루트 디렉토리에서 실행

# airbnb 설정 설치

$ npm i -D eslint-config-airbnb-base # 리액트 관련 규칙 X

$ npm i -D eslint-config-airbnb # 리액트 관련 규칙 O

# eslint 설정 설치

$ npm i -D eslint-plugin-react eslint-plugin-react-hooks

$ npm i -D eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-prettier eslint-config-prettier

# eslint 설정 작성 .eslintrc.js // 루트 디렉토리에 작성

module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'prettier'],
extends: [
'airbnb', // or airbnb-base
'plugin:react/recommended',
'plugin:jsx-a11y/recommended', // 설치 한경우
'plugin:import/errors', // 설치한 경우
'plugin:import/warnings', // 설치한 경우
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
rules: {
'linebreak-style': 0,
'import/prefer-default-export': 0,
'import/extensions': 0,
'no-use-before-define': 0,
'import/no-unresolved': 0,
'react/react-in-jsx-scope': 0,
'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
'no-shadow': 0,
'react/prop-types': 0,
'react/jsx-filename-extension': [
2,
{ extensions: ['.js', '.jsx', '.ts', '.tsx'] },
],
'jsx-a11y/no-noninteractive-element-interactions': 0,
'@typescript-eslint/explicit-module-boundary-types': 0,
'prettier/prettier': [
'error',
{
useTabs: false,
},
],
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
};

# prettier 설치

$ npm install -D prettier

# prettierrc 설정 작성 .prettierrc  // 루트 디렉토리에 작성

{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "always",
"orderedImports": true,
"bracketSpacing": true,
"jsxBracketSameLine": false
}

# github pages에 올리기

$ npx install -save gh-pages

$ npx install -save @type/react

참고사이트 : https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

end

라벨:

이 블로그의 인기 게시물

Blogger

코드 하이라이트 사이트 http://hilite.me/ 코드 <!-- 나만의 공간 --> <style id='daru_css' type='text/css'> .code {      overflow: auto;      height: 200px;      background-color: rgb(239,239,239);      border-radius: 10px;      padding: 5px 10px; } .code::-webkit-scrollbar-thumb {      background-color: grey;      border: 1px solid transparent;      border-radius: 10px;      background-clip: padding-box;   } .code::-webkit-scrollbar {      width: 15px; } </style> <!-- 나만의 공간 -->
더보기

Python 인공신경망 추천 시스템(회귀)

예제 # 인공신경망을 이용한 추천 시스템 # - 순차형(Sequential) 신경망 생성법 # - 함수형(Functional) 신경망 생성법 # - 지금까지 나온 추천 방식 중에서 가장 좋은 성능 # - Regression 방식으로 분석가능 # - 영화의 평점 정보(userid, movieid, rating) # - 이용자는 영화에 대한 취향이 모두 다르다 # - 영화는 다양한 장르가 혼합되어 있다 # - 이용자는 자신의 취향에 맞는 영화에 높은 rating을 제시함 # - 어떤 이용자에게 어떤 장르의 영화를 추천할 것인가? # __call__() 함수를 가진 클래스는 파이썬 함수 callable(클래스)를 사용하면 True를 반환한다 from tensorflow.keras.models import Sequential, Model from tensorflow.keras.layers import Dense, Embedding, Input input = Input(shape=(1,)) # 함수형 신경망 생성법 hidden1 = Dense(2, activation='relu')(input) # Dense(2, activation='relu')__call__() hidden2 = Dense(2, activation='relu')(hidden1) # callable.object callable(Dense) # __call__ 함수가 있으면 True, 없으면 False # Using Functional API from keras.models import Sequential from keras.layers import * model = Sequential() model.add(Input(shape=(3,))) # Input tensor model.add(Dense(4)) # hidden layer 1 model.add(Dense(units=4)) # hidden layer 2 model.add(Dense(units=1)) # ou...
더보기

Python Sklearn make_blobs

from sklearn.datasets import make_blobs 예제 X, y = make_blobs(n_samples=500, centers=3, n_features=2, random_state=0) # 500개의 점을 3개로 모이게 한다, 변수는 2개, 무작위 상태는 0 X.shape, y.shape # ((500, 2), (500,)) plt.scatter(X[:,0],X[:,1],c=y,s=5) plt.show() # 학습 데이터 나누기 from sklearn.model_selection import train_test_split x_train, x_test, y_train, y_test = train_test_split(X, y, test_size=.25, random_state=0) x_train.shape, x_test.shape, y_train.shape, y_test.shape # ((375, 2), (125, 2), (375,), (125,)) # 지도 학습 하기 from sklearn.linear_model import LogisticRegression logisticReg = LogisticRegression(max_iter=5000) # 기본 반복 100 logisticReg.fit(x_train, y_train) # 추정하기 pred = logisticReg.predict(X) # 결정계수 logisticReg.score(x_test, y_test) # 0.92 # 한글 깨짐 없이 나오게 설정 from matplotlib import rcParams # 인코딩 폰트 설정 rcParams['font.family'] = 'New Gulim' rcParams['font.size'] = 10 # 산점도 plt.figure(figsize=(10,4)) plt.subplot(1,2, 1) plt.scatter(X[:,0],X[:,1],c=y) plt.title('정답') plt.su...
더보기