프로그래밍 일지

데이터를 표현하는 방식은 가장 간편한건 숫자로 직접 보여주는 거다. 하지만 표형태로(엑셀과 같이) 카테고리별로 숫자만 보여주면, 데이터간의 비교나 추이가 한 눈에 보기 쉽지 않다. 데이터를 집계하고 가공해서 이해하기 쉬운 방식으로 표현하여 시각화하는 것이 점점 중요한 시대가 되고 있다 생각한다. 복잡한 데이터를 하나의 뷰로 한번에 표현될 수 있도록 차트의 종류나 데이터분석툴도 다양해지고 있다. 무료로 제공되는 라이브러리도 그 수준이 많이 높아지고 있고, 간단한 설정 몇개로도 굉장히 심플하고 멋진 차트를 완성 할 수 있다. 그 중 chart.js 를 가지고 개발을 해봤다. chart.js 차트를 하나 만들고 싶었다. 수강료합계와 학원 학생수의 추이를 보기위해, 두개의 정보를 각각의 라인형식의 차트와, 바(..

웹으로 날짜/시간 등을 입력받을 때, 텍스트로 일일이 입력받는게 아니라, 달력 컴포넌트를 이용하거나 시간 선택 컴포넌트를 이용해서 입력편의성을 높이게 된다. 처음에는 그냥 텍스트로 입력받도록 내비두었었는데, 오타도 있고 편의성이 떨어지다보니 구글링해서 오픈소스를 하나 선택해서 공부하게 되었다. flatpickr Introduction Introduction flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event sy..

웹사이트를 개발하다보면, 회원목록, 일정내역 등 리스트 형태를 보여주는 화면이 적지 않음을 알 수 있다. 간단한 정보라면 html - table 태그로 하면 되지만, 건수가 많으면 페이징 처리도 해야 하고, 컬럼별로 내림차순/올림차순 정렬도 해야하고, 데이터 형식에 맞춰서 금액/날짜 등 포맷으로 변경해야 한다면, 잘 만들어진 그리드 라이브러리를 가져다 사용하는게 속편하다. 나 역시도 아래 화면처럼 회원목록을 보여줘야 하는 경우가 있었다. 검색기능, 총건수, 페이지당건수, 이전/다음 페이지 이동, 컬럼별 정렬, 필드 포맷, 왼쪽/가운데/오른쪽 정렬 등을 제공하는 datatables 를 사용하게 되었다. DataTables | Table plug-in for jQuery DataTables Table plu..

티스토리를 떠나 github page 로 블로그 사이트를 운영하려 했었는데, 몇 가지 찜찜한 문제가 생겼다. github page로 웹사이트를 배포하려면 github public 레파지토리에 올려야 하고, 해당 리소스가 모든 사람들에게 오픈되어야 하는 문제가 있었다. 포스팅되는 글의 markdown 파일부터 이미지파일까지, git clone 한 방으로 내려받을 수 있게 되도록 운영하는게 맞지는 않아보였다. 물론 private 하게 github page 를 운영할 수 있도록 돈을 사용하면 되지만 지극히 개인적인 블로그였기에 불필요했다. Netlify 가 그런 문제를 모두 해결해주었다. Netlify는 웹 애플리케이션 및 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공하고 있다. 정적인 웹사이..

나눔고딕체는 깔끔한 한글체로 window 에서 많이들 사용하고 있으나, 기본적으로 자간이 약간 넓어서.. 띄워쓰기 해놓아도 이게 스페이스가 있는건지 없는건지.. 붙어있는 듯이 보여 가독성이 떨어져 보인다. 블로그를 하면서 조금 신경이 쓰이는게 폰트도 있지만, 글자간격 혹은 줄간격이다. 별거 아닌듯 하면서 아주 애매하게 신경쓰이는 이것은. 손댈수록 오묘하면서 정답이 없어보인다. 조금씩 바꿔가며 테스트해봤다. 글자크기는 15px 나눔고딕. letter-spacing:-1px; word-spacing:0px; 글자 간격을 확인하기 위한 텍스트 입니다. letter-spacing:0px; word-spacing:0px; 글자 간격을 확인하기 위한 텍스트 입니다. letter-spacing:0px; word-sp..

나름 살아오며 겪은 일을 리뷰하는 평범한 블로그였지만, 여기에 쏟은 시간과 정성은 나름 갸륵하기까지 하다. 나름 애정도 많고, 어느덧 3년이란 시간이 다가오고 있다. 처음에 1단짜리 블로그가 심플하니 이뻐보여 선택한 스킨을 여전히 사용하고 있었다. 약간 빈티지 느낌도 있고.. 평범하지 않아 선택한 스킨. 이젠 많이 지겨워졌다. 손을 볼 시간도 엄두도 안나고, 레이아웃 바꾸는건 더 싫고.. 배경을 싹다 걷어내기로 했다. 별 꾸미지 않은 듯한 심플한 배경이미지 없는 그냥 하얀 블로그.그게 오늘 작업의 포인트 였다. 간단하다 배경 다 주석처리다. /* 주석처리한 소스 */ background-image: url("images/bg_body.gif"); background: transparent url("ima..

블로그의 폰트를 다시 정비할 필요가 있어보여서, 폰트와 크기를 좀 가독성 있게 수정하려 한다. 사파리에서는 애플 기본서체, 나머지는 없으면.. 맑은고딕체로 되도록, 변경 했다. 물론 제목, 메뉴등의 폰트말고, 본문의 폰트만 변경되도록 css 소스를 잘고치는게 포인트. 변경전.font-family:/*@post-body-font-family=*/dotum/*@*/; 변경후font-family:/*@post-body-font-family=*/Helvetica,"malgun gothic",dotum/*@*/; 최종본.entry .desc { overflow:hidden; width:/*@post-width=*/728px/*@*/; margin-bottom:15px; font-family:/*@post-body..

ASCII 컴퓨터가 데이터를 처리할 때 사용하는 기본단위는 8비트 이다. 당연히 문자를 표현하려면 8비트로 표현 가능한 256개의 숫자들을 문자와 매핑하게 된다. 대표적인게 아스키 코드이다. 아스키(ASCII, American Standard Code for Information Interchange, 미국 정보 교환 표준 부호)는 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 아스키는 컴퓨터와 통신 장비를 비롯한 문자를 사용하는 많은 장치에서 사용되며, 대부분의 문자 인코딩이 아스키에 기초를 두고 있다.아스키는 1967년에 표준으로 제정되어 1986년에 마지막으로 개정되었다. 아스키는 7비트 인코딩으로, 33개의 출력 불가능한 제어 문자들과 공백을 비롯한 95개의 출력 가능한 문자들로 이루어진다. ..