자바스크립트/혼자 공부하는 자바스크립트
-
혼자 공부하는 자바스크립트 10장 - 리액트자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 16. 19:33
리액트 리액트는 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와준다. 리액트 라이브러리를 사용하면 대규모 프론트엔드 웹 앱을 체계적으로 개발할 수 있으며, 리액트 네이티브를 활용해 스마트폰에서도 빠른 속도로 작동하는 애플리케이션을 만들 수 있다. 리액트 라이브러리 사용 준비하기 가장 기본적인 방법은 HTML에서 react.development.js, react-dom.development.js, babel.min.js 세 개의 자바스크립트를 읽어들이는 것이다. 앞의 두개는 리액트를 사용하기 위해 필요하고, babel은 리액트 코드를 쉽게 작성할 수 있게 해준다. 리액트 라이브러리는 단순한 자바스크립트가 아니라, 리액트를 위해서 개발된 자바스크립트 확장 문법(JSX)을 사..
-
혼자 공부하는 자바스크립트 9장 - 클래스자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 16. 19:31
클래스의 기본 기능 C를 제외한 다양한 프로그래밍 언어는, 객체를 우선적으로 생각해서 프로그램을 만드는 객체 지향 프로그래밍 언어가 많다. 클래스라는 문법은 객체를 효율적이고 안전하게 만들어 객체 지향 패러다임을 쉽게 프로그래밍에 적용할 수 있도록 돕는다. 추상화 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념과 기능을 간추려내는 것 대부분의 프로그램은 "우리가 어떤 데이터를 활욯하는가?" 라는 생각으로 부터 시작된다. 현실의 객체는 데이터가 될 수 있는 수많은 속성을 갖고 있기에, 현실의 모든 정보를 컴퓨터 내부에 입력하는 것은 불가능에 가깝다. 프로그램을 만들 땐 필요한 요소만 사용해 객체를 표현하는데, 이를 추상화라고 한다. 학생 성적 관리 프로그램을 만든다고 치자. 우선 학생이라는 객체가 필..
-
혼자 공부하는 자바스크립트 8장 - 예외 처리자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 8. 23:53
구문 오류와 예외 자바스크립트 코드 작성 시 오류는 두 가지가 있다: 구문 오류syntax error: 코드가 실행조차 되지 않는 오류 예외expeption: 코드 실행 중간에 발생하는 오류 예외를 처리하는 것을 예외 처리라고 한다. 오류의 종류 프로그래밍 언어의 오류에는 크게 2가지 종류가 있다: 1) 프로그램 실행 전에 발생하는 오류, 2) 프로그램 실행 중에 발생하는 오류. 1)을 구문 오류라고 부르고, 2)를 예외 혹은 런타임 오류라고 구분하여 부른다. 구문 오류 괄호의 짝을 맞추지 않거나, 문자열을 열었는데 닫지 않았거나 등의 상황에서 발생한다. 이때 웹 브라우저는 코드를 분석할 수 없으므로 실행되지 않는다. 자바스크립트는 구문 오류 발생시 Uncaught SyntaxError 문을 띄운다. 오..
-
혼자 공부하는 자바스크립트 7장 - 문서 객체 모델자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 8. 23:51
문서 객체 모델 DOM, Document Object Model: 문서 객체를 조합해서 만든 전체적인 형태 HTML 요소를 자바스크립트에서는 문서 객체라고 부른다. 즉, 문서 객체를 조작한다는 말은 HTML 요소를 조작한다는 의미이다. DOMContentLoaded 이벤트 문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용한다. 이때, 오탈자를 입력해도 오류가 발생하지 않으므로 주의한다. document.addEventListner("DOMContentLoaded", () => { }) HTML 문서에서, 웹 브라우저가 문서 객체를 모두 읽고 나면(즉, DOMContentLoaded 상태가 되면), 콜백함수를 호출해 문서 body에 DOMContentLoaded 이벤트 발생 이라는 내용..
-
혼자 공부하는 자바스크립트 6장 - 객체자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 1. 18:03
객체 이름name과 값value으로 구성된 속성property을 가진 자바스크립트의 기본 데이터 타입 자바스크립트에서 여러 자료를 다룰 때는 객체를 사용한다. 여러 자료를 다룰 수 있는 배열 역시 객체이다. typeof []를 실행하면 object를 출력한다. 객체는 중괄호{}로 생성하며, 키: 값의 형태의 자료를 ,로 연결해서 입력한다. const person = { name: "Bob", age: 32, handsome: true, interests: ['music', 'skiing'], bio: function() { alert(`${this.name} is ${this. age} years old. He likes ${this.interests[0]} and ${this.interests[1]}...
-
혼자 공부하는 자바스크립트 5장 - 함수자바스크립트/혼자 공부하는 자바스크립트 2021. 7. 31. 00:49
함수 함수 호출 함수를 사용한다. 매개변수 함수를 호출할 때 괄호 내부에 넣는 자료 리턴값 함수를 호출해서 최종적으로 나오는 결과 익명함수 함수는 코드의 집합을 나타내는 자료형이다. 중괄호 내부에 코드를 넣어 사용하기 때문이다. function () {} 함수를 사용하면 좋은 점: 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다. 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다. const 함수 = function () { console.log("함수 내부의 코드입니다 ... 1"); console.log("함수 내부의 코드입니다 ... 2"); console.lo..
-
혼자 공부하는 자바스크립트 4장 - 배열, 반복문자바스크립트/혼자 공부하는 자바스크립트 2021. 7. 25. 15:28
반복문 배열 숫자, 문자열, 불과 같은 자료는 하나의 값만 가질 수 있지만, 배열을 사용하면 여러 개의 변수를 한 번에 선언해, 묶어서 활용할 수 있다. 생성 대괄호 []를 사용해 생성하고, 요소를 쉼표로 구분해 입력한다. 요소에는 숫자, 문자열, 불 값, 함수, 객체, 또 다른 배열 등 어떠한 종류의 자료형도 쓸 수 있다. const array = [273, 'String', true, function() { }, {}, [273, 103]]; // undefined array; // (6) [273, "String", true, ƒ, {…}, Array(2)] 인덱스 요소의 순서를 인덱스라고 하며, 가장 앞에서부터 0, 1, 2... 순으로 매겨진다. const numbers = [273, 52, 1..
-
혼자 공부하는 자바스크립트 3장 - 조건문자바스크립트/혼자 공부하는 자바스크립트 2021. 7. 19. 06:52
조건문 위에서 아래로 차례차례 실행되는 게 아니라, 조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수 있다. if 조건문 if(불 값이 나오는 표현식) { 불 값이 참일 때 실행할 문장 } 오전과 오후를 구분하기: const date = new Date(); const hour = date.getHours(); if (hour = 12) { // 12시 이후 오후일 때 실행 alert("오후입니다.") } if else 조건문 위의 예시에서 오전과 오후처럼 서로 반대되는 조건의 경우 else 구문을 활용한다. else 구문은 if 조건문 바로 뒤에 붙여서 사용하고, 이를 조합한 조건문을 if else..