odada

- JS 목차js 핵심 개념https://odada.me/334react 핵심 개념https://odada.me/353node.js, npm 개념 잡기https://odada.me/246  변수 (Variable)https://odada.me/335데이터 (Data)https://odada.me/232연산자 (Operator)https://odada.me/233구문 (Statement)https://odada.me/235함수 (Function)https://odada.me/236  node.js, npmhttps://odada.me/246모듈 (Module)https://odada.me/266  클래스 (Class)https://odada.me/247  표준내장객체 객체 - 문자열(String)https..

Javascript EventEvent란?Event는 웹 페이지에서 발생하는 모든 일을 의미한다.사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 마우스를 움직이는 등의 모든 행위를 의미한다.이벤트는 브라우저에서 발생하는 것이기 때문에 브라우저에서만 사용할 수 있다.간단한 예제버튼을 클릭하면 target의 글자색이 빨간색으로 바뀌는 예제를 만들어보겠습니다.change colorHelloconst button = document.querySelector('button');const target = document.querySelector('#target');button.addEventListener('click', () => { target.style.color = 'red';});Event 종류HT..

DOM(Document Object Model)JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp1. DOM이란?DOM은 HTML 문서를 객체로 표현한 것으로,자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다.const h1El = document.querySelector('h1');console.log(h1El.textContent);2. Node vs Element(요소)Node(노드) : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.Element(요소) : HTML 요소를 의미한다.Node는 Element의 상위 개념이다. 1 text1 2 text2const container ..

동기(Synchronous)와 비동기(Asynchronous)01. 개요- 동기 처리동기 처리란, 작업을 순차적으로 처리하는 것을 말한다.자바스크립트 코드는 기본적으로 동기적으로 처리된다.동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다.하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 없다는 단점이 있다.은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것console.log('은행 1번 번호표 업무 시작');console.log('은행 1번 번호표 업무 끝');console.log('은행 2번 번호표 업무 시작');console.log('은행 2번 번호표 업무 끝');- 비동기 처리비동기 처리란..

JS변수(Variable)변수 선언변수 선언은 var, let, const 키워드를 사용한다.var a = 1;let b = 2;const c = 3;var : 변수 재선언 가능let : 변수 재선언 불가능const : 변수 재선언 불가능, 상수 선언변수 타입number : 숫자string : 문자열boolean : 참 & 거짓null & undefined : 값 없음object : 객체array : 배열변수 이름 규칙변수명은 문자, 숫자, 언더스코어(_), 달러 기호($)로 구성변수명은 숫자로 시작할 수 없음변수명은 대소문자를 구분예약어(this, if 등) 사용 불가능변수 할당= : 할당 연산자let a = 1;변수 재할당변수에 새로운 값을 할당하는 것let a = 1;a = 2;변수 참조변수에 할당..

javascript 핵심 요약자바스크립트는 웹페이지를 동적으로 만들어주는 언어로 웹페이지를 꾸미거나 사용자와 상호작용을 할 수 있게 해준다.TIOBE 프로그래밍 언어 순위에서 2024년 기준 6위에 위치하고 있다.자바스크립트 소개자바스크립트 소개자바스크립트는 HTML 콘텐츠를 변경할 수 있습니다. What Can JavaScript Do? JavaScript can change HTML content. Click Me! 자바스크립트는 HTML 속성을 변경할 수 있습니다. What Can JavaScript Do? Turn on the light Turn off ..

React 비동기 처리1. 뉴스 API 데이터 가져오기- 뉴스 API 키 발급무료 뉴스 API 추천The Guardian APINew York Times API2. useEffect로 데이터 가져오기useEffect(() => { ... }, [deps])useEffect는 함수 컴포넌트에서 부수 효과를 수행할 수 있도록 하는 Hook이다. useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.// src/News.jsimport React, { useEffect, useState } from 'react';function News() { const [news, setNews] = useState([]); useEffect(() => { fetch(..

모듈(Module)모듈이란?모듈은 특정 기능을 하는 함수나 변수들의 집합이다.모듈은 가져오기(import)와 내보내기(export)를 통해 사용할 수 있다.모듈은 자체로도 하나의 프로그램이지만 다른 프로그램의 일부로 사용될 수도 있다.모듈은 다른 모듈을 사용할 수 있고, 다른 모듈에 의해 사용될 수도 있다.모듈은 자신만의 이름 공간(namespace)을 가진다.모듈은 독립성을 가지며, 필요한 모듈만 불러와 사용할 수 있다.모듈은 재사용이 가능하다.모듈의 종류내장 모듈Node.js가 설치될 때 함께 설치되는 모듈fs, os, path, url 등사용자 정의 모듈개발자가 직접 정의한 모듈다른 프로그램에서도 사용할 수 있도록 npm에 배포할 수도 있다.모듈의 사용모듈을 사용하기 위해서는 모듈을 내보내기(exp..

표준 내장 객체 - 객체(object) Object.assign() 객체를 복사할 때 사용 target 객체에 source 객체를 병합하여 반환한다. const target = { x: 1, y: 2 }; const source = { y: 3, z: 4 }; const result = Object.assign({}, target, source); // {}는 타겟 객체를 빈 객체로 초기화한다. console.log(result); // { x: 1, y: 3, z: 4 } 중복된 속성은 덮어쓴다. console.log(target); // { x: 1, y: 3, z: 4 } (타겟 객체) console.log(source); // { y: 3, z: 4 } (소스 객체) // 전개 연산자를 사용해도 ..

표준 내장 객체 - 배열(array).length배열의 길이(숫자)를 나타내는 속성const arr = [1, 2, 3];console.log(arr.length); // 3.at()배열에서 특정 위치의 요소를 가져오는 메서드인덱스는 0부터 시작const arr = [1, 2, 3];console.log(arr[0]); // 1console.log(arr.at(0)); // 1console.log(arr[arr.length - 1]); // 3console.log(arr.at(-1)); // 3.concat()배열에 다른 배열이나 값을 추가하여 새 배열을 반환하는 메서드const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const arr3 = [...arr1, ...arr2..