fullstack-study

얕은 복사와 깊은 복사 얕은 복사(Shallow Copy) : 참조형의 1차원 데이터만 복사 깊은 복사(Deep Copy) : 참조형의 모든 차원 데이터를 복사 얕은 복사 : 주소값까지만 복사 깊은 복사 : 실제 데이터까지 복사 원시타입 : Call by value number , string , boolean , undefined , null , symbol 참조타입 : Call by reference 배열, 객체 Call by value(값에 의한 호출, 값의 복사) Call by reference(참조에 의한 호출, 주소의 복사) 예시 1) const arr = [ 10,20,30 ] const arrCopy = arr const 키워드로 선언된 arr( 안에 담기 주소값 )는 변환되지 않습니다. ..

# Object와 JSON차이점, 스프레드연산자, 나머지연산자, 옵셔널 체이닝, 널병합연산자 Object와 JSON의 차이점 JavaScript Object : JS Object JSON(JavaScript Object Notation) : JSON Object JS Object : 객체의 내용을 기술하기 위한 텍스트 파일 JSON Object : JS Engine 메모리 안에 있는 데이터 구조 https://fullstack-eun.tistory.com/46 [ javascript ] 06. 원시타입, 참조타입, 객체원시(Primitive) 타입, 참조(Reference) 타입 자바스크립은 크게 원시타입과 참조타입 2가지로 나눕니다. 원시타입은 number, bigint, string, b..

# 기본함수, 익명함수, 화살표함수  기본 함수 복습하고 이어서 보세요 https://fullstack-eun.tistory.com/45 [ javascript ] 05. 템플릿 리터널 , 함수, 내장함수# 템플릿 리터널 백틱(`)을 사용 let test='hi'; let output = `철수 ${hi}` console.log( output ) 함수 생성방법 파라미터정의하기 반환값 익명함수 즉시실행함수 함수 함수는 하나의 단위로 실행할 수 있도록fullstack-eun.tistory.com  예시)1)function make(numbers) { let results = []; for (const number of numbers) { if (number % 2 != 0) { ..

# Masonry https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works omasonry.desandro.com - CDN https://masonry.desandro.com/#cdn MasonryInstall..

# AOS https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io - CDN - JS 형식 ) 명령어 설명 data-aos 사용할 애니메이션 효과명 data-aos-easing 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) data-aos-anchor 특정한 객체에 anchor를 설정, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 data-aos-delay 애니메이션 재생 대기시간 설정(default: 0) data-aos-offset 애니메이션 효과가 시작될 객체의 위치 설정 data-aos-durat..

# swiper https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com - CDN https://swiperjs.com/get-started#use-swiper-from-cdn Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavi..

# 플러그인 사이트  http://www.htmldrive.net/ HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library www.htmldrive.net https://www.jqueryscript.net/ Free jQuery Plugins and Tutorials - jQuery Script www.jqueryscript.net # fancybox https://fancyapps.com/ Fancyapps UI | Robust JavaScript UI Component LibraryCarousel Responsive, touch-friendly carousels..

# Sass ( SCSS ) 작성법 SCSS와 Sass는 둘 다 CSS의 전처리기로, CSS를 더 쉽게 작성하고 관리할 수 있도록 도와줍니다. 문법: Sass (Syntactically Awesome Style Sheets): 들여쓰기를 사용하여 CSS와 다르게 보이게 만들어줍니다. 중괄호 {}와 세미콜론 ;을 사용하지 않습니다.SCSS (Sassy CSS): CSS와 유사한 문법을 가지고 있습니다. 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 거의 동일한 구조를 가지고 있습니다.호환성:SCSS는 CSS와 거의 동일한 문법을 사용하기 때문에 기존 CSS 파일을 쉽게 가져와서 수정할 수 있습니다.Sass 는 기존 CSS 파일과 호환성이 떨어질 수 있습니다. 기존 CSS를 Sass 로 변환하기 위해서는..

window, 스크롤, 마우스 좌표, getBoundingClientRect  # windowwindow.open(url, windowName, [windowFeatures]);window.open(url, 창이름,옵션);옵션의 이름설명width창 너비height창 높이location주소 표시줄 표시 여부 (yes 또는 no)scrollbars스크롤 막대 표시 여부resizable창 크기의 변경 기능 여부toolbar도구 모음 표시 여부status상태 표시줄 표시 여부menubar메뉴 막대 표시 여부 let w = window.open( 'http://www.naver.com', 'naver', 'height=600,width=600');setTimeout(() => { w.clos..

createElement , append, prepend , video , table 1. 요소 생성 : createElement2. appendChild3. append , prepend4. video5. 테이블 추가,삭제 설명mdnappendChild()상위 노드의 하위 노드 목록 끝에 노드를 추가바로가기append()상위 노드의 하위 노드 목록 끝에 노드를 추가바로가기prepend()상위 노드의 하위 노드 목록 앞에 노드를 추가바로가기createElement ()새로운 노드 생성바로가기 # appendChild , createElementcreateElement () : document.createElement() 새 태그를 반환appendChild() : 지정된 상위 노드의 하위 노드 목록 끝..