하양훈의 개발창고

[이번주 과제 - 6주차] 1. 진도 공부 : 9장 클래스 ~ 10장 리액트 라이브러리 맛보기 2. 기본 미션 : 클래스, 인스턴스, 생성자, 추상화가 무엇인지 설명하기 3. 선택 미션 : p.400 확인문제 2번 정리해서 인증샷 ​​ 1. 진도 공부 1) 혼자 공부하는 자바스크립트 9장 - 클래스 혼자 공부하는 자바스크립트 9장 - 클래스 1. 객체 지향 - 객체지향 패러다임 : 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론 - 객체 지향 프로그래밍 언어들은 클래스를 활용해 객체를 효율적이고 안전하게 만든다. - 추상화 : sirokun.tistory.com 2) 혼자 공부하는 자바스크립트 10장 - 리액트 라이브러리 맛보기 혼자 공부하는 자바스크립트 10장 - 리액트 라이브러리 맛보기 1. 리..

1. 리액트(React) - 자바스크립트 라이브러리 - 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와준다. - 대규모 프론트엔드 웹 애플리케이션을 체계적으로 개발할 수 있으며, 스마트폰에서도 빠르게 동작하는게 가능하다. 2. 리액트 사용준비 1) HTML파일 활용 - 리액트는 확장된 문법을 사용하는데 이걸 사용하기 위해서는 바벨이라는 라이브러리를 추가로 읽어들여야 한다. 3. 루트 컴포넌트 출력하기 - 컴포넌트 : 리액트에서 화면에 출력되는 요소 - 루트 컴포넌트 : 가장 최상위에 배치하는 컴포넌트 - 컴포넌트 생성하기 - 컴포넌트 출력하기 ReactDOM.render(컴포넌트, 컨테이너) 4. JSX 기본문법 - JSX(자바스크립트 확장문법) : 자바스크립트 코드 내부에 HTML 코드를 사용한..

1. 객체 지향 - 객체지향 패러다임 : 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론 - 객체 지향 프로그래밍 언어들은 클래스를 활용해 객체를 효율적이고 안전하게 만든다. - 추상화 : 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것 2. 클래스 - 클래스 : 객체를 만들때 수많은 지원을 하는 대신 제한이 많음 . - 프로토타입 : 재한은 없지만 지원도 별로 없는 문법 class 클래스 이름 { } - 인스턴스 : 클래스를 기반으로 만든 객체 - 인스턴스 생성시 사용하는 문법 new 클래스 이름() - 클래스 이름은 첫글자를 대문자로 지정하는 것이 개발자들의 약속이다. 3. 생성자와 메소드 - 생성자 : 객체가 생성될때 호출되는 함수 - 메소드의 이름은 constructor 지만, 실제 호..

[이번주 과제 - 5주차] 1. 진도 공부 : 7장 문서 객체 모델 ~ 8장 예외 처리 2. 기본 미션 : p.315의 을 실행한 후 출력되는 고양이 이미지 인증샷 3. 선택 미션 : p.352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 인증샷 ​​ 1. 진도 공부 1) 혼자 공부하는 자바스크립트 7장 - 문서 객체 모델(1) 혼자 공부하는 자바스크립트 7장 - 문서 객체 모델(1) 1. 문서 객체 - HTML 페이지에 있는 html,head,body,title, h1, div, span 등 HTML에서 요소라 불리우는 것들을 자바스크립트에서 일컫는 말 - 문서객체를 조작한다 == HTML 요소들을 조작한다 - 문서 객체 모델 : sirokun.tistory.com 2) 혼자 공부하는 자바스크립트..

1. 오류의 종류 1) 구문 오류 - 프로그램 실행 전에 발생하는 오류 - 괄호의 짝을 맞추지 않은 경우, 문자열을 열었는데 닫지 않은 경우(따옴표가 하나 없을경우) - Syntax error 2) 예외 - 프로그램 실행중에 발생하는 오류, 런타임 오류라고도 한다. - 함수 호출이 제대로 되지 않을때 등 - TypeError, ReferenceError, RangeError 등 2. 예외 처리 1) 기본 예외 처리 - 조건문을 사용해서 예외가 발생하지 않게 만드는 것 2) 고급 예외 처리 - try catch finally 구문을 활용해서 처리하는 것 try{ // 예외가 발생할 가능성이 있는 코드 } catch(exception){ // 예외가 발생했을 때 실행할 코드 } finally{ // 무조건 ..

1. 이벤트 모델 - 이벤트를 연결하는 방법 - 모든 이벤트 모델의 이벤트 리스너는 첫번째 매개변수로 이벤트 객체를 받는다. 1) 표준이벤트 모델 - addEventListner() 메소드를 사용하는 모델, 현재 표준으로 사용하고 있어 표준 이벤트 모델이라고 부른다. document.body.addEventListener('keyup',() => { }) 2) 고전 이벤트 모델 - 문서객체가 갖고 있는 on~으로 시작하는 속성에 함수를 할당해서 이벤트를 연결하는 방식 document.body.onkeyup = (event) => { } 3) 인라인 이벤트 모델 - 문서객체가 갖고 있는 on~으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결하는 것 2. 다양한 이벤트들 1) 키보드 이벤트 이..

1. 문서 객체 - HTML 페이지에 있는 html,head,body,title, h1, div, span 등 HTML에서 요소라 불리우는 것들을 자바스크립트에서 일컫는 말 - 문서객체를 조작한다 == HTML 요소들을 조작한다 - 문서 객체 모델 : 문서 객체를 조합해서 만든 전체적인 형태의 모델 2. DOMContentLoaded 이벤트 - 문서 객체를 조작할때 사용하는 코드 - 웹 브라우저가 문서 객체를 모두 읽고 나서 발생하는 이벤트 //오타에도 오류가 넘어가지 않아서 추후에 실행오류시 에러를 찾기 힘드므로 주의 document.addEventListener('DOMContetnLoaded',() =>{ //문장 } 3. 문서객체 가져오기 - 해당 문서의 어떤 문서 객체를 가져오는지에 따라 . 뒤..

[이번주 과제 - 4주차] 1. 진도 공부 : 5장 함수 ~ 6장 객체 2. 기본 미션 : 202쪽의 예제를 실행하여 2021년이 윤년인지 확인하는 결과 인증샷 3. 선택 미션 : p.240 확인문제 1번 풀고 인증샷 ​​ 1. 진도 공부 1) 혼자 공부하는 자바스크립트 5장 - 함수 혼자 공부하는 자바스크립트 5장 - 함수 1. 함수 - 함수 : 코드의 집합 - 함수 호출 : 함수를 사용한다. - 매개변수 : 함수 호출시 괄호 내부에 넣는 여러가지 자료 - 리턴값 : 함수를 호출해서 최정적으로 나오는 결과 2. 함수를 사용하면 sirokun.tistory.com 2) 혼자 공부하는 자바스크립트 6장 - 객체(1) 혼자 공부하는 자바스크립트 6장 - 객체(1) 1. 객체 - 객체 : 이름과 값으로 구성된..

1. 여러 객체의 메소드들 1) Number 객체 - toFixed() : 숫자 N번째 자리수 까지 출력하기 const n = 123.456789 n.toFixed(2) => 123.46 n.toFixed(3) => 123.457 n.toFixed(4) => 123.4568 - isNaN() : Nan 확인하기 const n = Number('문자') n => NaN //NaN과의 비교연산자로는 비교할 수 없음 n == NaN => false //isNaN을 사용해야 비교할 수 있음 Number.isNaN(n) => true - isFinite() : infinity 확인하기 const a = 10 / 0 a => Infinity const b = -10 / 0 b => -Infinity Number.i..

1. 객체 - 객체 : 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입 - 중괄호로 생성, 키와 값으로 매칭 const object = { number : 730 string : '혼공단' boolean : true array : [1,2,3,4,5] method : fuction(){} } 2. this 키워드 - 메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을때 자신이 가진 속성임을 표시하는 키워드 const food = { name : '햄버거' eat : fuction(){ alert('나는 '+ this.name +'을/를 좋아합니다.' } food.eat() } 나는 햄버거을/를 좋아합니다. 3. 동적 속성 추가/제거 1) 동적 속성 추가 - 객체를 생성한 후 속성을 지..