코드 땜장이

 생각보다 inspect fallback을 사용해 본 사람은 없을 것 같다. 뭐 일반적인 개발 중에는 필요없을 것이다.  inspect fallback은 현재 디버깅을 하기 위하여, 실행한 브라우저가 디버깅하려고 하는 대상의 디바이스의 버전보다 메이저 버전이 낮거나, 같을 때, 노출이 된다. fallback의 뜻이, 대체, 되돌아 감 이런 뜻인데, 대충 느낌대로만 작성해보면, inspect fallback(해당 기기로 검사?)정도가 아닌가 싶다.  내 생각에는 현재의 디버깅을 시도하는 브라우저의 버전이 낮은 경우, 브라우저의 기본 함수들이, 디버깅 대상의 함수들과 호환이 안되는 경우도 있을 수 있어서 그런것 같다. 예를 들어, 극단적으로 버전이 다른 경우, 있지 않을까 싶다.  반대로, 현재의 브라우저 버전이 높은 경우에는 현재의 브라우저를 써도 되는게, javascript는 함수가 제거 되지도 않고, deprecated로 되면서 하위 호환성을 계속 맞추어주지 않나?   만약, 현재의 브라우저의 인터넷망과 연결되어있는 기기의 인터넷망이 다른경우에는 inspect를 사용 하는 경우, 404 NOT FOUND화면을 보게 될 것이다.    그런 상황이 왔을 때, 우리는 inspect fallback을 사용할 수 밖에 없게 된다. 이게 문제다.  자 그런데, 만약 inspect fallback이 안보이는 상황이어 봐라. 끔찍하지 않은가? 나도 처음에는 당황했다. 이 버전에는 inspect fallback이 없나 하고 말이다.  웹뷰의 버전은 일반적인 크롬 데스크톱앱보다 업데이트가 늦다.... 뭐 물론, 시간이 해결해 주긴 할 것이다. 안드로이드 폰까지 내부망에 있는 것이 아니라면 말이다.  여기서 선택은 두가지이다. 크롬 브라우저를 재설치하여, 다운그레이드 하는 것이다. 뭐, 내부망이라면 스탠드얼론을 사용할테니, 뭐 낮은 버전을 찾아서 설치하면 되겠지..  하지만...

 지난 주제로 센스리더를 사용하는 방법에 대해서 공유를 했었다. 다들 뭐, html4와 html5의 가장 큰 차이점이라고 물어보면, 시맨틱 태그의 추가라고, 이야기들을 많이 할 것이다. 하지만, 뭐... 있다고 해서 뭐 다 잘 적용을 하고 있나? 라고 물어보면, 글쎄... 라는 생각이 많이 든다.  다들 div태그에 css입혀서 디자인을 적용 한 적이 많지 않은가??? 참고로 나도, 뭐 2 ~ 3년차 때까지만, button, a 태그들을 사용해서 퍼블리싱을 진행 하였지, 내가 만들고 있던 서비스에는 굳이.... 라는 생각이 많았기도 했고, 기본적으로 제공해주는 button의 디자인이 디자이너가 디자인 해준 디자인과 너무 차이가 있어서 div에서 시작하는 경우가 많았다.  시맨틱태그 시맨틱태그는 무엇일까? 시맨틱은 해석을 하자면, "의미론" 정도로 해석을 하면된다. 즉 의미가 있는 태그, 라고 생각하면 된다.  div는 무슨 뜻일까? Division의 약자로, 그냥 부, 부서로 해석 하면 되지만, 그냥 나누어진 영역이라고 해석 하면 된다. 즉 뜻이 아무것도 없다.  자 간단하게 보자. 위의 영역을 조금만 단순화 해보자. 녹색영역은 헤더, 빨간색영역은 네비게이션, 노락색들은 블로그포스팅들 태그로 보자면, <header> <nav></nav> </header> <article></article> <article></article> <article></article> <article></article> ......  뭐 이정도 일 것이다. 이 내용은 추후에 좀 더 다루어보자. 이런 것을 해야하는 이유는 SEO때문이다. 검색엔진에게 이 안의 내용은 어떤 형태의 내용을 다루는 영역이야 라고 알릴 뿐... 실제 사용할 때, 뭔가 다른표현을 해주는 것은 아니다.  역할  다시...

 시각 장애인들은 어떻게 웹사이트를 볼까? 저시력자의 경우 화면을 확대하거나, 돋보기를 사용하는 것 만으로, 사용이 가능 할 것이다. 색약의 경우 접근성 고대비 테마를 사용할 것이다. 그러면, 전맹에 가깝거나 전맹인경우는 어떻게 될까?  그때, 사용할 수 있는 것이 센스리더이다. 간단하게 말하면, 화면에 노출 되어있는 글자들을 읽어주는 프로그램이라고 보면 된다. 실제, 시각 장애인이 프로그램을 사용 하는 방법을 보자. https://www.youtube.com/watch?v=MbBwacqukQ0 https://www.youtube.com/watch?v=H7fuoJ7Pg5M  자, 당연하게도, 우리 개발자들도 저렇게 하나하나 들으면서 개발을 할 필요는 없다. 자 천천히 따라오도록 하자.  Nvda  Nvda는 오픈소스 스크린리더로서 무료로 사용 가능하며 다국어를 지원합니다. 일단 이것만으로 사용할 가치는 충분하다. 실제 시각장애인이 사용하기에는 품질이 낮다고 하더라도, 개발하는 것만으로는 문제 없을 것이라 생각한다. https://www.nvaccess.org/download/   설치 프로그램을 실행 하는 순간 스피커에서 소리가 엄청 나올것이다.  이대로 사용할 것이라면, 계속 실행을 눌러도 되지만, 나는 앞으로도 계속 이 프로그램을 사용하려고 하니, 컴퓨터에 NVDA 설치를 진행 하겠다.  설치를 하겠다고 한다면, 위처럼 체크를 전부 푸는 것을 추천 한다. 우리는 그냥 필요할 때, 프로그램만 실행 하면 된다. 자 그러면 트레이에서 NVDA를 찾아서 위의 설정들을 진행 해주자.  자 그러면, 이제 우리의 귀를 괴롭히던, 내용들을 바로, 볼수 있도록 출력을 진행 해준다. 그리고 소리를 꺼주면된다.  TalkBack TalkBack은 안드로이드에서 사용 할 수 있는 센스 리더이다. 윈도우와 달리 기본적으로 제공하는 서비스로 안드로이드 설정에서 접근성을 검색하면 아래와 같은 창을...

 개발을 하다보면, 기획 및 디자인에, 레이어 팝업을 사용하는 디자인이 꽤나 많다. 자 생각해보자. 그러면 우리 개발자들은 레이어 팝업을 만들기 위해서 개발을 엄청 해왔다. 하지만 말이다. 뭐 특정 라이브러리를 사용하지 않는 이상, 꽤나 귀찮은 일이다.  팝업을 만드는 경우에, 크롬, 엣지, 사파리 등등을 다 지원해야 하기때문에, css를 까닥 잘못했다가는 제대로 만들어지지 않는 경우가 있다.  그것 뿐인가? 포커스를 생각해보자. 일반사용자가 tab을 이용하여, 하단에 노출되어있는 엘리먼트에 접근을 하는 것을 막기 위하여, click및 focus를 막기 위한, inert속성을 적용 해야하며, 해당 팝업이 닫혔을 때, 포커스를 되돌려 주어야 한다. 스크롤 조작때문이라도, 이렇게 진행 하는 것이 맞다.  아주 귀찮은 일이며, 매 프로젝트 마다 해야한다. 이러한 귀찮음을 한번에 해결해 줄 dialog라는 태그가 있다! 당연하게도 ie는 안되니, polyfill을 찾아야 한다.  dialog  자 간단하게, 사용법 먼저 확인하자.  간단하게, HTMLDialogElement showModal, show, close 함수를 제공한다. 위에서 확인하면 알듯이, showModal은 전체화면을 덮으며, 최상위에 노출이 되고, show는 노출은 되나, 최상위는 아니다. showModal이후에 show를 호출하는 행위는 해서는 안된다.  close는 당연하게도 팝업을 닫는 행위를 진행한다.  close이벤트 와 cancel이벤트를 제공을 하며, cancel의 경우 esc를 눌렀을 때의 이벤트며, 해당 창을 닫으며, close 발생 시키기에, 해당 기능이 필요 없다면, preventDefault를 사용하면 된다.  form method="dialog"  우리가 팝업을 왜 쓰나? 알림용도로만 사용 하는가? 그렇지 않다. 사용자의 입력을 받을때에도 사용 한다.  그거...

 현재 특정 업체를 위하여, 웹 접근성 심사 기준을 통과 할 수 있도록, 퍼블리싱을 진행 중이다. 해당 퍼블리싱을 진행 중에, 필요했었던, 혹은 필요한 내용들을 진행 하고자 한다. 일단 장애에 대한 분류를 해보자. 시각장애     전맹  전맹인 경우, 센스리더 (nvda, talkback)등을 이용한 탐색을 진행 할 것이다.     저시력  저시력자의 경우 글자크기를 확대하거나 창을 확대하여 탐색을 진행 할 것이다.     색맹  색맹의 경우 일반적인 탐색은 가능하나, 색상 차이는 확인 할 수 없고 채도로만 컨텐츠 구분이 가능하다. 즉 색상을 고대비를 이용해야 한다. 청각장애  소리를 듣지 못하므로, 동영상을 볼 때, 자막만 사용 가능하다. 지체장애      상지장애  손을 사용할 수 없는 경우이다. 핀치 줌, 아웃 등 두 손가락 이상 사용 하는 액션을 불가능이라고 봐야 한다.      기타  움직임이 어려운 경우 이다. 즉, 어떠한 액션이 있었을 때, 즉각적인 반응을 할 수 없다. 언어장애  복잡한 용어는 이해가 불가능 하다. 약관과 같이 어려운 용어를 사용해야 할 때, 쉬운 용어로 변경 해주는 등 해당 내용이 필요 하다. 웹 개발자가 신경써야 하는 부분?  사실은 전부 신경 써야 하는 부분이다.  일단, 디자이너, 기획자, 개발자 이렇게 세명이 진행한다고 해보자.  시각장애 - 전맹 *  가장 다루기 까다로운 타입으로 전맹의 경우 센스리더를 이용하며, 센스리더를 이용 한다. 이 때, 주의 할 점은 해당 상황에 적절한 마크업을 해야 한다는 것이다.  div태그 를 이용하여, 버튼을 구현 하는 경우. 센스리더는 버튼으로 인식을 못하기에, button태그를 이용 하여 진행 해야 한다.  이 부분은 할말이 많으므로, 추가 컨텐츠에서 처리...

  프로그래머스 라는 사이트를 아는가? 재미있는 문제드르로 가득한 사이트이다. 기본적인 알고리즘 부터 심화 알고리즘까지. 난이도 별로 0 ~ 5단계로 나누고 있다. 최근 구직 중인데, 어디를 지원하던 대부분 코딩테스트를 봐야 하기 때문에, 문제를 난이도 순서대로 최대한 풀어보고자 하였다. 224문제나 되다니. 3일이나 걸렸다.  그리고 난이도 0짜리가 이렇게 오래 걸릴지는 몰랐다. 기본적으로 나는 회사업무를 할 때, 자바스크립트의 기본적인 함수는 사용하고 있지 않다. 특히 배열의 경우 희소배열등에 대한 예외 처리가 불편 하며, includes와 indexOf의 차이.  그리고 object와 array간의 같은 함수를 사용 하지 못한다는 점이 불편하다.  object.map  간단한 문제를 내보자.   [1, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 4] 이와 같이 숫자들로 이루어진 배열이 주어지고, 많이 나온순으로 숫자를 배열해보자.  lodash를 이용하여 풀게 되면 아래와 같다. _ ( [ 1 , 2 , 3 , 2 , 4 , 4 , 4 , 4 , 4 , 2 , 3 , 4 ] ) . groupBy (). map ((v , key) => ({key , count : v. length })) . sortBy (({count}) => -count). map (({key}) => +key). value ()  분명 groupBy를 하게 되면, { '1' : [ 1 ] , '2' : [ 2 , 2 , 2 ] , '3' : [ 3 , 3 ] , '4' : [ 4 , 4 , 4 , 4 , 4 , 4 ] }  이러한 형태로 object가 된다. 하지만, map을 바로사용 할 수 있다. 하지만, javascript object에는 map을 사용 할 수 없다.  순수하게 자바스크립트로 풀어보면 아래와 같다. Object. entries ([...

 일단 focus가 무엇일까? 뭐 뜻으로는 "~에 초점을 맞추다"이고, 어렸을 적 배우기로는 키보드 입력을 받을 수 있는 상태의 입력폼을 뜻한다. 뭐 이건 html뿐만 아니라, GUI를 지원하는 프로그래밍 언어에서 통용되는 내용이라고 보면 된다.  당연하게도, focus는 한번에 하나의 엘리먼트만 가능하다. 기본적으로 키보드로 상호작용 가능한 <a>, <input>, <button>, <textarea> 등... 엘리먼트들은 :focus 사용이 가능하다. 이례적으로 tabindex 를 이용한 엘리먼트도 :focus 사용이 가능하다.  :focus  상호작용 가능한 엘리먼트가 초점 되어있는 상태이다.  See the Pen Untitled by sejinjja ( @sejinjja ) on CodePen .  간단하게 클릭해보자. 그러면 글씨도 빨게지고, 외곽선도 빨갛게 생길것이다. 간단하게 이런식으로 사용가능하다.  하지만 보자. 솔직히 말이다. 클릭이 이미 끝난 상태에서도 focus가 계속 이어지고 있다. button은 클릭하는 것 말고는 그 이후에 할 행동은 없다. 하지만, 저렇게 초점된 상태를 표현하게 되면, 사용자가 헷갈릴 수 있다.  :focus-visible  위에서 클릭하고 나서 계속 선택되어있는 상태가 불편할 것이다. 라고 언급 했다. 마우스를 이용한다던가, 터치를 이용 하는 경우 버튼에 focus상태에 대한 표현은 필요는 없다.  하지만, 키보드를 사용한다고 생각하자. 현재 뭐에 초점되어 있는 상황인지 확인이 필요하다. 그럴때, 사용할 수 있는게, focus-visible이다. See the Pen Untitled by sejinjja ( @sejinjja ) on CodePen .  간단하게 클릭해보자. 이 상태에서는 아무런 변경이 없는 것을 볼 수 있다. 그러면 TAB을 ...

  typeof라는 키워드는 많이 사용 해보았을 것이다. 많이 사용 해보았다면, typeof null이 object라는 것을 알고 있을 것이다.  NaN의 경우야 Not a number이지만, 숫자가 아니긴 하지만, 숫자로 형변환 중에 나오는 값인 것을 생각하면, 뭐 number라고 나오는 것 까지는 알겠다.  empty의 경우에도, 희소배열이라는 것은 있지만, empty그 자체를 뭘 할 수 있는 것이 아니기 때문에 undefined인 것도 알겠다.  하지만, null이 object란다. 언어를 배우다보면 초반에 데이터타입을 배울 것이다. < https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures >  분명 null의 데이터 타입은 원시값으로 정의 되어있다. 아니 그렇다면, 좀 이상하지 않나? object라고 하면 당연하게도 레퍼런스 타입이다.   당연하게도 {}, []는 object이다.  보편적 null  c언어를 공부하였다면, 포인터 변수 p를 초기화 할 때, 아래처럼 사용했을 것이다. int* p = NULL  java를 공부하셨다면, 원시값의 기본값들은, 0, false, ''... 등등 0의 값들을 볼 것이고, 객체의 초기값을 null로 초기화하였을 것이다.  javascript에서 초기화 하지 않은 모든 변수의 초기값은 undefined이다. 데이터 타입이 없기에 0, false, null 그런 것을 당연 못 넣었을 것이라 생각한다.  하지만 현재의 자바스크립트에서는 개체 값의 의도적 부재로 사용하게 되었다.  typeof null  결국 typeof null이 object라는 것은 보편적 null에 대한 결과이다. 즉 객체의 초기값을 말하는 것이니, object라고 생각하자 이다.  이는 0이 number라는 것을 생각하면 맞는 말이다. ...

 자바스크립트는 꽤나 오래 된 언어이다. 오래되기도 했고, 2010년대 전까지만 해도, 브라우저별로 별에 별 스펙이 달랐던 언어였다. 요즘에는 그런거 없이, 표준이 잘 맞춰져있고, 브라우저들도 표준을 잘 맞춰서 개발되고 있으면, ie11 서비스 종료에 따라서, 모든 브라우저들이 계속 업데이트 되는 상황이라, 개발이 편해지고 있다.  isNaN  isNaN이라고 하면 어떤 것이 생각 나는가? isNaN(NaN)이라고 했을 때, true값이 나올것 같지 않나? 그렇다면, isNaN('fasd')는 어떤가?  isNaN이라는 함수가 NaN인지 확인 하는 함수라면, false가 나올 것이고, 숫자가 아닌 것을 판단하는 것이라면(Not a Number), true가 나올 것 같다. window . isNaN ( NaN ) // true Number . isNaN ( NaN ) // true window . isNaN ( 'fasd' ) // true Number . isNaN ( 'fasd' ) // false  결과는 이와 같다. window.isNaN의 경우 is Not a Number이며, Number.isNaN의 경우 is NaN이다.  뭔가 말장난과 비슷한 함수이다.  일단 이런 함수가 왜 필요할까? 일반적인 방법으로는 NaN을 판단이 불가능 하기 때문이다. NaN === NaN // false  NaN과 NaN을 비교를 하면 false가 발생한다. 다른 값이다 이거다.  실제로, 두 함수 Number.isNaN, window.isNaN 두개의 함수 둘다 말이 된다. 하지만, 섞어서 사용하지 말기를 바란다.  indexOf  indexOf는 지난번에 다룬적이 있다.  이번에도 NaN이 등장했다. NaN을 indexOf로는 값이 찾아지지 않지만, indecluds로는 포함되어있다.  이런식의 문제도 있다. 아마 프로젝트를 하다보면 underscore...

  지난번에, dart를 설치 하는 방법을 알아보았다. 이번에는 좀 간단하게 사용 할 수 있는 방법을 공유함과 함께, dart의 재미있는 문법을 한 번 알아보도록 하자.  DartPad   https://dartpad.dev/  이 사이트는 웹에서 dart를 사용 해볼 수 있게 되어있다.   간단하게 위처럼 코드를 작성하여, 실행을 해볼 수도 있고, 또한 해당 함수에 대해서도 설명을 바로바로 확인 할 수 있게 되어있다. dart를 설치해서 써도 되지만, 간단하게 문법만 맛을 볼거면, 이걸로도 충분해보인다.  Cascades  이 문법은 꽤나 매력적이다. 동일한 객체를 리턴값과 상관없이 계속 이용 할 수 있게 해준다. 임시적으로 생성해야할 변수를 줄 수 있게 된다.  void main () { Rect rect = Rect() ; rect. width = 3 ; rect. height = 4 ; rect.setDouble() ; print( 'area = ${rect.getArea()} ' ) ; } class Rect { int width = 0 ; int height = 0 ; int getArea () { return width * height ; } void setDouble () { width = width * 2 ; height = height * 2 ; } }  위의 코드를 보면 적당히 읽힐 것이다. (3, 4)짜리 사각형을 만든 너비와 높이를 각각 두배를 하고, 넓이를 구하는 코드이다. 이 코드에 cascade를 적용하여, 아래와 같이 코드를 수정 해볼 수 있다. void main () { Rect rect = Rect() ..width = 3 ..height = 4 .....

 요즘에 flutter 이야기가 많이 들어온다. flutter는 구글에서 만든 프레임워크이다. 플러터는 나중에 한 번 다룰 예정이지만, dart라는 언어를 사용하기 때문에, 일단 dart를 먼저 건드려보자.  설치   일단 윈도우 기준으로 설치를 해보자.    choco 커맨드를 이용해서 설치 하도록 가이드 되어있다.    일단, 초코 부터 설치해주도록 하자.  초코 설치는 powerShell(관리자 모드)을 이용 하도록 하자. Set-ExecutionPolicy Bypass -Scope Process -Force ; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072 ; iex ((New-Object System.Net.WebClient).DownloadString( 'https://community.chocolatey.org/install.ps1' ))  위의 내용을 복사해서 붙여넣기 해주자. 진행이 완료 되면, choco 커맨드가 실행 되는 것을 볼 수 있다. 아래를 실행 하도록 하자. cmd를 사용 해도 되지만, 관리자 모드를 이용 해야한다. choco install dart-sdk  실행을 하면, script를 실행 할 것이냐, 물어보는데, 뭐 필요하니까 하는 거겠지 하는 마음이다.  Hello, world! 자, 거의다 왔다. dart create -t console cli  이대로 커맨드라인에, 작성해주자. 아 맞다. 환경변수에 dart가 등록 되므로 에러가 난다면, cmd혹은 powerShell을 껏다가 켜주도록 하자.  기본 설치 경로는 C:\tools\dart-sdk 이며, 필요시 환경 변수 path에는 C:\tools\dart-sdk\bin을 등록 해주도록 하...

 HTML내의 텍스트나 텍스트를 쓰기위하여, innerText 혹은 textContent를 사용 해보았을 것이다. 아 물론 textContent는 안 써본 사람들도 있을 것이다. 아마도 innerHTML, innerText가 이름이 비슷하기도 하고, Node.textContent는 몰라도 개발하는 동안에는 큰 무리가 없을 테니 말이다.  하지만, 몰랐다면, 이번 기회에 알아 두는 것이 좋을 것이라 판단된다. 가장 큰 차이는 아래와 같다.  <html> <head> </head> <body> <div id ="test" > <span> 1 </span> <span> 2 </span> <span style =" display : none" > 3 </span> </div> <script> const test = document . getElementById ( 'test' ) console . log ( 'test.innerText: \n ' + test . innerText ) console . log ( 'test.textContent: \n ' + test . textContent ) </script> </body> </html>  자 두개의 차이를 한번 확인 해보도록 하자.  innerText의 경우에는 display:none;인 내용은 노출이 되지 않는다. 그에 비해, textContent는 display: none;을 포함할 뿐만 아니라, html 태그에 작성된, 공백까지도 노출이 된다.  자 이것이 가장 큰 차이다. 렌더링 된 레이아웃을 고려 하는가? 안하는 가? 이다.  성능  당연하게도, innertText는 렌더링 된 레이아웃을 고려하는 것은 공짜가 아니다. html이...

 지난번에는 데이터를 엑셀로 다운로드 받는 것을 진행 하였다. 이번에는 그것의 엑셀의 데이터를 읽어오도록 하자. 일단 엑셀데이터의 형식을 결정해보자.   위와 같은 데이터가 있다고 가정하는 것으로 시작하겠다.  엑셀 데이터 불러오기 일단 아래의 코드를 확인하자. <html> <head> <script src ="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" ></script> <script src ="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js" ></script> <script> function importExcelData (event){ const file = _. get (event , 'target.files.0' ) if (!file) { throw 'file not found' } let reader = new FileReader () reader. readAsBinaryString ( file ) reader. onload = () => { let wb try { wb = XLSX. read ( reader. result , { type : 'binary' } ) } catch ( error ) { throw error } const excelData = _. map (wb.Sheets , (sheet) => { const decodeRa...