React/메모 프로젝트 (3) 썸네일형 리스트형 #3. Reducer React-Router란? mapStateToProps : 컴포넌트의 props에 매핑시켜준다. ( isLoggedIn에 값을 넣어 줌 )Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고 url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 Smart Component(똑똑한)와 Dumb Component(멍청한) Smart Component Dumb Component 위치 최상위, 라우트 핸들러 중간과 말단 컴포넌트 Redux와 연관됨 Yes No 데이터를 읽기 위해 Redux 상태를 구독(?) .. #2. React-Router React-Router란? Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고 url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 이후 다른 페이지로 이동 시, 페이지를 처음부터 로딩하지 않고 js 파일을 이용하여 기존 컴파운드를 언마운트시키고 다른 컴포넌트를 마운트한다. 예를 들어 웹의 헤더 컴포넌트와 같은 것을 처음부터 렌더링하지 않고 그대로 유지할 수 있다는 소리. React-Router v3 vs v4? 예제 프로젝트는 v3이여서 구현할 때 v4로 바꿔줘야 했다. IndexRoute : Ro.. #1. 서버 구성 - 라우팅 프로젝트 구조 server측 코드가 있는 폴더 ( /server )가 있다. 해당 프로젝트를 만들 때 React 공부가 목적이였기 때문에 javascript를 같이 사용할 수 있는 node.js를 이용하였다. server측 언어는 php, ruby, python, node.js 등 다양한 종류가 있지만 각자 편한 걸 고른다고 하면 된다. node.js는 브라우저 밖에서도 javascript를 실행 시켜주는 runtime일 뿐이다. ( atom이 node.js로 만들어졌다네.... ) Express Web framework일 뿐이다. 웹서버 구축할 때 필요한 것들을 도와주는 역할이다. 라우팅 [ server/main.js - 라우팅 설정하는 부분 ] [ src/actions/authentication.js.. 이전 1 다음
