(자바스크립트) this가 함수마다 다르게 찍혀요, 화살표 함수는 또 undefined 안 나오고

객체 만들어서 메서드 안에서 setTimeout 돌리는데 this가 자꾸 엉뚱한 걸 가리켜서 몇 시간째 헤매고 있어요. 코드부터 올릴게요.

const user = {
  name: '홍길동',
  greet() {
    setTimeout(function () {
      console.log(this.name);
    }, 100);
  }
};
user.greet(); // undefined 가 찍힘

분명히 user.greet() 로 불렀으니까 this.name 이 '홍길동' 이 나와야 하는 거 아닌가요? 근데 undefined 가 나와요. 그래서 검색하다가 화살표 함수로 바꾸라는 글 보고 이렇게 고쳤더니

setTimeout(() => {
  console.log(this.name);
}, 100); // 이번엔 '홍길동' 잘 나옴

이렇게 하니까 되긴 되더라고요. 근데 왜 되는지를 모르겠어요. 그냥 화살표 함수가 마법처럼 this를 고쳐주는 건가요?

정리하면 궁금한 게 두 개예요. 첫째, 일반 function으로 넘긴 콜백에서는 this가 왜 user가 아니라 다른 걸 가리키는 건가요. 둘째, 화살표 함수는 this를 어떻게 결정하길래 저기선 user.name 이 제대로 나오는 건가요. this가 호출하는 방식에 따라 바뀐다는 말은 들었는데 그 규칙을 명확하게 알고 싶습니다. bind 나 call 같은 것도 관련 있는 건가요?