javascript 14

[Sliding Window] with 예시문제 2가지

슬라이딩 윈도우는 네트워크를 공부할 때 배웠던 개념인데 이 방식을 알고리즘 문제에 적용시켜 풀기도 한다. 범위를 일정하게 고정시켜서 그 범위를 이동시켜가면서 데이터를 비교한다. two pointer알고리즘과 비슷한 알고리즘이다. [문제 1] 문자열 s에서 반복되는 알파벳이 없는 가장 긴 substring의 길이를 구하라. var lengthOfLongestSubstring = function (s) { let max = 0; let l = 0; for (let r = 0; r < s.length; r++) { const idx = s.slice(l, r).indexOf(s[r]); if (idx === -1) { max = Math.max(max, r + 1 - l); } else { l += idx +..

알고리즘 2022.02.16

[Two Pointer #2] 대표 문제 + 풀이

[문제 1] 주어진 문자열 배열을 뒤집기 var reverseString = function (s) { let l = 0, r = s.length - 1; while (l None: l, r = 0, len(s)-1 while l < r: s[l], s[r] = s[r], s[l] l += 1 r -= 1 reverse() 메서드를 쓰면 간단하게 해결할 수 있지만 알고리즘으로 직접 구현하는 것도 매우 간단하다. 왼쪽과 오른쪽을 가리킬 포인터를 만든 뒤 각자의 위치에서 중간 쪽으로 하나씩..

알고리즘 2022.02.15

[Two Pointer #1] 대표 문제 + 풀이

[문제 1] 오름차순 정렬된 nums배열의 모든 요소를 제곱한 값을 정렬된 배열로 반환하라. (ex. nums = [-4,-1,0,3,10] 일 때 정답은 [0,1,9,16,100] 이다.) var sortedSquares = function(nums) { let left = 0; let right = nums.length-1; const answer = [] while(left Math.abs(nums[right])){ answer.push(Math.pow(nums[left], 2)); left ++ }else{ answer.push(Math.pow(nums[right], 2)); right -- } } return answer.reverse() }; class Solution: def sortedSq..

알고리즘 2022.02.13

[공공데이터 활용] HTML canvas태그: 시간별 기온 차트 만들기 #2

이번에는 차트에 색상을 적용해야 한다. 색상 적용 예제도 MDN에 잘 나와있다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#a_createlineargradient_example 스타일과 색 적용하기 - Web API | MDN 도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그 developer.mozilla.org 스타일을 적용할 곳은 총 세 가지이다. 1. 따뜻한 색 - 차가운 색으로 배경 입히기 2. 차트의 라인에 색상과 굵기 주기 3. 폰트..

토이프로젝트 2022.02.01

[JavaScript] 자바스크립트 Promise.all() 메서드 활용하기

node.js 서버에서 데이터를 등록하는 API를 만드는데 이 API는 총 5개의 동작이 반드시 순서를 지켜서 실행되어야 한다. 처음에는 함수 내부에 promise객체를 만들어서 리턴하고 그 함수를 .then()으로 연결하였다. 1. 함수에서 프로미스 객체 리턴 X 5 const insertProfit = async cateJson => { const query = `insert into [table] ([col1], [col2], [col3], [col4]) values ('${month}', ${id}, ${aim}, ${rate}) `; let res: any; const promise = new Promise((resolve, reject) => { resolve( excuteQuery(query..

JavaScript 2022.01.28

[JavaScript] 호이스팅: 변수와 함수의 호이스팅 차이점

자바스크립트에는 호이스팅이라는 개념이 있다. 호이스팅은 코드를 실행하기 전 선언한 변수가 해당 스코프 최상단으로 끌어올려져 실행되는 것을 말한다. function getData() { console.log(greeting); var greeting = 'hi'; } getData(); 이와 같은 코드를 실행하면 어떻게 될까? greeting변수가 console.log 아래에 선언되어있기 때문에 에러가 날 것이라 예상할 수 있지만 var로 선언한 greeting이 최상단으로 끌어올려져 var greeting; console.log(greeting); // undefined greeting = 'hi'; 과 같이 실행되는 것과 동일하다. 변수 할당이 아닌 변수 선언만 최상단으로 끌어올려지기 때문에 값은 un..

JavaScript 2021.12.14

JavaScript와 비교한 TypeScript의 특징과 장점

TypeScript를 알기 전에 JavaScript는 어떤 특징을 가진 언어인지 먼저 살펴보겠다. 자바스크립트는 90년대 후반에는 전성기를 누렸지만 오래가지 못하고 안 좋은 이미지를 가진 언어로 취급되었다. 그러다가 05년 Ajax와 HTML5의 등장으로 자바스크립트가 재평가되었다. 자바스크립트는 크게 네 가지 특징을 가지고 있다. 스크립트 언어: 간편한 코딩을 목적으로 만든 언어. 객체지향적인 구조도 가지고 있어 재이용성과 유지보수성 인터프리터 언어: 일괄 해석을 하는 컴파일 과정이 필요 없음 여러 환경에서 이용 가능: Node.js, Windows Script Host, Android/IOS 등 에서 실행 가능 여러 요소로 구성됨 무엇보다 JavaScript는 동적 타입 언어이다. 동적 타입의 언어는..

JavaScript 2021.12.10

[JavaScript] 이벤트 루프: 자바스크립트는 싱글 스레드라면서 왜 비동기 방식인가요?

자바스크립트하면 떠오르는 이미지 중 대표적인 것 중 하나가 '비동기'일 것이다. 하지만 자바스크립트는 싱글 스레드로 동작하는 언어라고 말하던데 어떻게 싱글 스레드이면서 비동기적일 수가 있는 걸까? 먼저 노드의 특징인 이벤트 기반에 대한 내용을 알아야 한다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 미리 지정해둔 콜백 함수가 실행된다. 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출하고 이벤트가 없거나 이미 다 처리했다면 노드는 대기 상태에 들어간다. 여기서 이벤트 루프라는 개념이 등장한다. 이벤트 루프는 여러 이벤트가 동시에 발생할 때 어떤 순서로 콜백 함수를 호출할지 결정해준다. *이벤트 루프: 이벤트 발생 시 호출할 콜백 함수들을 관리, 순서를 결정한다. 노드가 종료될 때까지 작..

JavaScript 2021.12.10

[JavaScript] 자바스크립트 소수점 계산시 오류 발생????

console.log(0.1 + 0.2); console.log(0.2 * 6); 위의 두 출력 결과는 어떻게 나올까? 실행해보면 결과는 각각 0.30000000000000004 이랑 1.2000000000000002 으로 예상과는 다른 숫자를 도출해낸다. 이건 자바스크립트의 오류인걸까? 결론부터 말하자면 자바스크립트 언어의 오류는 아니다. 전에 타입을 써야하는 이유에 대해 쓴 글을 읽어보면 그 이유를 알 수 있다. 2021.11.24 - [프로그래밍] - 타입을 사용하는 이유 타입을 사용하는 이유 컴퓨터의 숫자 표현 방법 인류는 10진수를 사용하고 컴퓨터는 2진수를 사용한다. 컴퓨터도 같이 10진수를 사용하면 기계어를 다룰 때 더 편할 텐데 왜 그렇게 되었을까? 숫자를 디지털로 변환할 bomoto.ti..

JavaScript 2021.12.10

[JavaScript] == vs === (동등 연산자와 동치 연산자)

다른 언어와 다르게 자바스크립트에는 비교 연산자로 == 과 === 두 가지가 있는데 둘은 수행하는 역할이 다르다. == 동등 연산자(Equal Operator) 비교하려는 값이 타입이 다르다면 같은 타입으로 변경하여 비교를 한다. 쉽게 말하자면 자바스크립트가 어떻게든 둘을 같은 값으로 보기 위해 노력한다고 할 수 있다. (귀여운 js...) console.log('1' == 1); //true console.log(true == '1'); //true console.log(true == 1); //true console.log(false == 0); //true console.log('' == 0); //true console.log([] == 0); //true 위의 경우 전부 true를 반환한다. =..

JavaScript 2021.12.10