odada

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를 이용하면 스타일을 변경할 수 있다. 이를 이용하여 스크롤에 따라 요소의 스타일을 변경할..

CSS를 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현1. Perspective- perspective 속성css perspective 속성을 이용한 패럴랙스 스크롤링해당 요소의 z = 0 평면과 사용자 사이의 거리transform 효과를 주고자 하는 부모 요소에 적용perspective에 따른 변형 효과perspective: 100px; => 100px만큼 멀어져 보임perspective가 클수록 (거리가 멀수록) 변형 효과가 줄어듦pers..

Next.js 블로그 앱 만들기Next.js를 사용하여 블로그 애플리케이션을 만들어보겠습니다. 블로그 애플리케이션은 다음과 같은 기능을 구현할 수 있습니다.Next.js 기초 및 설정 포스트를 참고하여 Next.js 프로젝트를 생성합니다.next.js 블로그 앱 만들기 github 바로가기1. 프로젝트 개요1.1. 프로젝트 목표Next를 사용하여 블로그 앱을 만들어보자.Firebase로 사용자 인증을 구현하고 로그인, 회원가입, 로그아웃 기능을 구현한다.Firebase의 기본 개념을 익히고 데이터 조회, 추가, 수정, 삭제를 구현한다.1.2. 프로젝트 환경Next.js(create-next-app) 프로젝트 생성Firebase (Firestore, Authentication)를 이용한 데이터 관리 및 사..

Next.js 기초 및 설정1. Next.js 란?Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 파일 생성 등을 지원하여 개발자가 보다 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 이 프레임워크는 React의 기능을 확장하여 더욱 강력한 기능을 제공하며, SSR(Server-Side Rendering), CSR(Client-Side Rendering), Static Site Generation 등의 다양한 렌더링 방식을 지원합니다.2. Next.js 특징서버 사이드 렌더링(SSR): Next.js는 서버 사이드 렌더링을 지원하여 초기 로딩 시에 페이지를 서버에서 렌더링하여 사용자에게 보여줍니다. 이를 통해 SEO(Search Engine Optimizatio..