기본 콘텐츠로 건너뛰기

4월, 2023의 게시물 표시

dart 사용해보기.

  지난번에, 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 ..setDouble() ; print( 'area = ${re

dart 첫 걸음.

 요즘에 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을 등록 해주도록 하자.  여기 까지 되었다면, 아래의 커맨드를 또 실행 해주도록 하자.  cd cli dart run  기본적으로 con

innerText vs textContent

 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이

엑셀 데이터 불러오기 SheetJS (xlsx)

 지난번에는 데이터를 엑셀로 다운로드 받는 것을 진행 하였다. 이번에는 그것의 엑셀의 데이터를 읽어오도록 하자. 일단 엑셀데이터의 형식을 결정해보자.   위와 같은 데이터가 있다고 가정하는 것으로 시작하겠다.  엑셀 데이터 불러오기 일단 아래의 코드를 확인하자. <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)

  이번에 소개할 라이브러리는 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