JavaScript를 조금밖에 배우지 못하고 Vue.js로 넘어간것이 아쉽기도 했고, 리액트를 혼자 공부하기전에 결국에는 프레임워크나 라이브러리의 근간이 되는 언어가 중요하다고 생각을 해서 JS를 좀 더 깊게 공부하자고 생각을 하였다!
모던 자바스크립트 책으로 이론을 공부하며, 이론만 공부하는것보다 이걸 활용하면 학습효과가 배가 되지않을까라는 생각중에 udemy에서 이 강의를 발견하였고 현재 수강중에 있다.

아직 3번째 프로젝트 밖에 완료하지 못했지만, 이 강의에서는 JS문법에 대한 소개는 거의 없지만 이걸 이렇게 사용하고 이런식으로 프로젝트를 만들어나가는구나 라는것을 배울수 있어서 좋은것같다. 무엇보다 프레임워크, 라이브러리 없이 only JS로만 만든다는것. 학습효과를 위해 강의에서 나와있는것 이외에도 간단한 기능들을 추가적으로 만들어보았다.

1. Form Validator

username, email, password의 최소, 최대 길이를 지정하고 email의 경우에는 형식에 맞는지 검사, password는 두개가 일치하는지 확인.

오류가 있을시와 성공했을시에 따라 테두리에 색깔을 다르게 주고, 오류가 있을시에는 해당 부분의 오류문구도 표시.

1. 실행 화면

1) 기본 화면

2) 이메일 형식 오류

3) 아무것도 입력 안했을 때

2. 프로젝트를 통해 배운것

1)test()

주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 변환

function checkEmail(input){
  const re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
  if (re.test(input.value)) {
    showSuccess(input);
  } else {
    showError(input, 'Email is not valid')
  }
}

2) charAt()

해당 부분의 문자열 읽기. 파이썬의 []와 동일

cf) substring(a,b) : charAt은 문자 하나를 읽어내지만 substring 문자열을 읽어낸다.

substring(1,3)- 1번 인덱스부터 3번인덱스까지의 문자열을 불러옴

function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

3) slice()

어떤 배열의 시작부터 끝까지에 대한 얕은 복사본을 새로분 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

slice(begin, end) - end는 미포함한다. 예를들어, spice(1,4)이면 1번부터 3번까지이다.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// 2번부터 끝까지
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// 2번부터 4번까지(4번 미포함)
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

2. Movie Seat Booking

좌석을 선택하고, 해당 영화의 가격과 선택한 좌석 갯수에 따라 아래의 텍스트가 실시간으로 변경이 된다.

LocalStorage에 데이터를 저장해서 새로고침을 해도 선택한 좌석과 영화 정보를 유지 하도록 했다.

1. 실행 화면

1) 기본 화면

2) 좌석 선택시

2. 프로젝트를 통해 배운것

1) localStorage

localStorage는 오직 string만 지원하고 키와 밸류의 형태로 값을 저장 하기 때문에 배열을 저장하고 싶을때는 JSON.stringify() JSON 객체를 String 객체로 변환시켜준다. 대신 localstorage에서 JS로 값을 불러 올 때는 JSON.parse() 함수를 사용하여 string객체를 다시 JSON 객체로 변환시켜준다.

localStorage.setItem(key, value) : key와 value를 입력하여 localStorage에 저장

localStorage.getItem(key) : Storage에서 이 key를 가진 값을 반환

localStorage.removeItem(key) : Storage에서 이 key를 가진 값을 삭제

localStorage.clear() : Storage에 있는 값들 모두 삭제

function setMovieData(movieIndex, moviePrice){
  localStorage.setItem('selectedMovieIndex', movieIndex);
  localStorage.setItem('selectedMoviePrice', moviePrice);
}

// Update total and count
function updateSelectCount(){
  const selectedSeats = document.querySelectorAll('.row .seat.selected');
  //spread snytax
  const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));
  localStorage.setItem('selectedSeats',JSON.stringify(seatsIndex));
  const selectedSeatsCount = selectedSeats.length;
  count.innerText = selectedSeatsCount;
  total.innerText = selectedSeatsCount*ticketPrice;
}

2) CSS - perspective

하위 요소를 관찰하는 원근 거리를 설정하는 값.

perspective의 숫자가 커질수록 멀리서 보는 느낌이 난다.

3. 추가 작업

개인적으로 reset 버튼을 만들었다. reset 버튼을 누르면 LocalStorage에 저장되어있던 모든 좌석과 영화 정보들을 초기화 시켰다.

function resetSelected(){
  localStorage.clear();
  seats.forEach(seat =>{
    seat.classList.remove('selected');
  })
  updateSelectCount();
}

reset.addEventListener('click', event => resetSelected());

3. Custom Video Player

비디오 플레이어를 직접 커스텀.

아래의 재생 버튼을 누르면 Play와 Pause 아이콘이 바뀌면서 나타나게 구현하였고 Stop버튼을 누르면 영상이 멈추면서 재생시간을 0으로 초기화 시켰다.

LocalStorage에 데이터를 저장해서 새로고침을 해도 선택한 좌석과 영화 정보를 유지 하도록 했다.

1. 실행 화면

1) 기본 화면

2) 영상 재생시

2. 프로젝트를 통해 배운것

1) HTML - input range

슬라이드 바를 조정하여 범위 내의 숫자를 선택 할 수 있는 입력 필드

• max : input요소의 최대값을 명시

• min : input요소의 최솟값을 명시

• step : input 요소에 입력할 수 있는 숫자들 사이의 간격을 명시

• value : input 요소의 초깃값을 명시

<input type="range" id="progress" class="progress" min="0" max="100" step="0.1" value="0">

2) Video

play, pause등 여러 가본 함수 및 속성들을 가지고 있다.

• currentTime : 현재 재생중인 시간을 초 단위로 반환
• duration : 현재 오디오 / 비디오의 길이를 초 단위로 반환

const video = document.querySelector('#video');

function toggleVideoStatus(){
  if(video.paused){
    video.play();
  } else {
    video.pause();
  }
}

function updateProgress(){
  progress.value = (video.currentTime / video.duration) * 100;

  //get min

  let mins = Math.floor(video.currentTime / 60);
  if(mins < 10){
    mins = '0' + String(mins);
  }

  let secs = Math.floor(video.currentTime % 60);
  if(secs < 10){
    secs = '0' + String(secs);
  }

  timestamp.innerText = `${mins}:${secs}`;
}

3. 추가 작업

Fast foward와 rewind 버튼을 만들어 각각의 버튼을 누르면 현재 영상 시간에서 +5, -5초씩을 하게 해주었다. 만약 현재 시청시간이 5초 미만이면 0으로 가게 설정을 하였다.

function forwardVideo(){
  video.currentTime += 5
}

function backwardVideo(){
  if (video.currentTime < 5){
    video.currentTime = 0;
  } else{
    video.currentTime -=5;
  }
}