패스트코드블로그

연습을 위한 템플릿만 제공합니다. 이 내용은 JSX 가 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 {loading === false && handleInput(e)} /> {resultAvailable === true && "Search Results"} {selected === true && "Selected Airport"} {selected === true && setSelected(true)}> {airport.city} {airport.iata} {airport.airport} } {selected === false ..

React class Test extends Comp{ render( return ) } FC const Test = () => { return () } Redux {action, creator, store} Action {type: "..."} Action creator arrow 함수 1. 유명: export const test = (data) => { return {type: '', data} } 2. 무명: 콜백 (()=>{}) Props @자바: get, set @자바스크립트: 프로퍼티: get, 스테이트: set 데이터 변환 방법 위로 바뀌는것 : 이벤트 버블링 (콜백) 밑으로 전달 : ( { ... } ) connect: mapStateToProps mapDispatchToProps stor..

http://www.yes24.com/Product/Goods/78233628?scode=032&OzSrank=1 리액트를 다루는 기술 리액트 베스트셀러 1위, 본문과 소스 전면 업그레이드기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방법까지 알차게 배우자『리액트를 다루는 기술』(개정판)은 리액트 16.8 버전에 Hooks라� www.yes24.com 해당 책의 17번 예제를 부분 편집하여 정리한 카운터 코드입니다. 결과물: CounterComponent.jsx 1 2 3 4 5 6 7 8 9 10 11 12 import React from "react"; const CounterComponent = ({number, onIncrease, onDecrease}) => { return ( 숫자: {num..

기본 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , document.getElementById('root') ); serviceWorker.unregister(); cs 덕(Duck) 패턴 리덕스-썽크(redux-thunk) 설정된 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import React fr..

https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/ Scaling your Redux App with ducks How does your front-end application scale? How do you make sure that the code you’re writing is maintainable 6 months from now? Redux [http://redux.js.org/] took the world of front-end development by storm in 2015 and established itself as a standard — www.freecodecamp.org

Command line is too long. Shorten command line for .... 다음 블로그를 참조하여 해결했습니다. https://carfediem-is.tistory.com/29 intelliJ IDEA - 톰캣 러닝 오류. Command line is too long. Shorten..... 이건 번외인데... build.gradle 에 tika-parser 적용후에 intelliJ에서 톰캣 띄울때 계속 오류가 나서 오류내용 Error running 'Application': Command line is too long. Shorten command line for Application o.. carfediem-is.tistory.com 인텔리제이 내부에서 아래 경로로 가서 을 ..

웹스톰에서 리액트 앱 with 타입스크립트 로 프로젝트를 생성합니다. package.json 파일에 디펜던시 추가합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 { "name": "chatbot", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 import * as React from 'react'; //https://react-etc.vlpt.us/06.typescript-basic.html interface CounterProps { startNumber: number; } interface CounterState { number: number; } class Counter extends React.Component { public state = { number: 0, } constructor(props: CounterProps) { super(props); t..

Ctrl + Alt + S 단축키로 설정으로 갑니다. 언어와 프레임워크를 클릭하면 프로젝트를 구성하는 프레임워크와 테크놀로지를 볼 수 있습니다. npm i react-router-dom @types/react-router-dom 우측하단 업데이트 실행합니다. 다소 시간이 걸립니다(약 5분내외). 다 완성되면 아래와 같은 화면으로 마무리 됩니다. 추가 작업을 하지 않았는데 아래와 같은 에러가 발생합니다. tsconfig.json 을 열어서 "target" : "es6" 로 고칩니다 "noImplicitAny": false 을 추가합니다. "module": "CommonJS" 로 수정합니다. 이제 입문용 코드를 작성해봅니다. 아래와 같이 구성합니다. 1) --require ts-node/register No..

eGovFrame3.6 버전 스프링 4.1.2에서 jackson(json) 사용 시 에러가 납니다. 답변 1234567891011121314151617181920212223242526272829303132333435363738spring 4.1.x 이상부터 deprecated되어서 data bind로 변경이 필요합니다.버전 업그레이드에 따른 dependency 이슈 문제 입니다. 1)- BEFORE org.codehaus.jackson jackson-core-asl 1.9.13 org.codehaus.jackson jackson-mapper-asl 1.9.13 -AFTER com.fasterxml.jackson.core jackson-core 2.4.3 com.fasterxml.jackson.core j..