0
React - React Router Dom 사용하기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 React Router Dom 추가하기# npm 사용npm install react-router-dom# yarn 사용yarn add react-router-dom
Tag: React
0
React - TypeScript 사용하기
참고 https://create-react-app.dev/docs/adding-typescript/ React TypeScript 사용하기create react app 명령어에 --template typescript 파라미터만 추가해주면 초기 구성이 타입스크립트로 설정되는 것을 확인할 수 있다. # npm 사용npx create-react-app my-app --template typescript# yarn 사용yarn create react-app my-app --template typescript
0
Redux Saga
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Saga 액션을 모니터링하고 있다가 특정 Action 이 발생하면 특정 작업을 진행한다. 비동기 작업을 진행할 때 기존 요청을 취소 할 수 있다. 특정 Action 이 발생했을 때 다른 액션을 디스패치 하거나 자바스크립트 코드를 실행할 수 있다. Generator 에 기반한 미들웨어 Generator 함수의 흐름을 특정 구간에 멈춰 놨다가 다시 실행 할 수 있다.return 값을 여러번 보낼 수 있다. import { delay, put, takeEvery, takeLatest } from "redux-saga/effects";const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE";const INCREASE_ASYNC = "NCREASE_ASYNC";const DECREASE_ASYNC = "DECREASE_ASYNC";export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE });export const increaseAsync = () => ({ type: INCREASE_ASYNC });export const decreaseAsync = () => ({ type: DECREASE_ASYNC });function* increaseSaga() { yield delay(1000); yield put(increase()); // put 은 dispatch 와 비슷한 개념}function* decreaseSaga() { yield delay(1000); yield put(decrease());}export function* counterSaga() { yield takeEvery(INCREASE_ASYNC, increaseSaga); yield takeLatest(DECREASE_ASYNC, decreaseSaga);}const initialState = { number: 0, diff: 1,};export default function counter(state = initialState, action) { switch (action.type) { case SET_DIFF: return { ...state, diff: action.diff, }; case INCREASE: return { ...state, number: state.number + state.diff, }; case DECREASE: return { ...state, number: state.number - state.diff, }; default: return state; }} import React from "react";import { useSelector, useDispatch } from "react-redux";import Counter from "./Counter";import { increase, decrease, setDiff, increaseAsync, decreaseAsync,} from "../modules/counter";const CounterContainer = () => { const { number, diff } = useSelector((state) => ({ number: state.counter.number, })); const dispatch = useDispatch(); // const onIncrease = () => dispatch(increase()); // const onDecrease = () => dispatch(decrease()); const onIncrease = () => dispatch(increaseAsync()); const onDecrease = () => dispatch(decreaseAsync()); const onSetDiff = (diff) => dispatch(setDiff(diff)); return ( <Counter number={number} diff={diff} onIncrease={onIncrease} onDecrease={onDecrease} onSetDiff={onSetDiff} /> );};export default CounterContainer;
0
Redux Middleware 만들기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Middleware 만들기Middleware 생성Dispatch 되는 이력을 콘솔로 찍는 로거를 만든다. const myLogger = store => next => action => { console.log(action); const result = next(action); // 반환하는 result 는 Container 에서 Disaptch 됐을 때 결과 물이 result return result;}export default myLogger; Middleware 적용applyMiddleware 함수를 이용해 Redux 에 미들웨어를 적용한다. import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { createStore, applyMiddleware } from 'redux';import rootReducer from './modules';import { Provider } from 'react-redux';import myLogger from './middlewares/myLogger';const store = createStore(rootReducer, applyMiddleware(myLogger));ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));reportWebVitals();
0
Redux 사용하기 - 계산기 만들기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치 yarn add react-redux Action Type 정의/* 액션 타입 만들기 */// Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.// 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE"; Action 생성 함수/* 액션 생성함수 만들기 */// 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE }); Reducer
0
Redux 사용하기 - 계산기 만들기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치Action 정의하기export const INCREASE = "counter/INCREASE" as const;export const DECREASE = "counter/DECREASE" as const;interface increaseAction { type: typeof INCREASE;}interface decreaseAction { type: typeof DECREASE;}export type CounterType = increaseAction | decreaseAction; Action 생성 함수export const increase = (): increaseAction => ({ type: INCREASE,});export const decrease = (): decreaseAction => ({ type: DECREASE,}); Stateinterface CounterState { value: number;}const initialState: CounterState = { value: 0,};
0
Redux 사용하기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux 사용하기 하나의 애플리케이션 안에는 하나의 Store 가 존재 State 는 읽기 전용 불변성 을 지켜줘야 한다. 객체의 경우 Spread 연산자 를 사용해 기존 객체를 덮어써준다. 배열의 불변성을 지켜주는 내장함수를 사용해야 한다. 불변성을 지켜야만 Component 들이 제대로 Rerendering 된다. 변화를 일으키는 함수, Reducer 는 순수한 함수 여야 한다. Reducer 는 이전 상태 와 Action 객체 를 파라미터로 받는다. 이전 상태를 변경하지 않고 새로운 상태를 만들어 반환한다.(불변성 유지) 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야 한다. Redux 모듈 설치yarn add react-redux Action 상태의 변화가 필요할 경우 Action 을 일으킨다.
0
React Toast UI Editor 4 - 이미지 올리기
React Toast UI Editor 4 - 이미지 올리기Editor에서 이미지 업로드를 지원하다고 해서 이미지를 붙여 넣었더니 다음과 같이 이미지가 base64로 인코딩 돼 올라가는 것을 보고 살짝 당황했다. 어떻게 해야지 하면서 문득 생각이 들었던게 Markdown Editor를 사용하는 대표 블로그 사이트인 velog가 생각이 났다. 그래서 당장 velog로 가서 이미지를 올려보니! 다음과 같이 이미지가 저장된 URL을 가져오는 것을 확인 할 수 있었다. 아마 내부적으로 이미지가 들어오면 먼저 서버에 이미지를 저장하고 이미지가 저장된 경로를 받는 로직 같았다. 즉! 이미지를 업로드 하려면 이미지를 저장할 수 있는 서버를 준비해 연동할 필요가 있다는 것이다. Toast UI Editor에 Image 업로드 하기 위한 방법을 찾다 보니 처음에 연결된 Hook을 제거하고 새로운 Hook을 정의해 서버에 이미지를 올릴 수 있는 것을 알게 됐다. https://github.com/nhn/tui.editor/issues/1588 TOAST UI 에 Image Server 에 올리는 기능 구현import React, { useRef, useEffect } from "react";import axios from "axios";// Toast UI Editor 모듈 추가import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";// SyntaxHighlight 모듈 추가import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";// prism 모듈 추가import "prismjs/themes/prism.css";const Write = () => { const editorRef = useRef(); const handleClick = () => { console.log(editorRef.current.getInstance().getMarkdown()); }; useEffect(() => { if (editorRef.current) { // 기존에 Image 를 Import 하는 Hook 을 제거한다. editorRef.current.getInstance().removeHook("addImageBlobHook"); // 새롭게 Image 를 Import 하는 Hook 을 생성한다. editorRef.current .getInstance() .addHook("addImageBlobHook", (blob, callback) => { (async () => { let formData = new FormData(); formData.append("file", blob); console.log("이미지가 업로드 됐습니다."); const { data: filename } = await axios.post( "/file/upload", formData, { header: { "content-type": "multipart/formdata" }, } ); // .then((response) => { // console.log(response); // }); const imageUrl = "http://localhost:8080/file/upload/" + filename; // Image 를 가져올 수 있는 URL 을 callback 메서드에 넣어주면 자동으로 이미지를 가져온다. callback(imageUrl, "iamge"); })(); return false; }); } return () => {}; }, [editorRef]); return ( <div> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="800px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} plugins={[codeSyntaxHighlight]} /> <button onClick={handleClick}>Markdown 반환하기</button> </div> );};export default Write;
0
React Toast UI Editor 3 - 입력 내용 가져오기
React Toast UI Editor 3 - 입력 내용 가져오기Editor에 입력된 내용을 저장하고 관리하기 위해서는 입력된 값을 받아와야 한다. Toast UI Editor에서는 useRef를 이용해 const editorRef = useRef(); 버튼 Event Handler 만들기버튼을 만들어줘 버튼을 눌렀을 때 Editor에 입력된 내용을 반환해 주는 Evnet를 작성한다. 입력된 값을 받아올 때는 Ref 객체인 editorRef 를 이용해 Toast UI Editor 객체를 가져와 입력된 값을 받아올 수 있도록 한다. const handleClick = () => { console.log(editorRef.current.getInstance().getMarkdown());}; Button 클릭에 대한 이벤트 핸들러와 Editor 컴포넌트에 Ref 객체를 넣어준다. <div> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} plugins={[codeSyntaxHighlight]} /> <button onClick={handleClick}>Markdown 반환하기</button></div> 전체 소스
0
React Toast UI Editor 2 - Syntax Highlight 적용하기
React로 Toast UI Editor 2 - Syntax Highlight 적용하기https://github.com/nhn/tui.editor/tree/master/plugins/code-syntax-highlight 글을 쓰다보면 Post에 코드를 같이 올릴 경우가 많은데, 초기 Setting은 Code Highlight가 적용돼 있지 않는 것을 확인할 수 있었다. 아무래도 Code Highlight가 없어서 코드를 작성하게 되면 가독성도 좀 떨어지고 Post 작성할 맛도 안나서 Editor에 Code Highlight를 적용하려고 한다. 패키지 추가yarn add @toast-ui/editor-plugin-code-syntax-highlightyarn add prism import React from "react";// Toast UI Editor 모듈 추가import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";// SyntaxHighlight 모듈 추가import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";// prism 모듈 추가import "prismjs/themes/prism.css";const Write = () => { return ( <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} plugins={[codeSyntaxHighlight]} /> );};export default Write; Code Highlight가 적용된 것을 확인할 수 있다. 덕분에 가독성도 훨씬 좋아져 점점 맘에 들기 시작했다.
0
React로 Toast UI Editor 사용해보기
React로 Toast UI Editor 사용해보기개인 프로젝트도 하고 싶고 나만의 블로그를 만들고 싶은 마음에 UI도 찾아보고 Editor도 찾고 있었었다. 개인적으로 Editor를 찾고 있던 기준은 첫번째는 Markdown 언어가 사용 가능해야 하고 두번째는 이미지 업로드가 가능한 Editor를 찾고 있던 와중에 NHN에서 제공하는 Toast UI Editor를 찾게 됐다. 기능들이 너무너무 맘에 들어 사용해보기로 했다. Toast UI Editor에서는 내가 가장 원했던 Markdown 문법이 사용 가능 했고, 이미지 업로드도 가능 했다.!!! 그리고 코드블럭에 마음에 드는 Syntax Highlighter를 적용할 수 있는 장점과 다양한 기능들이 있어 너무나도 맘에 들었다. 플러그인 설치하기yarn add @toast-ui/react-editor Write.jsx import React from "react";import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";const Write = () => { return ( <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} /> );};export default Write; 마지막으로 App.js에 새로만든 Write.jsx 컴포넌트를 추가하면 화면에서 Toast UI가 나타나는 것을 확인할 수 있다.