javascript로 코딩테스트를 풀 때는 미리 알아야할 부분이 있다.코딩테스트를 할 시에는 원래 브라우저에서 작동하는 프로그래밍 언어인 javascript의 범용 버전인 node.js를 이용하는데, 문제 풀이에서 한줄 한줄 입력하는 환경을 구현하기 위해 readline이라는 모듈을 사용한다.따라서 문제풀이를 할 때 이 readline의 작동 방식을 이해해야한다.아무래도 문제를 보며 설명하는게 이해하기가 쉬울 것이다.javascript 코딩테스트 답안 작성 방법을 간단한 문자열 입출력을 다루는 프로그래머스의 첫번째 문제를 기준으로 설명해보려고 한다. 문제문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요.제한사항1 ≤ str의 길이 ≤ 1,000,000str에는 공백이 없으며, 첫째 줄에..

문제문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요.제한사항1 ≤ str의 길이 ≤ 1,000,000str에는 공백이 없으며, 첫째 줄에 한 줄로만 주어집니다.입력 예 HelloWorld!출력 예 HelloWorld! Python 답안초기 화면은 다음과 같다.가장 기초 문제인만큼 파이썬 답안은 간단하다.초기 화면에서 나오는대로 입력을 받아오는 input() 함수를 이용한다.input()에 입력되는 문자열(String)을 문제에서 제시한대로 str에 저장한 뒤print()를 이용해 출력해주면 된다.답안은 다음과 같다.str = input()print(str)문제의 의의이 문제를 통해 가장 기초적인 input(), print()를 익힐 수 있다.  javascript 답안제시된 문제의 기..

자바스크립트의 서버 라이브러리인 express를 이용해 서버를 구축하다가, 서버에는 post에 대한 코드를 작성한 상태에서 특정 form 을 submit했는데, "cannot get /POST"라는 에러를 마주쳤다. 원인을 찾아보니 비교적 간단한 문제였다. form tag에서 post를 할때는 형식으로 작성해줘야하는데, 이를 실수로 로 작성한 것. post 요청을 한게 아니라 /post라는 주소로 진입하라고 요청한 셈이 되었고, 이와 같은 오류가 출력되었다. 매우 사소한 실수였고, 수정하니 문제없이 작동했다.

0.ES6는 무엇인가ES6(EMCAscript 6)는 2015년 이후 적용되고 있는 javascript의 6번째 표준안으로, 좀 더 효율적이고 생산적인 코드 작성을 위해 javascript의 기본 문법을 개정한 일종의 확장팩이다.실제 코드 작성에 있어 유용하고, 다른 사람들의 코드를 이해함에도 필수적인 경우가 많아 익혀둬야한다.1. Arrow function (화살표를 이용한 함수 표기)//기본적인 함수 표현 방식const sum = function(a, b) { return a + b};일반적으로 배우는 javascript의 함수 표현 문법은 위와 같다.변수 선언로 함수명을 지정하고function을 명시하며소괄호에 들어갈 인수를 지정한다.함수식의 본문은 중괄호{}로 감싸준다.화삺표를 이용한 함수 표기..

CSS grid를 지정하면 각각의 item에게 배치 위치를 지정해줘야한다. 배치 방법을 크게 두가지로 나누면, 1. 부모요소에서 지정해주는 방법, 2. 자식요소에서 지정하는 방법이다.  부모요소에서의 지정grid-template-areas 를 사용 자식요소에서의 지정grid-column, grid-row 사용 두가지 방법 모두 예제를 통해 살펴보자. 두 방법을 파악하기 위해 먼저 예시가 되는 html code부터 살펴보자.   1 2 3 4 5 부모요소 "parent" 내부에 5개의 자식요소 "child"를 배치했다.  최종 목표는 이 grid의 각 item들을 다음과 같이 배치하는 것이다.   이를 위해서는 우선 3x2 의 gr..

적절한 색상 선택은 데이터의 가독성을 결정하는 핵심적 요소다.seaborn, matploblib 등 파이썬의 여러 데이터 관련 라이브러리가 독자적인 팔레트를 제공한다.  좋은 색 배합은 데이터 분포를 직관적으로 전달할 수 있어야하는데,이는 내가 나타내고자하는 데이터의 구조에 따라 달라질 수 밖에 없다.  여러 팔레트를 찾아봤지만, 내 기준으로 가장 직관적으로 색상을 선택할 수 있도록 도와주는 사이트는 오늘 소개할 Color Brewer인 거 같다. ColorBrewer는 데이터 클래스의 수, 데이터의 특성에 따른 가장 적절한 팔레트를 제공하는 사이트로, 이를 직접 디자인 또는 프로그래밍 작업에 응용할 수 있는 여러 export 방식도 제공한다.   https://colorbrewer2.org/#type=..

간혹 인터넷을 돌아다니다보면서 이런 그림을 보게 되는 경우가 있다. 이런 그림을 이른바 생키 다이어그램(Sankey Diagram)이라고 한다. 기업의 매출, 수익 및 비용을 표시한 재무제표의 손익계산서를 시각화한 그림으로, 기업의 수익구조를 표보다 훨씬 직관적으로 표현해준다. 생키 다이어그램은 이런 기업 손익계산서 뿐 아니라 물자 흐름, 물량 변화 등을 표시하는 다양한 상황에서 이용된다. 생키 다이어그램을 혹시 직접 만들어볼 수 있을까? 투자하고자하는 기업의 손익을 직관적으로 제시할 수도 있고, 또 개인의 경우 가계부의 현금 흐름을 파악하는데에도 유용하게 이용할 수 있다. 생키 다이어그램 제작을 지원하는 여러 사이트가 있다. 유용한 사이트는 대표적으로 https://www.sankeyart.com/등이..