[Tistory] Beginner 9회차 (8/7) | 콜스택(Call Stack)과 이벤트루프(Event Loop), 리액트 라우터(React Router)를 이용한 프로젝트 페이지 관리, 라우팅의 종류(기본/중첩/동적 라우팅)

원글 페이지 : 바로가기

콜스택과 이벤트루프 출처: 박영웅 강사님 강의자료 콜스택(LIFO: Last In, First Out) 콜 스택은 함수 호출이 쌓이는 곳 JavaScript는 단일 스레드 언어로, 한 번에 하나의 작업만 수행할 수 있는데, 콜 스택은 이러한 작업들을 순서대로 처리한다 콜스택이 꽉 찬 경우 이러한 에러 메세지가 발생함. 동시에 너무 많은 실행이 되고 있음. 이벤트 루프(FIFO:First In, First Out) 이벤트 루프는 JavaScript 런타임 환경에서 비동기 작업을 처리하는 메커니즘 콜 스택이 비어 있는지 확인하고, 비어 있으면 큐(Queue)에 대기 중인 콜백 함수를 콜 스택으로 이동시킨다 예제 –> 실행 순서 1. console.log(‘Start’)가 호출되어 콜 스택에 추가되고 실행됩니다. 2. setTimeout 함수가 호출되어 콜 스택에 추가됩니다. setTimeout 함수는 Web API를 통해 타이머를 설정하고, 콜백 함수를 큐로 전달합니다. setTimeout 함수는 콜 스택에서 제거됩니다. 3. console.log(‘End’)가 호출되어 콜 스택에 추가되고 실행됩니다. 4. 1초 후, 타이머가 완료되면 setTimeout의 콜백 함수가 큐로 이동합니다. 5. 콜 스택이 비어 있으면 이벤트 루프가 큐에서 콜백 함수를 가져와 콜 스택에 추가하고 실행합니다. Web API 비동기 작업을 처리하고, 콜백 함수를 큐에 추가 Web APIs • Fetch API: 서버와의 네트워크 통신을 비동기적으로 처리하는 API. fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error:’, error));​ 1. fetch(‘https://api.example.com/data’): • fetch 함수는 주어진 URL로 HTTP 요청을 보내고, Promise 객체를 반환합니다. 이 요청은 비동기적으로 처리됩니다. • URL은 https://api.example.com/data입니다. 2. .then(response => response.json()): • 첫 번째 then 메서드는 fetch 요청이 완료되고 응답이 도착했을 때 호출됩니다. • response 객체는 HTTP 응답을 나타내며, response.json() 메서드를 호출하여 JSON 형식의 응답 본문을 JavaScript 객체로 변환합니다. • response.json()도 Promise를 반환하므로, 다음 then 메서드로 연결됩니다. 3. .then(data => console.log(data)): • 두 번째 then 메서드는 response.json()이 완료된 후 호출됩니다. • data는 변환된 JSON 데이터입니다. • console.log(data)를 통해 데이터를 콘솔에 출력합니다. 4. .catch(error => console.error(‘Error:’, error)): • catch 메서드는 요청 중 발생한 오류를 처리합니다. • 네트워크 오류나 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 등 –> 둘 다 콜백 함수나 이벤트 핸들러를 일시 저장한다는 점에서 동일하지만, 태스크 큐보다 마이크로태스크 큐가 더 우선순위가 높다. 즉, 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다. 이후 마이크로태스크 큐가 비면 태스크 큐에 대기하고 있는 함수를 가져와 실행한다. ** 자바스크립트 엔진은 매크로태스크 하나를 처리할 때마다 또 다른 매크로태스크나 렌더링 작업을 하기 전에 마이크로태스크 큐에 쌓인 마이크로태스크 전부를 처리합니다. setTimeout(() => alert(“timeout”));

Promise.resolve()
.then(() => alert(“promise”));

alert(“code”); 얼럿 창엔 아래 순서대로 문자열이 출력됩니다. code – 일반적인 동기 호출이므로 가장 먼저 매크로태스크 큐에 들어간 후 실행됩니다. promise – .then은 마이크로태스크 큐에 들어가 처리되기 때문에, 현재 코드(alert(“code”))가 실행되고 난 후에 실행됩니다. timeout – setTimeout에서 설정한 시간이 끝난 후 콜백 함수를 실행하는 것은 매크로태스크이기 때문에 가장 마지막에 출력됩니다. 매크로태스크와 마이크로태스크 처리 로직을 첨가하면 위에서 살펴본 그림을 좀 더 고도화 할 수 있습니다. 그림을 위에서부터 아래로 봅시다. 매크로태스크(script, mousemove, setTimeout 등) 하나가 처리되고 난 후 마이크로태스크 전부(microtasks)가 처리되고 그 이후 렌더링이 진행되는 것을 확인할 수 있습니다. https://velog.io/@minyoung22222/%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90%EB%A7%A4%ED%81%AC%EB%A1%9C%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90-VS-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90 리액트 기본 세팅 이해 main.tsx ReactDOM.createRoot(document.getElementById(‘root’)!).render() root요소 생성 root라는 아이디를 가진 요소를 찾아서 App 컴포넌트 출력 할거야 ! ‘!’ 삭제하면 에러남 –> 타입스크립트는 요소가 null일 수도 있다고 생각함. 개발자가 타입 단언으로 root 있다고 해주는 것 리액트 라우터(React Router) 주소 제어 장치 (route는 page를 의미, routes는 page들, router는 page와 관련된 것들을 제어하는 기능이라고 이해해도 됨 !) 1) HashRouter https://도메인/#/movies/:id HashRouter는 URL의 해시(#) 부분을 사용하여 클라이언트 측 라우팅을 관리한다. URL의 해시 부분은 서버에 전송되지 않으므로, 서버 설정을 변경할 필요가 없다 ! HashRouter는 주로 간단한 애플리케이션이나 서버 설정을 수정할 수 없는 환경에서 사용됩니다. import { createHashRouter } from ‘react-router-dom’ 2) BrowserRouter https://도메인/movies/:id BrowserRouter는 HTML5의 History API를 사용하여 클라이언트 측 라우팅을 관리한다. 이 방식은 URL이 일반적인 웹 애플리케이션의 URL과 동일하게 동작하며, 보다 직관적이고 깔끔한 URL을 제공한다. BrowserRouter를 사용하려면 서버 설정이 필요할 수 있다 ! import { createBrowserRouter } from ‘react-router-dom’ 프로젝트에 라우터 설정하기 페이지 단위로 사용할 컴포넌트 App.tsx 파일은 routes 폴더 안으로 넣어주는 것이 좋음. –> import 절대경로 설정 –> vite로 ! (상대경로로 설정하면 작은 규모의 프로젝트에서는 괜찮지만 큰 프로젝트에서는 ../../../../ 등 너무 많이 ../를 써야하는 문제가 존재 또한 파일을 옮기게 되더라도 수정해야 할 필요가 없어지므로 편리함 !) ‘~’ 틸드 기호도 많이 사용함 –> App.tsx에서 @로 바꾸면 에러 발생 (빌드했을 때는 정상적으로 작동하지만 타입스크립트에서 에러 발생) –> 타입스크립트에도 설정을 해줘야 함 tsconfig.app.json –> 설정해도 안 되면 command + shift + p –> restart ts server(타입스크립트 서버 다시 시작) 해주면 됨 –> 이제 App.tsx 이 최상위 컴포넌트가 아니기 때문에(이제는 RouterProvider) Main.tsx로 이름 변경 main.tsx 파일 App 컴포넌트 대신 RouterProvider 컴포넌트를 써주기 router라는 prop이 있어서 routes 폴더에 정의해놓은 index.tsx 파일을 넣어주면 되는데 위에서 가져오고 있으니 route={router} 이렇게 넣어주면 됨 –> react router로 폐이지가 관리된다는 뜻 // index.tsx 파일
import { createBrowserRouter } from ‘react-router-dom’
import Main from ‘./Main’

export const router = createBrowserRouter([
{
path: ‘/’,
element: