코드 땜장이

  개발을 하다보면, 서비스가 느리다는 클레임을 듣는 경우 혹은 프로그램이 멈췄어요 등... 클레임을 받는 경우가 있을 것이다. 오류도 아니고, 생각보다 위의 클레임을 들으면 꽤나 곤란하다... 대부분의 개발서버의 경우 데이터가 부족하기도 하고해서 느린 것을 잘 확인 하지 못하는 경우가 있기 때문이다.  특히나, 프런트엔드의 경우 기기별로 퍼포먼스가 다른 경우도 있으니... 서버의 경우 서버의 스펙을 올려서 공짜점심을 먹을 수라도 있지만 말이다. 이런 경우 내가 자주 쓰는 방법은 더 오래걸리게 하는 것이다.  지금도 느린데, 더 오래걸리게 한다니... 이게 무슨 헛소리 일까? 뭐 일다보면 이해가 갈 것이다.  자 간단하게 10초가 걸리는 작업이 있다고 생각해보자.  버튼을 누르고, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 마음속으로 새어보자. 생각보다 엄청나게 긴 시간이라는 것을 알 수 있다.  자 그러면 이런 경우는 어떤가? 20초가 걸리는 중간 내용을 보여주는 것이다. 뭐 몇초가 남았다. 이런식의 내용이 포함이 되면 말이다.  아마 실제로 해보면, 10초짜리보다 20초가 짧게 느껴졌을 수도 있다. 그것뿐만 아니다. 10초짜리의 경우, 사용자가 해당 페이지에 오류가 발생했다고 생각 하여, 페이지를 새로고침하게 되는 경우가 최악의 경우이다. 아주 비싼연산을 다시해야 하기 때문이다. 위처럼 착시를 이용하는 것도 해결방법이니 적극적으로 사용해보도록 하자.

 오늘은 조금 다른 이야기를 해보고자 한다. 21세기의 대한민국에 살고 있는 사람이라면, 유아를 제외하고는, 모두 엘리베이터를 타보았을 것이다. 엘리베이터를 타게 되면 가장 먼저 보게 되는 것이 무엇일까? 닫힘 버튼?  거울일 것이다.  왜? 엘리베이터에는 항상 거울이 있을까? 뭐 얼굴에 뭐가 묻어 있는지, 머리는 단정한 지 보라고 있을 것이다.  엘리베이터가 느리다고 투정 부린 적이 있을 것이다. 뭐 한 번 은 들어봤을 것이다. 엘리베이터가 너무 느려, 기다리는 시간 동안 사람들에게 시간을 조금 더 빠르게 달아 두었다고.....  자 여기서 묻고 싶다. 여러분은 핸드폰을 보는가? 아니면 거울을 보고 있나? 내 생각에는 여러분은 다른 사람들의 뒤통수 혹은 스마트폰을 보고 있을 것이다.  만약에, 19세기 때처럼, 스마트폰이 없다면, 거울을 봄으로써, 시간을 때울 수 있을 것이다. 하지만, 21세기에 아직도, 거울이 있을까?  엘리베이터가 좁다고 생각해본 적이 있는가? 아마도, 자주 있었을 것이다. 특히 사람이 가득 탄 엘리베이터를 탄 경우라면 말이다. 이런 경우, 엘리베이터의 거울의 효과를 그나마 보고 있다고 볼 수 있다. 거울을 담으로써 엘리베이터를 조금 더 크게 느끼게 할 수 있다. 폐소공포증 환자라면, 조금 덜 공포를 느끼게 할 수 있는 장치이다.  자 여기서 잠깐 내가 전달 하고 싶은 부분이 있다. 아마 여러분은 19세기와 21세기 내용이 나왔을 때, 그러면 거울은 필요 없는 것이라고, 생각 할 수 있었을 것이다. 아니면 말고,  기존 코드에서 불필요 해 보이는 부분이 있을 때, 과감히 지우게 되었을 때, 다른 부수 효과가 없는지 한 번 더 확인 해보라는 것이다.  절대로, 당신들이 만나게 될 개발자들이 바보가 아니라고 말 하고 싶다. 만약에 기존 코드를 수정하고자 한다면, 정확히 파악 하자. 뭐 꼰대 같은 말일 수 있다. 기존 코드를 존중해야 한다는 말을...

 유사배열은 무엇일까? 간단하게 말하자면, NodeList, 문자열 같은 것을 유사 배열이라고 볼 수 있다.  NodeList  위와 같이 형태는 배열이지만,  Array.prototype.find 함수를 사용 할 수 없다. 이럴때 사용 할 수 있는 방법이 Function.prototype.call인데,   위와 같이 사용 하면 된다.  유사배열?  자 그렇다, Array.prototype은 Array객체만을 위한 것이 아니다. 그러면 조건은 무엇일까? 자 일단 첫번째 생각 해볼 수 있는 것이 있다. iterable 객체이다. [Symbol.iterator]가 있으면 일단, iterable객체 이다. NodeList도 [Symbol.iterator]가 있으니 테스트 해보자.  위의 결과를 한 번 생각해보자, obj로는 find가 되지 않지만, [...obj]는 된다. 즉, [Symbol.iterator]조건은 아니다. 인덱스 기반 컬렉션  인덱스 기반의 컬렉션. NodeList도, Array도 인덱스 기반의 컬렉션이다. 둘 다 속성을 숫자로 사용 하고 있고, 길이가 있다.  우리는 이제 유사배열을 속성이 숫자로 사용 하고, 길이가 있어야 한다. 이런 내용을 알 수 있을 것이다.  자 그러면 두가지를 더 테스트 해보자, length기반인지 속성 기반인지 확인해보자.  자 간단하게, 결과를 보면, 둘 다 만족해야지만, 함수가 실행됨을 알 수 있다. 그렇다면, 희소배열은 존재할까?      간단하게 존재함을 알 수 있다.  Array의 함수는 위와 같이 length기반으로 반복을 하되, in 키워드를 이용 하여, 존재 하는 값만을 순회하게 되는 것이다.  간단하게, Array의 함수를 다른 유사배열에 사용 할 수 있으니, 새로운 객체를 생성하지 않아도 되니 참고하도록 하자.

  git lfs는 사실 프런트엔드 개발자라면, 잘 들어보지 못하였을 것이다. 혹시 100MB이상의 파일을 깃에 저장을 해보았는가? 만약에 그랬다면, 소스파일은 아니고, 동영상, 이미지 등 멀티미디어 자료일 가능성이 높다.  lfs는 무엇일까? 위에서 말하였듯이 파일 하나가 100MB이상을 저장해야하는 경우 필요한 장치이다. Large File Storage의 약자이니 말이다.   만약에 사용해보고자 한다면... 각 레파지토리에서 아래의 명령어를 실행 해주어야 한다. git lfs install https://docs.github.com/ko/repositories/working-with-files/managing-large-files/installing-git-large-file-storage  그러면 각각의 레파지토리에 저장공간이 따로 생길 것이다. 이때, 플랜별로 저장용량이 차이가 나니, 너무 많은 데이터를 저장하지 않도록 주의해야한다.  아쉽게도, 특정용량 이상의 파일을 자동으로 lfs로 관리를 해주는 것은 아니다. git lfs track "*.psd" https://docs.github.com/en/repositories/working-with-files/managing-large-files/configuring-git-large-file-storage  위와 같이 해당 레파지토리에 track을 해주어야 하는데, 위 처럼하게 되면, psd 확장자의 파일은 lfs로 관리를 하게 된다.  그러면 .gitattributes위의 설정대로, 설정이 추가 되므로, psd파일들을 커밋 하기전에, .gitattributes를 push 해주도록 하자.  이제 clone할 때, lfs등록되어 있는 파일들을 위한 포인터들을 다운로드 받게 된다. => 실제 파일이 아니다... 이 점들은 되게 귀찮을 것 같다.  실제로 파일을 받아보기 위해서는... 아래의 명령어를 별도로 입력 해...

 생각보다 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라는 것을 생각하면 맞는 말이다. ...