•네트워크 오류나 JSON 변환 오류가 발생할 경우, catch 블록이 실행되어 오류 메시지를 콘솔에 출력합니다.
• Timeout: 일정 시간이 지난 후에 함수를 실행하는 API.
setTimeout(() => {
console.log('This will run after 2 seconds');
}, 2000);
// 0초가 기본 값
cf. node.js 에서 사용 가능할까 ? YES ! Node API(명령)라는 것이 따로 있어서 작동 가능
// node API 예시import fs from'fs'
fs.writeFileSync('test.txt', 'Hello, world')
// node test.js 터미널에서 실행 가능
(참고: node js에는 DOM API가 없어서 document.querySelector('html') 동작 안함) --> 자바스크립트라는 프로그래밍 언어가 동작하는 환경은 1) 웹 브라우저, 2) node js가 설치된 컴퓨팅 환경
• Interval: 일정한 시간 간격으로 함수를 반복적으로 실행하는 API.
setInterval(() => {
console.log('This will run every 1 second');
}, 1000);
• Location: 현재 문서의 URL을 가져오거나 변경하는 객체.
// 현재 URL을 가져오기console.log(window.location.href);
// URL을 변경하기window.location.href = 'https://example.com';
• History: 브라우저의 세션 히스토리를 조작하는 API.
// 뒤로 가기window.history.back();
// 앞으로 가기window.history.forward();
// 특정 페이지로 이동window.history.go(-2); // 두 페이지 뒤로 이동
• Navigation: 페이지 간의 이동 이벤트와 상태를 관리하는 API.
navigation.addEventListener('navigate', (event) => {
console.log("사용자가 이동하려는 주소:", event.destination.url);
if (event.destination.url.includes('restricted')) {
event.preventDefault(); // 특정 페이지로의 이동을 막음console.log("이 페이지로는 갈 수 없습니다!");
}
});
• DOM: 웹 페이지의 구조를 조작하고 스타일을 적용하며 이벤트를 처리하는 API.
// 요소 선택const element = document.getElementById('myElement');
// 텍스트 변경
element.innerText = 'Hello, World!';
// 클래스 추가
element.classList.add('active');
큐(Queue)
비동기 작업의 콜백 함수들이 대기하는 곳
1. 매크로 태스크 큐 (Macrotask Queue): - 큰 작업들을 담는 주머니 - 예: setTimeout, setInterval, I/O 작업, UI 렌더링 등
2. 마이크로 태스크 큐 (Microtask Queue): - 작고 빠른 작업들을 담는 작은 주머니 - 예: Promise, process.nextTick, queueMicrotask 등
--> 둘 다콜백 함수나이벤트 핸들러를 일시 저장한다는 점에서 동일하지만, 태스크 큐보다마이크로태스크 큐가 더 우선순위가 높다. 즉, 이벤트 루프는 콜 스택이 비면먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다. 이후마이크로태스크 큐가 비면태스크 큐에 대기하고 있는 함수를 가져와 실행한다.
** 자바스크립트 엔진은매크로태스크 하나를 처리할 때마다
또 다른 매크로태스크나 렌더링 작업을 하기 전에 마이크로태스크 큐에 쌓인마이크로태스크 전부를 처리합니다.
promise–.then은 마이크로태스크 큐에 들어가 처리되기 때문에, 현재 코드(alert("code"))가 실행되고 난 후에 실행됩니다.
timeout–setTimeout에서 설정한 시간이 끝난 후 콜백 함수를 실행하는 것은 매크로태스크이기 때문에 가장 마지막에 출력됩니다.
매크로태스크와 마이크로태스크 처리 로직을 첨가하면 위에서 살펴본 그림을 좀 더 고도화 할 수 있습니다. 그림을 위에서부터 아래로 봅시다. 매크로태스크(script, mousemove, setTimeout 등) 하나가 처리되고 난 후 마이크로태스크 전부(microtasks)가 처리되고 그 이후 렌더링이 진행되는 것을 확인할 수 있습니다.
동적 라우팅(dynamic routing)은 URL의 일부가 변할 수 있는 라우팅 방식으로, URL 경로의 특정 부분을 변수로 취급하여 다양한 URL 패턴을 처리할 수 있게 해줍니다. 이를 통해 단일 라우트 정의로 여러 경로를 처리할 수 있습니다.
동적 라우팅의 예 예를 들어, 블로그 애플리케이션에서 각 블로그 게시물의 ID에 따라 다른 페이지를 보여주어야 한다고 가정해봅시다. 동적 라우팅을 사용하면 이러한 경로를 간단히 정의할 수 있습니다.
설정해주지 않은 페이지로 접근하면 나오는 404 페이지 ! vite에서 제공해주는 기본 페이지이고 우리가 custom 할 수 있고, 해야 함 !
* promise 객체 공부해보고 질문하기
* Redux 개념을 이해하는 느낌으로 공부해보기 (너무 깊게 말고)
* git switch -h (명령어 뭔지 알고 싶을때) * 정규표현식 (기호와 기능을 연관지어 생각하기 어렵기 때문에 암기해야 해요 ,,) * = 0개 이상 모두 일치, wildcard + = 1개 이상 모두 일치 초격차 패키지 - 정규표현식 강의 있는 정도는 알아두기
* routes 폴더를 만드는 이유 ? 관리를 편리하게 하기 위함 ! components 폴더 --> 재사용 혹은 캡슐화를 목적으로 하는 컴포넌트에서 관리 routes 폴더 --> 페이지를 출력하는 컴포넌트를 관리 (pages 대신 routes로 씀)
