React 에디터로 TOAST UI Editor 사용해보기

프로젝트에 쓸 에디터 선정에 많은 고민을 했다. React 사용자들이 주로 사용하는 에디터를 조사해서 몇 가지로 추려내었다. 에디터 선정을 위한 기준은 다음과 같았다. 직관적인 UI 사용자가 개발자가 아니기 때문에 마크다운에 치중하지않은 wysiwyg 에디터가 필요했다. 주 사용언어는 한글이다. 따라서 한글에 맞춤화된 에디터가 필요했으며, 메뉴 설명 또한 한글로 되어있어야 했다. 표 첨부, 사진 첨부 기능이 있어야 했다. react-quill, summernote, Slate 등의 많은 에디터를 살펴봤고, 결론적으로 NHN사에서 제공하는 Toast Editor를 사용하기로 했다. 설치🛠 react에서 사용하기 때문에 리엑트 버전을 설치한다. toast-ui/react-editor npm i @toast-..

→2022.04.27

Front-End/React

[React] CRA에서 redux-toolkit과 redux-saga 초기 설정하기

create-react-app create-react-app은 사용자가 쉽게 개발을 할 수 있도록 개발 환경을 제공해주는 도구이다. CRA에는 브라우저 호환성을 위한 바벨과 웹팩과 등의 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다. npx create-react-app '프로젝트 이름' 위의 명령어로 우리는 바로 실행 가능한 react앱을 생성할 수 있다. 이제 create-react-app으로 리액트 프로젝트를 생성하고, redux와 redux-saga 셋팅까지 완료해보자. React 프로젝트 생성 먼저, CRA로 새로운 프로젝트를 만들어준다. 다음과 같은 메세지가 나오면 성공적으로 프로젝트가 만들어졌다는 뜻이다..

→2022.01.22

Front-End/React

[React] 자주 사용하는 Custom hook 소개

프로젝트를 하면서 자주 사용하는 Custom hooks를 모음. 아마도 계속 추가해나갈 예정이다. usePrevious import { useEffect, useRef } from 'react'; function usePrevious(stateOrProp) { const previous = useRef(null); useEffect(() => { previous.current = stateOrProp; }, [stateOrProp]); return previous.current; } export default usePrevious; 가끔 이전 state의 값이 필요할 때가 있다. 예를 들어 useEffect는 deps에 명시한 값이 하나라도 변경되면 로직을 실행한다. useEffect(() => { ....

→2021.10.16

Front-End/React

[React] Custom hooks의 return value

Custom Hook에서 여러개의 값을 return하는 방법은 두가지가 있다. const [one, two] = useNumbers(); const { a, b, c } = useAlphabet(); array형태와 object형태로의 return이다. 어떠한 경우에 array형태를 사용하고 object형식을 사용하는지에 대한 정답은 없다. 하지만 두 타입의 장단점이 극명하기 때문에 상황에 따라 구분에서 사용하면 좋다. array로 return const [color, setColor] = useState('MintCream'); const [width, setWidth] = useState('100vw'); 적은 수의 값들을 return하는 경우 같은 컴포넌트 내에서 한번 이상 사용하는 경우 array..

→2021.10.16

Front-End/React

[React] Custom hook을 만들기 전에 고려해야 할 것들

들어가면서🚪 Building your own Hooks lets you extract component logic into reusable functions. 최근 내가 컴포넌트를 설계할 때 가장 중요하게 생각하는 것은 컴포넌트의 역할이 명확하게 나타나는가 이다. 예를 들어보자. app이라는 페이지에 input field가 있고 확인 버튼이 있다. 이 화면의 코드는 대충 이런 식일 것이다. function App() { const [value, setValue] = useState(''); const onClick = () => { 클릭 이벤트 }; return ( ); } app 컴포넌트의 역할은 'input field와 button을 적절한 위치에 그리는 것' 그리고 '확인 버튼을 누르면 input ..

→2021.10.16

Front-End/개발일지

React로 타임라인 만들기 (+ 더보기 버튼)

타임라인은 일정 양의 데이터만을 로딩하고 사용자가 +read more버튼을 클릭하면 새로운 데이터를 끝에 추가로 로딩하는 방식으로 동작한다. 각각의 데이터들은 날짜별로 분류되어 있으며 최신 순으로 정렬되어있다. 내가 만들 타임라인의 구성은 다음과 같다. Timeline이라는 큰 틀 안에 날짜별로 분류된 HistoryList가 있고 각각의 기록들은 HistoryItem으로 나타낸다. 이 구성을 표현하기 위해서는 데이터들을 날짜별로 나눠서 재분류할 필요성이 있었다. 타임라인 로직 구성하기 일단 데이터를 어떤 방식으로 가져오는지 알아야 했기 때문에 twitter의 timeline api를 참고했다. 트위터에서는 두가지 방식으로 timeline 데이터를 가져올 수 있다. start_time과 end_time을 ..

→2021.10.08

Front-End/React

[React] useCallback과 useMemo 제대로 사용하기

useCallback과 useMemo는 메모이제이션 된 값을 반환한다. 차이점은 useCallback은 함수를 메모이제이션하고 useMemo는 값을 메모이제이션한다. 면접을 준비하여 외웠던 대답이다. 실제 프로젝트를 하면서 useCallback을 써봤지만 왜 쓰는지, 언제 써야하는지를 정확히 이해하지 못했었다.(심지어는 전혀 이점없는 곳에 썼다🙄) 회사에 와서야 useCallback과 useMemo를 사용하는 목적이 무엇인지를 완전히 이해하고 올바르게 사용하게 되었다. 이제 내가 이해한 내용을 여기에 정리해보려한다. REACT의 리렌더링 React가 리렌더링을 하는 조건은 3가지이다. 자신의 state가 변경될 때 부모 컴포넌트로부터 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 여기 ..

→2021.09.12

Front-End/React

Redux-saga를 알아보자

💡 이 글을 읽기 전에 읽어보면 좋은 글 1️⃣ Symbol을 알아보자 2️⃣ for-of와 Iterator 3️⃣ Generator란 무엇일까? Redux-saga란?🤔 공식문서에서는 Redux-saga를 다음과 같이 소개하고 있다. Redux-saga는 react/redux 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을 더 쉽고 보기 좋게 만드는 것을 목적으로 하는 라이브러리이다. redux에서는 action을 발생시키면 reducer를 통해 state를 변화시켜 store를 갱신했다. Redux-saga는 action과 reducer사이에서 흐름을 제어하는 미들웨어이다. 이 중간에서 Redux-saga는 action이 발생..

→2021.09.04

Front-End/JavaScript

[JavaScript] Generator란 무엇일까?

Generator👀 function* generateSequence() { yield 1; yield 2; return 3; } 일반 함수는 function 키워드로 시작한다면, 제너레이터 함수는 function* 키워드로 시작한다. (화살표 함수는 사용할 수 없다.) 제너레이터 함수 안에는 yield 구문이 존재한다. yield 구문의 문법은 return 구문과 비슷하다. 차이점은 return은 한번만 실행되지만, 제너레이터 함수의 yield는 여러번 실행된다는 것이다. yield 구문은 제너레이터의 실행을 멈췄다가 다음에 다시 시작할 수 있게 만든다. 제너레이터 함수는 일반 함수와 동작 방식이 다른데, 제너레이터 함수를 호출하면 코드가 실행되지 않고, 제너레이터 객체가 반환된다. let generat..

→2021.09.04

Front-End/JavaScript

[JavaScript] for-of와 Iterator

for-of문 for(let value of myArray){ console.log(value); } for-in 문이 객체의 속성들을 순회하기 위한 구문이라면, for-of 문은 배열의 요소들, 즉 data 를 순회하기 위한 구문이다. 정확히는 일반 Object 요소를 제외한 Array, Map, Set 등의 객체 타입을 순회할 수 있다. (추가로 String도 가능하다. 문자열로 이루어진 배열로 보기 때문) forEach와는 다르게 break, continue, 그리고 return 구문과 함께 사용할 수 있다. for-of문은 어떤 메소드를 반복 호출하는 방식으로 동작한다. Array, Map, Set 등의 객체들은 공통적으로 이터레이터(iterator) 메소드를 제공한다. 일반 객체는 이터레이터 메..

→2021.09.04

티스토리툴바