FrontEnd/React (41) 썸네일형 리스트형 타입 스크립트 Next.js의 인터페이스를 알아보자. _app.js의 클래스 컴포넌트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const store = () => { return createStore(Reducers, {}, composeWithDevTools(applyMiddleware(thunkMiddleware))) } class Myapp extends App { render(): JSX.Element { const { Component, store, pageProps } = this.props return ( ) } } export default withRedux(store)(Myapp) Redux에 연결된 _app.js 컴포넌트이다. App 컴포넌트와 제네릭 일반적으로 React.Component를 상.. next 보일러 플레이 pankod 분석하기 Next + Redux + Enzyme + Typescript 보일러플레이트를 찾다가, 발견한 프로젝트인데 구조를 살펴보면서 또 한없이 모자람을 느껴 한번 쓱 훑어보기로 했다. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 . ├── app │ ├── proxy.js │ ├── routes.js │ └── server.js ├── documentation ├── pages │ ├── _app.tsx │ ├─.. Redux-Form Redux를 사용하면 Form태그의 value들을 관리하거나 validation하는 것을 도와주는 라이브러리가 있다. https://redux-form.com/8.2.2/ 위의 주소가 공식문서인가 보다. 예제와 사용법이 친절하게 나와있다. 실제로 사용해보자. 흔하게 보이는 폼태그처럼 보이지만 input의 value에 따라서 validation 처리를 하는 기술은 꽤 재미있다. 일단은 state를 관리하는 것에서 유추할 수 있지만, Redux의 하나의 Reducer로써 동작한다. 그렇기 때문에 다음과 같은 셋팅을 해줘야 한다. Setting Reducer 좀 아쉬운 것은 redux-form의 reducer의 변수명이 reducer라는 점이다. ( 왜.. 이렇게 지으신 건지...) 그렇기 때문에 나 같은 경.. [Apollo] Apollo start(1) 이번 포스팅에는 Apollo에 대해서 알아보자. Apollo는 Grapql과 함께 클라이언트단(React)의 프로그램을 만드는 데 정보를 주고 받는등 도움을 주는 API이다. Redux와 같은 역할...? 인지는 모르겠지만 Redux와 비교 되고 있는것으로 보인다. 설치해야할 툴은 apollo-boost와 react-apollo이다. apollo-boost apollo-boost는 graphql와 클라이언트를 연결해준다. import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "http://127.0.0.1:4000/" }); export default client; 무서울 정도로 간단하다.. apolllo-boost.. [Redux]날씨 앱 오버뷰 다음과 같은 날씨 앱을 개발한다고 치자 컴포넌트는 다음과 같이 나뉠 것이다. 이 때, 빨강 - Search바는 input에서 value를 받고 button을 클릭하면 form태그를 통해서 value를 차트 API에 전달 할 것이다. 보라 - Chart는 빨강의 value값을 받아 리렌더링 할 것이다. [Redux]리덕스_액션 이 부분은 언제 봐도 새롭고 어려운 거 같다... 자 만들어야 하는건 1. 클릭 했을 때 액션이 발동 하는 것(list의 온클릭)2.온클릭된 list의 데이터를 다룰 reducer생성3. reducer를 받아 view해줄 container 1-1. 액션을 추가export function selectBook(Book){ return{ type : 'BOOK_SELECTED', payload : Book }}두가지를 리턴받고 첫번째는 타입 두번째는 payload 1-2. 기존의 book-list에 핸들러로 발동할 액션을 추가 import { bindActionCreators } from 'redux';import {selectBook} from '../actions/index';1-2-1. import로 r.. [Redux]리덕스 "Redux"는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다 음... 내가 이해하기로는 Redux는 결국React에서 Model단의 역할을 하기 위해 생겨난 친구 같다. React는 View 역할을 하고 있는데React의 state는 결국 데이터고 변하고... 그런데 이 state를 주고 받을려면 자식 컴포넌트에서 단계적으로 올라가야 하잖음. 이는 데이터 하나만 전송하는데도 엄청나게 복잡해 질꺼임 그러므로 state(data)만 따로 관리해준다면 깔끔하게 정리할 수 있을꺼임 다음은 Redux가 사용하는 FLUX라는 디자인 패턴임 Action이 발생하면 Dispatch가 Store에 있는 state를 View단에 업데이트 해주는 식. 요런식이 됨. import { combineReducers }.. [React]검색어 콜백 프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. 라고 위키백과에 써져있다. 머 여튼 영상 리스트를 클릭하면 그 영상이 보이도록 하고 싶다. 그래서 그와 관련된 함수를 만들었음 class App extends Component { constructor(props){ super(props) this.state= { videos : [] , selectedVideo : null }; YoutubeSearch({ key : API_KEY, term : "크리스마스" }, videos => { this.setState({ videos: videos, selec.. 이전 1 2 3 4 ··· 6 다음
