둥지

Electron에 바벨을 셋팅하려는데 최신 정보가 잘 없어 정리하게 되었습니다. 먼저 일렉트론에 바벨을 셋팅하려면 노드가 설치되어 있어야합니다. 노드는 이미 설치되어 있다고 가정하고 넘어가겠습니다. 먼저 프로젝트를 먼저 생성해야겠죠? 아래의 명령어를 입력합니다. npm init -y 다음으로 일렉트론을 설치합니다. 다음의 명령어를 콘솔에 입력합니다. npm i -D electron 다음으로 바벨설정하기 위해 필요한 라이브러리들을 설치합니다. npm i -D @babel/cli @babel/core @babel/preset-env @babel/register 그리고 .babelrc 파일을 만들어 아래의 내용을 입력합니다. { "presets": ["@babel/preset-env"] } 이번엔 일렉트론을 ..

이번 파트는 자바스크립트의 참조와 복사에 대해서 공부하는 파트입니다. 1. const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; const team = players; console.log(players, team); team[3] = 'Lux'; console.log(players, team); 결과는 players와 team이 같이 바뀐다 이것은 얕은 복사라서 그렇습니다. 2. const team2 = players.slice(); const team3 = [].concat(players); // 아래 두 방법은 ES6부터 사용가능합니다. const team4 = [...players]; const team5 = Array.from(players); 배열은 위의 ..

이번 파트는 많이 쓰이는 스크롤을 내리면 이미지가 날아오는 것을 구현하는 파트입니다. 1. slide-in 클래스를 가진 element들을 변수로 저장. const sliderImages = document.querySelectorAll('.slide-in'); 2. 이미지 슬라이드 체크 함수 구현. function checkSlide() { sliderImages.forEach(sliderImage => { // 이미지의 절반 계산 const slideIntAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // 이미지의 하단 계산 const imageBottom = sliderImage.offsetTop + sliderImage...