Front/Java Script (15) 썸네일형 리스트형 변수의 유효범위 (지역변수, 전역변수) 불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다. (function(){ 위의 MYAPP변수와 관련된 코드들 ~~~ }()) 함수의 이름을 붙이지 않고 정의하는것 -> 익명함수 함수 뒤에 ()를 붙이면 바로 실행한다는 의미 함수를 괄호()로 감싸면???? 위의 방법은 자바스크립트에서 로직을 모듈화 하는 일반적인 방법이다. 유효범위의 대상 (함수) JAVA에서는 for문, if문의 중괄호 블록도 지역변수가 될 수 있는 유효범위가 되지만, 자바스크립트에서는 for, if문안에서 선언된 변수는 지역변수가 아니다. 함수안에서 선언된 변수만이 지역변수가 된다 (함수만 유효범위가 될 수 있다) 정적유효범위 함수 b가 정의될 때를 기준으로 변.. Interface(인터페이스) - UI(User Interface) & API(Application Programming Interface) Interface (인터페이스) 계층적인 관계의 접점이 되는 것을 인터페이스라고 한다. UI (User Interface) 사용자를 대면하는 접점이 되는 지점. 1. 노트북의 입력장치, 출력장치 (하드웨어적 UI) 사용자가 입력할 수 있는 키보드, 터치패드 등과 같은 입력장치 컴퓨터의 상태 등을 밖으로 출력해 주는 모니터, 스피커 등과 같은 출력장치 2. 윈도우 바탕화면, 웹 브라우저 UI (소프트웨어적 UI) 사용자의 의중을 시스템에게 전달하고, 시스템의 상태를 사용자에게 보여준다. 사용자가 클릭하면 원하는 값을 출력해낼 수 있음. API (Application Programming Interface) 코드의 형태를 띄고 있는 인터페이스. ** API 사용해보기 주소창 아래와 같이 입력하면 웹브라우저에.. 모듈(Module) & 라이브러리 - 호스트 환경에 따른 모듈의 로드 모듈 복잡한 코드를 서로 관련 있는 객체나 함수끼리 정리하여 여러개의 파일로 분리한다. 순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않는다. 자바스크립트에서만 사용하는 용어가 아니고, 프로그래밍에서 일반적으로 사용하는 용어. 라이브러리 목적을 정해놓고 목적을 쉽게 달성할 수 있도록 만들어놓은 코드들의 집합 예) jQuery - jQuery를 사용하기 위해서는 jQuery의 모듈들을 다운받아서 프로젝트에 넣어야 함. 음.. 그럼 차이점이 뭘까??!! 여러개의 파일로 분리되었을때 하나의 파일을 모듈. 라이브러리는 여러개의 모듈들로 만들어진 기능을 가진 커다란 모듈덩어리라고 생각한다. (라이브러리가 모듈보다 더 큰 범위) 또한 라이브러리는 프로그램을 개발할 때 많이 사용하는 기능들을 여러 사.. HTML <canvas> 태그 - 초록색 사각형 그리기 1. html 2. java script const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100); 출처 developer.mozilla.org/ko/docs/Web/HTML/Element/canvas developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Looping_code 스크립트의 로딩 방법 ( 내부 & 외부 자바스크립트 / async & defer ) 작성된 스크립트를 브라우저가 적절한 때에 로딩하는 것에 대해 몇가지 이슈가 있음. HTML Document의 body가 해석되기 전인 head 부분에 로드되고 실행되는 것은 에러를 일으킬 수 있음. 해결방법 1 내부 자바 스크립트 예제 : "DOMContentLoad" 이벤트 사용. "DOMContentLoad" 이벤트는 브라우저가 완전히 로드되고 해석될때 발생된다. document.addEventListener("DOMContentLoaded", function() { ... }); 해결방법 2 외부 자바 스크립트 예제 : async 속성 사용 (외부 스크립트에서만 동작) 일반적으로 HTML요소를 로딩하는 중 태그를 만나면 JavaScript의 내용이 모두 다운될 때까지 HTML로딩은 멈추게 되는데, .. Callback : Synchronuous(동기) / Asynchronuous(비동기) Synchronous(동기) Vs Asynchronous(비동기) 1. Callback(콜백 함수) : 함수에 인자로 넘겨주는 함수 콜백함수는 인자로 넘겨주는 함수의 역할에 따라, 동기 또는 비동기로 실행 될 수 있음. 2. 콜백 처리 방식에 따른 차이 ( 동기 vs 비동기 ) JavaScript 내부에 있는 함수 -> 콜백을 동기 방식으로 처리 JavaScript 외부에 있는 함수 -> 콜백을 비동기 방식으로 처리 ( 예: 타이머함수(setTimeout), onclick이벤트 ) ** 타이머는 브라우져에 있는 시간을 가져다 쓰고, Onclick은 Dom에서 가져오므로 둘다 자바스크립트 외부에 있음. 3. 콜백 처리 순서 - 동기 방식으로 처리하는 함수 : Queue에 들어있는 Main함수가 Stack에.. fetch().then() /* openweathermap api로 날씨를 가져오기 */ const latitude = ' '; const longitude = ' '; const API_KEY = ' '; fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}` ) .then(function(response){ console.log(response); }); response에 있는 body는 보이지 않음. 이 body는 스트림이고, 데이터가 완전히 다 받아진 상태가 아님. /* .json() 함수 사용 */ fetch( `https://api.openweathermap.org/data/2.5/we.. 이전 1 2 다음
