-
react router에서 url을 통해 parameter를 받기(react-router-dom, v4)
먼저, react-router에서 // route.js <Router> <div> <Switch> <Route path="/" component={App}/> </Switch> </div> </Router> 다음과 같이 routing을 하게 되면 App이라는 Component가 나오게 된다. 그런데 App Component에서 url의 정보를 가져오고 싶으면 어떻게 해야하는지 살펴보자. 라우팅을 하는 곳에서는, 다음과 같이 정보를 준다고 가정하자. <Route path="/:testvalue" component={App}/> App Component에서는, 다음과 같이 하면 된다. //...
-
redux-form을 사용할 때 유의해야 할 점.
redux-form을 사용해서 다음과 같이 renderField를 사용해서 데이터 값을 받았지만, Field에 지정한 testname값이 들어오지 않았다.(undefined 값이 출력 됨) // Test.js import TestForm from './TestForm'; class Test extends Component { _handleSubmit = (values) => { console.log(values.testname); // undefined!! } render() { return( <TestForm onSubmit={this._handleSubmit}/> ); } } // TestForm.js const renderField =...
-
redux-form의 Field에 default 값을 설정하는 방법
redux-form을 사용해서 아래와 같은 간단한 form 코드를 작성했다고 했을 때, // Test.js import TestForm from './TestForm'; class Test extends Component { _handleSubmit = (values) => { console.log(values.testname); } render() { return( <TestForm onSubmit={this._handleSubmit}/> ); } } // TestForm.js const TestForm = ({handleSubmit}) => ( <form onSubmit={handleSubmit} > <Field name="testname" component="input"...
-
객체지향 디자인의 5원칙(SOLID 원칙)
좋은 객체지향 설계를 위해서는 다음의 5가지 원칙을 따르는 것이 좋고, 다음의 원칙들을 기반으로 디자인 패턴이 되기 때문에, 디자인 패턴을 공부하기 전에 알아두면 왜 그 패턴이 좋은 패턴인지에 대해서 좀 더 깊게 이해할 수 있다. 이 객체지향 5가지의 원칙, 앞글자를 따서 (SOLID)라고도 한다. S - SRP(Single responsibility principle) 단일 책임 원칙...
-
React Router에서 특정 URL 접속 시 페이지를 찾을 수 없는 문제 원인 및 해결 방법(nginx, node express, apache, jboss web app)
react router를 사용해서 url을 관리 할 때 하위 url에서 새로고침을 하거나 example.com/post와 같이 직접 url을 입력해 접근하면 404 페이지, 즉 페이지를 찾을 수 없는 것을 알 수 있다. 이를 방지하기 위해, node.js의 express.js를 이용해 url을 관리하는 방법 등이 있는데, 각각의 방법에서 react-router를 사용하는 방법에 대해 포스팅했다. react router로 배포하기 react-router를...