FrontEnd/React (41) 썸네일형 리스트형 [Error] POST https://localhost:3000/ 404 이틀동안 고치지 못한 문제. 원인이야 어찌됬든, 네트워크, 리액트, 리덕트, 덩크, 장고 이것들을 제대로 이해하고 코딩한게 아니기에 이런 결과가 나온 것 같다. 그래서 다시 처음으로 돌아가서 공부하고자 한다. 그리고 해답을 찾았을 때 다시 도전하자 [FrontEnd]FacebookLogin https://www.npmjs.com/package/react-facebook-login 리액트에 facebook로그인을 도와주는 컴포넌트가 이미 존재함 고로 다운받아 쓰면 되는데 yarn으로 설치하면 계속 오류가 뜸... 이거 때문에 node_modules을 통채로 지웠다 다시 받는다고 고생했... 여튼 메뉴얼 보고 따라 하면 됨 우리 같은 경우 다음과 같이 속성을 추가해주는데 appId는 페북 개발자 도구에서 ID를 말하는거고fields같은 경우에는 어떤 데이터를 가져오냐인듯callback은 어떤 함수를 불러올꺼냐인데 _handleFacebookLogin = response => { console.log(response); } 일단은 콘솔로그로 확인하도록 했음 cssClass를 따로 입력 할 수 있.. [FrontEnd]로그인 폼 submit! import React, { Component } from "react";import LoginForm from "./presenter"; class Container extends Component{ state = { username : "", password : "" }; render() { const {username, password} = this.state; return ; } _handleInputChange = event => { //console.log(event.target.value) const {target : {value,name} } = event; this.setState({ [name] : value //[]는 변수 선언이 아니라 변수 자체를 불러오는 것(username,pas.. [FrontEnd]redux devtools 정의 및 설치 Reactotron과 같은 역할을 한다. 하지만 더 간편하고 많은 기능을 제공한다. 리액토트론에서 액션을 보고 입력할 수 있는 기능 뿐만 아니라 우리의 state을 차트로 표현해주기까지 한다. import { composeWithDevTools } from "redux-devtools-extension"; if(env === "development"){ store = initialState => createStore(reducer, composeWithDevTools(applyMiddleware(...middlewares)) ); 다음과 같이 패키지를 불러오고개발환경일때 스토어를 생성하게 되어 있다. [FrontEnd]Reactotron 정의 및 설치 What is Reactotron?A macOS, Windows, and Linux app for inspecting your React JS and React Native apps.Use it to:view your application stateshow API requests & responsesperform quick performance benchmarkssubscribe to parts of your application statedisplay messages similar to console.logtrack global errors with source-mapped stack traces including saga stack traces!dispatch actions like a governm.. [FrontEnd]React Router And History configureStore.js import { createStore , combineReducers, applyMiddleware } from "redux"import thunk from "redux-thunk"import { routerReducer, routerMiddleware } from "react-router-redux";import createHistory from "history/createBrowserHistory";import users from './modules/users' const env = process.env.NODE_ENV; const history = createHistory() const middlewares = [thunk,routerMiddleware(history.. [FrontEnd]React-Router Index.js import React from "react";import ReactDOM from "react-dom";import { BrowserRouter } from "react-router-dom";import App from "./App"; ReactDOM.render( , document.getElementById("root")); BrowserRouter 컴포넌트에 속한 컴포넌트는 라우터라는 기능을 사용 할 수 있게 되나보다. App.js import React from "react";import { Route , Link } from "react-router-dom" const App = () => ( ); const Header = () => ( My Contacts Home Cont.. [FrontEnd]미들웨어 Redux logger import { createStore , combineReducers, applyMiddleware } from "redux"import thunk from "redux-thunk"import users from './modules/users' const env = process.env.NODE_ENV; const middlewares = [thunk]; if(env === "development"){ const { logger } = require("redux-logger"); middlewares.push(logger);} const reducer = combineReducers({ users}); let store = initialState => createStore(reducer, applyMid.. 이전 1 2 3 4 5 6 다음
