하고 싶은게 많음

리액트 라이브러리 : 규모가 큰 자바스크립트 라이브러리. 사용자 인터페이스를 쉽게 구성할 수 있도록 도와줌. 리액트 라이브러리 사용 준비하기 https://unpkg.com/react@17/umd/react.development.js https://unpkg.com/react-dom@17/umd/react-dom.development.js https://unpkg.com/babel-standalone@6/babel.min.js 리액트 라이브러리는 단순한 자바스크립트가 아니라 리액트를 위해서 개발된 자바스크립트 확장 문법을 사용. 이러한 문 법을 사용하려면 바벨babel이라는 라이브러리를 추가로 읽어들이고 바벨을 적용할 부분을 지정해야한다. 루트 컴포넌트 출력하기 컴포넌트 component " 리액트에서 ..

객체 지향 프로그래밍 언어는 클래스라는 문법으로 객체를 효율적이고 안전하게 만들어 객체 지향 패러다임을 쉽게 프로그래밍에 적요할 수 있도록 도와줌. 추상화 " 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것. " 같은 형태의 객체 만들기 //객체와 배열 조합하기 위의 코드에 각각의 객체에 학생들의 성적 총합과 평균을 구하는 기능을 추가해보자. //객체 활용하기 객체를 처리하는 함수 //객체를 처리하는 함수(1) 전체적인 코드는 길어졌지만 객체를 만드는 부분과 객체를 활용하는 부분으로 나누었는데 이렇게 코드를 분할하면 현재 시점에는 쓸데없이 코드가 길어졌다고 생각할 수 있지만 객체에 더 많은 기능을 추가하게 되었을 때 객체를 쉽게 유지보수할 수 있음. 객체를 활용할 때도 더 간단하게 코드를 작성할 수..

오류의 종류 구문오류 syntax error 예외 exception 또는 런타임 오류 runtime error 프로그램 실행 전 발생오류 코드가 실행조차 되지 않는 오류 괄호의 짝을 맞추지 않았을 경우 문자열을 여닫지 않았을 경우 프로그램 실행 중 발생오류 문법적 오류를 제외하고 코드 실행 중간에 발생하는 오류 SyntaxError 라고 출력되는 오류 이외의 모든 오류 (TypeError, ReferenceError, RangeError)가 예외로 분류. 기본 예외 처리 " 조건문을 사용해서 예외가 발생할 수 있는 경우와 아닌 경우를 나눠서 처리하는 것 " querySelector( ) 메소드로 추출된 문서 객체가 없는 경우 고급 예외 처리 " try catch finally구문 이용하여 예외처리 " t..

공부에 앞서 vscode에서 live server 확장팩을 설치해준다. 기존에는 코드를 저장 후 파일 이름을 끌고와서 웹브라우저에 놓아 실행을 확인했다면 live sever 확장팩을 설치하게되면 파일 저장만으로도 즉각적으로 웹브라우저에서 확인이 가능하다. HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 html 언어에서는 요소 element 라고 함. 자바스크립트에서는 문서 객체document object라고 함. 문서 객체 모델 DOM(Document Object Model) "문서 객체를 조합해서 만든 전체적인 형태 " 문서 객체 : HTML 요소 문서 객체 모델: 그걸 조작하는 객체들의 집합 HTML 파일은 위에서 아래로 실행이 됨. 스크립트 태그를..

객체 " 이름name 과 값 value으로 구성된 속성property을 가진 기본 데이터 타입" 배열과 객체의 차이점 배열: 인덱스index 와 요소 element / 인덱스로 요소에 접근 객체: 키key(식별자 사용) 와 값(속성) property / 값에 대괄호, 온점을 통해 접근 # 식별자: 숫자로 시작X, 기호는 $와 _만 포함 product['제품명'] product['유형'] product.성분 product.원산지 속성과 메소드 요소: 배열 내부에 있는 값 속성: 객체 내부에 있는 값 속성과 메소드 구분하기 메소드: 속성 안에 있는 함수. 자바스크립트에서는 함수도 속성에 포함됨. ㄴ 객체pet은 name속성, eat속성을 갖고 있음. eat속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해..

함수 호출 : 함수 사용하는 것 매개 변수: 함수 괄호 안에 넣는 자료 리턴 값: 함수를 호출해서 최종적으로 나온 결과 익명함수(anonymous function) 함수는 코드의 집합을 나타내는 자료형. 코드의 집합이라고 하는 이유는 중괄호 내부에 코드를 넣기 때문 function( ) { } ㄴ 함수를 실행하면 여러 코드를 한 번에 묶어서 실행 가능. 필요할 때마다 호출하여 반복적으로 사용가능. 함수의 자료형은 function이고, 함수를 출력하면 f ( ) { }라고 출력됨. 출력했을 때 별다른 이름이 붙어있지 않은 것을 볼 수 있는데 이처럼 이름이 붙어져 있지 않는 함수를 익명함수라고 함. 선언적 함수 일반적으로 이름있는 함수를 많이 사용 function 함수 ( ) { } 매개변수와 리턴값 익명함..

배열 array 여러 자료를 묶어서 활용할 수 있는 특수한 자료 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형 요소 element 배열 내부에 들어 있는 값 [요소, 요소, 요소, ... , 요소] >const array = [273, 'String', true, function () { }, {}, [273, 103]] undefined >array (6) [273, 'String', true, ƒ, {…}, Array(2)] 배열 요소에 접근하기 인덱스 : 요소의 순서 배열[인덱스] >const numbers = [273, 52, 103, 32] undefined >numbers[0] 273 >numbers[1] 52 >numbers[1+1] 103 >numbers[1*3] 32 배열 요소 ..

조건문을 사용하여 코드가 실행되는 흐름을 변경하는 것: 조건분기 if 조건문의 조건은 불 자료형 if 조건문 실행되는 문장이 하나일 때 중괄호 생략가능. 여러문장을 실행할 경우는 중괄호로 감싸야 함. # 기본 구조 # if(불 값이 나오는 표현식){ 불 값이 참일 때 실행할 문장 } //현재 시각을 구하는 코드 >const date = new Date() undefined >date.getFullYear() 2022 >date.getMonth() 10 >date.getHours() 22 >date.getMinutes() 19 >date.getSeconds() 0 getMonth()메소드는 0~11사이의 값을 출력 -> 그래서 11이 나와야함에도 10이 나온 것. 여기는 +1해줌으로써 해결하면 됨. //오..

자료(data): 프로그래밍에서 프로그램이 처리할 수 있는 모든 것 자료형(data type): 자료 형태에 따라 나눠 놓은 것 기본 자료형: 숫자 number, 문자열 string, 불 boolean 문자열 자료형 자바스크립트에서 문자와 문자열이 모두 같은 자료형으로 인식. 문자열 만들기 1. 큰따옴표 사용 2. 작은따옴표 사용 내부에 작은 따옴표를 사용하고 싶으면 외부에는 큰따옴표 사용 따옴표를 문자 그대로 사용하고 싶으면 따옴표 앞에 \(이스케이프 문자) 사용 >"This is /"string/"" This is "string" #구문 오류 발생 케이스 #Uncaight SyntaxError:Unexpected identifier #식별자가 예상하지 못한 위치에서 등장했다는 오류 #아래와 같이 이스..