코드 땜장이

  프로그래머스 라는 사이트를 아는가? 재미있는 문제드르로 가득한 사이트이다. 기본적인 알고리즘 부터 심화 알고리즘까지. 난이도 별로 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 ([ 1 , 2 , 3 , 2 ,

 일단 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라는 것을 생각하면 맞는 말이다.  하지만, 이 결정은 null은 원시값 이지만, type이 object가 되어버리는 버그를 만들었다.  뭐 물론, 이걸

 자바스크립트는 꽤나 오래 된 언어이다. 오래되기도 했고, 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로는 포함되어있다.  이런식의 문제도 있다. 아마 프로젝트를 하다보면 underscorejs, lodash 등 데이터를 다루는데에 도움을 주는 라이브러리를 사용