전체 글

TIL - 20220912

오늘은 모던 JavaScript 튜토리얼에서 defer, async 스크립트에 대해 공부했다. 작성한 질문은 다음과 같다. 브라우저에서 HTML을 읽다가 스크립트를 만나면 DOM 생성을 중단하고 스크립트를 실행한다. 외부 스크립트 또한 마찬가지며 외부 스크립트를 모두 다운로드하고 난 후에야 남은 페이지를 처리할 수 있고 이러한 동작 방식은 두 가지 이슈가 일어날 수 있다. 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 페이지 상단에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다. 이를 해결할 수 있는 script 속성이 defer와 async이다. 브라우저에서 defer 속성이 있는 스크립트를 '백그라운드에서' 실행한다. 따라서 지연 스크립트를 하는 도중에도 HTML 파싱을 중단하..

디벨럽 - 이펙티브 타입스크립트 스터디를 참여하여

2022년 7월 10일부터 9월 5일까지 디벨럽이라는 사이트에서 진행한 이펙티브 타입스크립트 스터디에 참여하며 느낀 점, 배운 점 등에 대한 내용을 기록하려 한다. 디벨럽 Develub 디벨럽이라고 하는 개발자 북스터디 사이트가 있다. 도서로는 프론트엔드, 백엔드를 비롯한 여러 분야의 북스터디가 있고 참가비 2만원에 환급금 8만원을 포함하여 10만원을 내고 스터디에 참여할 수 있다. 8주 동안 온라인으로 진행한다. 좋았던 점 가장 좋았던 점은 스터디 진행을 자유롭게 할 수 있었던 점이었다. 진행 일정, OT 일정과 같은 일정들이 개인 일정과 맞지 않는다면 조율을 통해 일정을 편하게 변경할 수 있고, 스터디 진행도 디벨럽의 스터디 진행방식을 따르지 않아도 되며 팀원분들과 협의를 통해 바꿀 수도 있다. 필자..

TIL - 20220911

오늘은 모던 JavaScript 튜토리얼에서 DOMContentLoaded, load, beforeunload, unload 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다. HTML 문서 생명주기의 세 가지 주요 이벤트는 다음과 같다. DomContentLoaded: 브라우저가 HTML을 전부 읽고 DOM 트리를 완성할 때, 발생한다. 이미지 파일이나 CSS 같은 기타 자원은 이 주기에서 기다리지 않는다. 이를 활용해 DOM이 준비되었을 때를 확인하고 나서 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 수 있다. load: 이미지, CSS 같은 외부 자원들도 모두 불러오는 것이 끝났을 때, 발생한다. 이를 활용해 이미지 사이즈, CSS 같은 외부 자원이 로드된 후이기 때문에 실제 ..

TIL - 20220910

오늘은 모던 JavaScript 튜토리얼에서 submit 이벤트와 메서드에 대해 공부했다. 작성한 질문은 다음과 같다. submit 이벤트는 폼을 제출할 때, 트리거 되며 폼을 제출하기 전에 검증하는 과정을 거치거나 폼 전송을 취소할 때 submit 이벤트를 주로 사용한다. 폼을 전송하는 방법으로는 두 가지 방법이 있다. input 필드에서 Enter 키 누르기 이나 클릭하기 이런 방식으로 폼을 전송하면 submit 이벤트가 트리거 되며 사용자가 설정한 이벤트 핸들러가 실행되고 이벤트 핸들러에 에러 검증 과정이 있으면 에러를 출력하고 event.preventDefault()를 호출한다. form.submit() 메서드는 순수 자바스크립트만으로 폼 전송을 하고 싶은 경우에 사용한다. submit() 메서드..

TIL - 20220909

오늘은 모던 JavaScript 튜토리얼에서 이벤트: change, input, cut, copy, paste에 대해 공부했다. 작성한 질문은 다음과 같다. change 이벤트는 input에서 요소가 변경이 끝날 때, 이벤트가 발생한다. 만약에 input의 type이 'text'인 경우에는 요소 변경이 끝날 때가 아닌, 포커스를 잃을 때 이벤트가 발생한다는 점에 유의해야 한다. input 이벤트는 사용자가 값을 수정할 때, 이벤트가 발생한다. 여기서 input 이벤트는 수단 방법을 가리지 않고 어떤 방법으로든 값이 변경된다면 이벤트는 무조건 발생한다. cut, copy, paste 이벤트는 값을 잘라내기, 복사하기, 붙여넣기 할 때, 이벤트가 발생한다.

TIL - 20220908

오늘은 모던 JavaScript 튜토리얼에서 focus와 blur에 대해 공부했다. 작성한 질문은 다음과 같다. focus와 blur 이벤트는 다음과 같은 경우에 발생한다. focus: 요소가 포커스를 받을 때, 이벤트가 발생한다. blur: 요소가 포커스를 잃을 때, 이벤트가 발생한다. 회원가입 상황을 가정하여 focus 되었을 때는 에러 메시지를 숨기고 blur 되었을 때 규칙에 맞는 입력을 했는지 확인하고 알맞게 입력하지 않았을 경우 에러 메시지를 출력한다. 사용자와 상호작용하는 요소인 , , , 들은 확실히 focus와 blur를 제공하지만 , , 요소들은 focus, blur 이벤트가 트리거되지 않는다. 하지만, tabIndex를 사용하면 포커스를 할 수 있다. tabIndex 속성이 있는 요소..

TIL - 20220907

오늘은 모던 JavaScript 튜토리얼에서 폼 프로퍼티와 메서드에 대해 공부했다. 작성한 질문은 다음과 같다. 요소에는 세 가지 중요 프로퍼티가 있다. select.options: 하위 요소를 담고 있는 컬렉션 select.value: 현재 선택된 값 select.selectedIndex: 현재 선택된 의 인덱스 Function, Event 생성자 함수로 Option도 만들 수 있다. option = new Option(text, value, defaultSelected, selected); text: option 내부의 텍스트 value: option의 값 selected: true면 해당 값이 선택된다. defaultSelected: true면 HTML 속성 selected가 생성된다.

TIL - 20220906

오늘은 모던 JavaScript 튜토리얼에서 드래그 앤 드롭과 마우스 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다. 드래그 앤 드롭 알고리즘은 다음과 같은 순서로 진행된다. mousedown에는 움직일 요소를 준비한다. 이때, 기존 요소의 복사본을 만들거나 해당 요소의 클래스를 추가하는 등 원하는 형태로 작업할 수 있다. 이후 mousemove에서 position:absolute의 left, top을 변경한다. mouseup에서는 드래그 앤 드롭 완료와 관련된 모든 작업을 수행한다. 이러한 기반을 이용하여 날아가는 요소를 강조하거나 특정 영역이나 방향으로 드래그하는 것을 제한할 수도 있다.