최근에 프론트앤드 업무를 하면서 3D 작업에 관심을 가지게 됐다. CSS를 이용해서 3D 효과를 많이 이용해보지 않았기 때문에 연습삼아 올려볼까 한다. 이번 포스팅에서 만들어 볼 예제는 캐러셀 슬라이드(Carousel Slide)다. 완성본 완성본 영상처럼, 나는 1부터 9까지 총 9개의 아이템을 만들어 줄 것이다. 현재 실행 결과와 코드는 다음과 같다.

시간 차이 구하기 최근에 리액트, 리덕스 강의를 들었다. 강의를 내껄로 만들기 위해서 나는 항상 강의를 다시 참조하여 무엇인가를 만드는 습관을 들여놨는데, 이번에는 게시판을 간단하게 만들기로 했다. 게시판은 흔히 글 번호, 제목, 글쓴이, 날짜를 기입한다. 그런데 요즘 게시판은 날짜를 기입할 때 2020-01-02 식이 아닌 (현재시간) - (글이 업로드 된 시간)을 뺀 시간 차이를 기입한다. 대표적인 예시가 유튜브다. 유튜브 동영상을, 댓글을 업로드했을 때 업로드된 시간란을 보면 3초 전, 1분 전 이런식으로 출력되어있다. 따라서 나도 업로드된 날짜를 유튜브 방식처럼 출력하고 싶었다. 방법은 어렵진 않았으나, 년도를 계산할 경우 e-표기법이 뜨는 변수가 발생했다. 밀리미터 단위를 초, 분, ... 년도..

1. Array.fill([]) 자료구조 책을 보고 기수정렬을 프로그래밍할 때 였다. 기수 정렬 포스팅에서는 버킷이라는 객체를 만들때 오브젝트 자체를 생성했지만, 원래는 이 차원 배열을 만들려고 했었다. 하지만 그러지 못했다. 왜냐하면 Array.fill([]) 함수 때문이었다. 다음 프로그램을 보자. const arr = new Array(3).fill([]); arr[0].push(1); /* 이 함수의 출력은? */ console.log(arr); /* 정답 */ /* [ [1], [1], [1] ] */ 위 프로그램의 출력 결과는 무엇일까? 나는 arr의 첫 번째 원소 배열에만 1이라는 요소가 추가될 줄만 알았다. 하지만 결과는 아니었다. 모든 원소 배열에 1이 추가됐던 것이다. 내가 키워드를 잘..