✏️기록하는 즐거움
article thumbnail
[JavaScript] .js vs .mjs
Face-to-Error 2022. 12. 15. 15:30

| 에러 발생 과정 .js 파일에서 export 키워드를 사용하니 SyntaxError: Unexpected token 'export' 에러가 발생했다. ESLint를 사용하면 친절하게 해결 방법에 대해서 알려준다. Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. ES 모듈인 export를 사용하려면 package.json에 type: module을 사용하거나, .mjs 확장자를 이용해야 한다. | .mjs가 뭔데? script 태그에 type="module" 어트리뷰트를 사용하게 되면 로드된 자바스크립트 파일은 모듈로서 동작하게 된다. ES6 모듈의 파일 확장자는 모듈임을 명..

article thumbnail
[React] Netlify 배포 시 API Key 설정하기
Face-to-Error 2022. 10. 14. 21:13

| 에러 발생 과정 처음으로 프로젝트를 배포해보려는데 두둥!! 에러가 발생하고 말았다 ... 현재 사용하고 있는 카카오 API_KEY 를 파일로 따로 관리하고 .gitignore에 추가해놨었는데 Netlify는 github에 올라가 있는 레파지토리를 바탕으로 빌드되기 때문에 github에 없는 API_KEY 파일을 읽을 수 없어서 에러가 발생한 것😭 나중에 이런 경우가 발생했을 때 참고하기 위해 포스팅을 해두려한다! | 에러 코드 Module not found: Error: Can't resolve './API_KEY' in '/opt/build/repo/src/utils' | 에러 해결 방법 🪄 .env 파일 사용하기 .env 파일이란? 환경 변수를 선언할 수 있는 파일로 포트, DB 관련 정보, AP..

article thumbnail
[React] Cannot create a project named "xxx" because of npm naming restrictions:
Face-to-Error 2022. 8. 23. 21:54

| 에러 발생 과정 React 프로젝트를 생성 중 발생한 에러 | 에러 코드 | 에러 해결 방법 프로젝트 이름에 대문자를 포함하면 안된다는 내용으로, 소문자로 프로젝트를 생성하면 된다🎊

article thumbnail
[React] style 적용 시 발생한 에러: The `style` prop expects a mapping from style properties to values, not a string.
Face-to-Error 2022. 7. 22. 13:29

| 에러 발생 과정 React에서 style object를 만들어서 컴포넌트 props로 전달하는 방법을 시도하고 있었다. 내가 원하는 조건일 경우 style object를 전달하려고 했을 때 해당 오류가 발생했다. | 에러 코드 function Square({ value, onClick, style }) { return ( {value} ); } class Board extends React.Component { renderSquare(i) { const isWinningIndex = this.props.winningIndex && this.props.winningIndex.indexOf(i) !== -1; const styleObj = { boxShadow: "0px 2px 8px 0px #FFC23..

article thumbnail
[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » ...
Face-to-Error 2022. 7. 13. 22:52

| 에러 발생 과정 깃허브에서 새로운 리액트 프로젝트를 pull 해서 받아온 뒤 발생한 문제 | 에러 해결 방법 1 package.json 을 열기 ctrl + s 를 눌러 저장하기 npm run 으로 프로젝트 재 실행 | 에러 해결 방법 2 위의 방법으로 해결되는 줄 알았지만, 코드를 수정하고 저장하면 똑같은 에러가 계속해서 발생했다. 따라서 아래의 방법을 추가적으로 진행했다. package-lock.json 삭제 npm install실행 vscode 껐다 키기 | Refernece [Solved] Plugin "react" was conflicted between "package.json » eslint-config-react-app » - Exception Error To Solve Plugin "..