장점 : 보다 엄격하게 정보와 제어를 분리. 재활용성 높임. 캐쉬를 통한 속도 향상, 전송량 경량화
script 파일 위치
script 파일을 head 태그에 위치시킬 땐 window.onload = function(){} 함수 안에 코드를 작성해야 함. window.onload = function(){} 함수는 웹 브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해 호출되는 함수임. 단, script를 body 하단에 사용하는 것이 로드할 때 가장 빠름.
정리
asynce, defer을 사용하지 않은 기본 모드의 브라우저는 문서를 파싱해 읽다가 JS를 만나면 진행하던 파싱을 멈추고 스크립트 다운 → 파싱 → 실행한 후 다시 문서를 파싱함. JS는 parser blocking resource(파서 차단 리소스)임.
이때 파싱이란 하나의 프로그램을 런타임 환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미.
JS의 이해
웹브라우저에서 동작하는 기술인 HTML은 정보를, CSS는 디자인을, JS는 프로그래밍 적으로 제어를 담당함. 이 셋이 유기적으로 결합해서 하나의 웹 페이지를 만드는 것임.
모듈
개발하는 애플리케이션의 크기가 커지면 언젠가 파일을 여러 개로 분리해야하는 시점이 오는데 이때 분리된 파일 각각을 모듈이라 함. 스크립트 하나는 모듈 하나.
모듈에 특수 지시자 export와 import를 적용하면 다른 모듈의 함수를 호출하는 것과 같은 기능 공유가 가능함.
- export : 변수, 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근 가능(외부에 공개하려는 모듈).
- import : 외부 모듈의 기능을 가져옴.
<script type="module">을 설정해 스크립트가 모듈이란 걸 브라우저에게 알려줌.
as를 사용하면 이름을 바꿔서 모듈을 사용할 수 있음.
노드란?
모든 DOM 객체는 Node 객체를 상속 받음.
다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있음.
- Node.childNodes
- Node.firstChild
- Node.lastChild
Document()
문서 전체를 대표하는 객체. 문서에서 사용될 노드를 만드는 역할.
Document 생성자는 브라우저에 제공되는 웹 페이지인 새로운 Document 객체를 생성함.
document.getElementById(id) - 요소에 id 속성이 있으면 위치에 상관없이 접근할 수 있음.
Document.querySelector() - 제공된 선택자와 일치하는 문서 내 첫 번째 요소를 반환함.
document.createElement(tagName[, options]) - 메서드는 지정한 tagName의 HTML 요소를 만들어 반환함.
event
이벤트(event)는 어떤 사건을 의미. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미.
event target - target은 이벤트가 일어날 객체를 의미. ex) button 태그
event type - 이벤트의 종류를 의미. ex) click
event handler - 이벤트가 발생했을 때 동작하는 코드를 의미. ex) alert(window.location)
메서드와 this
메서드 : 객체 프로퍼티에 할당된 함수. ex) user.sayHi에서 sayHi
리터럴 : 값을 만들어주는 문법적인 체계. 함수 리터럴, 객체 리터럴, 배열 리터럴이 있음.
메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있음.
this는 함수 내 맥락을 의미함. 맥락(context)은 가변적임. 따라서 모든 함수에 적용 가능. → 누가 실행했냐!!
this는 함수 안에서 사용할 수 있는 변수. 함수를 어떻게 호출하느냐에 따라 달라짐.
화살표 함수에서 this를 참조하면, 선언된 당시의 상위 문맥에 위치한 컴포넌트를 참조.
생성자와 new
생성자 - 객체를 만드는 역할을 하는 함수.
new - 함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴함(인스턴스화).
insertAdjacentHTML(position, element) - HTML 같은 특정 텍스트를 파싱하고, 원하는 위치에 노드를 추가함.
innerHTML는 기존에 있는 부분을 덮어쓰는거고 insertAdjacentHTML는 지정한 곳에 노드가 추가 될 뿐 기존를 노드 건드리지 않는다는 게 가장 큰 차이점임.
appendChild() - 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임.
HTML 파일마다 넣어줘야했던 코드가 간결해짐.
💡
다양한 메소드가 있다면 메소드를 선택할 때 선택 기준, 이유가 있어야 함.
addEventListener()
지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정.
target.addEventListener(type, listener);
type - 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열.
listener - 지정된 타입의 이벤트가 발생했을 때, 알림(Event 인터페이스를 구현하는 객체)을 받는 객체. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야만 함.
onclick 기능 추가하기
classList의 add와 remove로 사용자가 로그인, 회원가입을 눌렀을 때, 보이고 가려지는 것을 결정함.
innerHTML로 로그인, 회원가입을 클릭했을 때 HTML을 삽입함.
visibility가 hidden인 클래스를 만들어 add, remove를 할 수 있도록 함.
로그인, 회원가입의 검은 영역을 클릭했을 때 hidden 클래스를 add함.
💡
전역에 쓰이는 함수인지 주의해야 함.
마치며
역시 JS는 어렵다.. 오랜만에 해서 낯선 것도 있지만 서비스를 만들어보는 건 처음이라 신경써야 할 것이 많았다. 작은 부분이라고 생각했던 기능도 구현할 줄 몰라 하루종일 헤매기도 하고 머리도 계속 아팠다. 좋은 구조를 만드는 게 우선일지, 시간 내 동작하는 사이트를 만드는 게 먼저일지 모르겠다.
