Java Script(28)
-
Day81 - [js]구글 API (지도) 사용하기
이번에는 구글 API 를 이용해서 구글맵 을 이용해 봅시다. 구글 맵 API 먼저, 구글 API 를 사용하기 위해서는 , 해외에서 사용가능한 카드가 필요합니다 ! 구글 디벨로퍼를 검색해주세요 해당 사이트에 들어가서, 아래 있는 Maps Platform 을 눌러 줍니다. 구글 아이디로 로그인을 한 뒤에, 시작하기를 눌러주세요 그러면, 차례대로 어떻게 해야 하는지 나옵니다. 시작하기를 누르면, 이제 결제 계정을 선택해야 하는데요, 여기에 해외에서 사용할 수 있는 카드를 등록하면 됩니다. 처음 할 때는 1달 무료 평가판을 시작하면 됩니다 ! ( 1달 후 상업적 용도는 돈을 내야함 ) 카드 등록까지 끝나게 되면, 프로젝트가 1개 생성되고, API 키가 하나 생성이 됩니다. ※ 인증키는 타인에게 노출되지 않도록 ..
2021.06.11 -
Day80 - [js]카카오 로그인 기능
이번에는 java script 의 openAPI 를 이용해서 카카오 로그인을 구현해 볼 겁니다. 카카오 로그인 카카오는 openAPI 가 굉장히 친절하게 잘 되어 있습니다. 카카오 디벨로퍼 로 들어가주세요 해당 사이트에 들어가서, 카카오 아이디로 로그인을 해줍시다 ( 카카오 디벨로퍼 회원가입 ) 카카오 로그인 의 문서보기를 클릭해서 시키는 대로 차례차례 따라하면 됩니다. 어떤 기능들이 있고, 어떻게 구현하는지 1번씩 쭉 읽어보면 좋습니다. 그러면 카카오 로그인을 한번 구현해 봅시다. 1. 앱 만들기 ( 웹 만들기 ) https://developers.kakao.com/docs/latest/ko/getting-started/app Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을..
2021.06.10 -
Day80 - [js]오픈 API
이번에는 java script 의 오픈 API 를 알아 봅시다. 오픈 API API(Application Program Interface) 라고 합니다. 이는, 이미 만들어져 있는 기능들의 라이브러리를 사용하는 방법 이라고 할 수 있겠습니다. 이번에 저희가 해볼꺼는, 아래 페이지에 있는 공공 WIFI 의 정보에 접근해볼 겁니다.https://data.seoul.go.kr/ 서울 열린데이터광장 모든 서울시민을 위한 공공데이터 열린데이터광장에서 서울시와 연계 기관이 공개한 공공데이터를 확인하실 수 있습니다. 서울시와 관련된 다양한 공공데이터를 확인해 보세요. data.seoul.go.kr 보통 만들어져 있는 API 를 사용하기 위해서는, 인증키가 필요하기 때문에, 해당 사이트에 회원가입을 하고 인증키를 발급..
2021.06.10 -
Day80 - [js]비동기 02
이번에는 어제 알아본 java script의 비동기에 대해서 조금 더 알아 봅시다. 비동기 어제 알아본 비동기 방식은 fetch 를 이용해서, text() 를 사용해서 문자열로 바꿔주는 걸 봤었죠? fetch는 text 뿐 아니라, json 을 사용할 수 있습니다. .json 파일을 json 형식으로 만드는 것이기도 하고, json(객체) 으로 된 것을 가져오는 것 이기도 합니다. 먼저, "hi.json" 이라는 파일을 만들어서 아래와 같이 데이터를 작성해 줍시다. ( {"키":"값"} ) 의 형태 ※ 실제로, 비밀번호를 파일에 명시되도록 저장하지는 않음. 그리고 fetch 를 사용하는 곳에서, 아래와 같은 공간을 만들어 줍니다. 어제 .text() 가 들어가는 자리에, .json() 으로 바뀌었을 뿐 ..
2021.06.09 -
Day79 - [js]비동기 01
이번에는 java scirpt의 비동기 fetch 에 대해서 알아 봅시다. 비동기 fetch fetch 는 java script 에서 지원하는 비동기 방식 인데요 비동기 방식은 페이지의 이동이 일어나지 않고, 특정한 곳에 데이터를 전달하는 방법 입니다. 해당 방식은 콜백함수를 이용해서, 다른 작업을 처리하는 도중에 이루어집니다. 이는 해당 코드를 처리하는데 시간이 얼마나 걸릴지 모르기 때문에, 그 뒤에 있는 코드를 먼저 처리하라는 것 입니다. 비동기 방식에는 여러가지가 있는데, 그 중에 fetch 를 이용해서 알아 봅시다. 먼저, 특정한 데이터를 만들어 주기 위해서 "hi.txt" 라는 파일을 만들고, 안에 데이터를 아무렇게나 작성을 했습니다. 위처럼 작성을 해주면 되는데요, 하나씩 보도록 합시다. 먼저..
2021.06.09 -
Day79 - [js]쿠키
이번에는 java script 에서 쿠키 에 대한 사용법을 알아 보겠습니다 쿠키 쿠키는, JSP 에서 한번 공부 했었는데요 페이지에 어떠한 변수를 저장 하는 방법이었습니다. 특징은, 페이지에 저장할 때, 소멸시간도 같이 저장을 해서, 설정해 놓은 시간이 지나면 사라지게 됩니다. 쿠키 생성 JSP 에서는, cookie 를 그냥 쉽게 사용할 수 있었는데, java script 에서는 cookie 를 만들어 줘야 합니다. 쿠키는 'name=value;' 의 형태를 띄고 있습니다. 그리고, 소멸날짜 를 가지고 있죠 그래서, 아래처럼 쿠키가 소멸될 시간을 만들어 주어야 합니다. 쿠키를 'name=value;' 의 형태와 날짜에 대한 값을 저장했다면, 마지막으로 document.cookie 에 대입해주면 됩니다. ..
2021.06.09