본문 바로가기

Computer Programming/Browser

Vercel 배포 시 새로고침 404 Error (Vite, 라우터 사용)
Computer Programming/Browser 2023. 6. 27. Vercel 배포 시 새로고침 404 Error (Vite, 라우터 사용) 스터디를 진행하면서 했던 repository를 Vercel을 통해 배포하고 나서 도메인에 들어가 실행해봤다. 페이지네이션을 구현했기 때문에 2페이지에서 새로고침해도 여전히 2페이지를 새로 보여줘야하지만, 예상치 못하게 404 에러가 떴다. 확인해보지는 않았지만 도 작동하지 않는다고 함... 스터디 팀장님이 에러를 발견하셨고 해결법도 친절히 알려주셨다. 새로고침을 통해 서버에 접근하게 되고, 이 때 SPA인 만큼 하나의 .html 안에서 라우팅 해줘야하는데 서버 경로에 따른 페이지 설정이 되지 않는 상태라서 우리 프로젝트의 .html을 가리키지 못한 상황이었다. 그래서 어느 경로로 통하던 하나의 .html을 가리킬 수 있도록 지정해주어야 한다. // vercel.json { "routes": [ { "ha..
[Browser] DOM (Document Object Model)
Computer Programming/Browser 2023. 6. 15. [Browser] DOM (Document Object Model) https://nayoungkim00.tistory.com/44 브라우저의 구조와 렌더링 엔진의 working process 에 관한 글을 먼저 작성했습니다. 이후 DOM 에 관해 모던 자바스크립트 Deep dive 책을 읽고 정리해보았습니다. 프론트엔드 개발자(사실 지망생 😎)에게 브라우저의 동작 원리를 이해하는 것은 매우 중요합니다. 내가 작성한 코드가 어디에서 어떤 순서로, 어떤 방식으로 동작하는지 이해하면 더 효율적이고 클린한 코드를 작성할 수 있을 것이라 생각합니다 :) 1. DOM (Document Object Model) DOM 이란 HTML 문서의 계층적 구조(부모-자식)와 정보를 표현하며 이를 제어할 수 있는 API(DOM API), 즉 프로퍼티와 메소드를 제공하는 트리의 자료구조입니다...

티스토리툴바