> 개발/Javascript16 [Javascript] Netlify 바닐라 JS 프로젝트 배포 & API key 적용하기 6월 첫째주부터 셋째주까지 매주 시험을 보느라 바빴다. 첫째주에는 정처기 필기 시험을 봤고 둘째주와 셋째주에는 방송대 기말시험을 3과목씩 봤다.... 이제 숨통이 트여서 포스팅하러 왔다. Netlify로 프로젝트를 배포하는 방법은 굉장히 쉽다. 한 번 해보고 이렇게 금방 사이트를 배포할 수 있다는 사실에 깜짝 놀랄 정도였다! 사이트 배포하기 깃허브 레파지토리가 있는 상태라면 Add new site - Import an existing project를 클릭한다. 레파지토리의 공개 여부와 상관 없이 사이트를 배포할 수 있다. 연결할 레파지토리를 선택하고 나면 이렇게 배포가 진행된다. 에러 발생 사이트에 접속하면 404 에러가 생긴 걸 알 수 있다. 날씨 API 연결에 실패해서 날씨에 따른 배경화면이 나타나지.. 2023. 6. 23. [Javascript] API KEY 관리하기 - config/apikey.js weather API에서 날씨 정보를 가져올 때 API key가 필요하다. 이때 API key가 노출되면 권한이 없는 사용자가 무단으로 접근하거나, 민감한 데이터가 유출될 수 있다. 또한 사용량에 따라 요금을 납부하는 경우 과다한 사용량 증가로 많은 요금을 납부하는 경우가 생길 수 있다. 그렇기 때문에 API key가 노출되지 않도록 관리를 해야 한다. 이번 미니 프로젝트를 만들 때 레파지토리를 비공개로 해놓았었기에 API key 는 나중에 관리하면 되지~ 라고 생각했는데, git push로 api key가 공개됐으면 그 키는 재발급해야 한다고 한다. 그래서 api key를 재발급받고 다음과 같이 api key가 노출되지 않도록 관리를 했다. config 폴더 안에 apikey.js 추가하기 config.. 2023. 6. 15. [Javascript] 스탑워치 만들기 스탑워치를 만드는 방법 스탑워치 구현 방법을 생각했을 때 가장 먼저 떠올랐던 생각은 시작 버튼을 클릭한 시간 - 현재 시간을 실시간으로 재면 되지 않을까? 였다. 이 방법을 사용하면 정지 버튼을 눌렀다가 시작 버튼을 눌렀을 때 멈춰있던 시간부터 다시 이어서 시간을 재기 어렵는 문제가 있었다. 그래서 0초부터 1씩 더하다가 정지를 하면 더하기를 멈추고, 다시 시작을 누르면 다시 1을 더하는 방식으로 구현하기로 했다. time = 0 으로 설정해주고, 시작 버튼을 누르면 time ++ 이 된다. 시간은 시간 단위, 분 단위, 초 단위로 쪼개져서 각각 hour, minute, second 에 저장된다. 그리고 그걸 화면에 나타내도록 구현했다. let time = 0; let timerState = null; .. 2023. 5. 21. [Javascript] 날씨에 따라 배경 이미지 변경하기 openweathermap 으로 얻어진 날씨 정보에 따라 배경 이미지를 변경하는 방법을 알아보자! 활용할 값을 변수에 담아주기 먼저 날씨 정보 중 내가 사용할 온도와 날씨 정보를 변수에 담아 저장하자. const temp = result.main.temp; const weather = result.weather[0].main; 날씨 정보 한글로 변환하기 weather는 날씨에 따라 Clear, Rain, Mist 등으로 표현된다. 나는 영어가 아닌 한글로 화면에 정보를 나타내고 싶어서 얻은 결과값을 weatherValue에서 찾아 한글로 변환할 수 있도록 코드를 작성했다. const weatherValue = { Clear: "맑음", Rain: "비", Thunderstorm: "뇌우", Snow: ".. 2023. 5. 20. [Javascript] geoloaction으로 내 위치 가져오기 이번에는 Geolocation API 를 이용해서 내 위치 정보를 가져오고, 그 다음에 내 위치의 날씨 정보를 가져올 것이다. Geolocation API 사용하기 - Web API | MDN Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 글에서는 Geolocation API의 기초 사용법을 설명합니다. developer.mozilla.org 사용자의 현 위치 가져오기 : getCurrentPosition 매서드 사용자의 현재 위치는 getCurrentPosition() 메서드를 호출해서 가져올 수 있습니다. 이 메서드는 사용자의 위치를 탐지하는 비동기 요청을 시작하고, 위치 관련 하드웨어에 최신 정보를 요.. 2023. 5. 19. [Javascript] JSON과 open weather map API : 날씨 정보 가져오기 에고공 요새 자전거를 타느라 바빠서 블로그에 신경을 못 썼다. 오랜만에 글을 쓴다. 큐큐 코드를 작성할 때 통신 기능을 구현하는 경우가 많기 때문에 API 이해도가 높아야 한다. 그래서 open weather map API를 활용하면서 JSON 데이터를 다루는 법을 공부해보려고 한다. JSON 이란? JSON은 Javascript Object Notation의 줄임말이다. JSON은 문자 기반의 데이터 교환 형식이다. typeof 로 JSON의 데이터 타입을 확인하면 string이 나온다. JSON의 구조는 객체 리터럴 작성법을 따르기 때문에 마치 객체처럼 생겼다. 하지만 객체와 달리 키에 꼭 큰따옴표가 있어야 하며, 값에도 꼭 작은 따옴표가 아닌 큰따옴표를 사용해야 한다. 그리고 데이터를 교환하기 위해.. 2023. 5. 18. 이전 1 2 3 다음
