URL
uniform resource locater의 액자로 규칙적인 자원(mp4, png 등의 확장자) 탐색기를 말함.
- http - 어떠한 방식으로 소통할지 결정하는 프로토콜. 주로 클라이언트와 서버의 소통을 의미함.
- www.example.com - 서버 주소, 도메인.
- :80 - 서버 포트, 어떤 서버로 들어갈지 결정함. 생략되는 경우가 많으며 443은 https가 기본적으로 사용하는 번호, http는 80포트가 기본임.
- / - web root folder, 웹으로 접근했을 때 가장 최상위 폴더(가장 기본에 있는 경로)를 의미함.
- myfile.html - 최상위 폴더 중 지정한 파일.
- ? - http 프로토콜(문서 전달 방식)에는 get 방식과 post 방식이 있음. 그 중 ?는 get 방식임. 이 방식은 보안에 취약하기 떄문에 로그인 등 보안이 필요한 곳은 post 방식을 사용해야 함. (post 방식은 노출이 쉬운 head 대신 body에 데이터를 넣어 주고 받는 방식임. 공유가 어렵기 때문에 서버에서 데이터를 주고 받을 때 사용함.)
- key1=value1&key2=value2 - 웹서버에서 제공하는 추가 파라미터. 지정된 레이아웃에 변수만 바꿔 넣는 방식으로 페이지를 재사용할 수 있다는 장점이 있음.
- #SomewhereInTheDocument - "bookmarked" 지점에 위치된 내용을 보여주기 위해 브라우저에게 방향을 알려줌.
HTTP
- 비연결지향(Connectionless) - 클라이언트와 서버가 한 번 연결을 맺은 후, 클 라이언트 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어 버리는 성질. 모든 요청에 대해, 매번 새로운 연결을 시도/해제의 과정을 거쳐야하므로 연결/해제에 대한 오버헤드가 발생한다는 단점.
- 상태 정보 없음(Stateless) - Connectionless로 인해 서버는 클라이언트를 식별할 수가 없는 상태. 단 스트리밍은 stateless를 사용하지 않음. 매번 새로운 인증을 해야하는 번거로움이 있음.
cookies, local storage, session storage
- 앞선 단점을 해결하기 위해 브라우저 단에서 쿠키라는 것을 저장하여 서버가 클라이언트를 식별할 수 있도록 함.
- session은 서버에서 사용하는 쿠키임. 브라우저가 커져있을 때 등 특정한 기간이 존재함.
- 쿠키는 hdd, ssd, ram에 저장됨. 쿠키는 세션쿠키와 지속쿠키가 있음. 세션쿠키는 브라우저가 꺼지면 날라감. 지속쿠키는 지속적으로 유지됨. 단 만료기간(유효기간)이 있을 뿐임. 쿠키에는 이름, 이름에 대한 값, 만료날짜, 경로가 들어감. 경로를 통해 어떤 path에서만 사용 가능한 정보인지 알려줌. 단점 1) 개인정보에 취약함, 2) 클라이언트 쪽에서 정보 삭제 가능, 3) 한 도메인 당 최대 20개까지 지원, 쿠키 하나당 4kb까지만 저장 가능, 4) 속도 저하 및 서버 부담 -> 모든 요청에 쿠키가 포함되기 때문(장점이자 단점)
- 쿠기의 단점을 극복하기 위해 local storage, session storage 등장. 용량도 크고 문자열 외 객체가 저장이 가능함. 로그인만 쿠키를 쓰고 나머지는 storage를 쓰는 등 용도에 맞게 골라쓰는 게 중요함.
디버깅(debugging)
장점
버그 즉 오동작되는 현상을 해결하는 것을 말하며 오류들을 찾아내기 위한 테스트 과정.
- 콘솔을 남기지 않아도 특정 시점의 변수를 확인할 수 있음.
- 논리적 오류, 문법적 오류를 효율적으로 잡을 수 있음.
검색 기능 구현하기
📑 결과보기
🤔 새로고침 시 검색바와 푸터 깜빡임 없애기
키보드 이벤트 (keydown/keyup)
사용자가 키를 놓을 때 발생함.
addEventListener("keyup", (e) => console.log(e));
filter()
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환함.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"]
includes()
하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환함.
const array1 = [1, 2, 3]; console.log(array1.includes(2)); // expected output: true
Destructuring assignment(구조 분해 할당)
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.
let a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: Array [30,40,50]
preventDefault()
html에서 a태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나, form 안에 input등을 전송하는 동작을 중지시킴.
formSubmit.addEventListener("submit", function (e) { e.preventDefault(); });
- click 이벤트 범위를 제한해야 함.
- hashtag의 클래스와 일치하지 않으면 return. innerHTML을 사용한 경우 classList.add로 클래스 값을 추가할 수 있음.
session Storage를 통해 검색 결과 유지하기
local Storage
데이터를 사용자 로컬에 보존하는 방식. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않아 더 많은 자료를 보관할 수 있음. 단, 직접 데이터를 삭제하지 않는 한 계속 유지됨.
setItem(key, value)– 키-값 쌍을 보관함.
getItem(key)– 키에 해당하는 값을 받아옴.
removeItem(key)– 키와 해당 값을 삭제함.
clear()– 모든 것을 삭제함.
key(index)– 인덱스(index)에 해당하는 키를 받아옴.
length– 저장된 항목의 개수를 얻음.
session Storage
페이지 세션이 유지되는 동안 데이터가 유지됨.
// 추적할 텍스트 입력 칸 가져오기 let field = document.getElementById("field"); // 자동저장 값이 존재하는지 판별 // (의도치 않게 페이지를 새로 불러올 경우에만 발생) if (sessionStorage.getItem("autosave")) { // 입력 칸의 콘텐츠 복구 field.value = sessionStorage.getItem("autosave"); } // 텍스트 입력 칸의 변화 수신 field.addEventListener("change", function() { // 결과를 세션에 저장 sessionStorage.setItem("autosave", field.value); });
- stringify() - avaScript 값이나 객체를 JSON 문자열로 변환함. object 값을 저장할 수 없기 때문.
- parse() - JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함. string으로 변환시킨걸 다시 JSON으로 받기 위함.
🤔 검색에서 storage를 사용하면 전체 목록을 볼 수 없다는 단점 발생.
마치며
이번에 구현해야 하는 것이 어려워 구현 자체를 우선 순위로 두었더니 코드가 엉망진창이다. 순서도 위로 갔다 아래로 갔다 코드를 읽는데 머리가 아팠다. 실력에 비해 어려운걸 해서 머리가 아픈건지, 내 코드가 머리를 아프게 하는건지 잘 모르겠다. (둘 다 인가..)
그래서 이번엔 디버깅을 자주 했다. 처음 시도할 땐 귀찮았는데 그래도 문제 해결이 빨라서 사용할 수밖에 없다. 그것도 제대로 breakpoint를 잡아야 하지만 말이다.. 디버깅 안해도 문제를 볼 수 있는 실력이란 게 있다면 갖고 싶다.