async function getJSON() { const url = 'JSON FILE PATH/myJSON.json' const jsonData = await (await fetch(url)).json(); return jsonData } const myJSONdata = getJSON();
Next.js의 SSR 렌더링 방식은 두 단계로 구분할 수 있다. 첫번째 단계는 Pre-rendering 두번째 단계는 Hydration Pre-rendering 단계에서는 JS를 실행하지 않은 채로 HTML element들을 먼저 렌더링 한다. JS를 실행하여 최종적인 DOM 트리를 생성 및 렌더링하고 이벤트 등록과 같은 과정을 한 번에 하지 않고, 왜 HTML elemente들을 먼저 렌더링 할까? 가장 큰 이유는 화면을 빠르게 로드할 수 있다는 점이다. JS를 읽어들이고 읽어들인 내용을 가지고 DOM을 그리는 과정은 단순 HTML element만을 가지고 DOM을 그리는 과정보다 느리기 때문이다. 빠르게 먼저 보여줄 수 있는 부분은 먼저 보여주고 hydration 과정을 통해 최종적으로 렌더링 과정..
1. tsconfig.json에서 baseUrl 설정 { "compilerOptions": { "baseUrl": ".", ... } ... } 2. next.config.js에서 webpack 설정 module.exports = { ... webpack(config) { config.resolve.modules.push(__dirname); return config; }, }
enum ColorType { RED = 1, GREEN = 2, BLUE = 3, } const values = Object.values(ColorType) // -> ['RED', 'GREEN', 'BLUE', 1, 2, 3] const colorList = Object.values(ColorType).filter(value => typeof value === 'string') // -> ['RED', 'GREEN', 'BLUE']
Canvas를 활용한 작업을 할 때는 반드시 DOM에 canvas가 렌더링 된 이후이어야 한다. javascript를 사용중이라면 onLoad 이후, react를 사용중이라면 useEffect에서 canvas 작업을 진행해야 한다. 1. Draw Lines export const First = () => { // definition const canvasRef = useRef(null); useEffect(() => { const context = canvasRef.current?.getContext("2d"); if (!context) return; context.clearRect(0, 0, 800, 600); context.fillStyle = "blue"; context.fillRect(10, 40..
https://docs.microsoft.com/ko-kr/visualstudio/mac/uninstall?view=vsmac-2019 Mac용 Visual Studio 제거 - Visual Studio for Mac Mac용 Visual Studio 및 관련 도구를 제거하는 방법을 안내합니다. docs.microsoft.com 위 공식문서를 참고하여 삭제하면 됨^^
