본문 바로가기

Javascript

자바스크립트의 알려지지 않은 연산자들 - "??", "??=", "?."

1 2020. 11. 3. 자바스크립트에 비교 및 연산 과정을 줄여주는 새로운 연산자들이 몇가지 추가되었습니다. 이미 연산자가 넘쳐나기 때문에 아직은 잘 사용되지 않고 있고 역시나 시간이 좀 지나야 합니다. 새로 추가된 연산자들은 "??", "??=", "=." 입니다. 다른 연사자들과 달리 의미가 바로 와닿지 않기 때문에 예제를 통해 알아 보겠습니다. ?? 두 값을 비교해 값을 반환받는 비교 연산자인 "||" 와 기본적으로 같습니다. "||"와 "??" 모두 논리적인 OR 비교를 하는 연산자로 두 항목 중 참인 항목의 값을 반환합니다. 두 항목 모두 참이면 첫 번째 항목이, 둘 다 거짓이면 두 번째 항목이 반환됩니다. 둘 중 한 항목만 참이면 참인 항목이 반환됩니다. "||" 연산자와 다른점은 자바스크립트의 기본 연산 규칙에 따..

구글 드라이브 파일들을 앱스 스크립트로 삭제 자동화하기

0 2020. 10. 28. 구글 앱 스크립트(App Script) 를 사용해 구글 드라이브의 파일들을 관리할 수 있습니다. 특히 장기간 백업하고 있는 파일들인 경우, 불필요한 파일들이 많이 누적되게 되고 날짜와 파일명, 확장자 조건에 따라 자동으로 관리가 되도록 하면 구글 드라이브를 관리하는 시간이 많이 줄어듭니다. 예를 들어 DB 백업 파일을 구글 드라이브에 백업하는 경우 "1달 이상 경과한 "bak", "trn" 파일 중 "dbbackup_2020" 문자열을 가진 파일들을 매월 1일 오전 12시 ~ 1시 사이에 일괄 삭제한다" 와 같은 조건을 실행하는 스크립트를 작성해서 자동으로 구글 드라이브 파일을 관리할 수 있습니다. 완성된 코드는 다음과 같습니다. //조건(날짜, 이름)에 맞는 파일 목록 얻는 함수 function Get..

자바스크립트 기초 강의 목차

5 2020. 6. 25. 1. 자바스크립트 초급 강의변수와 상수의 이해 var, let, const자료형의 변환연산자 기초템플릿 리터럴의 기초Null, Undefined, 0원시형 데이터 타입과 참조형 데이터 타입의 이해함수 파라메터의 이해숫자 표시와 변환에러 발생과 예외 처리함수의 이해나머지 파라메터(Rest Parameter)의 이해화살표 함수반복문 기초1 - for반복문 기초2 - while조건문 기초 - if, switch모듈(Module)의 이해Get, Set을 이용한 객체 속성의 정의클래스의 정적 속성과 정적 메서드의 이해클래스 상속(Inherit)의 이해생성자 함수(Constructor Function)의 이해클래스(Class)의 이해클로저(Closure)의 이해변수 선언자 var 의 스코프와 스코프 체인객체의 단축..

장바구니 수량 변경 및 자동 합계 구하기

0 2020. 6. 23. 쇼핑몰 장바구니를 관리하는 프론트엔드 화면을 제작해보겠습니다. 쇼핑몰이 아니어도 견적서나, 금액 합계를 구하는데 적용할수 있는 기능으로 활용할 수 있습니다. 기능 구현은 객체리터럴로 합니다. 먼저 HTML 페이지 구성을 살펴보겠습니다.내용은 길지만 장바구니 상품목록이기 때문에 반복되는 내용은 생략했습니다.가장 중요한 부분은 "장바구니 수량 변경" 부분입니다. 입력 필드에 표시되는 갯수를 직접 변경하거나, 화살표(업/다운)로 수량을 증가/감소하는 경우 자동으로 상품 합계와 수량 합계가 반영되어 보이도록 하는 것이 목표입니다. 선택 이미지 상품명 가격 수량 합계 삭제 찜마마(XJ-92214/3) 20,000원 40,000원 삭제 선택상품삭제 장바구니비우기 상품갯수: 4개 합계금액: 74,200원 선택한 상품..

프로토타입으로 별점 댓글 기능 구현하기

3 2020. 6. 23. 쇼핑몰, 또는 커뮤니티 게시판의 리뷰 평점, 또는 후기 평점 기능을 자바스크립트 프로토타입으로 구현해보겠습니다. 별점이라고도 하는데, 대부분은 별 5개로된 평가 점수를 선택하고, 댓글 내용을 입력한 후 저장하는 방식으로 구현합니다.기능의 핵심은 별 갯수를 선택하는 방식이며, 4번째 별을 클릭하면 1 ~ 4까지의 별이 선택되어 보여야 합니다.부가적으로는 별점의 평균을 구해 평점만큼 별을 채워 표시하는 것을 구현합니다. 별점 기능을 구현하기 위해서는 디자인 이미지와 CSS의 힘을 필요로 합니다. 여기서는 미리 이미지와 구조가 만들어진 디자인 샘플을 이용해 사용자 클릭에 따라 이벤트 리스너가 적절한 동작을 하는 것만을 구현합니다. 먼저 별점을 부여하는데 필요한 디자인 이미지와 CSS에 대해 이해를 해야 합니다..

To Do List 앱 구현하기

2 2020. 6. 22. 할일을 메모해서 관리하는 간단한 앱을 제작합니다. "to DO List" 앱은 할일 내용과 중요도를 선택하는 입력 폼 1개와 할일의 진행단계에 따라 구분해서 표시하는 목록 1개로 구성됩니다.할일 목록은 각 할일을 단계별로 구분해서 표시하고, 할일->진행중->완료 로 단계가 구분됩니다.각 할일에 표시되는 ">>" 버튼을 눌러 다음 단계 목록으로 이동하는 기능을 구현하며, 선택자로 현재 할일을 선택해 다음 단계 목록으로 이동시키는 방법을 이해하는 것이 이 앱의 핵심 학습 부분입니다. UI는 모바일 환경에 맞게 좁은 화면 하나에 모두 보이도록 합니다. 할일 폼 제작 먼저 할일 등록 폼을 제작합니다.중요도와 할일 입력 텍스트영역 2개로 구성된 간단한 폼입니다. to DO List 할일 중요도 1순위 2순위 3순..

슬라이딩 모바일 메뉴 구현

3 2020. 6. 22. 반응형 웹에서 모바일 UI를 구현할 때는 화면 크기의 제약으로 인해 화면 위나 옆에서 메뉴가 펼쳐지면서 보이도록 구현합니다.좁은 모바일 화면을 최대한 활용하는 방법이기 때문에 주로 이 방법을 사용하며, 기본 화면에는 메뉴를 열기 위한 아이콘만 표시합니다. 자바스크립트 라이브러리를 사용하면 메뉴를 펼쳤다 접는 과정의 코드를 단순화 할 수 있기 때문에 라이브러리를 활용하는 것도 좋은 방법중이 하나입니다. 여기서는 약간 번거로울 수 있지만, 자바스크립트만으로 슬라이딩 모바일 메뉴를 구현해봅니다. 모바일 메뉴 슬라이드는 왼쪽에서 오른쪽으로 펼쳐지는 것으로 하기로 합니다.모바일 메뉴는 보이는 상태로 메뉴 너비만큼 왼쪽 화면 밖 위치에 있다가, 오른쪽 방향으로 움직이면서 표시가 됩니다.메뉴가 사라질 때는 반대로 움..

자바스크립트 반응형 레이아웃 구현 방법

0 2020. 6. 22. 반응형 웹페이지/사이트를 구현하는 방법은 CSS 미디어 쿼리를 이용하는 방법과 자바스크립트를 이용하는 방법 2가지가 있습니다. 2가지 방법 모두 브라우저 너비를 기준으로 적용하는 CSS를 다르게 해서 너비, 또는 장치에 따라 알맞는 레이아웃으로 보이도록 합니다. 두 방법은 장단점이 있습니다. CSS를 이용한 방법은 직관적이고 쉽습니다.그리고, CSSOM에 기반하기 때문에 자바스크립트보다 속도가 빠릅니다. 자바스크립트를 이용하는 방법은 웹브라우저 크기 변화에 실시간으로 반응할 수 있기 때문에 좀 더 다이나믹한 변화를 줄 수 있습니다.애니메이션되는 레이아웃의 변화(Masonry 자바스크립트 라이브러리 같은 동적인 레이아웃 변화의 구현이 가능)나, OS 또는 디바이스 정보에 따른 반응형 레이아웃 적용을 할 수..

무한 롤링 이미지 배너 구현 - 1. 무한롤링 구현

0 2020. 6. 22. 인터넷을 검색해보면 자바스크립트로 구현된 많은 롤링 배너, 또는 슬라이드 배너를 찾을 수 있습니다.제이쿼리 기반, 또는 순수 자바스크립트로 만들어진 많은 오픈소스 배너 라이브러리들이 있으며, 필요로 하는 대부분의 기능들이 이미 구현되어 있습니다. 기존에 구현된 슬라이딩 배너가 원하는 용도에 잘 맞는다면 이런 라이브러리를 사용하는 것을 추천합니다. 롤링 배너를 직접 구현해서 사용하는 것으로 인한 만족감은 상당히 높겠지만, 만족감을 빼면 오픈소스로 배포되는 잘 알려진 자바스크립트 롤링 배너 라이브러리가 여러가지 면에서 더 좋습니다. 하지만 오픈소스로 쉽게 구현되어 있다고 해도 결국은 다른 개발자가 작성한 코드입니다.구현된 배너를 커스터마이징 하려면 기본적인 배너 구조와 코딩 로직 정도는 이해해야 하기 때문에..

무한 롤링 이미지 배너 구현 - 2. 앞뒤 이동 버튼 구현

0 2020. 6. 22. 한 방향으로만 무한 롤링되는 배너에 양방향 이동 화살표를 추가해 사용자 조작으로 배너를 돌려볼 수 있도록 기능을 개선해 보겠습니다. 먼저 이동 화살표 이미지는 폰트어썸(FontAwesome) 오픈소스 벡터 아이콘 이미지를 가져와 사용합니다. HTML 페이지 헤더 영역에 폰트어썸 아이콘 CSS 링크를 추가합니다. 이전, 다음 화살표 아이콘을 롤링 이미지들 앞쪽에 추가합니다. 위치를 잡기 위해 화살표 아이콘 위치를 CSS로 지정해줍니다.CSS가 적용되면 반투명한 화살표 2개가 롤링 이미지 좌우의 고정된 위치에 배치되어 보입니다. .img_wrap .btnmove{ position: absolute; top: 268px; width: 40px; height: 85px; z-index: 1; font-size:..

이전 1 2 3 4 ··· 12 다음

닫기

티스토리툴바