Jieunny의 블로그

📣 페이지네이션 ✔️ 페이지네이션 : 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소 리스트가 많아 한 화면에 과한 스크롤이 발생할 때 유용하다. (구현은 실습 부분에서 다룰 것) 📣 웹 스토리지 ✔️ 브라우저 상에 데이터를 저장할 수 있는 기술 ✔️ 기본적으로 키와 값으로 이루어진 데이터를 저장한다. ✔️ 크롬 -> 개발자 도구 -> Application -> storage // 키에 데이터 쓰기 localStorage.setItem("key", value); // 키로 부터 데이터 읽기 localStorage.getItem("key"); // 키의 데이터 삭제 localStorage.removeItem("key"); // 모든 키의 데이터 삭제 l..

📣 기술 면접 질문에 대한 답변을 미리 준비해보자. 📌 HTML ✔️ 브라우저의 렌더링 원리에 대해 설명해주세요. 더보기 ➰ 브라우저는 렌더링 엔진을 사용해서 요소들을 렌더링하며, 렌더링 엔진은 CRP 프로세스를 거칩니다. ➕ CRP란 무엇인가? ➰ Critical Rendering Path ➰ 문서를 화면에 표현하기 위해 거치는 일련의 과정입니다. 1️⃣ HTML, CSS를 각각 파싱 후 DOM Tree와 CSSOM Tree를 구축하고, js를 실행합니다. 2️⃣ DOM Tree와 CSSOM Tree를 결합해 렌더트리를 구축합니다. 3️⃣ 렌더트리의 각 노드가 가지는 위치와 크기를 계산합니다. (Layout 단계) 4️⃣ 계산한 위치와 크기를 기반으로 픽셀로 변환해 화면에 그립니다. (Paint 단계)..

📣 이벤트 객체 ✔️ 이벤트 : 클릭하거나 드래그 하는 일 📣 클릭에 따라 나오는 텍스트가 달라지는 브라우저 1️⃣ HTML 아메리카노 카페라떼 2️⃣ JS let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다. let btnAmericano = menus[0]; let btnCaffelatte = menus[1]; for(let i=0; i

📣 유효성 검사 ➰ 특정 값은 반드시 입력해야 한다. ➰ 비밀번호는 n 자리 수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 한다. 위와 같은 기능을 '유효성 검사'라고 한다. let inputUsername = document.querySelector('.username'); // username 클래스 요소를 받아온다. let failureMessage = document.querySelector('.failure-message'); // failure-message 클래스 요소를 받아온다. 얘는 hide 클래스가 있어 숨겨져있음. inputUsername.onkeyup = function(){// username 클래스 요소에서 사용자가 키를 눌렀다 뗐을 때 if(isMoreFour !== ..

📣 DOM Document Object Model HTML 요소를 Object처럼 조작할 수 있는 Model이다. -> JS를 사용하면 DOM으로 HTML을 조작할 수 있다. HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다! 📣 HTML에 JS 적용하기 웹 브라우저는 코드 해석 과정에서 요소를 만나면 HTML 해석을 멈추고 요소를 먼저 실행한다. 🚨 요소는 등장과 함께 실행된다 ✔️ 요소 추가하는 방법 1️⃣ 안쪽에 삽입 ➰ HTML 태그를 만나기 전에 요소가 실행되서 HTML태그를 제대로 불러오지 못한다. 2️⃣ 요소 끝나기 전에 삽입 ✔️ HTML 레이아웃을 컴퓨터에게 전달하기 자바스크립트에서 DOM은 document 객체에 구현되어 있다. console.dir 로 DOM 구조를 조회하..

📣 ES6 (ECMAScript ): JS의 표준 ✔️ 2015년에 출시됬지만 가독성과 유지보수성이 뛰어난 문법이 많이 추가되었다. ✔️ let, const, 템플릿 리터럴 등 📣 spread/rest 문법 ✔️ spread 문법 배열을 풀어서 인자로 전달하거나, 각각의 요소로 넣을 때 사용 function sum(x, y, z) { return x + y + z; } const numbers = [1. 2. 3]; sum(...numbers)// 6을 리턴 ➰ 배열 앞에 ...을 사용해서 x, y, x에 각각 1, 2, 3 을 전달한다. ✔️ rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용 function sum(...theArgs) { return t..