📌 스프린트 회고_3
포트폴리오 프로젝트
- 소프트웨어의 본질은 문제해결
프로젝트를 할 때 문제 해결이라는 목적이 있어야 잘하고 있는지 측정하기 쉬움
'기술을 썼다'를 넘어서기 위해 내가 지금 이 기술을 사용해서 사용자에게 어떤 가치를 전달하고 있는지 인지하기
ex) 로그인, 회원가입 페이지를 만들 때 어떻게 사용성을 늘릴 수 있는지 고민하고 css 애니메이션부터 js로 동적으로 ui 렌더링 되는것까지 고민해서 개선했다- '사용자'('나','타인','타인들')가 있는 작고 유용한 프로그램을 만들려고 고민하기
사용자인 내가 유용함을 느끼면 다른 사람도 느낄 가능성이 높음
알고리즘 공부 팁
1) '회색 지대'를 정복하기
⚪ 흰색 지대 : 어떻게 풀어야 할지 잘 떠오른다 / 적용하고 있고 무슨 내용인지 알겠다
🔘 회색 지대 : 아리까리하다 / 들어봤고 알고는 있는데 내가 잘 쓰지는 못하는 것 같다
⚫ 검은색 지대 : 감도 안 잡힌다
2) 같은 문제를 다른 방식으로 여러 번 풀어보기
🪄 DOM
Document Object Model(문서 객체 모델)의 약자
💡 문서 객체
Web Browser 안에서 HTML 문서에 JavaScript가 접근할 수 있도록 HTML 태그들을 객체(object)로 만든 것
HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할
각각의 요소와 속성, 콘텐츠를 표현하는 단위: '노드(node)'
DOM 트리 접근
document 객체를 통해 HTML 문서에 접근 가능
document는 브라우저가 불러온 웹페이지를 나타내며 DOM 트리의 진입점 역할을 수행
document.getElementById()document.getElementsByTagName()document.getElementsByClassName()document.querySelector("selector")document.querySelectorAll("selector")
💡 HTMLCollection과 NodeList
- 공통점
둘 다 배열과 비슷한 객체(array-like object) 형태를 가진다.
=> 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근한다. - 차이점
- 해당 객체에 포함될 수 있는 DOM 요소의 유형
- HTMLCollection은 HTML만 포함하지만
- NodeList는 모든 유형의 DOM 요소 즉, text, 주석 등을 모두 포함한다.
- 객체를 구성하는 값의 변경 가능 여부
- HTMLCollection은 해당 객체의 각 속성에 대한 변경 사항이 즉시 반영되지만(실시간으로 업데이트)
- NodeList는 정적이므로 해당 객체에 대한 변경 사항은 즉시 반영되지 않는다.
* NodeList는 새로운 요소가 추가되거나 삭제되는 것은 반영이 안되지만 가지고 있는 요소의 정보가 업데이트 되는 것은 반영되기 때문에 완전 정적인 것은 아니다.
- 사용할 수 있는 메소드
- NodeList는 forEach 같은 배열 메소드를 사용할 수 있지만
- HTMLCollection은 사용할 수 없고 다른 기능을 지원한다.
- 해당 객체에 포함될 수 있는 DOM 요소의 유형
DOM 제어
- 이벤트 삽입
target.addEventListener( type, listener )
// 이벤트의 타입에는 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지한다
// listener 함수의 인수에는 이벤트에 대한 정보가 담겨있다
const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){
console.log("hello world");
})- 클래스 제어
classList프로퍼티를 통해 요소의 class 속성을 제어할 수 있다
const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){
myBtn.classList.add("blue"); // 'blue'라는 클래스의 속성값 지정
myBtn.classList.remove("blue"); // 클래스 제거
myBtn.classList.toggle("blue"); // 클래스 없으면 넣어주고 있으면 제거
myBtn.classList.contains("blue"); // 해당하는 클래스가 있는지 확인
})- 요소 제어
요소를 새롭게 생성하고, 위치하고, 제거할 수 있다document.createElement(target): target 요소 생성document.createTextNode(target): target 텍스트 생성element.appendChild(target): target 요소를 element의 자식으로 위치element.removeChild(target): element의 target 자식 요소 제거element.append(target): target 요소를 element의 자식으로 위치
appendChild()와 다른점은 여러 개의 노드를 한번에 그리고 텍스트도 자식 노드로 포함시킬 수 있다target.remove(): target 요소 제거element.insertBefore(target, location): target 요소를 부모 요소의 자식인 location 위치 앞으로 이동
DOM도 모르고 쓰던 것들이었는데 이게 DOM이었구나.. 싶었다ㅋㅋ
그리고 어제 저녁에 딥다이브 읽어보기를 잘했다..! 우주 갈 뻔ㅎㅎ🚀 오늘 마저 다 읽어야지📖
