반응형 NextJS3 [해결] Next.js GCP AppEngine 배포 환경변수 분기 Next.js 프로젝트를 완료한 후 배포환경을 설정하던 도중 예상치 못한 난관에 마주했다. Google Cloud Platform의 App Engine을 사용해 배포하는데 문제는 project-dev서비스와 project-prd서비스로 나누어 각각 환경변수를 다르게 사용하려했다. dev서비스에는 .env.development 파일을, prd서비스에는 .env.production파일을 사용하도록 하려는데 지금까지 시도해본 모든 방법, 설정은 모두 한쪽만 다르게 설정해내지 못했다. 내가 생각한 순서도에 따르면 다음과 같다. "scripts": { "dev": "next dev", "lint": "next lint", "start:dev": "APP_ENV=development next start", "sta.. 2023. 8. 11. Library React Swiper 응용하기 (module, props...) 기본편 보러가기 Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm 3pdev.tistory.com 기본편에서 말했듯 React Swiper는 여러가지 모듈, props, style등을 활용해 자유도를 높였다. 먼저 모듈부터 살펴보자. Navigation 모듈은 슬라이더에 이전/다음 버튼을 추가한다. 클릭하면 슬라이더가 넘어간다. import SwiperCore, { Navigation } from 'swiper'; import 'swiper/css/.. 2023. 3. 29. React-redux를 사용하는 이유와 사용하는 방법 with Example 취업 후 열심히 배우고 일하느라 오랜만에 글을 쓴다. 회사생활이 너무 재미있어서 시간을 녹여버리고 있다. 어쨋든 Redux의 사용 이유 오늘은 React와 찰떡궁합 React-redux를 알아보자. 기존의 props를 과다 사용해서 프로젝트를 만들다보면 여러 컴포넌트가 쌓이고 쌓일수록 굉장히 복잡해지게 된다. 예를들어서 아래와 같이 export default function App() { const [number, setNumber] = useState(0); return ( App number : {number} { setNumber(number + 1); }} /> ); } function Calculator1(props) { return ( Calculator1 ); } function Calcul.. 2023. 1. 28. 이전 1 다음 반응형
