코드 땜장이

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

  이번에 소개할 라이브러리는 SheetJS (xlsx)이다. xlsx는 npm명이고, 프로젝트 자체는 SheetJS이다. 나의 경우에, 두 개가 다른 라이브러리로 인식 했던 적이 있다.  일단, 프로버전은 사용 해보지 않았다. 웬만한 프로젝트가 기본버전으로 이용가능했고, 간단하게 일반적인 테이블의 내용을 다운로드 할 수 있는 수준이라고 보면 된다. 프로버전의 경우 차트 혹은 이미지 cell의 상세 스타일등을 지원을 해준다.  뭐 물론 csv만으로도 데이터를 다운로드 받는데에는 무리가 없을 수도 있지만, SheetJS를 사용하게 되면, 기본적으로 셀병합들은 지원 하기에, 필요하다면 SheetJS를 고려하는 것이 좋다.  준비  간단하게, 데이터를 다운로드 해보도록 하자.  준비는 아래처럼 하면 되겠다. <html> <head> <script src ="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js" ></script> <script src ="./util.js" ></script> <script type ="text/javascript" > const header = [ ' 상품 ' , ' 단가 ' , ' 갯수 ' , ' 금액 ' ] const items = [ [ ' 책 ' , 100 , 3 , 300 ] , [ ' 연필 ' , 200 , 3 , 600 ] , [ ' 공책 ' , 100 , 1 , 100 ] , [ ' 노트북 ' , 150 , 3 , 450 ] ] </script> </head...

const Title = styled.h1 ` font-size: 1.5em; text-align: center; color: palevioletred; `  혹시 이러한 코드를 본 적이 있는가? 뭐 물론 styled-component를 사용해 본 사람이라면, 이런 코드를 본 적이 많을 것이다.  하지만, 처음본 사람의 입장에서는 저런 문법이 자바스크립트에 있었나? 이 생각만 있을 것 같다. 뭐 물론, 나도 처음 저런 코드를 보았을 때, 왜 오류가 안나지? 이 생각 뿐이었으니까, 말이다.  일단 대부분이 Template literal(String template)은 많이 들어보았을 것이다. 일단 간단하게 소개 해주자면, const a = 1 const b = 2 const text = 'a: ' + a + ' \n ' + 'b: ' + b + ' \n ' + ' 합 : ' + ( a + b ) const template = `a: ${ a } b: ${ b } 합 : ${ a + b } ` console . log ( text ) console . log ( template )  위처럼 문자열을 여러줄로 표현하거나, 중간에 삽입해야 하는 값을 편하게 만들어주는 기능을 갖는다.  보면 알겠지만, ', "대신 `을 이용 하고 있다. Template literal에서 편의성을 더 제공한 것이, tagged literal이다.  간단한 사용 예제를 보여주자면, const name = 'sejiwork' const email = 'sejinjja@gmail.com' console . log ( ` 이름 : ${ name } email: ${ email } ` )  위의 정보에서 이메일 정보는 노출하고 싶지 않을 때가 있지 않나? 그러면 이러한 함수를 만들 수도 있을 것이다. const name = 'sejiwork' cons...