분류 전체보기 썸네일형 리스트형 [javascript] 리액트 같은 UI 라이브러리 개발 3 - 이벤트 처리 개선과 useReducer() 추가 들어가기지금까지는 이벤트를 처리할 때 DOM 속성에 직접 핸들러를 지정하는 방식을 사용했다. 이 방식은 이벤트가 중접 등록되는 것을 방지하기 위할 수 있는 장점이 있지만, 다양한 이벤트 처리를 유연하게 관리하기에는 제약이 많다. 좀 더 확장성 있고 체계적인 이벤트 관리를 위해 addEventListener() 기반의 구조가 더 적합하며, 이벤트 위임(Event Delegation)을 통해 이벤트 시스템을 개선하고자 한다. 또한 기존에는 각 컴포넌트마다 직접 상태를 수정했다. 단순한 상태는 문제 없지만, 상태 로직이 복잡해질수록 코드가 복잡하고 흩어져 있어 유지보수가 어려워진다. 이를 해결하기 위해 상태 관리 로직을 한곳에 관리할 수 있도록 useReducer()를 추가하였다.작성자: http://ospa.. 더보기 [javascript] 리액트 같은 UI 라이브러리 개발 2 - 랜더링 개선과 useState() 추가 들어가기이전에는 가상 DOM을 사용해서 실제 DOM을 생성하여 화면에 출력하는 부분까지 작업하였다. 화면 출력하기 위해 랜더링 작업에 대한 요청을 직접 코딩하여 필요시 매번 호출해야 하는 단점이 있다. 그리고 특정 UI 컴포넌트 작업에서 로컬의 상태를 사용하려면 전역 변수를 사용해야한다. 그렇기 때문에 재사용위해 반복해서 사용할 경우 문제가 발생한다. 이때 필요한 것이 useState()이고 이를 사용해서 상태를 컴포넌트 별로 관리할수 있게할 수 있다. 추가로 값이 변경되는 상태를 감지해서 자동으로 랜더링을 한다.작성자: http://ospace.tistory.com/ (ospace114@empal.com)랜더링 개선이전에 랜더링 작업은 랜더링 함수를 직접 작성해서 호출하는 구조로 되어 있다.functi.. 더보기 [javascript] 리액트 같은 UI 라이브러리 개발 1 - VDOM 만들기 들어가기리액트에서 가상 DOM을 활용한 효율적으로 DOM 관리하는 방법이 사용되고 있다. 평소에 가상 DOM에 대해서 관심있었고 어떻게 구현되는지 궁금했었다. 그러던중 한중일님의 글을 보고 직접 간단하게 구현해보고 정리해보았다. 여기서 만들려는 UI 라이브러리는 순수 브라우저에서 동작하는 라이브러리를 제작하는 목표를 가정하였다.작성자: http://ospace.tistory.com/ (ospace114@empal.com)DOMDOM은 Document Object Model로 웹 문서를 구조화된 모델로 표현하였다. 웹 문서는 다양한 구성요소가 있고 이런 구성 요소를 Node라고 하며 웹 요소를 조작할 수 있는 인터페이스를 제공한다.Node은 DOM에서 모델로 표현되는 구성 요소로 Document, Elem.. 더보기 Rainmeter Skin - ospace 1.10.0 Version 1.10.0Geforce 9800 지원위한 nvidia2 추가 (gpu > nvidia > nvidia2)GPU에 메모리 사용률과 할당량 정보 추가Download참고ospace 스킨 설치 사용 방법Installing Rainmeter 더보기 직접 캐러셀 스크롤(Carousel Scroll) 구현 들어가기이전에는 최대한 CSS를 사용해서 캐러셀 스크롤을 기능을 만들었다면 이번에는 직업 스크롤 기능 자체를 구현해보았다. 이전 구현에는 동작 자체는 문제가 없지만 스크롤링 동작에서 부드럽지 못한 부분이 있었는데 이 부분을 직접 구현해서 해결해보았다. 조금 복잡할지는 모르지만 최대한 간단하게 작성하도록 노력하였다.작성자: http://ospace.tistory.com/ (ospace114@empal.com)기본 HTML 구성먼저, 이전에 구현했던 부분을 가져왔고 필요없는 곳을 제거했다. 먼저 HTML 페이지는 크게 변경되는 부분이 없이 그대로 사용했다. 단순히 목록 태그를 사용해서 10개 아이템을 추가했다. Item 01 Item 02 Item 03 Item 04 Item .. 더보기 간단한 캐러셀 스크롤(Carousel Scroll) 만들기 들어가기캐러셀(Carousel)은 보통 무한으로 스크롤하는 UI 형태이다. 다른 말로는 무한 스크롤(Infinite Scroll)이라고 한다. 스크롤 형태는 수직 또는 수평에서 일정 개수의 아이템이 스크롤되면 끝단에서 처음으로 또는 처음에서 끝단으로 계속적으로 이어지면서 무한으로 스크롤되는 형태를 말한다. 간단한 스크롤 예를 살펴보고 본격적인 캐러셀 UI를 구현하는 방향으로 차근차근 살펴보자.작성자: http://ospace.tistory.com/ (ospace114@empal.com)간단한 스크롤캐러셀을 구현하기 전에 간단한 스크롤 형태 예제를 만들어보자. 여기서 사용할 예제는 수직방향으로 스크롤하는 리스트 형태이다. 단순 아이템 목록으로 전형적인 스크롤 예제이다.이를 HTML로 작성하면 다음과 같다... 더보기 MathJax MathJax 사용하기수학 수식을 이쁘게 표시하기 위한 도구이다. 다양한 형태로 연동 가능하지만 여기서는 웹으로 통합하는 방법을 알아보자.작성자: http://ospace.tistory.com/ (ospace114@empal.com)환경구성먼저 아래 HTML 코드를 스킨 편집을 통해서 적당한 위치에 입력한다.간단한 예MathJax은 Tex, MathML, AsciiMath 입력을 지원한다. 또한 기본 출력은 HTML이지만 SVG도 지원한다.해당 사이트에서 제공하는 간단한 예제이다.When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are \\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\\.. 더보기 수학기초 9 - 정보이론 들어가기정보이론은 1920년 Harry Nyquist와 Hartley에 의해서 만들어졌고 Claude Shannon에서 의해서 더 발전되었다. 정보이론은 정보의 불확실성을 수치화하고 정보를 손실없이 효율적으로 표현하고 채널을 통해 전달하는 방법을 연구하는 분야이다. 이 분야는 데이터 압축, 통신, 암호화, 머신러닝, 통계등에 여러 분야에 활용되고 있다. 여기서는 인공지능 기준으로 수학의 연속성으로 간주해서 단순 참고용으로 정리했다.작성자: http://ospace.tistory.com/ (ospace114@empal.com)정보량정보량(Quantity of information)이란 놀람의 정도이다. 잘 알고 있어서 놀랄게 없다면 정보량이 적고, 경험하지 못한 놀람을 많이 준다면 정보량이 크다. 다르게 .. 더보기 이전 1 2 3 4 ··· 53 다음
