분류 전체보기

✏️ 개요 DOM 을 보다 잘! 활용하기 위해, 익숙해지기 위해 컨텐츠 영역을 스크롤 했을 때 해당 id 가 나타나게 되면 해당 id 와 매칭되어 있는 목차에 하이라이팅이 되는 기능을 구현해보고자 하였다. 이건 예시이다!! 바뀌는 제목에 따라 하이라이팅 되는 목차 📝 요구 사항 현재 목차에는 href 속성으로 id 가 달려 있고 컨텐츠 영역에 id 들이 달려 있어 매칭이 되어 있으나 스크롤 시나 해당 위치로 이동했을 때 목차에 하이라이팅이 되지 않는다. DOM을 활용하여, 스크롤이 되었을 때 해당 목차의 색상을 변경하도록 할 것이다. 해당 id가 달려있는 element의 스크롤 위치가 상단 기준 80px로 도달 하였을 때 해당 목차를 하이라이팅 할 것이다. 먼저 DOM 요소를 찾기 위해 개발자 도구를 켜..

✔️ $fetch nuxt 는 기본적으로 ofetch 라이브러리를 포함하고 있다. useFetch 뒤에서 실행된다. 기본적으로 client side 에서만 사용한다. 서버와 클라이언트 환경에서의 중복 호출 문제 Top level await 를 통한 SSR 시 fetch 를 통해 data 를 가져오면 안 된다 $fetch 파라미터 url : 요청 url options : method : 요청 메서드 설정 query : URL 에 붙일 query params. ufo 라이브러리를 통해 만들어진다. params : query 와 똑같다. body : 요청 body headers : 요청 headers baseURL : 요청 baseURL ✔️ useAsyncData 일반적으로 GET 방식의 통신을 위해 사용된..

개요 이 글은 자바스크립트라는 말이 들리면 자꾸 겁 먹게 되는 이유로 인해 [모던 자바스크립트 딥 다이브] 책을 가지고 공부하면서 정리한 글이다. 모든 내용이 정리되어 있는 것이 아니라 어? Ajax 가 이거였군아 하는 내용들만 간단하게 정리하고자 한다. 즉, 자주 들리는데 뭔지 정확하게는 잘 모르는 내용들이 주를 이룬다. 그리고! 일종의 오답노트이다. 한 번 몰랐던 자바스크립트 두 번 모르면 안 되니깐 초창기 자바스크립트 : 대부분의 로직은 주로 웹서버에서 실행되었고, 브라우저는 서버로부터 전달받는 HTML 과 CSS 를 렌더링하는 수준이었음 아니 이것도 모르냐고... Ajax 서버와 브라우저가 비동기 (Asynchronous) 방식으로 데이터를 교환할 수 있는 통신 기능이다. 서버로부터 필요한 데이터..

📌 개요 CSR, SSR, SPA + MPA 가 한 개의 글로 묶여 올라가게 된 이유는 뭘까... Nuxt.js 를 사용하는 현장실습을 하면서 가장 많이 들었으나 들을 때마다 헷갈리던 개념들이기 때문이다. CSR, SSR, SPA, MPA 개념들은 Nuxt 의 렌더링 과정을 알아볼 때 쓰인다. 관련하여, 브라우저의 렌더링 과정의 이해에 있어 도움이 될 것 같아 정리하고자 한다. 📌 CSR, SSR, SPA, MPA 💡 Nuxt 가 몰까나... 먼저, Nuxt 란 Vue.js 프레임워크 기반의 개발 환경 구축에 도움을 주는 프레임워크이다. Vue 프로젝트에서 사용되는 여러 유용한 라이브러리들을 기본적으로 탑재하고 있는 프레임워크라고 할 수 있다. ✔️ Single Page Application (SPA..