ABBO 기술 블로그

자바스크립트 언어의 특징상 null을 undefined로 표현합니다. 그리고 자바스크립트는 자바 언어와는 달리 인터프리터 방식의 언어이기 때문에 빌드를 할 때 에러가 나지도 않습니다. (물론 자바에서도 null 값이 들어갈 때 에러가 안 나고 있다가 런타임 에러가 발생하면 NullPointerException 이 발생합니다.) 그럼 이렇게 표현될 때 최대한 방어를 할 수 있는 Java의 Optional 클래스와 같이 쓸 수 있는 방법이 있을까요? 1. 기본 파라미터 값 넣기 함수(function)를 호출하는 파라미터에서 기본값을 설정할 수 있습니다. function nullSafeMultiple(number = 1) { return number * 2; } let num = undefined; nullS..

매일 개발하면서 기본적으로 작업진행하다가 헷갈리는 부분이 있어 정리해봅니다. 1. forEach 를 사용하는 방법 let strings = ['a', 'bb', 'o', 'tisto', 'ry', '.com']; strings.forEach(function(str) { console.log(str); }); /// 결과 // a // bb // o // tisto // ry // .com 2. function 안쓰기 let strings = ['a', 'bb', 'o', 'tisto', 'ry', '.com']; strings.forEach((str) => { console.log(str); }); /// 결과 // a // bb // o // tisto // ry // .com 3. 인덱스변수 추가한 ..

오늘은 심플하게 이미지 프리뷰(Image Preview)를 설정하는 방법을 간단하게 작성해볼까 합니다. // input file 내의 파일이 업데이트 될때마다 호출합니다. $('#input').on('change', function(e) { let file = this[0]; if(file) { previewImage(file.files, '#img'); } }) // 이미지 파일과 입력할 DOM id 를 파라미터로 받습니다. function previewImage(files, id) { let [file] = files; if (file) { $(id).prop('src', URL.createObjectURL(file)); } } 그리고 HTML 파일입니다.

최근에 사내 관리자에서 Full Calendar 를 활용하여 데이터를 보여주어야 하는 작업이 별도로 필요했습니다. Semantic UI 를 찾아보던 중 호환성이 좋은것 같아서 적용하게 되었는데, 삽질기를 시작해보려 합니다. 1. 레퍼런스가 부족함 (혹은 내가 못찾은 것일수도) 가장 먼저 기능적으로 찾고자 할 때 Github 를 많이 찾아보지 않는 제 기준에서는 스택오버플로우나 구글링을 위주로 진행하고 있어서 달력을 렌더링 하는데 어려움이 있었습니다. 그래서 달력의 타이틀을 지정하거나(아래 사진에서 2022년 12월)이나 옆의 month,week,day 등과 같은 버튼 이벤트를 따로 만들어주는 줄 알았습니다. 근데 찾아보니 다 방법이 있었습니다. 깃헙 주소는 아래 링크를 참조하는게 맞았고, 그리고 다른 분..

DataTable.js 는 테이블 형식의 데이터를 표시해주기 위해 RDBMS에서 많이 사용하는 자바스크립트입니다. 이 중에 데이터가 모두 로드가 된 뒤 (렌더링 후) 함수를 호출해야 하는 경우가 있는데 아래의 방법과 같이 적용하면 됩니다. $('#element_id').DataTable({ .., fnDrawCallback: function() { ..... } }); 가져온 데이터를 토대로 그릴 때는 아래와 같이 작성해줍니다. $('#example').dataTable( { "drawCallback": function( settings ) { alert( 'DataTables has redrawn the table' ); } } ); 실제로 활용한 코드입니다. $(tableId).DataTable({ ..

TypeScript의 Enum은 딱 열거형으로서만 사용할 수 있습니다. 다른 언어에서 Enum을 Static 객체로 사용해본 경험이 있는 분들이라면 이 지점이 굉장히 답답하다는 것을 느낄 수 있는데요. Java에서 Enum을 객체로 활용하면 어떤 큰 장점을 얻게되는지는 배민 기술 블로그 를 참고해보시면 좋습니다. 저와 똑같이 답답함을 느끼신 분이 계시는지, 이미 TypeScript도 Java의 Enum과 같이 Static 객체로 Enum을 다룰 수 있도록 ts-jenum 을 만들어주셨습니다. 이번 시간에는 ts-jenum 을 이용해 응집력 있는 Enum 활용법을 소개드리겠습니다. 1. 설치 ts-jenum 은 Java의 java.lang.Enum 과 같은 사용성을 얻기 위해 제공하는 라이브러리입니다. 별..

ECMAScript 모듈 시스템(import와 export 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있습니다. 하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파일을 ES 모듈로 직접 가져오고 싶을 것입니다. 오랫동안 JSON 가져오기는 commonjs 모듈 형식으로 지원되었습니다. 다행히 현재 TC39 제안 3단계인 JSON 모듈은 JSON을 ES 모듈로 가져오는 방법을 제안합니다. JSON 모듈이 어떻게 동작하는지 알아보겠습니다. 1. config.json 가져오기 config.json이라는 JSON 파일을 가져오는 걸로 시작해보겠습니다. config.json에는 애플리케이션에서 유용하게 사용하는 설정값인 이름과 현재 버전이 담겨 있습니다...

Python ThreadPoolExecutor vs. ProcessPoolExecutor in Python ThreadPoolExecutor과 ProcessPoolExecutor을 언제, 어떻게 사용해야 하는지 소개하는 기사 입니다. TicTacToe game in Python Python으로 TicTacToe를 만드는 방법을 소개하는 기사입니다. Javascript 7 Ways to Improve Node.js Performance at Scale Node.js를 사용하시면서 성능문제를 고민하신다면 참고해보시면 좋을 기사입니다. How to Create Modern Cards using React and Tailwind React와 Tailwind를 사용해서 Card View 컴포넌트를 만들어보는 튜토..