728x90 반응형 SMALL Web/JavaScript16 navigator를 사용해 내 위치 확인하기(위도, 경도 확인) 내 위치의 날씨 정보를 얻고 싶어 찾고 찾다가 날씨정보는 openweather API를 사용해 얻어 냈으나. . 도시를 입력해야 한다는거 때문에 다른 방법이 있을거 같은데. . . 싶어 navigator를 찾아내게 됬다 저기에 내 위치 함 넣어 보자고~ 스크립트에 log()말고 dir() 해서 navigator을 해보면 별별게 다 있다 여기기서 카메라 켜는거, 뭐 블루투스연결 하는거, 지금 하려는 위치정보 등등 정보를 가져올수있다 그중 볼거는 이거 geolocation 이다 열어 보면 여러 함수들을 불러다 쓸수있다 말하고 있다 그럼 함수 하나 만들어보다 getCurrentPostion()불러와 보면.. 콜백 함수를 불러오게 되있다 success 콜백함수과 error 콜백함수를 불러와야 한단다 그럼 콜백 .. 2023. 8. 24. 14)JavaScript Web Animation Library Typelt 라이브러 글자를 타이핑하듯 만들어내는 라이브러리 https://www.typeitjs.com/ TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 사용방법으로는 총 JS, React, 워드프레스 이렇게 3가지가 있고 우린 JS를 쓸거니까 이렇게. . 스크립트에 바로 CDN 링크를 갖다 쓸수도 있고 node환경에선 저거 라이브러리를 갖다 설치해 쓸수도 있다 예제 head 태그에 script 태그 두개 넣을껀데 하나는 아까 CDN링크가 든놈이랑 또하나는 타이핑 코드가 들어갈 JS파일 이렇게 준비한다 그리고 JS 파일에 순차적으로 이런식으로... 이벤트리스너를 사용해 콜백함수로 T.. 2023. 6. 14. 13)JavaScript_ES6, ES11에 있 문법 정리 Shorthand property name JS에서 Object는 key와 value로 이뤄져 있다 미리 저렇게 이름과 나이가 변수로 사용되고 있는걸로 이렇게 새로운 Object를 생성해 만든다면 이렇게 된다. . 그런데 만약 저렇게 key와 value의 값이 같은 경우라면 사실 생략해도 된다 뽑아보면 다 같다. Destructuring assignment Object의 key와 value에 접근하기 위해선 이렇게 Object.key를 해야 했다 그런데 해당 Object에 있는 key의 이름 { } 로 정의해 주면 저기 student에 있는 것들과 각각 할당이 되어 진다 그럼 꼭 동일한 명으로만 선언해줘야 함..? Nope. .! 오리지널 키명: 바꿀명 하면 됨 배열에서도 가능함 기존에 배열에 접근 하기.. 2023. 6. 13. 12)JavaScript_함수를 전달하는 기본 개념 정리 함수를 JS에서 전달하는 기본 개념 정리 함수는 뭔 언어를 쓰든 기본적으로 이 2가지만 이해하면 됨 1. 함수 선언 2. 함수 호출 function() 선언과 호출 먼저 뭔 역활을 하는 함수 하나를 이렇게 정의 해보자 저기 () 는 함수의 어떤 값을 전달받아 올건지 인자를 정의하는 부분과 {} 에는 이 함수 안에서 어떤 기능이 수행될 코드가 들어갈 부분으로 나뉘어진다 지금 상태로는 뭔 기능도 없으니 consol.log()를 뽑아보는 기능이라도 넣어보자 여기까지가 함수 선언 한 상태이며 이대로는 아무런 액션도 취하지 않는다 호출을 해야한다 이렇게 특정 기능만 수행하고 끝내는 함수가 있는가 하면 특정 계산을 끝내 값을 리턴하는 함수도 있 값 리턴 함수 값받아 더하는 add라는 함수가 이렇게 있다고 하자 그 .. 2023. 6. 13. 11)JavaScript_ async, await, Promise APIs 앞에서 콜백 함수로 지옥을 보여줬고 https://whaledowny.tistory.com/12 9)JavaScript_Callback, 동기처리, 비동기처리 콜백 hoisting이 된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나하나 동기적으로 실행된다는것 hoisting?? : var, function 선언등이 자동적으로 가장 위로 올라가는것을 말함. 호이스팅이 이뤄진 whaledowny.tistory.com Promise 를 사용하여 그 지옥에서 탈출도 했으며 https://whaledowny.tistory.com/13 10)JavaScript_ Promise 비동기를 간편하게 처리하도록 도와주는 Object 콜백 안쓰고 이 promise 오브젝트를 써서 비동기 코드를 깔쌈하게 만들 해볼거 - .. 2023. 6. 13. 10)JavaScript_ Promise 비동기를 간편하게 처리하도록 도와주는 Object 콜백 안쓰고 이 promise 오브젝트를 써서 비동기 코드를 깔쌈하게 만들 해볼거 - JS안에 내장되어있는 Object. - Promise는 비동기처리를 할때 Callback 함수 대신 유용하게 사용되는 오브젝트 state : 프로세스가 무거운작업을 수행하고있는지, 기능수행이 완료되어 성공했는지 실패했는지 정보제공 Producer와 제공받는 Consumer의 차이 알아야함 Producer, Consumer Promise 오브젝트를 생성했다 이건 주로 네트워크에서 데이터를 받아온다거나 전송을 할 때 아님 뭔가 큰 데이터를 읽어들인다거나 이런건 시간이 걸린다 그래서 이렇게 시간이 좀 걸리는 녀석들은 비동기적으로 처리를 해야 하므로 프로미스를 쓴다 그리고. ... 2023. 6. 7. 9)JavaScript_Callback, 동기처리, 비동기처리 콜백 hoisting이 된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나하나 동기적으로 실행된다는것 hoisting?? : var, function 선언등이 자동적으로 가장 위로 올라가는것을 말함. 호이스팅이 이뤄진 순서대로 자동적으로 나타내진다 비동기를 설명하기에 좋은 예로.. setTimeout() 이라고 브라우져에서 제공하는 API가 있음 지정한 시간이 지날시 지정한 콜백함수를 실행하는 녀석임 밀리세컨드 단위라 1000면 1초를 의미하며 저거 읽으면.. 1뽑고~ 셋탐아웃() 1초 뒤에 2뽑으라네? 3뽑고~ 1초됬다 2뽑고 끝내자! 자자 콜백 함수 정리 끝. . 콜 했는데 저 setTimeout() 안에 1초뒤 백해달라함 그래서 1초 뒤에 콜백함수가 실행된다 Synchronous callback .. 2023. 6. 6. 8)JavaScript_JSON 개념 정리와 활용법 HTTP 브라우에서 동작하고있는 웹 사이트(Client)들이 어떻게 서버(Server)와 통신할 수 있는지를 정의한것 Hypertext Transfer Protocal 어떻게 이 하이퍼 텍스트를 서로 주고받을수있는지를 정의한 프로토콜의 하나 Client는 Server에게 데이터를 요청(request) 하고 Server은 Client로부터 데이를 받은 다음 응답(response) 한다 주고 받는건 이 하이퍼링크 뿐 아니라 이미지나 문서 파일들 까지도 말한다 그리고 주로 AJAX를 사용 했었다 (Asynchronous JavaScript And XML) 웹 페이지에 서버에게 동적으로 데이터 주고받는 기술 XHR( XMLHttpRequest ) 라는 오브젝트가 있는데 이건 Browser API에서 제공하는 오.. 2023. 6. 5. 7)JavaScript_ 배열(Array) 함수 모음 join() 모르는 기능이나 뭐 프로그래밍을 공부할때 라이브러리를 열어 공부 할때 역시 해당 API가 정의된곳으로 가서 사용법을 익혀야 한다 배열에 있는 모든 item들을 더해 string형으로 바꿔주는것 그냥 string으로 만들지 않고 전달해준 separator(구분자)를 통해 전달해준다 배열안의 데이터를 스트링형으로 바꿔라 구분자를 넣지 않았을땐 기본으로 , 가 들어가고 넣었을때 이렇게 구분을 지을수 있다 split() 아까와는 반대되는 개념 separator(구분자)와 limit(제한)을 전달 받는다 이 string을 여러개의 문자열로 나눠주는데 전잘된 구분자를 받아와서 우리가 return받을 배열의 사이즈 지정하는것도 가능하다 스트링형을 배열로 바꿔라 구분자를 줘서 저렇게 배열로 만들수 있고 이.. 2023. 6. 3. 이전 1 2 다음 728x90
