본문 바로가기
반응형
[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.
<script> 태그의 속성 async와 defer의 차이점 HTML 안에 자바스크립트를 포함 시킬 때 다양한 방법이 존재합니다. 크게 4가지를 알아보겠습니다. 1. 태그 안에 태그를 포함시킨 경우 브라우저는 HTML을 쭉 읽다가 태그를 만나면 스크립트를 먼저 실행해야 되므로 HTML 파싱(DOM 생성)을 멈춥니다. 필요한 .js 파일을 서버에서 받아와 다운로드 후 실행합니다. 다시 HTML 파싱을 시작합니다. 모든 DOM 생성이 완료됩니다. 이런 방식으로 스크립트를 불러오게 될 경우, 스크립트 파일 용량이 크거나 인터넷 환경이 느린 경우에 페이지 로딩이 길어질 수 있는 문제가 발생할 수 있습니다. 또한 태그 아래의 DOM 요소를 접근하는 코드가 있을 경우 JavaScript가 먼저 실행됐기 때문에 DOM 요소에 접근이 불가능합니다. 따라서 좋은 방법은 아니라고 .. 2020. 11. 12.
반응형

티스토리툴바