TIL-220527.md

Today

---

TODOLIST

• 각종 페이지 수정
• 애니매이션을 이용한 로딩페이지 구현
• 네브 바 생성

1.create-react-app에서는 dotenv모듈을 임포트할 필요없다.

Module not found: Error: Can't resolve 'fs' in '/Users/parksoyoung/Desktop/PICKSHARE/client/node_modules/dotenv/lib'

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/parksoyoung/Desktop/PICKSHARE/client/node_modules/dotenv/lib'

ERROR in ./node_modules/dotenv/lib/main.js 3:13-28
Module not found: Error: Can't resolve 'path' in '/Users/parksoyoung/Desktop/PICKSHARE/client/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

ERROR in ./node_modules/dotenv/lib/main.js 5:11-24
Module not found: Error: Can't resolve 'os' in '/Users/parksoyoung/Desktop/PICKSHARE/client/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

webpack compiled with 3 errors and 1 warning
No issues found.

이런 에러를 만났는데.. create-react-app으로 만든 리액트 앱일경우 dotenv가 기본으로 내장되어있다고 한다.

코드 최상단에

import dotenv from 'dotenv' 
dotenv.config() 

와 같은것을 지워주면 에러는 해결된다.

https://db2dev.tistory.com/entry/React-Webpack%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EC%B6%95%ED%95%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98env-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

2. 스타일드 컴포넌트 사용시 애니매이션 스타일 사용 기본 예시 코드

animation: boxFade 2s 1s infinite linear alternate;
  @keyframes boxFade {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

3. 그럼에도 해결되지 않는문제: 클라이언트에서 env 값들을 못 불러오고 있다. 콘솔을 찍은 결과 이렇게 나오는데.. 뭐지? 싶다.