FE개발 공부 시작: 23년 4월 10일

문서 객체(document object) : HTML 요소(element) 문서 객체 모델(DOM, Document Objects Model) : 문서 객체를 조합해서 만든 전체적인 형태. Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것 문서 객체 트리(tree) 구조 부모(parent) 자식(child) Node 객체의 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 사용되며, 메서드는 해당 객체가 수행하는 작업을 나타내는 함수입니다. 예) Node 객체의 nodeName 속성은 해당 노드의 이름을 나타내는 문자열 값을 반환합니다. 반면에 appendChild() 메서드는 해당 노드의 자식 노드를 추가하는 메서드이며, ..

요소 : 배열 내부에 있는 값 속성 : 객체 내부에 있는 값 메소드 : 속성 중에 동작(함수 자료형)인 것 this 키워드 : 객체 내부의 메소드에서 객체 자신을 나타내는 키워드 객체 속성 추가 객체.속성 = '값' 객체 속성 제거 delete 객체.속성 객체(object) 이름(name) + 값(value)으로 구성된 속성(property)을 가진 데이터 타입 접근 시 키key 사용 배열(array) 배열도 객체 접근 시 인덱스 사용 인덱스(index) + 요소(element) 배열인지 확인하려면 Array.isArray() new Array()를 사용하여 배열의 크기를 지정할 수 있음. let numbers = new Array(5); 메소드 내부의 this () => {} 형태로 선언하는 화살표 함..

함수 호출 : 함수를 사용하는 것 매개변수 : 함수를 호출할 때 괄호 내부에 넣는 여러 가지 자료 리턴값 : 함수를 호출해서 최종적으로 나오는 결과 익명함수 : 출력했을 때 별다른 이름이 붙어있지 않은 함수. 순차적인 코드 실행에서 해당 줄을 읽을 때 생성됨. (안전하게 사용할 수 있는 익명 함수를 더 선호하는 편) function () {} 형태 선언적 함수 : 출력했을 때 이름이 붙어있는 함수. 순차적인 코드 실행이 일어나기 전에 생성되므로, 선언적 함수를 생성하기 전에 함수를 호출해도 문제 없이 실행 됨 function 함수() {} 형태 함수 정의하기 함수 선언문 function add(x, y) { return x + y; } 함수 표현식 let add = function(x, y) { retu..

요소(element) : 배열 내부에 들어있는 값. 어떤 종류의 자료형도 요소가 될 수 있음 [요소, 요소, 요소, ... ,요소] 인덱스(index) : 요소의 순서 배열[인덱스] 배열.length : 배열 요소의 개수 확인 배열.indexOf(요소) : 배열 내부에서 특정 값의 위치를 추출 배열 뒷부분에 요소 추가하기 배열.push(요소) 배열 요소 제거하기 인덱스로 요소 제거 배열.splice(인덱스, 제거할 요소의 개수) 값으로 요소 제거 const 인덱스 = 배열.indexOf(요소) 배열.splice(인덱스, 1) 배열 내부에서 특정 값을 가진 요소 모두 제거하기 배열.filter((item) => item !== '특정값') 배열의 특정 위치에 요소 추가하기 배열.splice(인덱스, 0, ..

비교 연산자 일치 연산자(===) 불일치 연산자(!==) 작다(), 작거나 같다(=) 연산자 논리 연산자 논리곱(&&) 연산자 : 두 값이 모두 true일 경우에만 true를 반환 논리합(||) 연산자 : 두 값 중 하나라도 true일 경우 true를 반환 논리부정(!) 연산자 : true를 false로, false를 true로 값을 반대로 바꿈 삼항 연산자(ternary operator) 조건식 ? true일 때의 값 : false일 때의 값 (10 > 5) ? "크다" : "작다"; // "크다" 논리합 연산자를 사용한 짧은 조건문 false || console.log('실행') // 실행 true이면 추가 연산을 진행하지 않기 때문에 좌변이 false면 우변을 검사해서 실행됨 || 연산자를 사용하여..

Uncaught SyntaxError: Unexpected indentifier // 구문오류: 식별자가 예상치 못한 위치에서 등장했다는 오류. 잘못된 식별자 코드가 있다는 의미이므로 이를 수정하면 됨 연산자는 피연산자의 개수에 따라 단항 연산자(피연산자 1개), 이항 연산자(피연산자 2개), 삼항 연산자(피연산자 3개)로 구분함. 예) 10 + 20 // 피연산자가 10과 20으로 2개이므로 이항 연산자 이스케이프 문자(\) \" : 따옴표를 문자 그대로 사용할 수 있음 \n : 줄바꿈 \t : 탭 \\ : 역슬래시(\) 그 자체를 의미 자료형 검사 타입 연산자를 사용하여 값의 자료형을 확인할 수 있음. 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "funct..

JS 언어의 특징 객체 지향 프로그래밍 지원 : 데이터와 함수를 객체라는 그룹으로 묶어서 처리함 동적 타이핑: 변수를 선언할 때 타입을 지정하지 않음. 런타임 시점에 변수에 할당되는 값에 따라 자동으로 테이터 타입이 결정 함수형 프로그래밍 지원: 함수를 일급객체(일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체)로 취급하고, 고차 함수(함수를 인자로 받거나, 함수를 반환하는 함수)를 지원 비동기 처리: 작업을 순차적으로 기다리지 않고 병렬로 처리할 수 있도록 하는 방식 클라이언트 및 서버 측 모두에서 사용 가능: Node.js를 이용하여 서버측에서도 사용됨 개발환경 개발을 할 수 있게 해주는 환경 = 텍스트 에디터(VSCode) + 코드 실행기(구..

제이쿼리 연결

list 자료형 let a = ['사과', '배', '감', '귤'] dictionary 자료 let b = { "key" : "value", "name" : "영수", "age" : 30, } 반복문 for (let i = 0; i { // 배열의 요소, 인덱스 모두 접근할 수 있다 }) for (let e of arr) { // for-of를 활용하면 키만 접근하거나, 키와 값 모두 접근하는 것이 가능하다 } 메서드 .clear() .text() .append() '⭐'.repeat(5) // ⭐⭐⭐⭐⭐ ..