프레임워크/React(NextJs)
-
[React] .env (환경변수파일) - 'create-react-app'과 'webpack 빌드' 프로젝트에서의 각 설정 및 사용 방법프레임워크/React(NextJs) 2022. 9. 3. 19:33
목표 서버API URL을 환경변수 파일(.env)에 등록하고, React 프로젝트내 어디에서든 process.env.(변수이름)으로 사용할 수 있도록 한다. 1. create-react-app을 설치한 프로젝트 .env 을 만들고 아래와 같이 작성해준다. REACT_APP_SERVER_API_URL="http://localhost:4001" create-react-app으로 만든 프로젝트에서는 환경변수를 사용할 때 앞에 REACT_APP_ 이라고 꼭 붙여주어야 사용할 수 있다. 사용해줄 때에도 똑같이 REACT_APP_을 붙여서 쓰면 된다. console.log(process.env.REACT_APP_SERVER_API_URL); // output => http://localhost:4001 2. web..
-
[React] React + typeScript + webpack 설정으로 프로젝트 만들기프레임워크/React(NextJs) 2022. 6. 9. 21:22
먼저 새로운 프로젝트를 생성할 폴더를 만들고 필요한 모듈들을 설치해줍니다 // 프로젝트 초기화 $ npm init -y // 웹팩 설치 $ npm install --save-dev webpack webpack-cli $ npm install --save react react-dom $ npm install --save-dev @types/react @types/react-dom $ npm install --save-dev typescript ts-loader source-map-loader 프로젝트 루트 경로에 세가지 파일을 만들어야 합니다. 1. 타입스크립트 설정 파일 : tsconfig.json { "compilerOptions": { "outDir": "./dist/", "sourceMap": tr..
-
[Recoil] Next.js + Recoil + typescript 적용하기프레임워크/React(NextJs) 2022. 5. 29. 22:13
Next.js를 typescript로 설치해줍니다 $ npx create-next-app@latest --typescript recoil 모듈 설치 $ npm install recoil pages/_app.tsx 파일에서 RecoilRoot를 불러와 Component를 감싸줍니다 import type { AppProps } from 'next/app'; import { RecoilRoot } from 'recoil'; import '../views/styles/globals.css'; const MyApp = ({ Component, pageProps }: AppProps) => { return ( ); }; export default MyApp; recoil 상태 관리 파일 생성해서 아래 내용을 입력합..
-
[React] react-select 라이브러리와 onChange event 함수프레임워크/React(NextJs) 2021. 6. 22. 19:47
오늘의 삽질과 허접한 해결방법 .... 많은 조언 부탁드립니다. (_ _) 이 예제는 react 에 redux-saga가 사용된 예제임을 알립니다!!! 저는 Nodejs로 서버만 다뤄보다가 React 공부를 한 시간이 30시간도 안된 초초초초핵초보이기 때문에 수정방법은.... 일단 실행이 되게 만들었습니다. (ㅎ;ㅎ) 혹시 저와 같은 어려움을 겪고 계신 분들께 도움이 되었으면 좋겠고, 저도 더 배워서 좋은 코드를 만들고 싶어서 올리게 되었습니다. 많은 조언 부탁드립니다. + 저도 더 공부하면서 원인을 알게되면 수정해서 올리도록 하겠습니다 ! '리액트를 다루는 기술'에서 로그인, 회원가입 부분을 구현하기(p.732~p.786)를 따라하고 공부하던중 Form 중에 select input 태그를 다뤄보고 싶어..