개념 Git을 이용해 버전 관리를 하다보면, 지금 코드가 실행이 되지 않아 예전 코드로 돌아가고 싶을 때 혹은 다시 원래의 상태로 돌아가고 싶을 때가 생길 것이다. 이를 위해 Git에서는 과거로 돌아갈 수 있는 기능을 제공한다. 방법 reset을 이용하여 아예 없던 일로 하기 git reset --hard 커밋의 해시 전 글에서 git log를 이용해 각 commit의 해시를 확인할 수 있다고 했다. reset을 이용하면 지금까지의 커밋을 모두 삭제하고, 그 때의 커밋으로 돌아갈 수 있다. (뒤에 커밋의 해시를 따로 작성하지 않을 시 가장 최근의 커밋으로 돌아간다.) 즉, 지금까지 했던 커밋들을 모두 초기화시키기 때문에 실무 협업에서는 다소 위험한 명령어이기도 하다. revert를 이용하여 특정 커밋만 ..

개념 Git은 형상 관리 도구(버전 관리 도구) 중 하나로 개발자라면 반드시 써야할 필수 도구라고 할 수 있다. 특히, Git의 브랜치라는 것을 통해 병렬적으로 여러 명이서 개발이 가능하기 때문에 개발자끼리의 협업을 위해 매우 유용한 도구이며 협업뿐만 아니라 개인 프로젝트 또한 체계적으로 관리가 가능하다. 이러한 이유들로 이제 개발자라면 필수 교양급으로 Git을 사용할 줄 알아야 한다. (Git과 Github는 다르다. Git은 시스템이고, Github는 플랫폼이다.) 방법 Git 초기 설정 git config --global user.name "이름" git config --global user.email "이메일" 나같은 경우에는 VS Code의 터미널을 Git Bash로 변경하여 사용하고 있다. C..

개념 가끔 웹 사이트를 돌아다니다보면, 스크롤을 할 때마다 한 섹션씩 휙-휙 넘어가는 웹을 경험한 적이 있을 것이다. 마치 PPT처럼 여러 번 스크롤을 해도 한 섹션씩 넘어가는 이벤트는 어떻게 만들어야 할까? 원리는 먼저 스크롤을 통제한 채 스크롤의 움직임을 인지하고, 그 움직임의 값에 따라 window의 scrollTop 값을 바꿔주기만 하면 된다. 나 같은 경우 페이지(섹션)마다 변수값으로 하나의 페이지 번호를 달아주고, 그 페이지 번호에 따라서 스크롤을 통제하는 식의 이벤트를 사용했다. 해결 let pageNumber = 0; // 섹션 넘버 지정 먼저, 초깃값(가장 처음에 나오는 섹션의 번호)은 0으로 주었다. 그리고 총 5페이지의 섹션이 있다고 가정하겠다. 그럼 pageNumber는 0부터 4까..

정의 화살표 함수란, ES6 버전에서 새롭게 생긴 함수의 새로운 형태로 화살표(=>)를 통해 간단하게 함수를 선언할 수 있는 문법을 말한다. (함수 표현식에 해당한다. 호이스팅X) 쓰임 기본형 // 기존의 함수 표현식 const sum = function (){ return a + b; } // 화살표 함수 // 바로 return 값이 나오는 경우 return과 중괄호는 생략 가능하다. const sum = (a, b) => a + b // 파라미터가 1개인 경우 소괄호를 생략해도 된다. const myFunc = x => x * x 기존의 함수 표현식에서는 함수의 식별자 이름(sum)과 소괄호 안에 매개변수, 중괄호 안에 return 값을 넣는 게 일반적이었다. 하지만 화살표 함수에서는 'functio..

문제 높이가 2000px인 document가 있다고 가정하자. 그 document에는 y좌표가 1200px인 div 요소가 있다. 스크롤을 하면서 window 화면의 밑 끝에 div 요소가 닿았을 때, 이벤트를 주려고 하는데 'window 화면의 끝에 div 요소가 닿았을 때' 라는 조건식은 어떻게 세워야 하는걸까? 해결 해당 요소(div)의 y좌표 구하기 우선 화면에 닿는 기준이 되는 요소의 y좌표를 구해야 한다. div라고 하면, div.offset().bottom의 값을 구해야 하는 것이다. 하지만, offset().top은 있어도 offset().bottom은 없는 식이므로 우리가 직접 구해야 한다. $('div').offset().top + $('div').height(); offset().to..