[TIL] Udemy 9일차 프론트엔드/백엔드 - 자바스크립트 DOM

강준호·2023년 12월 22일
개발부트캠프백엔드유데미유데미부트캠프유데미취업부트캠프유데미큐레이션프론트엔드

Udemy

목록 보기
10/44

DOM

DOM이란?

  • 작성된 Html 코드를 분석해서 데이터와 브라우저의 내부를 표현하는 것을 설명해주는 역할.

defer

  • 전체 문서가 분석이 될 때까지 스크립트 실행이 지연되어야 한다고 브라우저에게 알려주는 기능

DOM에서 HTML 에 엑세스 하는 방법

Document 인터페이스 방법

  • 간단하다.
  • ID or class 같은 특정 식별자가 있는 요소에 빠르게 엑세스

document.getElementById(id)

  • 이 메소드는 고유 ID로 요소를 선택합니다. ID가 알려진 경우 요소에 액세스하는 일반적이고 효율적인 방법입니다.

document.getElementsByTagName(tagName)

  • 이 메소드는 지정된 태그 이름(예: 'div', 'p' 등)을 가진 모든 요소를 검색하고 라이브 HTMLCollection을 반환합니다.

document.getElementsByClassName(className)

  • 지정된 클래스 이름을 가진 모든 요소를 검색하고 라이브 HTMLCollection을 반환합니다.

document.querySelector(selector)

  • 이 메소드를 사용하면 지정된 CSS 선택기와 일치하는 첫 번째 요소를 선택할 수 있습니다. - 매우 다재다능하며 ID, 클래스, 태그 등을 기준으로 요소를 선택하는 데 사용할 수 있습니다.

document.querySelectorAll(selector)

  • querySelector와 유사하지만 지정된 CSS 선택기와 일치하는 모든 요소를 반환합니다.

Traversal(순회) 속성

  • DOM 트리탐색.
  • 문서 구조가 중요하거나 요소에 특정 식별자가 없을 수 있는 동적 컨텐츠 처리에 유용

parentNode

  • 이 속성은 특정 요소의 부모 노드에 액세스하는 데 사용됩니다.

childNodes

  • 텍스트 노드 및 주석 노드를 포함하여 요소의 하위 노드 컬렉션을 제공합니다.

firstChild 및 lastChild

  • 첫번째 or 마지막 하위노드를 DOM 트리의 요소로 반환한다.
console.log(document.body.firstChild)

#text
assignedSlot
: 
null
baseURI
: 
"http://127.0.0.1:5500/index.html"
childNodes
: 
NodeList []
data
: 
"\n    "
firstChild
: 
.....

  • 위와같은 텍스트 노드를 출력한다. #text'는 노드 유형이 텍스트 노드임을 나타냅니다.

  • 그래서 h1 요소를 선택하고 싶으면 텍스트 노드를 건너뛰어야함.

nextSibling 및 previousSibling

  • DOM 트리에 있는 노드의 다음 및 이전 형제에 액세스하는 데 사용됩니다.

Element.children

  • 텍스트 노드와 코멘트 노드를 제외하고 요소 유형의 하위 노드만 반환하는 속성입니다.

Child vs children

child

  • 모든 유형의 첫 번째/마지막 노드(텍스트나 주석과 같은 요소가 아닌 노드일 수 있음)를 반환

children

  • 요소 유형 노드(예: 'div', 'p' 등)을 지정된 요소의 하위 요소로 지정합니다.

console.log vs console.dir

console.log

  • DOM 요소에 대해 읽기 쉽고 사용자 친화적인 표현에 관한

console.dir

  • json 같은 트리로 표시
  • 객체의 속성과 메소드에 대한 상세하고 기술적인 보기를 제공

요소 추가 삭제 이동

새로운 요소 추가하기

1. 새로운 요소 만들기

// ADD AN ELEMENT
// 1. Create the new element

let newAnchorElement = document.createElement('a');
newAnchorElement.href = 'https://google.com';
newAnchorElement.textContent = 'This leads to Google!';

2. 삽입해 줘야 할 요소에 접근


// 2. Get access to the parent element that should hold the new element

let firstParagraph = document.querySelector('p');

3. 부모 요소 컨텐츠에 새로운 요소를 삽입

// 3. Insert the new element into the parent element content

firstParagraph.append(newAnchorElement);

요소 삭제하기

1. 제거할 요소 선택

let firstH1Element = document.querySelector('h1');

2. 요소 삭제

firstH1Element.remove(); //최신용
//firstH1Element.parentElement.removeChild(firstParagraph); // 구식용

요소 이동하기

붙이고 싶은 요소 뒤에 append

firstParagraph.parentElement.append(firstParagraph);
  • 기존 요소를 가지고 하는거기때문에 굳이 삭제하지 않아도 기존것을 append 하면 브라우저가 자동으로 중복은 삭제해서 이동해줌

InnerHTML vs textContent

innerHtml

  • html 요소로 분석됨
firstParagraph.innerHTML= "Hi ! This is <strong> </strong> !!</strong>";

textContent

firstParagraph.textContent = "Hi ! This is <strong> </strong> !!</strong>";

  • Dom 객체로 해석되지 않으며, 브라우저에 의해 분석되지도 않음

이벤트 리스너

click

let paragraphElement = document.querySelector("p");

function changeParagraphText() {
  paragraphElement.textContent = "Clicked!";
  console.log("Paragraph clicked");
}

paragraphElement.addEventListener("click", changeParagraphText); //changeParagraphText() 하면 브라우저가 바로 실행시키기 때문

input

let inputElement = document.querySelector("input");

function retrieveUserInput() {
    let enteredText = inputElement.value;
    console.log(enteredText);
}

inputElement.addEventListener("input", retrieveUserInput);

이벤트 객체

function changeBackgroundColor(event){
  console.dir(event.target);
}

secondButtonElement.addEventListener('click',changeBackgroundColor);
  • addEventListener 함수의 첫번째 매개 변수 값을 자동으로 가져와줌.
  • event.target 의 이벤트를 발생시킨 요소(버튼)에 접근가능

멘토링 QnA

Q. 자바 + 스프링 주니어 백엔드 개발자로서 빌드툴과 자바 컴파일러, IDE에 대한 이해는 어느 정도 수준으로 필요한 것일지에 관해 질문드리고 싶습니다! 얼마 전, 인강을 보면서 @RequestParam 관련 실습 중에 인강 강사의 스프링부트 버전과 제가 사용하는 버전의 불일치로 인해서 빌드 자체가 안되는 현상을 겪었습니다. 다행히 질문 게시판에 저와 같은 현상을 겪은 사람의 질문이 이미 올라와 있었고, 때문에 해당 글의 답변을 참고하여 컴파일 옵션을 한줄 추가하여 금방 해결할 수 있었습니다. 다만 만약 이것을 스스로 해결해야만 했다면 한참을 막혀서 정작 중요한 @RequestParam에 관한 학습을 진행 하지 못했을 것이라고 생각이 들었는데요. gradle과 같은 빌드 툴, IDE, 자바 컴파일러에 대한 학습은 항상 후순위로 미뤄왔었는데, 주니어 개발자로 취업을 준비하는 단계에서 1) 이에 대한 학습을 같이 병행하는 것이 좋을지, 2) 아니면 추후 프레임웍에 대한 이해도를 어느 정도 갖춘 뒤에 익히는 것이 좋을지 고민이 되어 질문을 드립니다.

  • 생각보다 시간이 안드는건 필요로하다. 현재쓰고 있는 버전에 대한 특징을 요약해놓은건 자료로 있을거야. 특정 빌드 툴에 대한 현재 버전의 툴 내용 문서정도는 읽는데 시간도 얼마 안걸리니까.

  • 자바 컴파일러에 대한 이해는 많이 할수록 좋아. 자바 컴파일러, JVM 의 원리 등등 에 대해서는 면접도 그렇고 알아두면 좋아. SpringBooT 3 가 작년에 나왔는데, 어떤 기능이 추가되고 변화가 있었는가? 그럼 그 전버전 2는?? 하면서 내가 쓰고 있는 버전에서 하나씩 올라가면서 공부를 하는것도 나쁘지는 않은거같아.

  • 예를들면 스프링부트 2.4를 썼다 -> 면접때 왜 2.4를 썼죠? 라는 질문도 간혹 오긴해.

    1. 병행하는게 좋지만 비중을 높이지는 않는게 좋다. 시간 분배를 하고, 이 시간 동안 효율을 내야하기 때문에.
    1. 순서가 있는거같지는 않고, 이는 별개의 개념이야. 따로 같이 하면 좋은거같아.

Q. 지원자들의 포트폴리오를 확인하시면서 매력적으로 느껴졌던 포트폴리오는 어떤 특징들이 있었는지 궁금합니다.

  • 어느시기를 기점으로, 프로젝트성 포트폴리오 라는것 만으로는 높은 점수를 주기 어려워. 최근에는, 실무에서 겪을만한 문제를 재현하는 포트폴리오.

  • 이커머스다 하면 이커머스에서 결제에서 발생하는 문제, 결제모듈은 비동기통신을 해야하는데 그것의 실패율을 떨어트리는 디테일을 특정 플로우의 로직으로 만들고, 어떻게 만들면 이러한 이슈를 해결할 수 있다 등등.

  • 일반적인 CRUD 는 쉽고, 실무에서 겪을법한 난이도 높은 기술 주제를 미리 겪어보려고하는 포트폴리오가 좋아. 예를들면 ,n+1 이슈를 어떤식으로 바라보냐의 문제. n+1 을 발생시키면 여러한 짧은 쿼리가 날라가는데 jpa 상 어떤 이슈가 발생한다 등등의 설명까지 필요해.

  • 추가적으로 퇴근시간 이후에 내는 프로젝트를 제출하는 사람에게 좋은 점수를 주고있어. 이런 사람들은 찐 개발자기 때문에. 그런사람은 집에서 코딩을 안할리가 없다고 생각해.

  • 로스트아크 낚시를 매크로로 만들고 이를 안걸리게 만들고 싶어. 그래서 키보드와 마우스 조작을 구현했다 + 소켓으로 구현한다면 절대 걸릴 일이 없다. 등등 => 내 불편함을 짧은 툴로 해결해나가구나.
    업무에서 사용하는 단축키가 있는데, 한눈에 보이지 않고, 커스텀된 단축키가 필요해서 글로벌 핫키로 구현하기.

  1. 유용한 유틸리티 모음 을 쉽게 접근해서 다운로드 받을 수 있는 툴.

Q. 지난 11월 23일에 Spring Boot 3.2가 정식 릴리즈 되면서 생긴 궁금증입니다..! 멘토님께서 보시기에, 현 상황에서 첫 스프링 프로젝트를 진행할 신입 개발자가 새로운 팀 프로젝트를 진행한다면 가장 최근 릴리즈 버전인 3.2버전을 사용하는것을 추천하시는지, 아니면 조금 더 안정화되고 레퍼런스가 많은 3.0 혹은 3.1 버전을 추천하시는지 궁금합니다..!

  • 나였으면 3.1 사용할거같아.3.2가 나왔으니 3.1도 스테이블 하거든. 왜냐하면, 주니어들은 고생을 안하는 테크트리를 밟는게 좋아. 최신버전은 구글링으로 풀 수 없는 일이 많아. 해당 패키지를 만든 깃헙 저장소에 물어보고 그래야하는데 이런 일들이 너무 힘든 일이야. 그 문제에 발목잡혀서 삽질하는건 비추야.

Q. 저같은 경우엔 사실 최근에 rest-client를 사용하기 위해 3.2버전을 사용중에있는데요, 만약 관련해서 버전 이슈가 의심되는 상황이 발생할 경우에는 어떤식으로 풀어가는게 좋을까요?

    1. 오픈소스를 열어보고 풀리퀘스트를 날리는것. 2. 누구에게 문의해서 해결해주기를 기다리는것.

  • 내가 바로 고치는 정도는 아니더라도, 꽤 많은 근거와 상황설명을 하고 해결을 요청하는게 좋아.

Q. 아무래도 주니어 개발자이다보니, 사실 버전이슈인지 아닌지 판단조차 되지 않는 경우가 있는데 해당 경우에 spring boot 버전을 낮춰보고 테스트를 해봤을 때 문제없이 동작한다면, 버전이슈라고 판단하는 방법도 괜찮을까요?

  • 이 이슈를 이력서에 쓰고 싶다면, 이 버전이 왜 문제가 있는지 까지 가는게 좋긴해. 시간상 버전 다운로드로 해결했지만, 특정부분의 특정파일의 어떤 부분이 문제였는지까지 적는다면, 이 친구 오픈소스까지 열어보고 해결할 줄 아네~ 로 높은 점수를 받을 수 있어.

Q. 디미터 법칙을 준수하기 위해서 getter를 남발하지 말라고 하는데, 이 부분에 대해서 설명해주실 수 있나요?!?

  • 어떤 하나의 법칙에 의해서 행동하는게 애매할 때가 있어. getter setter 를 열었다는거 자체가. 객체지향적으로 옳지 않다라는 말이 있어. getter 를 사용함으로서 객체지향을 못지키는 상황이 많이 나오고, 이견이 많이나와.

  • 어떤 객체가 가지고 있는 값을 마음껏 사용한다면, 단일책임원칙을 어길 수도 있어.

  • 어떤 객체의 행위나 동작은 그 클래스에서 끝내야해. 큰 비즈니스가 드러내는게 좋지않다.

Q. 스프링 부트에서 DTO 를 사용할때 초반에는 분리를 하고 있지 않다가 나중에 분리를 하는 편이라고 들었는데, 두 레이어에서 언제 DTO 를 분리해야할지 그 시기에 대해서 질문드립니다.

  • 어떤 작업을 하다가 두 레이어 간의 처리가 매우 다양한 형태가 되고, 그 로직이 매우 헤비해지면 DTO 를 나눠도 될거같아.

  • 타협을 본다고 생각해. 이 로직이 해당 비즈니스에 특화되고 거대해지고 복잡해지면, 불편하더라도 분리를 하는게 좋다. 그 시점은 팀이 잡는거야.

  • DDD가 필요한 작업은 한정적인것같아서 이렇게 답변한다.

Q. 비동기 통신에 관해서

  • 에이블리를 예로 들다면, 거기서 토스 결제를 연동했다고 치자. 토스가 원하는 리퀘스트에 맞춰서 토스 페이먼트와 연결되는 DTO 가 필요할거야. 그렇게 외부통신용 DTO 가 필요하고, 프론트와의 규약에 따라 다르지만, 또 추가적인 응답용 DTO 가 필요해.
  • grpc ?
  • 빅스마일데이처럼 결제가 순차적으로 밀릴때 kafka를 쓸때도 있어. 선입선출로 사용할때 범용 메세지 프로토콜이기 때문에.

Q. DTO는 상태 보호의 목적이 있는 객체가 아니기 때문에 필드값을 모두 public으로 두어야 한다는 의견에 대해서는 어떻게 생각하시나요?!?

  • 나도 그렇게 생각한다. 애초에 언어에 따라 틀리긴한데, Json 매핑 때문에 애초에 public 이 아니면 동작을 안하는 언어도 있어. 애초에 dto 값을 세팅해놓은 상태에서 이 값을 마음껏 꺼내서 비즈니스에 활용하는 상황에서 유연하게 사용하려면 개별 필드들을 개방하는게 좋은거같아.
  • setter 도 잭슨에만 열고싶다던가 하는 사람도 있긴한데, 상태보호 목적이 아니기 때문에 나도 public 으로 두는게 맞다고 생각해.

이력서에 성장을 기록하는 팁

  • 클린코드와 솔리드는 생각보다 어렵고, 논란이 되는 주제야. 그럴수밖에 없기도 하고.

  • 그래도 솔리드에 해당하는 다섯개의 원칙을 머리에 넣고 코딩을 하는게 좋아.

  • 클린코드 솔리드는 한번 접근하고, 다섯가지 원칙이 이런거구나 하는 정의를 통해 성장했으면 좋겠어. 지금 너네 수준에서 보는 클린코드와 중간레벨이 되었을때 보면 또 다르거든. 그때 또 기록을 작성하고. 또 더 성장하고, 생각이 바뀌면 작성하고.

  • 내가 성장한 경험들을 승화시키는 기록들을 작성하면 합격률이 높아져.

또 괜찮은 주제로는: 위에 나온 디미터 법칙, DTO public

등등 이런 주제들에 대해 접근해도 좋아. 그래서 많이 틀리면서 기록해두고, 어떤 경험이 나의 소재로 승화시킬 수있는 이력서 전략이 아주 중요해.

  • 블로그 모든 글을 눌러보기 어려우니. 어떠한 이슈에 관한 내용인지 요약해놓은 걸로 이력서에 연결하는게 좋고. 눌러보고 싶은 글제목도 좋아.

  • 문제 해결로 이것과 이것이 있는데 이것의 장점이 있어서 이것을 택했다.. 하는 등의 글이 좋아.

  • 장단을 비교하고, 장단 비교에 논리력이 필요해야해. A의 원리는 이렇고, B의 원리는 이런데, 성능비교를 하기 시작했다. 둘이 별차이가 없다 => 나머지에도 차이가 없다 => 인터페이스가 더 맘에 드는것을 선택했다.. 등등

  • 비교대상군을 반드시 찾아야해. 처음에는 A로 시작했는데 무언가 더 좋은게 있나 접근했다... 등 고민을 한 습관을 보여주는.

profile
강준호
이전 포스트

[TIL] Udemy 8일차 프론트엔드/백엔드 - 자바스크립트 기초 이해하기

다음 포스트

유데미 취업부트캠프 - 프론트엔드&백엔드 2주차 학습 일지

0개의 댓글