본문 바로가기
반응형
다사다난한 Open API와 CORS - 1 새로운 프로젝트를 시작했습니다. 지난 날씨 API를 이용한 프로젝트에 이어서 공공데이터인 코로나 API를 불러와서 한국 코로나 현황을 알려주는 프로젝트를 만들어보려고 합니다. 이번엔 약간의 목적을 갖고 프로젝트를 시작했고, 그 목적은 다음과 같습니다. HTML/CSS/JavaScript를 통한 프론트 엔드 개발 능숙도 처음보는 API의 공식 문서를 읽어보고, 구조 파악 및 사용해보기 만드는 과정에서의 공학적 사고 역량 제한된 시간 안에서 완성하기 (일주일) 처음 시작은 무난했습니다. 첫 날은 프로젝트 자체에 고민을 굉장히 많이 했습니다. 일주일이란 시간 안에 완성해야하기 때문에 'Open API를 사용해서 어떻게 재밌고 심플한 웹 사이트를 만들 수 있을까'에 중점을 두고 고민을 했습니다. 그 와중에 국내.. 2020. 11. 29.
[JavaScript] 기온별 옷차림 추천하기 - 3 지난 2편에 이어서 날씨 API로 받아온 기온별로 옷차림을 추천해주는 기능을 만들었습니다. [JavaScript] 날씨 API 사용하기 - 2 지난 1편에 이어서 웹 페이지에 JSON data를 렌더링 해보겠습니다. CSS 작업까지 조금은 해놓은 상태입니다. [JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트 onlydev.tistory.com 나름대로 디자인에 신경을 썼지만 역시 갈 길이 멉니다. 불러온 날씨 온도에 범위를 정해서 온도에 따라 옷차림을 추천해주는 코드를 짜보았습니다. 온도 범위를 정하자 처음 온도 범위를 정할 때 고민이 많았습니다. '삼항 연산자나 선택지가 한 두개인 경우가 아닌 5 ~ 9라는 범위를 어떻게 정해야할까' 라는 생각이 .. 2020. 11. 25.
[JavaScript] 날씨 API 사용하기 - 2 지난 1편에 이어서 웹 페이지에 JSON data를 렌더링 해보겠습니다. CSS 작업까지 조금은 해놓은 상태입니다. [JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트인 기온별 옷차림(가제, 假題) 첫 단계를 시작했습니다. 제일 먼저 해야할 일은 날씨 API를 사용하는 것이라고 생각했습니다. API를 처음 onlydev.tistory.com 1. HTML 구조 이렇게 간단한 구조도 몇번이고 수정을 거듭한지 모르겠습니다. JavaScript로 DOM 조작을 하기 위해 각 자리에 들어갈 class를 정해주었습니다. 2. JavaScript Code 1편에 만들었던 코드를 토대로 alert가 아닌 loadWeather(data) 함수를 만들어 보겠습니다. .. 2020. 11. 19.
[JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트인 기온별 옷차림(가제, 假題) 첫 단계를 시작했습니다. 제일 먼저 해야할 일은 날씨 API를 사용하는 것이라고 생각했습니다. API를 처음 사용해봤고, 기록해두고 공유하면 좋을 것 같아서 글을 씁니다. 이 프로젝트를 만든 이유는 개발자의 입장에서 본 기온별 옷차림 글에서 보실 수 있습니다. 😁 개발자의 입장에서 본 기온별 옷차림 요즘 날씨가 워낙 일교차가 크고 날마다 달라지다보니 기온별 옷차림이란 키워드가 실시간검색에 자주 노출이 되는걸 보게 되었습니다. 그래서 문득 '날씨 앱이나 웹 페이지에 바뀐 온도마다 onlydev.tistory.com OpenWeather API 날씨 API는 OpenWeather API를 사용합니다. 다른 날씨 API도 많았.. 2020. 11. 17.
JSON Viewer로 보기 쉽게 변경하기 JSON을 불러올 때 가독성이 너무 좋지 않아서 방법을 찾던 중 괜찮은 확장 프로그램을 찾아서 공유해봅니다..! 크롬 웹스토어에 들어 가셔서 JSON이라고 검색하시면 나옵니다. 날씨 API로 예를 들어보겠습니다. 크롬이나 웨일 브라우저에서 JSON을 불러오면 위 이미지와 같이 가독성이 좋지 않습니다. 웹 스토어에서 JSON Viewer를 설치하고 새로고침을 하면 아래와 같이 가독성이 좋아집니다. 또한 JSON Viewer 옵션에서 테마를 변경할 수도 있습니다. 훨씬 보기가 편리해져서 만족하며 사용하고 있습니다. 2020. 11. 16.
개발자의 입장에서 본 기온별 옷차림 요즘 날씨가 워낙 일교차가 크고 날마다 달라지다보니 기온별 옷차림이란 키워드가 실시간검색에 자주 노출이 되는걸 보게 되었습니다. 그래서 문득 '날씨 앱이나 웹 페이지에 바뀐 온도마다 실시간으로 기온별 옷차림을 추천해주면 어떨까?'란 생각이 들었고 재밌을 것 같아서 글을 쓰게 되었습니다. 글을 쓰면서 알게되었는데 기온별 옷차림을 추천해주는 어플은 이미 존재하더라구요. (역시 사람 생각은 비슷한 것 같습니다.) 하지만 웹 사이트는 아직 없는 것 같아서 오늘부터 조금씩 만들어보려고 합니다. 무엇보다 재밌을 것 같고 다른 사람들에게도 도움이 되지 않을까 싶습니다. 프로그래밍을 배우면서 점점 '개발자의 시각'을 갖게 되는 것 같아서 신기하기도 하고 뿌듯하기도 합니다. 평소같으면 그냥 지나칠 것들도 이용자가 아닌 .. 2020. 11. 16.
호이스팅(Hoisting) 이해하기 호이스팅(hoisting)은 '변수와 함수의 선언부가 각자의 현재 스코프에서 물리적으로 코드 최상단으로 끌어올려지는 것'으로 많이들 알고계시지만 실제로는 그렇지 않습니다. 자바스크립트 엔진 내부적으로 처리를 그렇게 하는 것입니다. 컴파일 단계에서, 여러분이 작성한 코드가 실행되기 바로 직전에 변수와 함수의 선언부들이 쭉 스캔 됩니다. 스캔 된 변수와 함수의 선언부들은 Lexical Environment로 불리는 자바스크립트의 자료구조 메모리상에 추가됩니다. 따라서 메모리에 존재하는 변수와 함수는 실제 선언 이전에 사용될 수 있습니다. - cada님의 벨로그 번역글 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드 그자체는 작성한 위치 그대로 존재합니다. 함수 선언식(function decl.. 2020. 11. 14.
반응형

티스토리툴바