본문 바로가기
반응형

라이브러리3

리액트에 대한 이해, 자바스크립트와 비교 리액트의 모듈화 기존의 html, css, javascript. 구현해야 하는 기능이 많아지면 script.js 파일 안에 모든 코드를 넣기가 힘들어진다. 이때 여러 개의 css, js 파일로 분리하게 된다. 결국 어떤 방식으로든 분리를 해야한다. 분리할 때, 엘리먼트, 엘리먼트들을 꾸미기 위한 style, script를 묶는 컴포넌트를 만들면 가독성이 좋아질 것이다. 이것이 리액트의 모듈화 아이디어이다. 프론트엔드에서 하는 제어의 대부분은 '상태값이 변하면, UI가 변한다.'는 것이다. 위 이미지를 html, css, javascript로 만든 코드는 아래와 같다. script 태그를 보면 document에 접근하여 새로운 태그를 만들기도 하고 이벤트를 연결하기도 한다. 자바스크립트로 구현했을 때는 상.. 2022. 8. 11.
Nuxt Toast Editor, 유튜브 플러그인 구현하기(feat. wysiwyg) TOAST UI를 선택한 이유, 나한테 주어진 프로젝트에서 Editor를 구현해야 했다. Vue 기반의 Nuxt 프레임워크와 잘 어울리는 에디터를 찾아봤다. 개발자가 아닌 사람들이 주로 사용하기에 마크다운이 아닌 위지윅 방식의 에디터를 찾아보게 됐다. 그 중에서 tip-tap이 떠오르는 에디터라고 하나 문제는 import를 했을 때 기본적으로 제공하는 플러그인을 스스로 만들어야 했다. 아래 사진은 대표 홈페이지에 들어간 예시들인데 이를 바로 쓸 수 없고 직접 구현해야했다. 예시 자료도 있지만 플러그인들의 이미지는 제공하지 않고 텍스트로 된 버튼으로 보여주었다. 그러다가 찾아보게 된 TOAST Editor, 기본으로 제공되는 플러그인들이 갖춰져있었고 한국에서 만들어졌기에 조금 더 정보들을 쉽고 빠르게 얻어.. 2022. 6. 23.
AG GRID와 Toast editor 라이브러리 일주일 회고 회사에서 AG GRID와 Toast editor 라이브러리를 사용하고 있다. 이번주는 주로 라이브러리 내에서 몇몇 버그들이 있는 것들을 수정과 기능들을 추가하는 업무들이 있었다. 프론트 개발자로 사내 데이터가 많은데 백엔드와 DB 쪽에서 데이터를 가공해주면 그것을 클라이언트에 잘 보여주도록 하는 것이 내 역할이다. AG GRID는 이미 회사에서 사용하고 있어 유지/보수를 주로 했고 Toast editor는 내게 주어진 프로젝트로 관리자페이지를 만들면서 처음부터 만들었다. AG-GRID 데이터 그리드 라이브러리 AG-GRID는 데이터를 잘 보여줄 수 있도록 보여주는 라이브러리 중 하나다. 자바스크립트부터 리액트, 앵귤러, 뷰 에도 적용할 수 있다. 서버사이드 렌더링과 데이터 엑셀 추출 등 다양.. 2022. 6. 19.
반응형

티스토리툴바