전체 글(104)
-
[JS] 배열의 함수형 메소드, forEach, map, filter
강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 6월 16일 0. 챕터 소개 이번 챕터에서는 Back End 부분은 잠시 쉬고, Front End 위주로 학습하게 된다. 핵심 키워드는 아래와 같다. - JQuery - Handlebars - forEach - Map - Filter - 클린 코드 1. 객체지향 JavaScript 구현 - FE JavaScript 배열의 함수형 메소드 Front End에서의 데이터 처리의 중요성 예전과 달리, 데이터 처리는 더 이상 Back End만의 일이 아니다. 이는 Front End에서 데이터 조작을 해야 하는 경우가 많아졌기 때문이다. 특히 SPA(Single Page Application)의 등장이 이..
2020.06.16 -
SQL Join 알아보기 ... 기본 유형 4가지
SQL Join 명령문에 대해 간단하게 설명한 SQL Joins Explained를 번역한 글입니다. SQL Join의 4가지 기본 유형 SQL Join의 가장 기본적인 유형 4가지는 Inner, Left, Right, Full Join입니다. 이 네 유형의 차이를 가장 쉽고 직관적으로 설명하기 위해서, 모든 데이터 모음 간 논리 관계를 보여줄 수 있는 벤 다이어그램을 활용합니다. 다시 한 번 말씀드리지만, 어떤 Join 유형을 사용하든 간에 그 전에 관계형 데이터베이스에 추출한 데이터를 집어넣어줘야 합니다. 데이터를 집어넣는 작업은 직접 하거나, 외부의 자동화된 서비스를 이용하면 됩니다. 데이터베이스에 데이터를 집어넣었다면, 두 개의 데이터 모음인 테이블 A와 B가 있다고 가정해봅시다. 두 테이블은 기..
2020.05.30 -
SQL Join 알아보기 ... Join이란?
SQL Join 명령문에 대해 간단하게 설명한 SQL Joins Explained를 번역한 글입니다. SQL 명령문, Join이 대체 무엇인가요? SQL의 Join은 두 개의 데이터 모음으로부터 데이터를 조합하는 명령문입니다. SQL Join에 대해 자세히 알아보기 전에 SQL이 무엇인지, 왜 Join이란 명령문을 쓰는지 짧게 알아보겠습니다. SQL은 RDBMS의 정보 관리라는 특수한 목적으로 만들어진 프로그래밍 언어입니다. 여기서 핵심은 '관계형'이란 단어입니다. 데이터베이스의 구조가 데이터 모음 사이에 명시적인 관계가 있도록 구성되어 있다는 것을 알려주기 때문입니다. 일반적으로 SQL 명령문을 써서 RDBMS를 다루기 전에, 먼저 RDBMS에 추출한 데이터를 변형, 입력해야 합니다. 관계형 데이터베이..
2020.05.25 -
두더지 잡기 게임 만들기
많다면 많고, 적다면 적었던 JavaScript30 시리즈의 마지막 튜토리얼입니다. 오락실 앞에 약방의 감초처럼 놓여있는 두더지 게임을 간단하게 JavaScript로 구현해봅니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 30 - Whack A Mole 언어: JavaScript 목표: 구멍에서 무작위로 튀어나오는 두더지를 잡는 미니 게임 만들기 진행 기간 2020년 5월 16일 두더지가 나오는 구멍, 나와있는 시간 무작위로 설정하기 우선, 두더지가 튀어나올 구멍이 여럿 필요합니다. 여러 구멍 중 어떤 구멍으로 나올지, 그리고 나와서 얼마 동안 있다가 다시 들어갈 지가 정해져야 하겠죠. 두더지가 튀어나오는 구멍과 튀어나왔다가 들어가는 시간이 일정하면 금방 질리기 때문에, 이 둘을 무작위..
2020.05.17 -
카운트다운 타이머 만들기
튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 29 - Countdown Timer 튜토리얼 분류: JavaScript 튜토리얼 설명: 지정된 시간과 직접 입력한 시간 동안 카운트다운되는 타이머 만들기 진행기간: 2020년 5월 14일 JavaScript를 사용해 현재 시간으로부터 일정 시간 뒤까지 카운트다운을 실행하는 타이머를 만들 수 있다. 사전에 지정한 시간 동안 작동하게 할 수도 있고, 직접 입력한 시간 동안 작동하게 할 수도 있다. 카운트다운 시간 계산하기 우선, 카운트다운 시간을 계산하기 위해 현재 시각과 종료 시각이 필요하다. 아래 timer 함수의 코드를 보자. Date.now( ) 메서드를 통해 현재 시각을 계산하고, 현재 시각에 인자로 넘겨받은 seconds를 더해 종료..
2020.05.15 -
실시간 재생 속도 조절 슬라이더 만들기
튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 28 - Video Speed Scrubber 튜토리얼 분류: JavaScript 튜토리얼 설명: 영상 속도를 실시간으로 조절하고 보여주는 슬라이더 만들기 진행기간: 2020년 5월 13일 HTML Video 태그로 웹페이지에 삽입된 영상은 JavaScript를 사용해 속성을 다양하게 변경할 수 있다. 커서 위치에 반응하는 슬라이더를 만들어 영상 재생 속도를 실시간으로 조절해보자. 커서 위치에 따라 슬라이더의 높이 변경하기 우선, 현재 재생 속도를 시각적으로 나타내야 한다. 다음의 코드를 보자. speed는 슬라이더의 배경, bar는 슬라이더에 해당하는 DOM 요소이다. 슬라이더를 마우스 커서와 연동하려면 mousemove 이벤트에 이벤트 리..
2020.05.13