Programming/JavaScript
-
비동기처리, Promise, async/await 이해Programming/JavaScript 2021. 5. 2. 20:22
동기(synchronous) vs 비동기(asynchronous) 동기와 비동기를 나누는 큰 차이점은 실행 순서입니다. 동기는 요청을 보낸 후 해당하는 응답을 받아야만 다음으로 넘어갈 수 있는 실행방식이고 반대로 비동기는 요청을 보낸 후에 응답과 관계없이 다음 동작을 실행할 수 있는 방식입니다. 간단하게 동기와 비동기방식을 생활에 적용한 예를 들어보도록 하겠습니다. 동기적 방식 병원 진료를 볼때에 창구에 접수를 하기 위해서 번호표를 뽑습니다. 저의 번호표는 3번으로 저의 앞에는 1번 2번 번호표를 가진 분이 존재합니다. 1번 손님 접수요청 -> 창구에서 응답 -> 접수완료 -> 2번 손님 접수요청 -> 창구에서 응답 -> 접수완료 -> 3번 손님 접수요청 .... 위의 예시와 같이 동기적 방식은 순서가 ..
-
리덕스 간단한 주요 개념Programming/JavaScript 2021. 4. 25. 11:05
리덕스(Redux) 란 Redux는 여러 컴포넌트에 사용되어지는 state를 분리 통합하여 관리할 수 있게끔 하고 이로 인한 안정성을 향상 시킬 수 있는 라이브러리입니다. React의 state와 비슷하지만 사용하는 방식에 있어서는 React의 state에 비해 복잡한 편입니다. Redux도 state를 관리하기 때문에 React의 state를 사용하지 않아도 됩니다. 하지만 상황에 따라 틀린 것이지 무조건 적으로 사용하지 않는 것은 아닙니다 주요 개념 Action 리덕스에서의 Action은 React state처럼 state를 바꾸는 방식입니다. 액션 객체를 가지고 있으며 반드시 type 필드를 가지고 있어야 합니다. const LoggedIn = () => ({ type: "LOGIN" }); con..
-
Array 메소드 slice, filterProgramming/JavaScript 2020. 5. 10. 17:31
slice 메소드 Array.slice() 메소드는 배열의 일부분, 부분 배열을 반환한다. slice()메소드에 2개의 인자를 전달해야 하는데 하나는 반환될 시작과 끝을 명시해야 한다. slice 예시 array는 index 0부터 시작하고, 시작지점부터 끝지점 전까지의 배열을 반환한다. 아래와 같이 응용해서 사용이 가능하다. Array.concat() 메소드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. filter() 메소드 filter() 메소드는 주어진 함수의 조건을 통과한 요소들을 모아 새로운 배열로 반환하는 메소드이다. filter() 예시 화살표 함수를 사용하여 배열에 들어있는 각각의 값들을 n으로 전달받아 짝수인 경우에만 새로운 배열로 반환
-
자바스크립트 비디오 파일 길이 구하기Programming/JavaScript 2020. 3. 19. 20:21
비디오 플레이어 컨트롤러 부분을 커스텀으로 만들고 재생시간과 재생길이를 ex) 00:00 / 01:36 이런식으로 표현하게 하는데 비디오 파일의 전체 길이를 가져오는데 제대로 값을 가져와 표현해줄 때가 있고 반대로 아무값도 못가져 올때도 있었다. 위와 같이 npm package 인 get-blob-duration을 이용해서 비디오의 전체 길이를 가져오는 소스를 작성하고 전체 길이를 가져와 formatDate(seconds) 함수에서 시 분 초를 나눠서 표현한다. 문제가 발생했던 코드 // 비디오 링크를 클릭하여 해당 비디오 페이지에 들어왔을때 const videoContainer = document.getElementById('jsVideoPlayer') // 초를 시,분,초로 변환 function fo..