본문 바로가기

프론트엔드관련 책예제실습정리/리기술요약

 (18)
17.2 리덕스사용하여 리액트어플리케이션 상태관리 //index.js import App from './App'; //react application에 리덕스 적용하기 : createStore사용하기 //rootReducer도 불러와준다 //사용시 Provider 컴퍼넌트로 감싸주어야함 import {createStore} from 'redux'; import rootReducer from './modules'; import {Provider} from 'react-redux' import { composeWithDevTools } from 'redux-devtools-extension'; //redux devtools 크롬확장 프로그램 설치후, redux-devtools-extension 패키지 설치 + 해당 명령어 작성하면 //npm start 했을..
17 .1리덕스 사용하여 리액트 어플리케이션 상태관리 리덕스의 정의: 리액트 상태관리 라이브러리, 여러 컴포넌트 거치지 않고 상태값 업데이트 가능(전역상태 관리시 효율적) (context api와 비교 : context api를 사용하는 것보다 큰 규모의 프로젝트에서 사용 개발자도구, 미들웨어 기능을 제공하여 비동기 작업을 더 쉽게 할 수 있음.) //1.액션 { type:"ADD_TODO", data :{ id:1, text:'리덕스배우기' } } { type:"CHANGE_INPUT", text:'안녕하세요' } //2,액션생성함수 function addTodo(data){ return{ type:'ADD_TODO', data }; } const changeinput = text = ({ type:"CHANGE_INPUT", text }); //3.초기..
13 리액트라우터로 SPA 개발하기 1.$ yarn create react-app router-tutorial $ cd router-tutorial $ yarn add react-router-dom 2.프로젝트에 라우터적용 BrowserRouter 컴포넌트를 감싸면 HTML5의 History ApI를 사용ㅎ아ㅕ 페이지를 새로고침하지 않고도 주소변경, 주소 관련 정보를 props로 조회 및 사용 할수 있다 //src/index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( ..
10 일정관리 어플리케이션(scss) //TodoTemplate.js .TodoTemplate { width: 512px; margin-left: auto; margin-right: auto; margin-top: 6rem; border-radius: 4px; overflow: hidden; .app-title { background: #22b8cf; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { background: white; } } //TodoInsert.scss .TodoInsert { display: flex; background: #495057; input { b..
10 일정관리 어플리케이션(js) //App.js import React, { useState, useRef, useCallback } from 'react'; import TodoTemplate from './component/TodoTemplate'; import TodoInsert from './component/TodoInsert'; import TodoList from './component/TodoList'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트기초알아보기', checked: true }, { id: 2, text: '컴포넌트 스타일링하기', checked: true }, { id: 3, text: '일정관리 앱만들어보기', c..
10 일정관리웹어플리케이션만들기 01 1. create react-app으로 어플리케이션 설치 및 node sass,classNames,react-icons 설치(package.json) yarn create react-app todo-app / yarn add node-sass@4.14.1 classNames react-icons 2.prettier설정 src폴더에 component 디렉토리만들고 js파일들 추가 3.TodoTemplate.js import React from 'react'; import './TodoTemplate.scss'; const TodoTemplate = ({ children }) => { return ( 일정관리 {children} ); }; export default TodoTemplate; 4.App.js ..
09컴퍼넌트스타일링 CSSModule을 활용한 클래스네임적용, global css 작성 global css를 활용할 수 있으며, 두개 이상의 클래스 적용시 ${styles.클래스명}으로 표기한다. :global 대신 :local을 사용할 수도 있음 //CSSModule.moduel.css .wrapper { background: black; padding: 1rem; color: white; font-size: 2rem; } .inverted { color: black; background: white; border: 1px solid black; } :global .something { font-weight: 800; color: aqua; } 클래스목록이 많아질 경우 배열로 작성할수도 있다. //CSSModule.js import React from "react"; import styl..
09컴퍼넌트스타일링 node-modules에서 라이브러리 불러오기(open-color, include-media) Sass 라이브러리 설치(open-color, include-media) $yarn add open-color include-media node_modules의 라이브러리 블러올시 내부경로 ~로 표기 768px media min 에서 background $oc-gray-9 로 변경 //utils.scss @import "~include-media/dist/include-media"; @import "~open-color/open-color"; $red: red; $orange: orange; $yellow: yellow; $green: green; $blue: blue; $indigo: indigo; $violet: violet; @mixin square($size) { $calculated: 32px ..

티스토리툴바