react4 React SunEditor SunEditor 다양한 라이브러리들 중에서 쉽고 빠르게 가져다 쓸수 있는 라이브러리가 필요했다. slate-react, tiptap, draft.js 등등 많은 텍스트 에디터들이 존재하는데, 사내 홈페이지 개발기간은 짧고 admin페이지에 들어갈 에디터라 어렵게 구현할 필요는 없어서 최대한 적용하기 쉽고 간편한 에디터를 찾았다. 그러다가 나온 sunEidtor를 적용해서 프로젝트를 진행했다. 설치방법 yarn add -D suneditor suneditor-react 를 이용해서 설치를 진행해주면 된다. 사용방법 import React, { useRef, useEffect, useState } from "react"; import SunEditor from 'suneditor-react'; import.. 2023. 1. 16. CSS 공부 방법 정리 대학교 학부때 C언어, C++, Java 등의 언어를 사용한 backend 개발을 하던 내가 첫 회사에 취업하고 web(html, css, javascript)등의 front-end을 배우고 Spring boot를 이용해서 back-end로 RestAPI를 개발하면서 계속 뭔가 부족함을 느꼈다. 첫 회사에서 계속되는 무리한 일정 요구, 더 잘해야 한다는 내 자신에 대한 채찍질, 나를 이끌어줄 사수의 부재 등등 이런 생활이 반복되면서 번아웃이 심하게 왔고 퇴사를 하고 몇 일 ~ 몇 주간 개발자(프로그래머)라는 직업에 대해 생각하고 내가 싫었던건 그 회사의 시스템이였지 개발이 아니라는걸 느끼고 또 몇몇 멘토링의 결과 더욱 성장하는 한명의 개발자가 되고 싶은 욕심이 강해졌다. 퇴사 하기 전의 회사에서는 SI회.. 2023. 1. 12. SummerNote 사용법 정리 SummerNote란? Summernote는 웹 에디터로 수많은 웹 에디터 중 오픈소스이고, HTML5 기반의 깔끔한 UI와 여러 기능이 구현되어 있다. 사용법 summernote 공식 홈페이지 공식 홈페이지에서 Get start를 클릭하면 사용방법이 나온다. 하지만 React에서 사용하는 방법은 잘 나와 있지 않은 것 같아서 공부한 내용을 정리해본다. 의존성(dependencies) 설치 CRA를 이용해서 만든 프로젝트를 이용했고, Typescript를 사용했다. 또한 CRA는 react-scripts 버전 5.0.1을 사용했다. yarn add -D jquery @types/summernote react-summernote 를 설치 해줬다. TextEditor.tsx source import Reac.. 2023. 1. 12. React.js React는 사용자 인터페이스를 구축하기위한 라이브러리 React는 DOM을 추상화하여 더 간단한 프로그래밍 모델과 더 나은 성능을 제공 React는 Node를 사용하여 서버에서 렌더링 할 수도 있으며 React Native를 사용하여 네이티브 앱을 구동 할 수 있습니다. React는 단방향 리액티브 데이터 흐름을 구현하여 상용구를 줄이고 기존 데이터 바인딩보다 추론하기 쉬움 기능 JSX -JSX는 JavaScript 구문 확장입니다. React 개발에서 JSX를 사용할 필요는 없지만 권장됩니다. Components -React는 구성 요소에 관한 것입니다. 모든 것을 구성 요소로 생각해야합니다. 이렇게하면 대규모 프로젝트에서 작업 할 때 코드를 유지하는 데 도움이됩니다. 단방향 데이터 흐름 및 Flux.. 2021. 4. 19. 이전 1 다음 반응형
