Portfolio

HTML에서 JS 로드하기

JavaScript로 웹 페이지를 제어하기 위해서는 JavaScript를 로드해야 함.

inline

태그에 직접 자바스크립트를 기술하는 방식.

장점 : 태그에 연관된 스크립트가 분명하게 드러남.

단점 : 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어짐.


<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>

script

script 태그를 만들어 JS 코드를 삽입하는 방식.

장점 : html 태그와 js 코드 분리.


!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript">
        var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
            alert('Hello world');
        })
    </script>
</body>
</html>

외부 파일로 분리

js를 별도의 파일로 분리함.

장점 : 보다 엄격하게 정보와 제어를 분리. 재활용성 높임. 캐쉬를 통한 속도 향상, 전송량 경량화


!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript" src="script2.js"></script>
</body>
</html>


var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
    alert('Hello world');
})

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">을 설정해 스크립트가 모듈이란 걸 브라우저에게 알려줌.


// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}


// 📁 main.js
import {sayHi} from './sayHi.js';

sayHi('John'); // Hello, John!


<!doctype html>
<script type="module" src="main.js"></script>

as를 사용하면 이름을 바꿔서 모듈을 사용할 수 있음.


// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

노드란?

다른 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을 붙이면 새로운 객체를 만든 후에 이를 리턴함(인스턴스화).

규칙 - 1) 함수는 대문자로 시작, 2) new 연산자를 붙여 실행.

의의 - 재사용할 수 있는 객체 생성 코드를 구현.

로그인, 회원가입 팝업창 만들기

📑 결과보기

footer 통합하기

innerHTML을 사용하여 HTML에 있던 footer 태그를 하나의 파일로 통합함.

$ - DOM 객체일 때 사용.

innerHTML - 요소 내에 포함된 HTML을 가져오거나 변경함.

insertAdjacentHTML(position, element) - HTML 같은 특정 텍스트를 파싱하고, 원하는 위치에 노드를 추가함.

innerHTML는 기존에 있는 부분을 덮어쓰는거고 insertAdjacentHTML는 지정한 곳에 노드가 추가 될 뿐 기존를 노드 건드리지 않는다는 게 가장 큰 차이점임.

appendChild() - 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임.

💡

다양한 메소드가 있다면 메소드를 선택할 때 선택 기준, 이유가 있어야 함.

addEventListener()

지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정.

target.addEventListener(type, listener);

type - 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열.

listener - 지정된 타입의 이벤트가 발생했을 때, 알림(Event 인터페이스를 구현하는 객체)을 받는 객체. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야만 함.

onclick 기능 추가하기

classList의 add와 remove로 사용자가 로그인, 회원가입을 눌렀을 때, 보이고 가려지는 것을 결정함.

innerHTML로 로그인, 회원가입을 클릭했을 때 HTML을 삽입함.

visibility가 hidden인 클래스를 만들어 add, remove를 할 수 있도록 함.

로그인, 회원가입의 검은 영역을 클릭했을 때 hidden 클래스를 add함.

💡

전역에 쓰이는 함수인지 주의해야 함.

마치며

역시 JS는 어렵다.. 오랜만에 해서 낯선 것도 있지만 서비스를 만들어보는 건 처음이라 신경써야 할 것이 많았다. 작은 부분이라고 생각했던 기능도 구현할 줄 몰라 하루종일 헤매기도 하고 머리도 계속 아팠다. 좋은 구조를 만드는 게 우선일지, 시간 내 동작하는 사이트를 만드는 게 먼저일지 모르겠다.

onclick event