본문 바로가기

전체 글91

ESLint 특정 부분 비활성화 시키기! HTML 템플릿은 제외시켜줘! ESLint를 사용하다보면 자동 정렬이 불편한 경우가 있다. 특히나 HTML 템플릿을 사용하는 경우에는 계층구조로 봐야하는데 자동으로 정렬 시켜버린다. 그래서 내가 사용하는 방식은 해당 HTML 템플릿만 ESLint를 비활성화 시키는 방식. 비활성화 시키고 끝나는 지점에서는 다시 활성화 시켜준다. /* eslint-disable */ TEST /* eslint-enable */ 2018. 8. 21.
Form Panel 유효성 검사 안보이는 항목은 제외 시켜줘! Form Panel 내에서 컴포넌트들을 동적으로 숨김/보임 상태로 UI가 구성되어 있을 경우, form.isValid() 함수 사용 시 안보이는 컴포넌트도 유효성 검사에 실패하게 되어있다. 내부 소스를 살펴보게 되면 컴포넌트가 disabled 상태일 경우에는 무조건 유효성 검사 성공으로 처리가 되어진다. 이 부분을 이용해서 hidden 상태 일경우 disabled를 true로 바꿔주는 bind를 사용하면 쉽게 구현 가능하다. 2018. 8. 21.
Tab bar는 남겨두고 하위 패널만 접고 싶은데? 우선 config상에는 해당 기능이 없다. 그럼 어디? 직접 구현해야 한다. 그래서 내가 구현한 방향에 대해서만 설명하려고 한다.구현하려는 UX는 "Visual Stuido Code" 에디터의 왼쪽 네비게이션 사이드 바 이다.(다른 탭을 누르면 이동하고 자기자신의 탭을 클릭하면 탭패널이 접힌다.) Tab Click 이벤트 핸들러 필요 Tab Change 이벤트 핸들러 필요 Tab은 사실상 button 컴포넌트를 확장 시킨 컴포넌트, 그러므로 enableToggle config 사용 위의 3가지 사항은 준비사항. Tab Click 자기 자신의 탭만 Collapse/Expand 시키는게 포인트. 즉, 현재 탭에서 다른 탭으로 이동 시에는 현재 탭 값만 변경. Collapse/Expand는 너비 값 조정으로 .. 2018. 8. 21.
시작과 끝이 있는 UI 컴포넌트 집합? 처음부터 안되게! 폼(Form) 형식의 UI를 만들 경우 시작,끝으로 이루어지는 형식의 컴포넌트 집합이 있다. 예를 들면 시작일, 종료일 또는 시작 IP, 끝 IP 위의 예제에 UI를 구성할 경우 시작일은 종료일보다 늦게 오면 안되는 처리가 필요하다. 다양한 처리방법이 있겠지만 일반적으로 생각되는 2가지 방법이 있다. 시작일을 종료일 보다 늦게 선택이 가능한 대신 메시지 박스로 알려주고 선택처리 무효화 "시작일은 종료일 보다 뒤에 설정 할 수 없습니다." 애초에 화면에서 시작일을 종료일보다 뒤에 선택이 불가능하도록 만든다. 나는 주로 2번 선택을 사용한다. 사용자에게 애초에 실수 할 여지를 주지 않는다. 사람마다 UX에 대한 관점이 다를 수 있다. 어떤게 더 편한지는 개인의 주관에 따라 다르지만 나의 생.. 2018. 8. 21.
HTML 렌더링 과정 요약 Load 네트워크를 통해 마크업을 받아온다. DOM Tree 마크업 문자열을 토큰 형태로 잘라서(Tokenizer) 트리를 구축하고 파싱해 DOM Tree 생성 Render Tree 위에서 생성한 DOM Tree는 내용을 담당하고 스타일 시트의 스타일 규칙을 결합해 Render Tree를 구축한다. DOM Tree에는 있지만 화면에는 보이면 안되는 요소들을 필터링한 결과가 Render Tree Layout 위에서 노드의 콘텐츠 및 스타일 적용만 했지 실제로 어디에 배치되는지에 대한 계산은 아직 하지 않았다. 이제 Render Tree의 루트부터 순회하며 위치와 크기를 조정한다. Paint 이제 개별 노드를 화면에 표시, 사용자가 화면을 보기 시작하는 부분 2018. 8. 13.
트리, 리스트 선택 시 스타일 이게 예쁘고 심플! 리스트, 트리를 선택 했을 시 표현하는 방법은 다양하다. 그 중에서 필자가 많이 애용 하는 방법은 윈도우10 스타일 방식이다. CSS 스타일 속성 border-left: 6px solid #4CAF50; // 뒤에 색상은 원하는 대로 출처: https://www.w3schools.com/howto/howto_css_notes.asp 2018. 8. 7.

티스토리툴바