odada

타입 종류 (TypeScript Types)01. 타입 종류- 문자let str: string = '문자열'let str: string;let name: string = '김가을';let hello: string = `안녕하세요. ${blue}님`;- 숫자let num: number = 123let num: number; // undefinednum = 123; // 123console.log(num);let integer: number = 6;let float: number = 3.14;let hex: number = 0xf00d;let infinity: number = Infinity;let nan: number = NaN;- 불리언let bool: boolean = truelet bool: bool..

- 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 ..

GSAP을 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현GSAP이란?웹 페이지나 웹 앱에서 다양한 애니메이션 효과를 만들 수 있도록 도와주는 강력한 도구로 널리 사용됩니다.GSAP이 라이브러리는 웹 개발자들에게 다양한 기능과 API를 제공하여 스무스하고 반응적인 웹 애니메이션을 쉽게 구현할 수 있게 해줍니다.GSAP (GreenSock Animation Platform)은 HTML5 기반의 애니메이션 라이브러리로, CSS, SVG, Canva..

AOS를 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현AOS(Animate On Scroll) 란?스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리로 패럴랙스 스크롤링을 구현할 수 있음aos : https://michalsnik.github.io/aos/v1 : https://github.com/michalsnik/aosv2 : https://github.com/michalsnik/aos/tree/v2AOS 설치 태그 내에 AOS 라이브러..

Javascript를 이용한 Parallax Scrolling패럴랙스 스크롤링이란?패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현js를 이용한 패럴랙스 스크롤링window.addEventListener('scroll', function() {})window.scrollY : 현재 스크롤된 y축의 위치- translate, transform, scrollY 등을 이용하여 패럴랙스 스크롤링 구현js를 이용하면 스타일을 변경할 수 있다. 이를 이용하여 스크롤에 따라 요소의 스타일을 변경할..