2021.12.29의 기록

내 삶도 빛나는 저 해처럼.

- 오늘의 평가 및 느낀점 - 

=>  어제는 너무 피곤해서 10분 더 일찍 잤다.  정신이 없다. 

세미 팀프로젝트도 겸하게 되니 더욱 정신이 없다.  순탄하길 바랬는데. 생각해보니 오히려 순탄한게 독인 것 같다. 보석이 되기까지 원석을 깎아내는 과정이 있듯  이리 치이고 저리 치여봐야 값진 경험을 얻을 수 있다고 생각한다. 평일만 좀 덜 자고 화이팅 해보자. 

오늘 아침에 일어나보니 팀 디스코드에 팀원 두명이 아이디어를 나눈 흔적을 봤다. 충분히 큰 힘이 되었다. 이렇게라도 참여를 적극적으로 해줘서 감사하다. 팀장으로서 더 쿨하게 임해야겠다는 다짐을 했다.

=> 오늘 스터디. 너무 놀라웠다. 자바스크립트 코드 리뷰를 마친 후 면접 질문의 주제인 JVM의 구조에 대해 설명하기로 했었다. 항상 소극적이셨던 최연장자 형이 놀라운 암기력으로 완벽하게 구조를 설명했다. 항상 내가 챙기며 알려드리고 공부시켜드리고 숙제 내드려도 잘 안하시던 분이 이렇게 놀라운 습득력을 가졌다는 거에 너무 놀랐다. 공부하는 방법은 알고 계시나 늦게 발현되는거 뿐이고 막상 하시면 금방금방 습득할 머리가 있으시다. 응원 잘 해드리고 팀프로젝트에 진행에 차질 없게 도움이 되게 이어 나가야겠다. 

 

---

- 이번 주 공부 계획 -

• 파일 입출력 공부 (아마 토요일)?

 

---

- 오늘 공부 계획 -

• 자바스크립트 복습
• JVM 구조 및 접근 지정자 공부
• 내일 아침 9시 계획 면담으로 계획 정리하자

 

---

- 공부 내용 - 

자바스크립트

DOM(Document Object Model) - Element 객체

• getElementByTagName(TagName) : 태그명으로 태그를 검색하여 NodeList 객체 반환 메소드
• NodeList 객체 : Node 객체가 여러개 저장된 콜렉션(Collection) 객체 ⇒ document 객체 대신 Element 객체를 이용하여 태그 검색 가능
• NodeList.length : NodeList 객체제 저장된 Node 객체의 갯수를 저장한 프로퍼티
• .item(index) : NodeList 객체에 저장된 Node 객체 중 첨자 위치의 Node(Element 객체)를 반환하는 메소드
• document.querySelector(selector) : css 선택자로 태그를 검색하여 Element 객체로 얻어오는 놈.
• document.querySelectorAll(selector) : css 선택자로 태그를 검색하여 NodeList 객체를 얻어오는 놈.

DOM(Document Object Model) - Element 객체 생성 및 추가

• document.createElement(nodeName) : Element 객체를 생성하여 반환하는 메소드
• document.createTextNode(content) : Text 객체를 생성하여 반환하는 메소드
• Node.appendChild(newNode) : Node 객체(Element 객체)에 마지막 자식 노드 객체로 추가하는 메소드
• document.body : body 태그를 Element 객체로 표현 .appendChild를 해줘야 DOM Tree에 Element 객체 추가
• Node.attributeName : Node 객체(Element 객체)의 프로퍼티는 태그의 속성으로 표현 가능 ⇒ Node.attributeName = attributeValue
• Node.setAttribute(attributeName, attributeValue) : Node 객체(Element 객체) 의 태그 속성값을 변경하는 메소드
• Node.insertBefore(newElt, before) : 기존 Node 객체 전에 새로운 Node 객체를 삽입

DOM(Document Object Model) - Element 객체 제거

• Node.removeChild(oldNode) : Node 객체 (Element 객체) 의 자식 Node 객체를 제거하는 메소드
• Node.parentElement : Node 객체 (Element 객체)의 부모 Node 객체를 저장한 프로퍼티

DOM(Document Object Model) - innerHTML

• Node.replaceChild(newChild, oldChild) : Node 객체(Element 객체)의 기존 자식 Node 객체를 새로운 Node 객체로 변경하는 메소드
• Node.innerHTML : Node 객체 (Element 객체)의 태그내용 (HTML 포함) 을 저장한 프로퍼티 ⇒ Node 객체의 태그내용을 변경하여 DOM Tree를 보다 쉽게 조작 가능 (굳이 엘리먼트 만들어서 appendChild 안해도 됨)

DOM(Document Object Model) - 시계

이벤트(Event) - 이벤트 처리

• 태그(Element 객체)에서 발생되는 이벤트는 자바스크립트를 사용하여 이벤트 처리
• 1. 태그의 이벤트 속성의 값으로 이벤트 처리 명령(자바스크립트 - 함수 호출) 작성
• 1. Element 객체의 이벤트 관련 요소에 이벤트 처리 함수를 저장하여 이벤트가 발생될 경우 이벤트 처리 함수가 자동 호출되어 이벤트 처리
• Element 객체의 요소(태그의 이벤트 속성)에 이벤트 처리함수를 저장(등록) ⇒ Element 객체에서 이벤트가 발생될 경우 이벤트 처리 함수가 호출되어 이벤트 처리

이벤트(Event) - this

• 이벤트 처리 함수에서 이벤트가 발생된 태그(Element 객체)를 표현하기 위한 키워드
• Element 객체의 style 태그 속성 값 변경 -CSS 스타일 변경
• 이벤트 발생 태그 >> document.getElementById(””) ⇒ this
• 이벤트 처리 함수는 이벤트가 발생된 후에 호출되어 실행

이벤트(Event) - 기본 이벤트(Default Event)

• 태그 중에는 태그 속성에 의해 이벤트가 자동 처리되는 태그 존재 - a 태그, form 태그
• Event 객체 : 이벤트 처리 함수에서 이벤트 관련 프로퍼티와 메소드를 제공하는 객체
• Event.preventDefault() : 태그(Element) 객체의 기본 이벤트를 제거하는 메소드

이벤트(Event) - 이벤트 전달(Event Propagation)

• 태그에서 발생된 이벤트가 다른 태그로 전달 - 버블링 또는 캡쳐링
• 버블링(Bubbling) : 부모 태그에서 발생된 이벤트가 자식 태그로 전달
• 캡쳐링(Capturing) : 자식 태그에서 발생된 이벤트가 부모 태그로 전달

이벤트(Event) - 이벤트 처리 함수 등록

• Element.addEventListener(type, callback[, capture]) : Element 객체에서 발생된 이벤트에 대한 이벤트 처리 함수를 등록하는 메소드 ⇒ type : 이벤트 종류, callback : 이벤트 처리 함수, capture : false 또는 true 이벤트 전달 ⇒ Element 객체에서 발생된 이벤트에 대해 다수의 이벤트 처리 함수 등록 가능

이벤트(Event) - DOM 조작

• DHTML(Dynamic HTML) : 태그에서 이벤트가 발생될 경우 Element 객체를 조작하여 동적인 페이지 제공

Form Event - 인터페이스

• form 태그 : submit 이벤트가 발생되면 웹프로그램을 요청하여 사용자 입력값을 전달하는 태그
• submit 이벤트에 의해 form 태그가 실행되기 전에사용자 입력값에 대한 검증을 자바스크립트로 검증하는 기능 구현
• form 태그의 자식 태그에는 반드시 입력태그와 submit 이벤트를 발생하는 태그가 존재해야함.
• submit 이벤트가 발생하는 태그 : input, button
• button 태그의 type 속성값을 [submit]으로 설정한 경우 버튼 클릭 시 submit 이벤트가 발생되어 form 태그 실행(웹 프로그램을 요청하여 사용자 입력 값 전달
• button 태그의 속성값을 [button]으로 설정한 경우 버튼 클릭 시 아무런 동작 안함 ⇒ 자바스크립트를 이용하여 이벤트 처리 함수를 등록 → 등록된 이벤트 처리 함수에서 입력 값 검증 후 submit 이벤트 발생
• Form 태그와 입력태그 (input, textarea, select)의 name 속성값으로 Element 객체로 가져옴 ⇒ 입력태그는 form 태그 ⇒ document 객체 생략 가능
• InputElement.focus() : 입력 태그에 초점(focus)를 위치시키는 메소드
• 입력태그의 Element 객체는 form 태그의 자식 Element 객체로 표현
• InputElement.value : 입력 태그의 입력값을 저장한 프로퍼티

---

[세미팀플]

> 디자인 사이트 대책 회의( sh s~)

>> 현실적인 사이트 계속 알아보자

> 사이트 4개 알아냈으니 각자 1개씩 크롤링 시키기

> 팀 이름 : 머스키 코드 (Musky Code)

 

>

<카테고리> ----------------------------------- LOGIN, JOIN, CART, MYPAGE(오른쪽 상단), SERACH

└MYPAGE안에 CART넣을건지 확인(따로하는게 좋을듯)

BRAND, PRODUCT, COMMUNITY(왼쪽상단)

BRAND - 사이트 소개 - 오시는 길 (지도)

PRODUCT - 신제품 - 베스트10 - 여성향수 - 남성향수

COMMUNITY - 공지사항 - 이벤트 - 사용후기 - 고객문의

 

---

- 스터디 계획 및 결과 - 

=> 자바스크립트 이벤트 핸들러, 버블링, 캡쳐링 복습

=> 면접 질문 (JVM의 구조)