split two children 사내에서 두 컴포넌트를 서로 resizable 할 수 있는 기능을 구현한 적이 있습니다. 당시 React 사용 초창기였기 때문에 어렵게 구현은 했지만 몇 가지 한계점이 있었습니다. > * children이 2개일 때 한정 방향은 row 방향 한정 주어진 기능을 구현은 했지만 확장성이나 사용성이 거의 없음을 알 수 있습니다. 당시 경험을 떠올리며 현재 개발하려는 convi split panel의 목표를 설정했습니다. > * multi children props로 방향 설정 min/max size 설정 initial size 설정 resizer 만약 split할 컴포넌트가 3개가 있다면 resizer는 2개가 필요합니다. 그럼 다음과 같은 공식이 성립합니다. ![](https://velog.velcdn.com/images/0709/post/24f16a3a-d1b1-40ea-901d-15c85687a5f4/image.png

Class형 컴포넌트 VS 함수형 컴포넌트 React에서 컴포넌트를 선언하는 방법은 Class 방식과 함수형 방식 두 가지가 있습니다. Class형 컴포넌트 먼저 Class형 컴포넌트의 작성 방식에 대해 알아보겠습니다. 해당 코드를 봤을 때 class형 컴포넌트의 문제점을 확인할 수 있습니다. 먼저 기본적으로 반드시 작성해줘야 하는 보일러 플레이트 코드가 존재합니다. 반드시 React의 Component 클래스를 상속받아야 하고 생성자에서 super(props)를 호출 해야 합니다. 개발자 입장에서 이런 코드를 직접 작성해줘야 하는 것이 찝찝합니다. 또한 state나 props 등의 내부 속성에 접근 시 this로 접근해야만 합니다. this를 계속 붙여줘야 한다는 것 자체도 불편하지만 자바스크립트에서 this는 조금 특별합니다. 런타임에 this의 scope가 결정되기 때문에 때에 따라 this가 가리키는 것이 달라질 수 있어서 binding을 해 줘야

Scrolling tab header의 전체 width를 넘어가면 tab header element는 어떻게 표현해야 할까에 대한 고민입니다. 단순히 생각하면 scroll bar를 생성하여 출력하면 되겠지만 기본 스크롤바는 보기 좋지도 않고 tab header의 height도 변경되어서 마음에 들지 않았습니다. 그래서 scroll bar를 생성하지 않고 scroll button으로 scrolling을 제어 하려고 합니다. 언제 scroll button이 생겨야 할까? scroll bar가 생성될 때 scroll button을 생성하면 됩니다. 그럼 scroll bar는 언제 생성되냐고 했을 때 clientWidth가 scrollWidth 작거나 같을때로 답할 수 있겠습니다. > clientWidth : scrollbar를 포함하지 않은 width scrollWidth : scrollbar를 포함한 width clientWidth와 scrollWidth는 overfl

배포 Tab과 Modal을 개발한 상태에서 npm 배포를 해보려 합니다. 처음 해보는 부분이다 보니 서칭과 사수 분의 도움을 받아 진행하긴 했지만 계속 발생하는 알 수 없는 오류 때문에 힘든 과정이었던 것 같습니다. 혹시나 저와 같은 실수를 하지 않으시길 바라면서 시작하겠습니다. 시작 전에 관련 블로그 게시글 하나 알려드립니다. 여러 블로그를 봤지만 이 분만큼 깔끔하고 논리정연하게 정리 해주신 분이 없었습니다! > HeropyTech 블로그 - Typescript npm 배포하기 1. 폴더 구조 정립하기 배포 전 폴더 구조를 확실히 정리할 필요가 있겠습니다. 위에 소개한 게시글에 가보시면 다음과 같은 폴더 구조를 추천해주십니다. ![image](https://velog.velcdn.com/images/

Draggable Tab 크롬의 탭을 드래그해서 이동 시켜 보면 header의 위치가 자유롭게 이동되는 것을 확인할 수 있습니다. 이러한 Drag 기능을 Tab에 넣으려고 합니다. 쉽지는 않아 보입니다. 단계별로 차근차근 개발 해보겠습니다. Tab Elements의 Ref값을 저장하자 Tab을 이동 시키는 것은 런타임에 사용자가 동작 시키는 것이기 때문에 DOM에 직접 접근해서 위치를 파악하고 이동시켜야 하는 위치라면 이동시키는 방식으로 접근해야 합니다. 접근해야 할 DOM은 tab header element'들' 입니다. 여러 개의 tab header에 대한 ref 값을 저장할 것이기 때문에 배열 형태가 되어야 겠습니다. 다음과 같이 설정하면 refs.current 배열에는 header e

Tab Element의 출력 현재 선택된 Tab에 대한 Tab Element를 출력하는 방식에 대해서도 Tab은 많이 달라질 수 있습니다. 현재 구현 해놓은 방식은 다음과 같습니다. Tab의 하위 컴포넌트로 주어진 TabElements 배열에서 선택된 탭의 index 컴포넌트'만' DOM에 렌더링 됩니다. 선택되지 않은 탭의 컴포넌트들은 DOM에 렌더링 되지 않습니다. 해당 방식에는 문제점이 존재합니다. SQL1 탭에서 작업을 한 후 SQL2 탭으로 넘어가면 SQL1 탭에서 작업한 내용은 사라지게 됩니다. DOM Tree에 새로 렌더링 되기 때문입니다. 하지만 일반적으로 에디터 프로그램을 사용할 때 탭을 한번 이동했다고 작업 내용이 모두 사라지는 것은 사용자 입장에서 억울합니다. 이럴

untitled-n tab tab을 생성할 때 아직 title이 정해지지 않았다고 해서 untitled-{인덱스 number} 형태로 title을 정해주고 싶습니다. 생성만 한다면 걱정할 것 없지만 삭제와 생성이 번갈아 발생할 수 있기 때문에 해당 index를 구하는 것이 조금 까다롭습니다. 해당 부분을 해결하기 위해 고민한 이야기를 하려고 합니다. 개발 tab을 추가할 때 우리는 onAdd 메소드를 props로 넘겨주기로 했으므로 onAdd props를 중점적으로 보시면 되겠습니다. Untitled의 index를 다음과 같이 구하고 있습니다. 현재 남아 있는 탭의 index 중 가장 큰 index 다음 값으로 세팅 합니다. 단계별로 다시 말씀드리면 > 1. title이 Untitled-{숫자} 형식의 정규식과 일치하는 tab들만 filtering 합니다. > 2. -을 delimiter로 하여 두 번째 원소 즉, index만 뽑아냅니다. > 3.

Tab Tab은 정말 많이 사용되는 컴포넌트입니다. 처음에는 Mui와 같은 라이브러리를 사용했지만 여러가지 제약사항들이 존재했습니다. > * Tab 삭제 기능 X > * Tab Title 수정 기능 X > * Default Tab 생성 기능 X 분명 기본적으로 있어야할 것 같은 기능인데 존재하지 않습니다. 왜 없을까 고민해보면 tab elements 즉, tab 아래에 표시될 contents들을 관리하는 로직을 tab 컴포넌트 안에서 하기가 애매하다는 점 때문입니다. tab을 개발할 때 가장 중요한 점도 이 tab elements들을 어디서 어떻게 관리하냐 입니다. tab에 들어갈 tab elements들은 분명 부모 컴포넌트에서 attribute 형태로 제공해줄 것인데 tab 컴포넌트 내부에서

Convi 요즘 mui나 tui, ant design 등 많은 ui 라이브러리들이 존재합니다. 회사 업무 중에도 mui를 사용해봤고 청첩장 프로젝트를 진행할 때에도 ant design을 사용해 봤습니다. 이들은 물론 편리하고 기능도 다양하지만 프로젝트의 규모가 커질수록 사용중인 ui 라이브러리의 성능 문제가 대두 됐습니다. 그래서 회사 측에서도 현재 자체 ui 컴포넌트를 개발하여 교체하는 작업을 진행 중입니다. ui 라이브러리는 편리하지만 완전히 우리에게 fit 하지 않습니다. 세계에 존재하는 수많은 개발자들의 의견을 반영해서 개발되어 있기 때문에 나에게는 필요없는 기능도 존재할 수 있습니다. 그래서 최대한 많은 개발자들에게 fit한 ui 컴포넌트를 만들어보자 라는 생각을 하게 되었습니다. 예를 들어, Modal 창 같은 경우 보통 맨 위에 title bar가 존재합니다. 하지만 Mui Modal 같은 경우 title bar는 modal contents에 직접 작성해야 합

오늘은 Project Setting 과정에 대해 정리하려 합니다. 생성 먼저 저는 react와 typescript를 사용할 것이기 때문에 아래의 cli로 프로젝트를 생성했습니다. ESLint & Prettier 이제 Code convention을 맞추기 위해 Eslint와 Prettier를 세팅하려 합니다. 개인 프로젝트이긴 하지만 저도 모르게 Code convention이 달라지는 경우가 존재해서 간단한 convention 정도는 맞추려 합니다. Eslint와 Prettier의 설치에 대해서는 생략하고 바로 적용하는 부분부터 알아보겠습니다. 그 전에 저는 Eslint와 Prettier의 차이가 궁금합니다. ESLINT 함수를 정의할 때 function 키워드를 사용하거나 arrow function으로 정의할 수 있습니다. 이런 '함수 정의 방식' 같은 코딩 스타일을 eslint에서는 통일 시켜 줄 수 있습니다. 또한 콜백 함수를 전달할 때에도

setState의 동작 배경 SQLExecute한 결과의 ResultSet을 출력하는 로직 작성 개발 3 개의 쿼리를 작성하고 실행하면 3 개의 response가 3개의 결과탭으로 나타나야 합니다. 해당 쿼리들은 수행 시간이 오래 걸리지 않습니다. 문제도 발생하지 않습니다. 다만 쿼리 수행 시간이 오래 걸리는 쿼리에 대해서는 이야기가 달라집니다.