FrontEnd (65) 썸네일형 리스트형 [Frontend] VanillaJS vs Vue.js (1) 어제까지 ES6에 관한 책을 읽고 나니, 내가 여태 까지 인강을 보며 짠 코드들을 얼마나 이해하지 않고 받아 적었는지 그리고 지금 보면 보이지 않는 것들이 보이지 않을까 싶어 강정환 강사님의 순수 자바스크립트와 Vue.js 강의를 다시 정리해보기로 했다. 다음 형태의 검색어에 따라 View가 바뀌는 앱이며,MVC패턴을 지닌다. 컴포넌트로 분류하면검색어를 받는 컴포넌트추천검색어와 최근검색어의 탭이 있는 컴포넌트 추천검색어를 클릭시에 나오는 컴포넌트최근검색어를 클릭시에 나오는 컴포넌트결과(제품)이 나오는 컴포넌트그리고 전체를 총괄하는 컴포넌트 가 있고 추천검색어, 최근 검색어, 검색결과는 각각 데이터를 지닌다. app.jsimport MainController from './controllers/MainCo.. [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.. [React]props가 Null일 때 위의 코드는 아래 에러를 발생한다. import React from 'react'; const VideoDetail = ({videos})=> { const videoId = videos.id.videoId; const url = `http://www.youtube.com/embed/${videoId}`; return ( {videos.snippet.title} {videos.snippet.description} );}; export default VideoDetail; 비디오 디테일은 다음을 리턴한다.리턴에는 props의 videos들이 있다. 왜 그런데 videos가 정의되어 있지 않다는 오류가 뜰까? 다시 위 코드를 보면 최초에 constructor가 state를 초기화 시킨다. 이후에 Youtub.. [React]YoutubeSearch API 사용 및 state 예시 import React, {Component} from 'react';import ReactDOM from 'react-dom';import YoutubeSearch from 'youtube-api-search'; import SearchBar from './component/search_bar';import VideoList from './component/video_list'; const API_KEY = "AIzaSyCWXQgf9WZ2bADCMhJwccOZsXpivTIxfo8"; class App extends Component { constructor(props){ super(props) this.state= { videos : [] }; YoutubeSearch({ key : API_KEY, 검.. [React] state 및 this문제 state란유저 이벤트를 저장하고 반응하는데 이용된다. 모든 클래스 컴포넌트는스테이트 객체를 가지고 있고이 스테이트가 변화할 때마다 재렌더링하고자식컴포넌트도 재렌더링한다. constructor(props){ super(props) this.state ={ term : ""}; } 이를 시험하기 위해 다음과 같은 코드를 작성했다. constructor는 생성자 함수라고 하고객체를 생성하는 함수를 생성자 함수라고 부른다.보통 변수나 state를 초기화할때 사용된ㄷ고 한다. super는 부모 오브젝트의 함수를 호출할 때 사용된다. import React, { Component } from "react"; class SearchBar extends Component { constructor(props){ sup.. 이전 1 2 3 4 5 ··· 9 다음
