본문 바로가기

JavaScript18

JavaScript/엘리 - 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 node.js 에는 JS 엔진이 있어서 브라우저 없이도 JS를 실행할 수 있다. index.html을 만들어서 main.js를 연결한다. 이 파일을 라이브 서버를 열고, 콘솔창을 연다. node.js와 웹 API 둘 다 콘솔에 관련된 API가 있다. 그리고 이 두 API들의 인터페이스가 동일하다. https://developer.mozilla.org/ko/docs/Web/API/Console_API Console API Console API는 코드의 특정 지점에서 값이나 변수를 기록하고, 작업의 소요 시간을 알아내는 등 개발자가 사용할 수 있는 디버깅 기능을 제공합니다. developer.mozilla.org Web API 중 하나이다. Applicaition Programming Interface We.. 2020. 6. 13.
JavaScript/엘리 - 1. JavaScript의 역사와 현재 그리고 미래 크롬, 엣지의 V8 엔진 - node.js, 일렉트론 BABEL - 최신 ES으로 개발하고, 배포할 때는 transcompiler로 5, 6으로 변환 SPA (Single Page Application) - 하나의 페이지 안에서 데이터를 받아와서 필요한 부분만 부분적으로 업데이트 - 리액트, 앵귤러, 뷰, 백본 등(라이브러리, 프레임워크)으로 더 쉽게 만들 수 있다. Node.js - V8 JS 엔진을 이용한 백엔드에서 서비스를 구현 가능 리액트 네이티브, 콜도 등을 이용해서 모바일 앱도 만들 수 있다. 일렉트론을 이용해서 데스크탑 앱도 만들 수 있다. 브라우저에서 동작할 수 있는 유일한 언어는 JS였지만, 요즘에는 웹 어셈블리가 등장해서, 다양한 언어들을 이용해서 웹 앱을 만드는 것이 가능해졌다. 드림.. 2020. 6. 13.
5/10(2) 생활코딩 - JavaScript 完 오늘의 진도: WEB2 - JavaScript 파일로 쪼개서 정리정돈하기~수업을 마치며 1. 파일로 쪼개서 정리정돈하기 파일 또한 정리정돈의 도구이다. 서로 연관된 코드들을 파일로 묶어서 그룹핑할 수 있다. night 버튼이 있는 input 태그를 다른 웹페이지에 배포해보자. 회색으로 표시한 부분을 복사해서 다른 웹페이지에 붙여넣으면 잘 작동하지 않는다. 자바스크립트는 따라가지 않았기 때문. 이 때 colors.js라는 파일을 만들고, 공통적으로 들어가는 코드를 카피해서 붙여넣는다. ※ script 태그가 들어가면 안 된다! 그리고 모든 웹페이지의 head 안에 script src="colors.js" 코드를 추가하면 정상적으로 작동한다. 2. 라이브러리와 프레임워크 다른 사람이 만든 SW를 부품으로 해.. 2020. 5. 11.
5/10 생활코딩 오늘의 진도: WEB2 - JavaScript 객체 예고~객체 활용 1. 객체(object) 예고 객체는 함수라는 기반 위에서 존재하는 것이다. 객체의 다면적인 얼굴 중 딱 하나만 볼 것이다. 객체 또한 정리정돈의 수단이다. 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구이다. night 버튼 코드에서 회색으로 표시한 두 부분이 파우더블루와 블루만 다르고 중복되는 것을 볼 수 있다. 해당 부분을 setColor라는 함수로 만들고 color라는 매개변수를 정한 후, 코드 안의 파우더블루를 color로 바꿨다. 그리고 원래 코드가 있던 자리로 가서 원래 코드를 지우고 setColor라는 함수를 쓰고 파우더블루와 블루를 각각 써준다. → 완성 target.style... 2020. 5. 9.
5/9(2) 생활코딩 오늘의 진도: WEB2 - JavaScript 함수예고~함수의 활용 1. 함수(function) 예고 (1) 함수의 기본 함수는 수납상자처럼 코드들을 정리정돈하기 위한 도구이다. 야간모드 버튼을 함수로 만들어보자. 야간모드 코드를 잘라내서 head 안에 script 태그 안에 붙여넣었다. (꼭 head 안에 할 필요는 없다.) 그리고 이것을 nightDayHandler라는 이름의 함수로 만들었다. nightDayHandler 뒤의 괄호 안에 self를 쓰고, 기존의 this들을 모두 self로 바꾸었다. body에 input에 onclick에 nightDayHandler라고 쓰고 괄호 안은 this로 바꿨다. 이렇게 하면 nightDayHandler라는 함수를 실행시키라는 뜻이 된다. 2. 함수 (1) .. 2020. 5. 9.

티스토리툴바