본문 바로가기

기초 문법/자바스크립트

[jQuery] mousewheel.js 웹 서핑을 하다 보면 간혹 마우스 휠만 위나 아래쪽으로 살짝 움직였을 뿐인데 화면 전체가 스크롤되거나 페이지가 바뀌면서 다음 화면으로 넘어가는 경험을 한 적이 있을 겁니다. 이는 클릭이나 마우스 오버와 마찬가지로 마우스 휠 이벤트를 이용하여 구현한 경우인데, 클릭이나 마우스 오버, 스크롤 등은 jQuery에서 기본으로 제공하는 사용자 이벤트이지만 mousewheel 이벤트를 사용하기 위해서는 mousewheel.js라는 별도의 플러그인 파일을 이용해야 합니다. 이번 절에서는 mousewheel.js 의 사용법에 대해서 알아보도록 하겠습니다. # Contents mousewheel.js # mousewheel.js jQuery의 mousewheel를 다운받아 임포트를 해주고, 아래 JavaScript를 처.. 더보기
[jQuery] jQuery 정리 문서의 구조를 담당하는 것이 HTML이고 디자인적인 표현을 담당하는 것이 CSS라고 한다면 JavaScript가 하는 일은 동적으로 수정하여 웹 화면에 인터랙션을 주는 게 주 목적이라고 할 수 있습니다. 사용자의 행동에 따라 실시간으로 웹에 어떠한 변화가 일어나는 상황을 만들어, 동적인 웹 페이지를 작성하는 것이 목표입니다. # Contents 선택자 css() attr 탐색 구문 이벤트 연결 애니메이션 다양한 명령어들 # 선택자 jQuery로 특정 요소를 선택하는 기본구문은 아래와 같습니다. $("선택할 요소") jQuery 선택자의 쌍따옴표 안의 선택 요소는 기존의 CSS 선택자와 동일합니다. # css() css() 구문을 사용하여 선택된 요소의 CSS 속성을 변경하는 법을 알아보도록 하겠습니다. .. 더보기
[Java] 자바로 SCP 전송 ssh 원격 접속 프로토콜을 기반으로 한 SecureCopy(scp)의 약자로서 원격지에 있는 파일 혹은 디렉터리를 보내거나 가져올 때 사용하는 파일 전송 프로토콜입니다. 위키백과에서는 ssh 프로토콜에 기반된 것으로써 로컬 호스트와 원격 호스트 또는 두 원격 호스트 사이의 컴퓨터의 파일을 보다 안정하게 전송하기 위한 수단으로 작성된 프로토콜이라고 할 수 있습니다. cp와 같은 동작을 하지만 cp는 현재 시스템 내부의 파일을 복사하는 것이라면 scp는 현재 시스템으로부터 원격지 시스템까지의 데이터를 전송하는 차이가 있습니다. 이러한 리눅스 명령어를 Java에서 지원하는 라이브러리가 존재하는데 이 라이브러리의 명칭은 JSch, JSSE 등 여러가지 라이브러리가 있다. 그 중 오늘 이용할 라이브러리는 Jsc.. 더보기
[JavaScript] Decorator Decorator Pattern(데코레이터 패턴)은 "주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 기능 확장이 필요할 때 서브클래싱 대신 쓸 수 있는 유연한 대안이 될 수 있다." 고 위키백과에 정의되어 있습니다. 객체의 함수 혹은 전역 함수의 기능을 새로 붙여서 사용하거나 기능을 수정할 때 사용한다고 생각합니다. 다음 예제를 통해 데코레이터를 좀 더 알아보고, 자바스크립트에서 데코레이터 패턴을 사용하기 위한 방법을 제시해보도록 하겠습니다. # Contents 자바스크립트에서 Decorator Pattern # 자바스크립트에서 Decorator Pattern 먼저 기본적인 흐름에 대해 알아보도록 하겠습니다. 아래 그림을 보면서 설명하도록 하죠. 위의 예제는 ProcessMath 객.. 더보기
[JavaScript] AES128 암호화/복호화 자바스크립트에서 AES128를 이용하여 양방향 암호화 및 복호화를 하는 예제입니다. Hash 암호화와는 다르게 양방향이므로 대칭키를 가지고 있으며, AES128, AES192, AES256 등 키의 bit수의 따라 나뉘게 됩니다. AES128 은 16byte로써 키의 길이가 16자리인 암호 방식입니다. 키의 길이에 따라 라운드의 수가 다르며 AES 암호 알고리즘에서 마지막 라운드에서는 MixColumn 단계가 없다. AES 이론적인 내용을 참고하시려면 https://www.crocus.co.kr/1230 등을 참고해주시기 바랍니다. # Contents 전체 코드 # 전체 코드 AES128 암호화 및 복호화 코드 예제입니다. const Crypto = require("crypto"); var key = ".. 더보기
객체에서 배열, 배열에서 객체 자바스크립트에서 배열과 객체는 많이 다르다고 생각합니다. 객체는 Key와 Value로 이루어진 형태의 타입이며, 배열은 스택과 같은 느낌의 형태 타입으로 이루어졌다고 생각합니다. 코딩을 많이 하다 보면 객체에서 배열로 타입을 변환하여 사용하는 경우도 있고, 배열에서 객체로 타입을 변환하여 사용하는 경우도 있다고 생각합니다. 오늘은 이 안건에 대해 알아보는 시간을 가지려고 합니다. # Contents 객체에서 배열 배열에서 객체 # 객체에서 배열 객체에서 배열로 만드는 방법은 아주 다양합니다. 다양한 방안들 중 기초적인 핵심과 어렵지 않는 부분만 다룰 예정입니다. 한번 보시죠. 1. Object.keys() var object = Object.keys(target) Object.keys() 메소드는 tar.. 더보기
자바스크립트 객체 복사 자바스크립트는 객체기반의 스크립트 언어이다. 객체란 여러 속성들을 하나의 변수에 저장하는 타입으로 Object 타입이라고도 한다. 이러한 객체를 복사할 때에는 얕은 복사와 깊은 복사 두 가지로 나뉘게 되는데, 각각을 살펴보고 상황에 맞춰서 사용하는 개발자가 되도록 노력하자 # Contents 얕은 복사 깊은 복사 지금부터 얕은 복사와 깊은 복사를 통해 과제를 처리하도록 하겠습니다. # 과제 객체 A를 통해 객체 B를 생성하고, 객체 B의 내용을 수정하겠습니다. # 얕은 복사 1. Object.Assign() Object.assign(target, ...sources) Object.Assign() 메소드는 두번째 인자 값으로 들어온 객체의 값을 첫번째에 값으로 저장합니다. 해당 구문을 통해 객체 A를 생성.. 더보기

티스토리툴바