FrontEnd (65) 썸네일형 리스트형 타입 스크립트 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.. [Frontend] VanillaJS vs Vue.js (4) Vue Vue의 패턴은 MVVM패턴이다. Controller의 역할을 ViewModel이 한다. FormComponent index.html Vue는 Html에서 View의 역할을 한다.(세상에나)Model의 데이터를 받거나 이벤트를 발생시키는 것들이..하나씩 살펴보면v-onv-on : submit.prevent=Vue객체의 메소드 특정 돔 이벤트를 지정하고 돔 이벤트가 발생시에 Vue객체의 메소드를 실행시킨다.addEventListener나 on(돔이벤트)의 역할을 함 위 같은 경우에는폼 태그의 submit이벤트 발생시에preventDefault()를 발동하고Vue 객체의 onSubmit()을 실행시킨다. V-modelv-model = Vue객체의 프로퍼티 data의 프로퍼티Vue객체의 데이터(모델)과.. [Frontend] VanillaJS vs Vue.js (3) KeywordModel.jsexport default { data: [ {keyword: '이탈리아'}, {keyword: '세프의요리'}, {keyword: '제철'}, {keyword: '홈파티'} ], list() { return new Promise(resolve => { setTimeout(() => { resolve(this.data) }, 200) }) }} list()프로미스를 리턴하고setTimeout을 이용하여 0.2초 뒤에this.data를 다른 함수에 파라미터로 전달한다. MainController.js fetchSearchKeyword() { KeywordModel.list().then(data => { KeywordView.render(data) }) }, fetchSearchK.. [JS] Promise Model을 이해하기 위해서Promise를 다시 한번 살펴보자. 프로미스(Promise) 싱글쓰레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다.덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 사용되는 경우가 많아지면서 단점이 드러났다.그 단점은 비동기 처리를 순차적으로 실행할 필요가 있는 경우에 비동기 처리를 중첩시켜서 표현하므로 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가하는 것이 이다.크게 이 두 가지의 단점을 해결하기위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원하게 되었다. 출처: https://jeong-pro.tistory.com/128 [기본기를 쌓는 정아마추어 코딩블로그]Promise가 왜 .. [Frontend] VanillaJS vs Vue.js (2) 내용이 많아서 나눠서 해야 할 것 같다. 여튼Form과 Tab 컴포넌트를 끝내고 Keyword History Result 가 남음 KeywordView.jsKeywordView.render = function (data = []) { this.el.innerHTML = data.length ? this.getKeywordsHtml(data) : this.messages.NO_KEYWORDS this.show() this.bindClickEvent() return this} KeywordView.getKeywordsHtml = function (data) { return data.reduce((html, item, index) => { html += `${index + 1} ${item.keyword}` .. 이전 1 2 3 4 ··· 9 다음
