본문 바로가기

전체 글

(71)
(210417:BTB) Lesson 2. OddOccurrencesInArray
데이터 시각화란? 2019년에 Visualization Tool을 개발하며, 깃헙에 정리한 내용을 티스토리로 옮겼습니다. 데이터 시각화 정리 정보 디자인이란? 효과적인 정보와 복잡하고 구조적이지 않은 기술 데이터를 시각적으로 표현하는 방법 cf. David McCandless, 시각적 이해 위계도 정보 시각화, 데이터 시각화도 정보 디자인 범위 속하며 보는 이가 직관적으로 정보를 인지할 수 있게끔 시각적 표현 방법을 통해 제공한다. 전혀 기대하지 않은 것을 깨닫게 해줄 때 그림은 가장 가치있다. John W.Tukey, Exploratory Data Analysis 데이터 시각화란? 구성요소 메신저 (=전달자, eg.디자이너) 수신자 (eg.독자, 사용자) 메시지 (=시각화된 데이터, eg.차트, 인포그래픽, 터치 스크린..
2021 Frontend 개발자 로드맵
Mac용 터미널 프로그램 추천 - Terminus Window에서 Mac으로 이동하면서, 익숙한 도구들을 더는 사용하지 못하게 되었는데 그중 하나가 Putty이다. 이가 없으면 잇몸이라고 FileZillar, Iterm2를 사용하다가, 이번 달부터 Terminus에 정착했다. 앱스토어, 공식사이트에서 다운로드 받을 수 있다. Host 별 접속, SFTP, Port Forwarding, Snippets 기능을 제공한다. 모바일로도 접속 가능하다고 하는데, 아직 모바일로 서버에 접속할만한 급한 일이 없어서 설치하지 않았다. 무료 플랜으로 사용하다가, 유료로 전환했고 학생들은 무료로 유료 플랜을 사용할 수 있다고 한다.
자바스크립트 Online Editor 추천 업무용 IDE는 Webstorm을 사용 중이고, 자바스크립트 테스트용 에디터가 필요해서 조사한 목록이다. 개인적으로 웹뷰는 사용할 일이 없고, 다크모드를 선호하기 때문에 Replit이 승리! (2021.05.18) 경솔한 리뷰를 다시 수정한다. 한달간 사용해본 결과, Replit 이 종종 Connection이 끊기거나 런타임 시 행이 걸리는듯한? 느낌을 받을 때가 있다. 무료 플랜이라 그런건가? 특히 온라인 에디터로 알고리즘 문제를 푸는 나에게, 더 없이 답답한 일이 아닐 수 없다! 이 시점에 Code Sandbox로 갈아탔다. 한달 더 사용해보고, 문제가 있으면 다시 공유할 예정! Code Sandbox - 장점 : 웹뷰, 콘솔 제공함, React, Nodejs 등 다양한 템플릿 제공 - 단점 : 아직..
localhost에서 CORS 해결을 위한 임시 방편 Localhost에서 테스트 코드를 작성할 때, CORS 이슈가 발생할 경우가 있다. (Webpack Dev Server를 사용한다면 프록시를 사용하면 된다.) 아래 명령어를 Terminal에서 실행한 뒤, 오픈되는 크롬을 사용하면 CORS 이슈가 발생하지 않는다. Mac OS 기준 $ open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials
(210409:BTB) Lesson 2. CyclicRotation function solution(A, K) { // write your code in JavaScript (Node.js 8.9.4) if ( A.length < K ) { K = K%A.length; } let newA = A.slice(); let result = [].concat(A.splice(A.length-K, K), newA.splice(0, newA.length-K)); return result; } 1. Array.prototype.unshift() - 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다. 2. Array.prototype.shift() - 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 3. Array.prototype.pop() - 배열에..
(210409:BTB) Lesson 1. BinaryGap ㅇ 작성한 코드 /* solution */ function solution(N) { let binary = N.toString(2); //이진수로 변경함 let trimed = binary.substring(0, binary.lastIndexOf(1)) return Math.max(...trimed.split('1').map(item => item.length)); } 1. Number.prototype.toString() 구문 : numObj.toString([radix(Optional)])​ - radix 범위 : 2~36 - 특정 진수로 객체를 표현한 문자열을 환원합니다. numObj가 음수이면 -로 음수를 환원하고, 정수가 아니면 .으로 소수점을 구분한다. 2. String.prototype.su..