본문 바로가기
React에서 구글맵 API 사용하기 2020. 4. 27. 구글맵 API를 사용하려면 우선 개인이 API KEY를 발급 받아야 한다. https://developers.google.com/maps/documentation?hl=ko 해당 사이트에서 'Maps JavaScript API'를 선택해 계정을 만들고, API 키를 발급받을 수 있다. 구글 정책이 바뀌면서 무료로 API를 사용하는 사람들도 결제 수단을 등록해야 지도가 정상적으로 띄워진다. API키를 발급 받았다면, 리액트에서 어떻게 쓰는지 알아보자. 먼저 구글맵 컴포넌트를 다운받아야 한다. npm install google-maps-react --save 그 후, 구글맵을 담을 컴포넌트에 아래 값을 주면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2..
재귀(Recursion) 2020. 4. 25. 재귀(Recursion) 재귀란 함수가 자기 자신을 호출하는 것이다. const countdown = n => { console.log(n); if (n === 0) return; // n이 0이라면 함수 종료 countdown(n-1); // n-1을 계속 실행 } countdown(10); // output: // 10 // 9 // 8 // 7 // 6 // 5 // 4 // 3 // 2 // 1 함수 안에 또 자기 자신을 호출해서 n값에서 -1된 값을 계속 return하고 있다. 여기서 가장 중요한 것은 종료 조건이 있다는 것이다. if ( 조건 ) { return } 만약 종료 조건이 없다면, 재귀는 계속 해당 함수를 호출하여 컴퓨터가 과부하게 걸리거나 원치않은 값까지 return 할 수 있다...
image vh, vw 속성 2020. 4. 22. 최근 대부분이 다 반응형 웹이다. 브라우저 창을 어떻게 움직이든 웹의 모든 내용이 그에 맞게 보여줘야 한다. 하지만 reset.css에 border-box, margin, padding 값을 다 초기화하더라도 100% 차지 않는 경우가 있다. 이럴 때 사용하는 속성이 image의 vh, vw 값이다. vh는 vertical height, vw는 vertical width의 의미로 브라우저 높이와 너비값에 맞춰진 단위이다. 예를 들어 브라우저 창의 높이가 800px이라면 1vh는 8px이고, 너비가 600이라면 1vw는 6px이다. See the Pen VwvPZbv by howdy-mj (@howdy-mj) on CodePen. 코드를 쳐서 본인의 브라우저 창에서 확인하면 더 빠르게 이해가 갈거라 생각한다.
데이터 자료 구조 (5) - Stack & Queue 2020. 4. 20. Stack과 Queue는 비슷한 구조이지만, 자료를 읽는 순서가 다르다. Stack Queue 구조 LIFO(Last In First Out) FIFO(First In First Out) 설명 마지막으로 저장한 데이터가 처음으로 읽힘 처음으로 저장한 데이터가 처음으로 읽힘 메소드 push, pop enqueue, dequeue 유즈케이스 함수 호출 기록을 stack으로 저장, 웹브라우저 방문기록(뒤로가기) 및 실행취소 미로찾기 알고리즘 맛집 예약, 티케팅 등의 예약 시스템 OS 프로세스 스케쥴링 시스템(priority queue) 프린터 인쇄 대기목록
[JS] 가장 넓은 면적 구하기 2020. 4. 17. [ 문제 ] 가장 넓은 면적 구하기 더보기 인자인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요. * 가정: 배열의 길이는 2이상입니다. [ 풀이 ] 2020.04.17 처음에는 제일 높은 수가 다른 것을 대체하는 식으로 접근했는데, 그러면 인덱스의 값에 따라 면적이 뒤집힐 수 있기 때문에 다른 방법을 생각했다. 0번째에서 1번째, 0번째에서 2번째 height와 인덱스 차이값을 구해 면적 구하는 식을 짜봤더니 다른 것은 두개의 인덱스 값이다. 따라서 for문..
Temporal Dead Zone 2020. 4. 16. Temporal Dead Zone(TDZ)란 '일시적 사각지대'란 의미로 변수의 스코프와 관련있다. 자바스크립트는 ES6에서 도입된 let, const를 포함한 모든 선언을 호이스팅한다. 호이스팅은 var선언문이나 function선언문 등을 유효 범위의 최상단으로 끌어올리는 것을 말한다. (2020/02/29 - 호이스팅 - 변수, 함수) 하지만 var로 선언된 변수와 달리 let으로 선언된 변수는 선언문 이전에 참조하면 에러가 발생한다. console.log(name); // output: undefined var name = "KMJ"; console.log(today); // output: Uncaught ReferenceError: today is not defined let today = "4월..
자료 구조(Data Structure) (4) - Dictionary / HashMap / HashTable 2020. 4. 16. Dictionary(혹은 HashMap, HashTable)는 Key-Value 형태의 값을 저장할 수 있는 자료구조이다. 자바스크립트의 객체와 같다. Dictionary 특징 - Set처럼 특정 순서대로 데이터를 리턴하지 않음 - Key의 값이 중복될 수 없으며, 만약 중복된 key가 들어가면 먼저 있던 key와 value를 대체 - 수정 가능(mutable) Dictionary 구조 - Set과 비슷하게 key값의 해쉬값을 구한 후, 해쉬값에 속해있는 bucket에 값을 저장 - set과 마찬가지로 순서가 없고 중복된 key값은 허용되지 않음 Dictionary 사용 - 데이터베이스처럼 key-value를 묶어서 데이터를 표현해야 할 때 - 실제 데이터베이스에서 읽어들인 값을 dictionary로 변..
자료 구조(Data Structure) (3) - Set 2020. 4. 15. Set은 array나 list같은 순열 자료 구조이지만 순서가 존재하지 않는다. Set 특징 - 데이터를 비순차적(unordered)으로 저장할 수 있는 순열 자료구조(collection) - 삽입 순서대로 저장되지 않고, 특정한 순서를 기대할 수 없는 자료구조 - 수정 가능(mutable) - 동일한 값 여러 번 삽입 불가 (동일 값을 여러번 넣을 경우 하나의 값만 저장됨) - Fast Lookup(특정 값을 포함하고 있는지 확인)이 필요할 때 주로 사용 Set 구조 - Set 저장 순서 1. 저장할 요소의 값의 hash 값 구하기 2. 해시값에 해당하는 공간(bucket)에 값 저장 - 저장하고자 하는 값의 해시값에 해당하는 bucket에 값을 저장하기 때문에 순서가 없음 (index도 없음) - 해..

티스토리툴바