티스토리

nata_developer

검색하기

블로그 홈

nata_developer

digital-detox.tistory.com/m

nata_developer 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

BlogApp7 StreamShow 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.src/components/App.js import React from "react"; import { Router, Route, Switch } from "rea.. 공감수 0 댓글수 0 2020. 8. 21.
Blog App6 StreamDelete 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.public/index.html ... 2.public/modal.html I am a modal alskjdflk asldkfjalskdjf asldfkjalsk.. 공감수 0 댓글수 0 2020. 8. 21.
Blog App3 StreamList 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.api/streams.js npm i axios import axios from "axios" export default axios.create({ baseURL:.. 공감수 0 댓글수 0 2020. 8. 20.
React Router를 이용하여 component간에 props 넘겨주기 *https://medium.com/@ghur2002/react-router%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-component%EA%B0%84%EC%97%90-props-%EB%84%98%EA%B2%A8%EC%A3%BC%EA%B8%B0-610de3511c67를 참고하였습니다. 1. match.params 값으로 데이터 넘기기 component에서 component로 데이터를 넘겨줄때는 props를 사용하여 편리하게 데이터를 넘겨줄 수 있다. 하지만 만약 단순히 component가 랜더링될때 넘겨주는게 아니라 Routing을 통하여 페이지가 이동할때 넘겨줘야 한다면 어떻게 할까 Routing한 component들은 history, location, matc.. 공감수 0 댓글수 0 2020. 8. 20.
Blog App5 StreamEdit 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.components/streams/streamForm.js import React from 'react'; import { Field, reduxForm } fro.. 공감수 0 댓글수 0 2020. 8. 20.
redux-form *https://medium.com/dailyjs/why-build-your-forms-with-redux-form-bcacbedc9e8를 참고하였습니다. 1.redux-form 이란? The fields that are in the form; The values of each field; The focused field; If the field values are valid; The fields that the user have interacted with; If the form is being submitted; If is happening any asynchronous validation. 2. setup. import { reducer as formReducer } from 'redux-form'.. 공감수 0 댓글수 0 2020. 8. 20.
Blog App 4 StreamCreate 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.api/streams.js npm i axios import axios from "axios" export default axios.create({ baseURL:.. 공감수 0 댓글수 0 2020. 8. 20.
Blog App 2 GoogleAuth 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1.src/GoogleAuth.js import React from 'react'; import { connect } from 'react-redux'; import .. 공감수 0 댓글수 0 2020. 8. 20.
react-router-dom * https://velog.io/@josworks27/react-router-dom-history를 참고하였습니다. * https://blog.naver.com/PostView.nhn?blogId=backsajang420&logNo=221158623399 1.라우팅 이란? 사용자가 어떤 주소(URL)로 들어갔을때, 그 주소에 해당하는 페이지를 사용자에게 보내주는 것이다. 2.BROWSER ROUTER import {BrowserRouter} from 'react-router-dom'; react-router-dom 을 적용시키고 싶은 최상위 컴포넌트에 감싸주는 wrapper component이다. ReactDom.render( , document.getElementById('root')) 3.ROUTE.. 공감수 0 댓글수 0 2020. 8. 20.
Blog App 1 Scaffold 0.앱 구조 blog-app api db.json client public index.html modal.html src actions index.js types.js apis streams.js components StreamCreate.js StreamDelete.js StreamEdit.js StreamForm.js StreamList.js App.js GoogleAuth.js Header.js Modal.js reducers authReducer.js index.js streamReducer.js history.js index.js 1api/db.json // npm 설치 npm i json-server // json-server 가동 "scripts": { "start": "json-server.. 공감수 0 댓글수 0 2020. 8. 20.
Redux 1.Redux란? 상태 관리 라이브러리다. 복잡한 애플리케이션을 쉽게 만들어 준다. 리액트 앱을 만들지 않아도 된다. 리액트를 위해서만 사용하지 않는다. 2.왜 Redux를 사용해야 할까? 2.Redux Cycle 3.Redux 예제 1 actions/index.js export const selectSong = song => { return { type: "SONG_SELECTED", payload: song } } reducers/index.js import { combineReducers } from "redux" const songsReducer = () => { return [ { title: 'No Scrubs', duration: '4:05' }, { title: 'Macarena', dur.. 공감수 0 댓글수 0 2020. 8. 11.
controlled component vs uncontrolled component 1. WHY CONTROLLED COMPONENTS & UNCONTROLLED COMPONENTS ? React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다. 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다. 대부분의 HTML 엘리먼트들(ex. 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다. 하지만 HTML 엘리멘트 중 자체적으로 특정 data를 가지는 엘리먼트들이 있다. 바로 태그의 엘리먼트들이다.(, , 등) 이들은 user가 DOM에서 어떤 정보를 입력하거나 선택할 경우, 해당 정보를.. 공감수 0 댓글수 0 2020. 8. 10.
class component vs functional component 1.리액트가 해왔던 방식 FUNCTIONAL COMPONENTS 유저에게 컨텐츠를 보여주기 위해 JSX를 생산할 수 있다. CLASS COMPONENTS 유저에게 컨텐츠를 보여주기 위해 JSX를 생산할 수 있다. 라이프사이클 메서드를 사용할 수 있다. STATE 시스템을 사용할 수 있다. *주의 클래스 컴포넌트는 반드시 자바스크립트 클래스여야 한다. 반드시 React.Component를 상속받아야 한다. 반드시 JSX를 반환하는 render를 정의해야 한다. 4. 지금의 리액트 CLASS COMPONENTS에서는 라이프사이클 메써드와 STATE를 사용하지만, FUNCTION COMPONENTS에서는 HOOKS를 사용한다. 5.그렇다면 CLASS와 FUNCTIONAL 중 어떤 것을 사용해야 할까? 이미 확.. 공감수 0 댓글수 0 2020. 8. 10.
Props 1.Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 것이다. Props의 목적은 자식 컴포넌트를 다루는 것이다. 2.Props의 이점 컴포넌트의 중첩,재사용,설정이 가능해진다. 3.Props 예제 1 App.js import React from "react"; import faker from "faker"; import CommentDetail from "./CommentDetail"; import ApprovalCard from "./ApprovalCard"; const App = () => { return ( ); }; export default App; 부모 컴포넌트인 App에서 CommentDetail에게 author,timeAgo,content,avartar에 대한 정보를 보내주.. 공감수 0 댓글수 0 2020. 8. 9.
React 1.React란? 리액트는 자바스크립트 라이브러리다. 리액트의 궁극적인 목적은 유저에게 컨텐츠를 보여주고 유저와의 상호작용을 다루는 것이다. 2.React Components 자바스크립트의 클래스이다. 리액트의 컴포넌트는 자바스크립트의 함수와 클래스를 사용한다. 3.왜 react와 react-dom 두 가지 라이브러리를 같이 사용해? 리액트는 두 가지 라이브러리로 나뉜다. "React"는 무엇이 컴포넌트인지 알고, 어떻게 컴포넌트가 함께 작동할 수 있는지 안다. "ReactDOM"은 어떻게 컴포넌트를 취하고, DOM에 어떻게 컴포넌트를 올릴지 안다. 4.CRA 5.SPA 6.작동 원리 공감수 0 댓글수 0 2020. 8. 9.
JSX *udemy의 Modern React with Redux [2020 Update]를 참고하였습니다. 1.JSX란? 자바스크립트에 HTML 문법을 사용할 수 있게 해주는 JS확장 문법 1. 자바스크립트의 특별한 문법이다. 2. 브라우저는 JSX를 이해하지 못한다. 그래서 우리는 JSX를 쓰고나서 JSX를 보통의 JS로 만들기 위해 tool을 이용한다. 3.몇몇 차이가 있지만, HMTL과 매우 비슷한 모양과 기능을 가졌다. const app = () => { return Hello World } ====> "use strict"; var App = function App() { return /*#__PURE__*/React.createElement("div", null, "Hello World"); }; 2.. 공감수 0 댓글수 0 2020. 8. 9.
React with WEBPACK & BABEL *Setup Webpack and Babel for React를 참고하였습니다. (https://www.youtube.com/watch?v=ydDUm1yPZs0) 1.설치 dependencies react react-dom devDependencies webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader style-loader sass-loader node-sass 2.파일 구조 1.webpack.config.js const path = require("path") module.exports = { entry: "./src/index.js", output: { path: pat.. 공감수 0 댓글수 0 2020. 8. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.