클론코딩해보기

01. 바닐라 자바스크립트로 SPA - 이론?

js0616 2024. 8. 9. 03:10

https://chatgpt.com/

 

 

gpt 님이 말씀하시길...

 

필요한 기능

  1. 라우팅: URL 변경 없이도 다양한 "페이지"를 표현하고, 사용자가 네비게이션을 통해 이동할 수 있어야 합니다.
  2. 뷰 렌더링: 각 "페이지"에 해당하는 콘텐츠를 동적으로 로드하고 화면에 표시할 수 있어야 합니다.
  3. 이벤트 처리: 사용자 상호작용(예: 링크 클릭)에 반응하여 적절한 페이지를 로드하고 화면을 업데이트할 수 있어야 합니다.
  4. 상태 관리: 필요한 경우 애플리케이션 상태를 관리하고, 페이지 간에 상태를 공유하거나 전달할 수 있는 방법이 필요합니다.
  5. 히스토리 관리: 브라우저의 뒤로가기, 앞으로가기 버튼을 지원하고, URL의 해시(#)를 이용해 브라우저 히스토리를 관리할 수 있어야 합니다.

 

구현 단계

  1. 기본 HTML 및 CSS 설정:
    • HTML 파일에서 SPA의 기본 레이아웃을 정의하고, 필요한 CSS 스타일을 추가합니다.
  2. 라우팅 메커니즘 구현:
    • URL의 해시(#) 또는 History API를 사용하여 라우팅을 관리하는 JavaScript 코드를 작성합니다.
    • 각 페이지에 해당하는 HTML 콘텐츠를 관리하고, 적절한 페이지로 이동할 때마다 콘텐츠를 동적으로 로드하고 화면에 표시합니다.
  3. 이벤트 처리 및 네비게이션 구현:
    • 네비게이션 링크(예: <a> 태그) 클릭 시 이벤트를 처리하고, 적절한 페이지로 이동하도록 구현합니다.
    • click 이벤트나 History API의 popstate 이벤트를 활용하여 페이지 전환을 관리합니다.
  4. 초기화 및 상태 관리:
    • 애플리케이션이 초기화될 때, 초기 페이지를 로드하고 상태를 설정합니다.
    • 필요한 경우 전역적인 상태를 관리하고, 페이지 간에 상태를 전달하거나 공유하는 방법을 구현합니다.
  5. 예외 처리와 추가 기능 구현:
    • 페이지가 존재하지 않는 경우(404 에러)나 예외 상황을 처리하는 방법을 구현합니다.
    • 필요한 경우 데이터 로딩, 인증 처리 등 추가 기능을 구현하고 통합합니다.

 

https://f-lab.kr/insight/vanilla-javascript-spa-development-20240519

 

바닐라 자바스크립트로 SPA 개발하기

바닐라 자바스크립트로 SPA를 개발하는 방법에 대해 다루며, 프로젝트 구조 설계, 데이터 관리, 이벤트 루프, 리액트 라이프 사이클 메서드의 구현 방법을 포함합니다.

f-lab.kr

 

해당 글에서는 다음과 같은 내용에 대해서 알아야 된다고 한다. 

 

프로젝트 구조 설계

SPA를 개발할 때 가장 먼저 해야 할 일은 프로젝트의 구조를 설계하는 것입니다.

이는 코드의 유지보수성과 확장성을 높이는 데 중요한 역할을 합니다.

프로젝트 구조 설계 시 고려해야 할 요소로는 라우팅, 컴포넌트 분리, 상태 관리 등이 있습니다. 왜냐하면 이러한 요소들이 프로젝트의 전반적인 아키텍처를 결정하고, 개발 과정에서 발생할 수 있는 문제를 미리 예방할 수 있기 때문입니다.

 

데이터 관리와 MSW 사용

SPA 개발에서 데이터 관리는 매우 중요한 부분입니다. 특히, 백엔드와의 통신 없이 목 데이터를 사용하여 개발을 진행할 때는 MSW(Mock Service Worker)를 활용할 수 있습니다.

MSW는 서비스 워커를 통해 목 데이터를 제공하는 서버로, 백엔드가 없는 상태에서도 API 요청을 처리할 수 있게 해줍니다. 왜냐하면 MSW를 사용하면 실제 서버와의 통신 없이도 프론트엔드 개발을 진행할 수 있기 때문입니다.

 

이벤트 루프와 비동기 처리

자바스크립트는 싱글 스레드 언어이지만, 이벤트 루프를 통해 비동기 처리를 지원합니다.

이는 자바스크립트가 멀티 스레드처럼 작동하는 것처럼 보이게 합니다.

이벤트 루프는 콜스택과 큐를 관리하여 비동기 작업을 처리합니다.

왜냐하면 이벤트 루프가 콜스택이 비었을 때 큐에서 새로운 작업을 가져와 실행하기 때문입니다.

 

리액트 라이프 사이클과 바닐라 자바스크립트

리액트의 라이프 사이클 메서드는 컴포넌트의 생명주기를 관리하는 데 중요한 역할을 합니다. 바닐라 자바스크립트로 SPA를 개발할 때도 이러한 라이프 사이클 개념을 적용할 수 있습니다.

리액트의 라이프 사이클 메서드에는 componentDidMount, componentDidUpdate, componentWillUnmount 등이 있습니다. 왜냐하면 이러한 메서드들이 컴포넌트의 상태 변화에 따라 특정 작업을 수행할 수 있게 해주기 때문입니다.

 

 

 

gpt 가 알려준것과 비슷하지만 조금 더 깊이있는 범위까지 다루는것 같다.