사건의 발단은 이렇다. Three.js를 React에서 다루면서 페인팅이 두 번 되는 느낌이 들었다. (개인 플젝 뿐만 아니라 처음 배우면서 썼던 Next.js에서도 두 번 그려졌다.) useEffect에서 렌더링이랑 카메라랑 오브젝트랑 모든 걸 다루기 때문에 repainting이 되는 순간 조명도 두 배! 오브젝트도 두 배! 가 되버린다. 사실 분명 예전에도 여러 번 타는 걸 본 적이 있는데 별 생각이 없었어서 냅뒀었다. 의존성 문제인가 하고 사이드 이펙트를 다 뒤졌는데 결론은 바로 제목에 써놓은 것처럼 React.StrcitMode가 문제였다. 보통 CRA로 만들어지는 프로젝트는 기본적으로 StrictMode로 나오게되니.. 뭔가 불안하지만 일단 Index.tsx에 있는 React.StrictMode..

CRA 배포하듯이 Next.js 환경에서 배포할 수 있다면 얼마나 좋을까? 야심차게 배포한 프로젝트가 빈 화면만 나왔었다. 놀란 마음에 개발자 도구를 살펴보니 빌드된 프로젝트의 index.html에서 불러오는 js 파일이나 스타일시트, img 태그의 소스 등 많은 요소의 경로가 문제였다. 당연히 콘솔에선 404오류가 났었다, url 앞에 호스트 주소를 써주는 등의 prefix 작업을 해줘야하는 것. 열심히 구글링해보니 이런 문제는 context를 뿌려줘서 해결할 수 있었다. 1. Prefix 적용 📂 asset prefix 설정 next.config.js 파일에 assetPrefix 속성을 추가한다. 이 설정은 css 설정 중 경로와 관련된 속성값 앞에 해당 문자열을 붙여준다. /** @type {imp..

요즘 Next.js랑 three.js를 공부해보고 있는데, 대지를 그려주거나 할 때 window 객체에 접근할 일이 자주 있습니다. 하지만 Next.js는 SSR을 기본으로 하기 때문에 서버에서 렌더링 하는 시점에선 전역변수 window를 가져올 수 없습니다. 방법은 두 가지가 있습니다. 1. dynamic 사용 import styles from "../styles/Home.module.css"; import dynamic from "next/dynamic"; const ThreeJSSetting = dynamic(() => import("../components/Example"), {ssr: false}); export default function Home() { return ( HELLO THREE..

이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) 🎛️ TO-DO Apps 저번이랑 결과물은 같지만 내용은 아예 다르다. 결론적으로 말하면 React에서는 dispatch와 subscribe 함수를 props로 받아와야 한다는 것! TypeScript에서 쓸 생각하니까 벌써 막막하다🤣 👜 store.js 따로 만들어주기. React에서 ReactDOM으로 렌더링해주는 과정에서 최상단에서 store를 뿌려줘야한다. 결론적으로 파일을 따로 만들어줘야한단 소리! store.js import { legacy_createStore } from "redux"; const ADD = 0; con..

이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) [시작하기 전에] 이번 2편은 React가 아니라 순수 JavaScript 환경에서 실습을 해봅니다. 이후에 React-Redux도 다루니 다른 편을 참고해주세요! 🎛️ TO-DO Apps with Redux 결과물 저번 클래스에서 간단한 redux의 사용법을 알아봤다. 1. store를 안에서 primitive type의 state를 관리해보고, 2. state를 관리하는 다양한 기능의 함수를 정의한 다음, 3. action을 넣은뒤 dispatch로 실행하고 subscribe를 리스너로 써 볼 수 있었다. 이번엔 primitive..

이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) [시작하기 전에] 이번 1편은 React가 아니라 순수 JavaScript 환경에서 실습을 해봅니다. 이후에 React-Redux도 다루니 다른 편을 참고해주세요! 🎛️ Redux: JS에서 쓰는 상태관리 컨테이너 Redux는 그냥 저냥 듣기로는 React에서 쓸 수 있는 공용 저장소고, Props drilling같은 상태관리를 도와준다고 알고 있었다. React 뿐 만 아니라 JavaScript 전반적으로 쓸 수 있는 "상태 관리" 컨테이너라고 한다. 구글링으로 상태관리 관련된 포스트를 보면 블로거 분들이 각자 상태관리를 자신만의 ..