Vanila JS 프로젝트 세팅하기
env 환경을 사용하기 위해서는 node환경 세팅이나 webpack, babel 등 서버 환경에서 사용할 세팅이 필요하다는 것을 알게 되었다.
지금까지 React, Angular 등 다양한 라이브러리 및 프레임워크가 자동으로 세팅해주었기에 벡엔드 환경을 해줬던 것이였다.
참고: https://yujo11.github.io/javascript/Vanilla%20JS%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0/
Vanila JS 프로젝트에서 env 사용하기
dotenv
Node.js 환경에서 env 파일을 로드하려면 라이브러리가 필요하다.
1. 설치
yarn add dotenv
2. .env 파일 생성 및 작성
3. gitignore에 env 추가하기
4. JS파일에서 파일 로드 및 사용
require('dotenv').config(); // env 파일 로드
const apiKey = process.env.API_KEY;
const debug = process.env.DEBUG;
console.log('API Key:', apiKey);
console.log('Debug Mode:', debug);SPA 예제
해시 라우팅(#)
참고: https://fe-developers.kakaoent.com/2022/221124-router-without-library/
요즘에는 잘 사용하지 않지만 라이브러리와 프레임워크 없이 바닐라 JS로 라우팅을 개발하기 위해서 2가지 방법이 있는데 해시 라우터와 history API를 사용하는 것
라우터?
- URL을 DOM 구성 요소에 매핑하여 경로 목록들을 저장한다.
- URL에 따라 페이지 콘텐츠를 해당 URL에 매핑된 구성 요소로 교체해준다.
- URL에서 경로 파라미터나 쿼리 string을 식별해준다.
index.html
<a> 태그를 사용하여 링크를 클릭하면 해시값이 변경되는 것을 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<noscript>js 실행 허용 X</noscript>
<nav class="sidebar">
<a href="#/">Home</a>
<a href="#/about">About</a>
</nav>
</body>
</html>
404 Error
404 에러가 나타나길래 뭔가 했더니 경로에 import Page from "./Page.js"; 이렇게 import 해줘야 하는데 "./Page" 이렇게 되어있었다.
router.js + main.js
- router.js
import Home from "./pages/Home.js";
import About from "./pages/About.js";
import NotFound from "./pages/NotFound.js";
const routes = {
"#/": new Home(),
"#/about": new About(),
404: new NotFound(),
};
// router 클래스 종류
export const renderPage = async () => {
const path = window.location.hash || "#/"; // 해시가 비어있으면 기본으로 #/
const selectedPage = routes[path] ?? routes[404];
// console.log(selectedPage);
selectedPage.render();
};부모 클래스인 render에
render() {
// 메서드 정의
document.getElementById("root").innerHTML = this.htmlString;
}가 정의되어 있기 때문에 각 클래스의 htmlString만 다르면 해당 html요소가 렌더링 된다.
React 컴포넌트
함수형
공식문서에서 권장하는 형태
function 이나 화살표 함수로 정의하고 return 문에 jsx 코드를 반환
클래스형
class로 정의하고 render()함수에서 jsx코드를 반환
import React, { Component } from "react";
class NameBox extends Component {
render() {
const name = "react";
return <div className="react">{name}</div>;
}
}
export default NameBox;React-query 무한스크롤 동작과정
queryFn 실행 → 캐시 데이터 등록 { pages, pageParam } →
getNextPageParam 실행 (리턴된 NextPageParam는 훅 내부 메모리에 저장. 캐시에 저장X) 최신 pages 데이터를 lastPage로 넘겨 다음 페이지 여부를 확인 가능한 파라미터를 이용하여 T,F 판단→
(NextPageParam 이 undefined이 아니면) hasNextPage true로 상태변경 →
fetchNextPage 실행 →
queryFn 실행 (이 때 내부적으로 저장되어 있던 NextPageParam을 queryFn 의 매개변수로 넘겨줌)
- 테이터 화면에 출력
const processedPosts = useMemo(() => {
return posts?.pages
.map((data) => {
return data.posts;
})
.flat();
}, [posts]);{pages: Array(n), pageParams: Array(n)} 으로 이루어져 있는 데이터들 중 pages에 담겨있는 데이터들을 캐싱 처리하여 변경된 데이터가 있을 때에만 processedPosts를 다시 계산한다.
- 주의할 점
- 훅 내부적인 동작원리로 인해 예상보다 잦은 리렌더링이 발생할 수 있다.
- 연산량이 많은 코드가 있는 경우 useMemo 와 같은 memoization 적용을 특히 고려해야 한다.
- 리렌더링이 발생한다고 해서 실제 브라우저 렌더링이 발생하는 것은 아니다. (Virtual DOM 원리 이해 필요)
JS debugger 명령어
스크립트 내에 debugger를 작성해두면 중단점이 된다.
