반응형 [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. 호이스팅(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. 왜 자바스크립트일까? 개인적으로 HTML과 CSS는 정말 재밌게 배웠습니다. 자바스크립트(javascript)도 초반에는 재밌었습니다. 그러나..갈수록 어렵고 깊이가 엄청난걸 느꼈습니다. 이래서 T자형 커리어가 중요한가봅니다. 앞으로 자바스크립트, 리액트를 중점적으로 공부할 생각인데 이 녀석은 제대로 알고가야 사용하면서도 찝찝하지 않을 것 같아서 글로 정리해보려 합니다. 어떻게 탄생하게 되었을까? 넷스케이프에 대해 아시나요? 1994년 마크 앤드리슨은 넷스케이프 내비게이터라는 웹 브라우저를 개발했고, 인터넷 사용자들의 폭발적 반응을 얻어 약 90%의 시장점유율을 차지했었습니다. 마크 앤드리슨은 정적인 페이지에 대해 "어떻게 하면 동적인 웹사이트를 만들 수 있을까?"를 고심하게 되고, DOM 요소를 조작할 수 있는 스크립트 언.. 2020. 11. 4. JS 콜백 함수(Callback Function) 콜백 함수(callback function)가 뭘까..? 자바스크립트 강의나 리액트 강의를 듣다보면 콜백이란 단어가 자주 나옵니다. 콜백이란 단어를 모르고 시작하기엔 찝찝해서 공부한 내용을 공유 해보겠습니다. 콜백(callback)이란? 프로그래밍에서 콜백은 다른 코드의 인수(argument)로써 넘겨주는 실행 가능한 코드를 말합니다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도, 나중에 실행 할 수도 있습니다. JS의 함수는 객체(Object)이다. 그것도 1급 객체(first class object)입니다. 1급 객체의 조건은 다음과 같습니다. 변수(variable)나 데이터 구조안에 담을 수 있다. 객체의 인자(argument)로 전달할 수 있다. 반환값(return value).. 2020. 10. 23. 이전 1 2 3 4 5 다음 반응형
