본문 바로가기

Coding/React34

React - Error: The specified module could not be found. Next.js CLI로 Next.js 설치하고 template으로 typescript를 설치하고 npm run dev를 실행 시켰을때, npx create-next-app [폴더명] --ts Error: The specified module could not be found nextjs와 같은 error가 발생할 경우가 있다. 이럴 경우 babel을 통해서 해결할 수 있다. 최상위 폴더에 .babelrc 파일을 만들고, 아래와 같이 넣어준다. 그리고 npm run dev를 다시 실행시키면 잘 작동한다. babel에 presets 옵션은 babel의 공유 가능한 config 옵션이나 plugin을 공유 가능하도록 해준다. { "presets": ["next/babel"] } https://stackover.. 2022. 1. 5.
React - Context API React에 global state를 관리를 해주는 Context API 가 있다. React application은 SPA(single page application)들이 모여서 하나의 application을 이루고 있다. context API가 나오기 전에는 top-down 방식으로 props를 내려줘서 복잡성과 사용하기 어려움이 있지만, context API를 사용하면 단순하게 사용이 가능하다. https://reactjs.org/docs/context.html#before-you-use-context Context – React A JavaScript library for building user interfaces reactjs.org 위에 링크를 확인 해보면, context API에서 useC.. 2021. 12. 19.
React - flicking(2) version up flicking을 다른곳에 적용하려고 앱에 설치를 했더니, error 가 발생했다. 이전에 React-flicking 글에서 사용했던 버전은 "^3.5.2" 였고, 이번에 설치를 한 버전은 "^4.4.3"이다. 아무래도 버전이 올라가면서 사용 방법이 달라 진거 같다. 3.5.2에서 사용한 코드를 그대로 적용했더니, error 가 발생했다 Position error가 발생했다. google에서 검색을 해도 잘 나오지 않았다. 그래서 공식 페이지를 살펴봤다. 공식 페이지 quick start를 읽었을 때, 바뀐게 많았다. https://naver.github.io/egjs-flicking/docs/quick-start Quick Start | Flicking 2021. 12. 12.
React - Next.js environment variable 설정하기 javascript는 node.js라는 환경에서 run time이 된다. 그래서 node.js에서 제공하는 process 라는 기능을 사용할 수 있다. 보안을 위해 root 디렉토리에 .env 파일을 만들고, 중요한 apikey, privatekey 등... 보안에 필요한 값들을 넣어주고, git push를 할 때, .env를 gitignore 설정하여 보안을 지킬 수 있다. #object *next.js env 값 설정 ## React environment variable(env)(기존방식) next js를 사용하게 되면 조금 설정이 필요한 부분이 있다. 이렇게 .env 사용할 값들을 설정해 놓고, 필요한 부분에 process.env.REACT_APP_API_KEY를 사용하게 되면, browser에서 .. 2021. 5. 6.
반응형

티스토리툴바