💭 IDE (Integrated Development Environment)
IDE는 통합개발환경이다. JavaScript에서 가장 인기 있는 IDE은 VSCode, WebStorm 등이 있다.
💭 NodeJS
NodeJS를 통해서 JavaScript를 브라우저 이외의 공간에서 실행할 수 있다. NodeJS는 v8엔진을 통해서 동작된다. ECMAScript 문법에 따라서 구현가능하다.
> npm init
npm init은 Node.js 프로젝트를 시작하기 위해 사용되는 명령어다.
새로운 프로젝트의 기본 설정을 초기화하는 데 도움을 준다.
package.json 파일을 생성하고, 프로젝트의 이름, 버전, 설명 등과 같은 정보를 입력할 수 있다.
> npm install
npm install은 Node.js 프로젝트에서 패키지(의존성)를 설치하기 위해 사용되는 명령어다.
프로젝트에 필요한 패키지를 다운로드하고 프로젝트 디렉토리에 설치할 수 있다.
> package.json
package.json은 Node.js 프로젝트의 메타데이터와 종속성(dependency) 정보를 담고 있는 파일이다.
이 파일은 프로젝트 디렉토리의 루트에 위치하며, 프로젝트를 관리하고 의존성을 관리하는 데 사용된다.
> node_modules
node_modules는 Node.js 프로젝트에서 사용되는 패키지(의존성)들이 설치되는 디렉토리다.
이 디렉토리는 프로젝트의 루트 디렉토리 내에 자동으로 생성되며, 프로젝트의 의존성 패키지들이 여기에 저장된다.💭 document.querySelector
document.querySelector 은 문서 전체(document)를 기준으로 요소를 선택한다. 하지만 document 외에도 다른 기준점으로 요소를 선택할 수 있는 다른 메서드도 많이 있다.
> element.querySelector
요소(element) 내에서 하위 요소를 선택한다.
element는 특정 요소를 참조하는 변수이거나 document.getElementById,
document.getElementsByClassName 등을 사용하여 얻은 요소일 수 있다.
> element.querySelectorAll
요소(element) 내에서 특정 선택자에 해당하는 모든 하위 요소들을 선택한다.
이 메서드는 element.querySelector와 유사하지만, 조건에 맞는 모든 요소들을 선택한다.
> element.getElementsByClassName
요소(element) 내에서 특정 클래스 이름(class name)을 가진 모든 하위 요소들을 선택한다.
> element.getElementsByTagName
요소(element) 내에서 특정 태그 이름(tag name)을 가진 모든 하위 요소들을 선택한다.
> element.getAttribute
요소(element)에서 특정 속성(attribute)의 값을 가져온다.
이 메서드를 사용하여 특정 요소의 속성 값을 가져올 수 있다. ex) div, li, h2
> element.nextElementSibling
요소(element)의 다음 형제 요소를 선택한다.
> element.previousElementSibling
요소(element)의 이전 형제 요소를 선택한다.
> element.parentNode
요소(element)의 부모 요소를 선택한다.💭 즉시 실행함수
JS에서 즉시실행 함수(Immediately Invoked Function Expression, IIFE)는 함수를 정의하고 즉시 호출하는 패턴이다. 이 패턴은 함수를 선언하고 실행하는 것을 한 번에 처리하여 스코프를 제한하고 전역 네임스페이스 오염을 방지하는 데 사용된다.
(function() {
// 함수 본문
})();
-
스코프 제한: 즉시실행 함수 내에서 선언된 변수는 함수 내부에서만 유효하며, 전역 스코프에 노출되지 않는다. 이를 통해 변수 이름 충돌을 방지하고 코드의 모듈화를 촉진할 수 있다.
-
전역 네임스페이스 오염 방지: 즉시실행 함수를 사용하여 전역 변수를 최소화하면, 다른 JavaScript 코드와의 충돌 가능성이 줄어든다.
-
초기화 코드 실행: 즉시실행 함수 내에서 초기화 코드를 실행할 수 있다. 이를 통해 초기화 로직을 캡슐화하고 필요한 리소스를 초기화할 수 있다.
-
함수 반환: 즉시실행 함수는 외부에서 사용할 수 있는 변수나 함수를 반환할 수 있으며, 이를 활용하여 모듈 패턴을 구현할 수 있다.
💭 시맨틱 태그
시맨틱 태그(semantic tags)는 HTML 요소를 사용할 때 의미와 목적을 명확하게 표현하는 태그를 말한다. <header> <nav> <main> <article> <section> <aside> <footer> 등이 있다.
시맨틱 태그를 사용하는 이유 :
-
가독성과 유지 보수성 향상: 의미적으로 구조화된 HTML을 작성하는 데 도움이 된다. 적절한 시맨틱 태그를 사용하면 웹 페이지의 구조와 내용을 파악하기 쉬워진다.
-
검색 엔진 최적화 (SEO): 검색 엔진에게 웹 페이지의 구조와 내용을 명확하게 전달한다. 따라서 검색 엔진 최적화를 위한 기본적인 조건을 충족시킬 수 있다.
-
장애인 접근성 개선: 시각, 청각, 인지적인 장애를 가진 사용자들은 스크린 리더 등 보조 기술을 사용하여 웹 페이지를 탐색한다. 이러한 보조 기술에게 구조와 내용을 명확하게 전달할 수 있게한다.
-
호환성과 향후 웹 표준 준수: 웹 표준에 따라 정의되어 있으며, 최신 브라우저와 장치에서 잘 작동한다. 다양한 플랫폼과 브라우저에서 일관된 방식으로 웹 페이지를 렌더링할 수 있다. 또한, 웹 표준 준수를 지키는 것은 웹 애플리케이션의 호환성과 향후 업데이트에 대한 안정성을 확보하는 데에 도움이 된다.
