본문 바로가기
728x90

JavaScript10

[Javascript ES6] 자바스크립트 배열 복사하기 & 합치기 & 요소 추가하기 [자바스크립트] Javascript 배열 복사 / 합치기 / 요소 추가하기 🌈 기본 형태 //복사하기 const newArray = [...oldArray]; //합치기 const resultArray = [...FirstArr,...SecondArr]; //복사하기 + 요소 추가 const copyArr = [...arr,요소]; 🌈 샘플 예제 : 복사하기 const oldArr = [1,2,3]; const newArr = [...oldArr]; console.log(newArr); 💡 출력 결과 [1,2,3] 🌈 샘플 예제 : 합치기 const firstArr = [1,2,3]; const secondArr = [4,5,6]; const resultArr = [...firstArr,...second.. 2021. 6. 23.
[JavaScript] function.bind() / 함수.bind() [자바스크립트 / Javascript] Function.bind() / 함수.bind() 함수와 객체를 묶는(연결) 함수 bind 기본 문법 function 함수 (){ //함수 기능.. } 함수.bind(객체); 샘플 예제 const person = { name : '홍길동', age : 20 }; function PrintInformation(){ console.log(this.name,this.age); } 실행 결과 undefind undefind 샘플예제 : bind 함수를 통한 객체 연결 const person = { name : '홍길동', age : 20 }; function PrintInformation(){ console.log(this.name,this.age); } const Pri.. 2021. 6. 16.
[Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() Javascript 원하는 태그로 스크롤 이동하기 Element.scrollIntoView 이동 원하는 엘리먼트.scrollIntoView() 기능에 대한 설명은 샘플예제 속 주석 처리를 위해 소스 코드 하나하나 설명해놓았음 기본 형태 //Element : 이동 원하는 엘리먼트 Element.scrollIntoView(옵션); 샘플 예제 : 액션가면을 찾아라! 출력 결과 2021. 5. 23.
[Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() Javascript 엘리먼트 위치로 스크롤 이동 엘리먼트.scrollIntoView() scrollIntoView()는 보통 메뉴바에서 많이 쓰이는데 싱글페이지 앱에서 메뉴 버튼 클릭시 해당되는 위치로 스크롤이 이동되는 기능을 수행한다. 기본 골격 element.scrollIntoView(); //괄호안에 {behavior : 'smooth'} 코드 추가시 //스크롤 이동이 ease-in-out과 같이 부드러워진다 샘플코드 menu1 menu2 menu3 menu4 출력 결과 2021. 4. 15.
[NodeJs] CSS Javascript 추가 / 사용하기 (public 폴더 사용하기) NodeJs Express를 통해 웹사이트를 구현하게 되면 Html 내 CSS나 Javascript 파일을 포함해야하는 경우가 있다. 무작정 프로젝트 폴더내 css나 javascript 파일을 넣어 놓으면 클라이언트 측에서는 보안 등의 문제로 폴더내 다른 파일들의 접근이 허용이 되지않는데 이를 허용하는 방법이 미들웨어 express.static 이다. 1. 우선 클라이언트의 접근이 허용되는 public이라는 폴더를 프로젝트 폴더 내에 만든다. 2. 코드 상단에 미들웨어로 app.use(express.static('public'))을 선언해준다. 3. nodejs로 구축한 웹사이트에서 최상위 경로로 등록된 폴더 (public)내의 파일의 접근이 가능하다. 샘플예제 const express = require.. 2021. 3. 26.
[NodeJs] 애플 홈페이지 프론트엔드+백엔드 (풀스택) 샘플코드 Apple HomePage / front-end / back-end / Full Stack Sample Code 프론트엔드 + 백엔드 풀스텍 연습겸 애플 홈페이지 스타일의 웹사이트를 만들어보았다. 수정을 통해 본인의 웹사이트로 사용하여도 좋고, 소스를 다운 받아 본인의 학습 용도로 사용해도 좋다. 프론트엔드 사용 기술 목록 1. Html (Html5 표준 사용) 2. Css (프레임워크 없이 순수 CSS5만을 사용하여 가볍게 동작 구현) 3. Javascript (라이브러리 사용 없이 순수 바닐라 자바스크립트만을 사용) 백엔드 사용 기술 목록 1. NodeJs (반응형 메인 페이지를 우선 구현해 보았는데, 이후 포스팅에서 상품 상세페이지 등 다양한 페이지 추가 구현할 예정이다) 2. json (서버측의 .. 2021. 3. 22.
[CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4.
[Javascript] 버튼 클릭시 원하는 링크 이동 자바스크립트(Javascript) 링크 이동 window.location = '원하는 링크주소'; a태그의 속성 href 값에 링크 주소를 설정해 놓으면, 클릭시 해당 링크로 이동한다. Button 태그에서 원하는 링크로 이동하는 방법 티스토리 2021. 3. 3.
[프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24.
[Javascript] 이벤트 전파 방지 stopPropagation() 자바스크립트 부모로의 이벤트 전파 방지 Event.stopPropagation(); 간단 설명 ↓ 자바스크립트에서 자식 엘리먼트에서 이벤트 발생시, 부모 엘리먼트에 같은 이벤트가 설정되어있다면, 해당 이벤트에 할당된 기능도 함께 실행된다. 이는 이벤트 전파 현상으로 인한 건데, 상단의 그림과 같이 이벤트가 전파되어진다. 위와 같은 현상을 방지하기 위해서는 Event.stopPropagation()을 사용해야하는데, 아래 예제를 참고하도록 한다. 샘플 예제↓ [Html] [Javascript] let secElem = document.querySelector('#section-sample'); let divElem = document.querySelector('#div-sample'); let btn = .. 2021. 2. 3.
728x90

티스토리툴바