You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🗺️ Geolocation API로 위치, 날씨 정보를 얻어오기
Geolocation API Geolocation API는 자바스크립트 프로그램이 사용자의 실제 위치를 브라우저에게 요청할 수 있도록 해준다. 물론 이런 정보들은 주요한 개인 정보와 관련되어 있으므로, 브라우저에서는 Geolocation API가 물리적인 위치 정보에 접근하기 전에 자바스크립트 프로그램이 항상 사용자의 허락을 받도록 하고 있다. Geolocation API는 환경에 따라 GPS를 비롯한 Wi-Fi, 휴대전화의 기지국, IP 주소 등에서 위치 정보를 알아낸다. 브라우저가 지원하는 Geolocation API는navigator.gelocation으로 정의되어 있다. Geolocation API 사용법 이 객체에는 다음 세가지 메서드가 존재한다. navigator.geolocation.getC..
![[JS] 📚 자바스크립트 자료형 Symbol 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0V0DK%2FbtrgJYfYxnd%2FVdslud2zD3nXziO4hT8f80%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Symbol 🚩 정리
Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었습니다. [원시 타입 (primitive data type)] Boolean null undefined Number String [객체 타입 (Object type)] Object 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값입니다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용합니다. Symbol의 생성 심볼은 3가지 방법으로 생성할 수 있습니다. Symbol() Symbol.for() Symbol.iterator Symbol() Symbol은 Symbol() 함수로 ..
![[JS] 📚 자바스크립트 자료형 Set 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdj97MO%2FbtrgV9sXJcc%2FOfYpQBqskCIDN8cB2kzakk%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Set 🚩 정리
셋(Set) 셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다. 셋에 키가 없는 값이 저장됩니다. let sett = new Set(["bananas", "oranges", "bananas", "apples", "bananas"]); // Set(3) {'bananas', 'oranges', 'apples'} new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다. set.add(value) – 값을 추가하고 셋 자신을 반환합니다. set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다. set.has(value)..
![[JS] 📚 자바스크립트 자료형 Map 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmzQ8J%2FbtrgJY0U68p%2FsQbOkC8gcKkFAqjLWHhqe1%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Map 🚩 정리
자바스크립트는 객체와 배열이라는 강력한 자료구조를 제공합니다. 객체 – 키가 있는 컬렉션을 저장함 배열 – 순서가 있는 컬렉션을 저장함 하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족해서 맵(Map)과 셋(Set)이 등장하게 되었습니다. Map 자료형 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. (객체의 key는 항상 스트링형태로 저장됩니다.) let map1 = new Map([ // 2차원 key, value 형태의 배열 ['a',1], ['a1',2], ['b',3] ]) // map 자료형 : {"a" => 1, "a1" => 2, "b" => 3} new Map() – 맵을 만듭니다. map.set..
![[JS] 📚 콤마 연산자 (a, b, c) 문법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXc2KV%2FbtrgBC5lAeZ%2Fa5oRzKuCbyMkeqUTmPSrQK%2Fimg.jpg)
[JS] 📚 콤마 연산자 (a, b, c) 문법 정리
자바스크립트 콤마(쉼표)연산자 쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환한다. 다음과 같은 함수가 있다. 우리가 흔히 보는 평범한 함수이다. let a = (obj, value) => { obj+=value; obj+=value; return obj; } a(1,2); // 5 저 문법에서 중괄호를 없애고 괄호와 콤마만으로 표현 할수가 있다. 작동원리는 = (a, b, c) 이렇게 작성할 경우, 1) a 실행 2) b 실행 3) c 리턴 이다. 그래서 obj+=value가 두번 실행되고 obj를 리턴해서(1+=2, 3+=2, 5) 답이 5가 나온다. let a = (obj, value) => (obj+=value, obj+=value, obj); a(1,..
![[JS] 📚 ES6 템플릿 리터럴 사용법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc8b4ck%2FbtrfuPxsIgy%2FfpSRbV57lFt2ZgiFFHL6z0%2Fimg.png)
[JS] 📚 ES6 템플릿 리터럴 사용법 정리
Template literals 템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 선진적인 방식입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. 템플릿 리터럴 기본 문법 `string text` // 문자열 표현 `string text line 1 string text line 2` // 개행된 문자열 표현 var expression; `string text ${expression} string text` // 변수값 문자열 조합 function tag() { }; tag `string text ${expression} string text` // 함수 호출 아규먼트 템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)..
📚 return function() 함수를 리턴 하는 기법은 어디에 사용될까?
자바스크립트의 함수를 리턴하는 함수 클로저에서도 보았고 우리는 자바스크립트 코딩하면서 가끔 함수 자체를 리턴하는 함수를 한번쯤은 보았을 것이다. function hello(){ return function world(){ return "Hello Word"; } } const a = hello(); // == world() 원리는 알겠다. 사용법도 알겠다. 그런데 대체 이러한 기법이 어디에 쓰이는건가? 왜 굳이 값을 리턴하면되지 함수안에 함수를 리턴하는가? 지금부터 return function() {} 의 실용 기법을 알아보자. 일반적인 이벤트 콜백 함수 등록법 여기 버튼이 3개 있는 웹문서가 있다. C1 C2 C3 우리는 저 3개의 버튼마다 다음과 같이 이벤트 리스너를 등록할 예정이다. addEven..
![[JS] 📚 자바스크립트 map 과 filter 차이](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FObPvs%2FbtrgdDCOJhg%2FNF7RHkAWk8fp1WU511EIg1%2Fimg.jpg)
[JS] 📚 자바스크립트 map 과 filter 차이
자바스크립트 map() / filter() 함수 둘은 매우 비슷하게 생겼다. 콜백함수의 인자도 거의 똑같고 생김새도 완전 판박이라 할수 있다. 다만 각 함수의 리턴하는 기능이 다르다고 볼수 있다. map() callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 생성 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가짐 currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : cal..
![[JS] 📚 reduce 고차함수 - 이해하기 쉽게 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl2YDw%2Fbtr0ozOyxI6%2F5K5zk5tg0PJvmpf8UBGWm1%2Fimg.webp)
[JS] 📚 reduce 고차함수 - 이해하기 쉽게 설명
Array에는 map()이나 filter()나 join() 같은 메소드들이 있다. 사실 위의 기능은 모두 reduce로 구현이 가능하다. for in, for of, forEach 를 몰라도 생 for문으로 모두 구현할 수 있듯이 말이다. 한마디로 reduce는 Array메소드들의 아버지라고도 불리울수도 있다. 또한 initialValue에 배열이나 객체를 주면 전역으로 객체변수를 하나 만드는 듯한 효과를 낼 수 도 있다. reduce 고차함수 - 배열의 왼쪽부터 콜백 함수를 실행 후 누산함 배열.reduce( function(acc, cur, index, arr) { } [, initialValue] ) 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (sr..
![[JS] 📚 map 고차함수 - 이해하기 쉽게 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkNriS%2Fbtr0oPKwDJB%2FQ2kUNON9JrK8gQmZnz9JH1%2Fimg.webp)
[JS] 📚 map 고차함수 - 이해하기 쉽게 설명
map 고차함수 map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. array를 돌면서 array 로 결과가 출력된다. array.map(callbackFunction(currenValue, index, array), thisArg) currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : callbackFunction 내에서 this로 사용될 값 var numbers = [ 1,2,3,4,5,6,7,8,9]; function multiplyTwo(number){ return number *2; } var newNumbers = numbers.map(multiplyTw..
![[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGmoz3%2Fbtruey8tTid%2FTOGapqcJOdmM1xEhmoKVk0%2Fimg.png)
[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)
LocalStorage / SessionStorage API 소개 html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다. [ localStorage ] - 로컬에 도메인 별로 지속되는 storage - localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다. - 값을 지우려면 직접 지워줘야한다. (나는 지우기 직전까지 죽지않아) [ sessionStorage ] - 세션이(프로세스, 탭, 브라우저) ..
![[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbV8a0s%2FbtrfXyhqGb1%2FYimJMLP77H72UB0kojd7l1%2Fimg.jpg)
[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기
Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자. ex) username = 홍길동 브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. 💡 쿠키와 세션..
