본문 바로가기

JavaScript

 (33)
[Javascript] Custom Event - form에서 제출 버튼을 누르면 해당 url로 이동하는 기능을 구현함 1) 이벤트 생성 new CustomEvent const urlChange = new CustomEvent('urlChange', { bubbles: true, cancelable: true, detail: { href: '/home', }, }) option default: -bubbles(이벤트 버블링): false -cancelable(기본동작): false 2) 이벤트 발생 dispatchEvent const formEl = document.querySelector('form'); formEl.addEventListener('submit', e => { e.preventDefault(); formEl.dispatchEvent..
HTML에 자바스크립트 파일 로드하기 -웹 브라우저는 HTML를 파싱하는 과정에서 요소를 만나면 HTML 해석을 잠시 멈추고 스크립트 파일을 불러오고 실행시킨다. - 태그는 와 요소에 추가할 수 있는데, 일반적으로 바로 위에 작성한다. -에 삽입하면 화면이 멈추는 현상이 발생함 -스크립트 요소의 속성 1. async: 비동기적으로 스크립트를 내려 받는다. 위 그림처럼 스크립트를 불러오는 중에 html 파싱은 중단되지 않는다. 외부 스크립트 파일을 불러올 때만 유효하다. 2. defer: 스크립트 태그의 위치에 상관없이 html을 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연한다. 3. src: 외부 파일의 위치를 지정한다. 4. type: 스크립트 언어의 컨텐츠 타입을 지정한다. 기본값은 text/javascript이다.
[JavaScript] Modules -모던 자바스크립트 프로그래밍에서는 모든 코드를 하나의 스크립트에서 작성하지 않는다. -프로젝트를 여러 파일로 분할하여 관리하는데, 이 분리된 파일을 모듈이라 부른다. -모듈은 직접 만들기도하고 외부에서 불러오기도 한다(외부 오픈 소스 모듈: Third-party module). -모듈은 보통 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. -Third-part package는 내가 직접 코드를 처음부터 개발하는데에 힘쓰지 않고 핵심 비즈니스 논리에만 집중하도록 해준다. -외부 모듈 파일을 설치하는 방법은 직접 스크립트를 다운로드하거나 CDN url 링크를 삽입하는 방법이 있다. *CDN 방식은 외부 서버에서 파일을 로드하기 때문에 직접 관리할 필요도 없고, 무엇보..
REST API 1. API(Application Programming Interface)란? -애플리케이션이란 고유한 기능을 갖는 모든 소프트웨어를 말하고, 인터페이스는 두 애플리케이션의 통신 방법을 말한다. -API는 두 애플리케이션의 통신을 처리하기 위한 Gateway 역할을 한다. 통신하기 위해 따라야 하는 규칙들이 명시된다. -API 문서에서는 요청과 응답 매커니즘을 통한 어떤 소프트웨어의 프로그램을 이용하는 방법을 명시한다. -API의 한 예로는, 스마트폰의 날씨 앱 기상청의 기상 데이터 가 있다. -API Architecture는 클라이언트와 서버로 구성된다. -요청을 보내는 애플리케이션을 클라이언트, 응답을 보내는 애플리케이션을 서버라고 부른다. -Web API는 웹 브라우저와 웹 서버 간의 통신 수단을 ..
네트워크 기초 1. 네트워크란? -서로 물리적으로 떨어져 있는 둘 이상의 디바이스 간에 정보 교류를 가능하게 하는 연결망을 말한다. -인터넷은 전세계 모든 네트워크를 연결하는 거대한 네트워크이다. 2. Network Architecture -클라이언트: 리소스를 사용함 -서버: 리소스를 제공함 -데이터베이스: 리소스를 저장함 3. Client-Server Model -클라이언트와 서버는 요청과 응답을 통해 통신한다. -각 요청과 응답은 1:1로 대응하며, 요청을 보내면 반드시 응답을 받는다. 응답은 요청이 일어나야만 발생할 수 있다.(단방향통신) -웹 클라이언트인 브라우저와 웹 서버는 HTTP 프로토콜을 사용하여 요청 메시지와 응답 메시지를 주고 받는다. -브라우저는 리소스의 활용 목적에 맞게 HTTP 요청 메시지를..
LocalStorage & SessionStorage 개요 사용자 정보 등을 저장하여 사용자 경험을 향상 시키기 위한 목적으로 만들어졌다. 로그인 및 장바구니 정보 등을 저장하는 쿠키, 이미지 및 사운드 파일을 일시적으로 저장하는 캐시가 초창기에 도입되었고, 용량과 보안성 문제로 HTML5에서 웹 스토리지가 추가되었다. 웹 스토리지는 문자열 형태로 최대 5 MB까지 저장이 가능한데 이도 부족하여 대용량 저장이 가능하고 자료형 제한도 없는 IndexedDB가 출시되었다. 쿠키는 모든 요청에 담겨 함께 보내지기 때문에 성능 저하를 야기할 수 있다(특히 모바일 데이터 연결 환경 등에서). 그러므로 최근에는 위의 modern storage APIs가 많이 사용되는 추세이다. 1. Web Storage Object -localStorage & sessionStora..
쿠키, 세션, 토큰, JWT 0. 개요 -웹 사이트를 이용할 때 사용하는 프로토콜인 http는 stateless한 특성을 가짐. -모든 request는 서로 독립적으로 다뤄짐. 서버는 해당 클라이언트의 요청 기록 내역을 저장하지 않음 -일반적으로 서버는 클라이언트의 정보를 메모리에 따로 저장해두지 않음. 즉 연결이 종료되면 잊어버림. -따라서 매 request 마다 서버에 클라이언트 정보를 알려줘야함. 1. 쿠키 -클라이언트와 서버 간의 정보 전달 매개체임. -브라우저에서만 사용함. -서버는 쿠키를 이용하여 브라우저에 데이터를 저장할 수 있음. (브라우저의 특정 정보를 기억하기 위함임) -브라우저의 request에 대한 서버의 response에 쿠키 데이터가 포함됨. -해당 웹사이트에 방문할 때마다 브라우저는 서버에 쿠키와 함께 r..
Hoisting 호이스팅(hoisting)이란? -선언되기 이전에 참조 혹은 호출을 먼저 실행 할 수 있다. 즉, 변수(또는 함수, 클래스 등)가 scope의 최상단으로 끌어올려지는 것처럼 보이는 현상을 말한다. -parsing 단계에서 자바스크립트 엔진은 코드를 읽으면서 모든 선언문에 대해 메모리 공간을 미리 할당하고 초기값을 저장한다. -코드가 실행되는 과정을 조금 더 자세히 살펴보면, 모든 Execution Context의 creation phase에서 변수는 Variable Environment 객체의 new properties로 생성된다. 동시에 VE 객체에 scope 프로퍼티 또한 생성되고 이 scope 내(혹은 하위 스콥)에서 변수에 대한 접근이 허용된다. -주의할 점은 호이스팅은 선언과 할당을 분리하여 생..

티스토리툴바