inflearn logo
강의

講義

知識共有

トレンドはバイブコーディング、Claude Codeで始める:意図だけで完成させる次世代開発パラダイム入門

HTML・CSS・JavaScriptの核心構造

자바스크립트 파일 중, DOM 영역에서 querySelector가 아닌 다른 함수를 쓰는데 괜찮을까요?

77

kgdk21

投稿した質問数 2

1

카운터 앱을 만드는 예시를 실제로 해 보았습니다.

앱 자체는 잘 동작합니다.

 

다만 자바스크립트 파일을 열어보았을 때,

DOM 영역에서 강의와 실제 저의 예시가 다음과 같이 차이가 있습니다.

기대대로 동작을 하기 때문에 이 예시에서는 별다른 문제가 없겠으나, querySelector와 getElementById라는 두 함수간의 차이가 있을것 같아 이렇게 처리가 되어도 별다른 문제가 없을지 여쭙습니다.

 

(혹은 두 함수의 공통점, 차이점을 설명해 주셔도 좋습니다.)

github vercel ai-agent claude 바이브코딩

回答 2

2

Masocampus

안녕하세요, 마소캠퍼스입니다.

 

우선 이해하시는 대로 LLM은 확률 기반으로 답변이 생성되기 때문에
결론적으로는 요청 사항에 부합하나 생성되는 세부 답변 내용에는 차이가 있을 수 있으며,
해당 작동 원리때문에 이번과 같이 도출되는 코드는 차이가 있을 수 있습니다.

 

두 함수 간 공통점은 DOM에서 특정 요소를 찾아 반환하고,
찾는 요소가 없으면 null을 반환한다는 점입니다.

차이점은 getElementById는 ID만 선택이 가능하고, 대신 더 빠릅니다.
querySelector는 CSS 선택자 전체를 중복 선택이 가능하다는 장점이 있습니다.


따라서 이후 기능 추가 등의 상황을 고려하여 코드 일관성을 생각한다면
주로 querySelector를 사용하는 것이 좋지만,
단순 카운터 앱과 같이 한 가지 요소만 고려하면 된다면
getElementById를 사용해도 문제는 없습니다.

 

감사합니다.

마소캠퍼스 드림.

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. kgdk21님,

자바스크립트에서 DOM 요소를 선택할 때 사용되는 querySelectorgetElementById 함수는 각각의 특성과 용도가 있습니다. 두 함수 모두 DOM 요소를 선택하고 조작하는 데 사용되지만, 선택 방식과 활용 가능성에서 차이가 있습니다.

getElementByIdquerySelector의 차이점:

  1. getElementById:

    • 용도: 특정한 id를 가진 요소를 선택할 때 사용합니다.
    • 성능: id는 문서 내에서 고유해야 하므로, 이 메서드는 매우 빠르고, 단일 요소를 선택할 때 효율적입니다.
    • 제약: 반드시 id 속성을 기준으로 선택해야 하며, 다른 속성이나 복잡한 CSS 선택자를 사용할 수 없습니다.
  2. querySelector:

    • 용도: CSS 선택자를 사용하여 첫 번째 일치 요소를 선택합니다.
    • 유연성: 클래스, 태그, 속성 등 다양한 선택자를 사용할 수 있어서 복잡한 선택이 가능합니다.
    • 성능: 특정 id를 선택할 때는 getElementById보다 약간 느릴 수 있지만, 전체적인 선택의 유연성에서 강점이 있습니다.

공통점:

  • 둘 다 DOM 요소를 선택할 수 있는 메서드이며, 선택한 요소에 대해 같은 조작을 수행할 수 있습니다.

이번 예시에서는 getElementById를 사용하여도 별다른 문제가 없으며, 어떤 함수가 적합할지는 상황에 따라 다릅니다. 만약 DOM 구조가 변하거나 선택자가 복잡해진다면 querySelector의 유연함이 유리할 수 있습니다.

추가적으로, 더 다양한 예시와 설명이 필요한 경우 기존 질문답변을 참고해보세요:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

cd 다음에 어떻게 자연스럽게 문자가 써지죠?

0

6

1

가상환경 생성 필요한가요?

0

2

0

인스타 카드뉴스 실습시 레퍼런스 이미지 자료 문의

0

2

1

클로드코드에 적용할 하네스? 툴? 추천 부탁드립니다.

0

12

0

14강 GIT 설치후 ~ config 명령어 입력이 안돼요

0

14

1

무료할당량 사용하는데 문제가 생겼습니다.

0

10

1

161강 자료 파일 안에 내용이 없네요.

0

16

1

섹션5 노션링크 는 따로 없나요?

0

15

2

/ide 명령어 실행 오류

0

15

1

subagents에 관한 질문이 있습니다.

0

15

1

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

17

2

클로드 코드 설치가 되지 않습니다...

0

22

1

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

15

2

output sytles 모든 프로젝트 적용시 디렉토리가 헷갈립니다 ㅠㅠ

0

19

1

터미널 줄바꿈 세팅

0

21

1

setting.json과 setting.local.json

0

25

1

클로드 Pro 요금제에서 Claude Code CLI 사용을 막는다고 들어서 질문드립니다.

1

18

1

카드 뉴스 만들기..

0

20

0

기존 mcp를 플러그인으로 대체

0

19

1

바이브코딩을 하는 개발자(작업복잡도 판단의 어려움)

0

22

1

커서에서 클로드 코드 실행했는데 쉬프트 +엔터가 안먹히는데요.

0

16

1

claw code 에 대해서는 어떻게 생각하시나요?!

0

23

1

비개발자용 리서치나 논문검색 프로젝트 요청

0

20

1

gitforwindows에서 맥은 뭘 다운받아야 하나요...?

0

28

2