241109 TIL

• form 태그에 대해 조금 더 자세히 공부하게 됐다.
• form 태그로 input 태그를 감싸고 값을 받으면 action 속성에 지정한 경로로 바로 request를 보낼 수 있다. 이때, 요청의 body에는 FormData 객체가 직렬화되어 결과로 전달된다.
• form 태그를 사용하면 결과를 FormData 생성자로 만든 객체에 받을 수 있다. 해당 객체를 사용하면 내부에 있는 input에 들어온 값들을 캐치할 수 있다. 이때 get, getAll, values 등이 사용된다.
• form 태그를 잘 사용하려면 input 태그에 name 속성을 적절하게 지정해줘야 한다. input 태그의 name 속성은 FormData 객체의 keys로 접근할 수 있고, 해당 키가 등록된 input 태그의 값을 values로 접근할 수 있다.
• form 태그의 submit 이벤트 완료 후 type="text"인 input 태그를 비워주려면 $form.reset() 메서드를 사용하면 된다.
• 이외에도 form 태그에는 다양한 기능을 구현하기 위한 속성과 메서드들이 있다. 차근차근 잘 공부해 나가야겠다.
• HTML 요소에 CSS로 그림자를 줄 때 box-shadow를 사용한다. 값으로는 box-shadow: offset-x offset-y blur-radius spread-radius color를 갖는다.
• 그림자가 바깥쪽이 아니라 안쪽으로 생기게 하려면 offeset-x 전에 먼저 inset이라고 값을 지정해 주면 된다.
• window 객체를 통해 이벤트를 캐치할 때, 뒤로 가기와 앞으로 가기 이벤트는 popstate를 통해 확인할 수 있지만, 새로 고침은 popstate로 확인되지 않는다. 대신, beforeunload라는 이벤트를 사용하면 새로 고침을 캐치할 수 있다.
• beforeunload를 사용하면 새로 고침뿐만 아니라 페이지 닫기, 링크 이동 등의 이벤트도 캐치할 수 있다.
• window.location 객체에는 브라우저 현재 창의 URL 조작, 페이지 이동 등을 위한 다양한 프로퍼티와 메서드가 포함된다. 하나씩 계속 더 공부해 가고 잘 활용해 보자.
• git에는diff`라는 명령어가 있다. 말 그대로 두 개 버전의 차이를 보여준다.
• diff에서 앞에 -로 된 코드는 이전 버전에서 제거된 코드이다. +로 된 부분은 나중 버전에서 추가된 코드이다.
• diff는 동적으로 변경이 있는 코드의 앞 뒤 몇 줄을 더 포함해서 보여준다. 단, 전체 코드를 전부 다 보여주진 않는다.
• git diff에는 다양한 사용법이 있다.
  • git diff는 스테이징 하지 않은(add하지 않은) 코드의 변경 사항을 보여준다.
  • git diff --staged는 스테이징 된 변경사항을 보여준다.
  • git diff HEAD는 마지막 커밋 이후에 변경된 모든 사항들을 스테이징 여부에 상관없이 보여준다.
  • git diff {branch1}...{branch2}는 브랜치들 사이의 변경 사항을 보여준다. ...는 (띄어쓰기)로 대체 가능하다.
  • git diff {commit1}...{commit2}는 커밋 사이의 변경 사항을 보여준다. 마찬가지로 ...는 띄어쓰기로 대체 가능하다.
  • diff의 확인 범위를 프로젝트 전체가 아니라 파일 범위로 좁힐 수 있다. git diff 뒤에 파일 이름(경로)을 작성해 주면 된다.

오늘 뭔가 공부 텐션이 떨어졌는데, 마음 놓지 말고 내일부터 다시 정신 바짝 차리고 잘 해나가 봐야겠다. 끝.