![]()
개발 환경에 따라 API 엔드포인트들이 변화될 수 도 있어 이에 따라 환경분리가 필요하다. .env 파일 Next.js는 .env 파일을 가지고 분리를 한다. NEXT_PUBLIC_XX이라는 Prefix를 가지면 클라이언트 쪽에 환경이 공유된다. *.env.development : next dev의 기본값 *.env.local : 우선순위가 가장 낮은 환경설정 .env.production : next build의 기본값 예시 ) API 주소를 분리 # .env.local NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api # .env.development NEXT_PUBLIC_API_BASE_URL=http://192.168.0.1:8080/api # .env.pr..
![]()
개요 useState의 대체 함수입니다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다. (Redux에 익숙하다면 이것이 어떻게 동작하는지 여러분은 이미 알고 있을 것입니다.) 왜? 기존의 상태관리를 useState를 활용하여 작성하였다 set... 이런 느낌의 함수는 뭔가 괴리감이 느낀다고 개인적으로 생각된다 맹목적으로 값을 셋팅하는 느낌 나중에 복잡성을 해결하기 위해선 useReducer의 도움이 필요할꺼 같다. 또한, 성능 최적화에도 도움이 된다 예시 const initialState = {count: 0}; function reducer(state, action) { switch (action.ty..
사내 시스템 구축 중 리액트를 이용하여 3D 모델(glTF)을 활용하여 구축할 일이 초기에는 CRA(Create React App)을 이용하여 구성하다가 빌드 도구인 Vite를 발견하여 환경 구축을 정리하고자 한다. Vite? Vite는 “비-트”라고 읽으며 Dependencies(의존영역), Source code (소스영역)을 나누어 빠르게 빌드되게끔 문제를 해결했다고 한다. *자세한 내용은 해당 URL을 참조. (https://vitejs-kr.github.io/guide/why.html#the-problems) Dependencies 영역 기존 번들러는 JIT 컴파일 방식인 자바스크립트로 작성되어 있지만 Vite는 병렬처리에 유리한 Go언어로 작성된 Esbuild를 이용하여 빠른 번들링을 진행한다고..
