안녕하세요. 현재 슬리액트, '회원가입 페이지 만들기' 파트를 듣고 있습니다. 회원가입을 누르면, 'TypeError: Cannot read properties of null' 라는 에러가 발생합니다. DB, users 폴더에는 새로운 회원정보가 잘 드렁가 있습니다. DB에는 잘 저장되는데, 프론트엔드에서 발생하는 에러일까요? 코드는 제가 거의 건든게 없습니다. 현재 제로초님이 Github 에 올려주신 코드에서 '비밀번호가 입력이 잘못되었습니다' 이부분 검증하는 부분은 추가되어 있습니다.
1 . node 버전 12.4 에 맞추기 이전까지는 16버전으로 문제 없이 실행되었는데 이번 실습에서는 에러가 발생하여 다른 수강생분들이 남겨주신 질문 참고해서 12.4버전으로 낮추었더니 빌드 에러가 사라졌습니다. 이때 맥 실리콘은 node 15 버전 미만은 지원하지 않아 nvm install 시 에러가 나는데요. 터미널에 아래와 같이 입력하면 해결되더라고요. Rosetta2 쉘을 사용하는거라고 합니다. arch -x86_64 zsh nvm install 12.4.0 참고 주소 : https://velog.io/@jeb1225/nvm-%EC%97%90%EB%9F%AC-no-such-file-or-directory-CXXc 2. sass 설치 node-sass 지원이 종료되어 sass 1.83.4 버전으로 설치하였는데 잘 빌드되었습니다. 이번 강의에서 유독 에러가 나서 해결하느라 시간이 들었는데 같은 에러 만나시는 분들께 도움이 될까 하여 공유드려요!
PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npx eslint --init You can also run this command directly using 'npm init @eslint/config@latest'. @eslint/create-config: v1.4.0 √ How would you like to use ESLint? · problems √ What type of modules does your project use? · esm √ Which framework does your project use? · none √ Does your project use TypeScript? · javascript √ Where does your code run? · browser The config that you've selected requires the following dependencies: eslint, globals, @eslint/js √ Would you like to install them now? · No / Yes √ Which package manager do you want to use? · npm ☕ Installing... npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslint added 2 packages, changed 1 package, and audited 799 packages in 2s 111 packages are looking for funding run npm fund for details 설치가 됐는데 .eslintrc.js파일에 아무것도 안 뜨고 eslint.config.mjs파일이 설치됐어요
PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npm run build > lecture-frontend-dev-env@1.0.0 build > webpack --progress 70% building 0/0 modules 0 activeC:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22 const findCacheDirP = import("find-cache-dir"); ^ TypeError: Invalid host defined options at Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22:23) at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Module.require (node:internal/modules/cjs/loader:1143:19) at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\index.js:19:15) at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Module.require (node:internal/modules/cjs/loader:1143:19) at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\loadLoader.js:18:17) at iteratePitchingLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at runLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:365:2) at NormalModule.doBuild (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:295:3) at NormalModule.build (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:446:15) at Compilation.buildModule (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:739:10) at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:981:14 at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:409:6 at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:155:13 at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:138:29 at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:346:9 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) Node.js v18.18.2
"devDependencies": { "webpack": "^4.41.5", "webpack-cli": "^3.3.10" } 수업과 동일한 명령어를 실행하려면 강의 내용과 동일한 버전을 사용하시면 문제 없이 실행됩니다. 버전이 바뀜에 따라 --help 결과물과 명령어 옵션들이 다소 변경되네요. (webpack major version이 4여도 변경 여부가 있습니다) 수업 노트에 webpack@4.41.5 버전을 사용하도록 안내해주시면 어떨까요?
안녕하세요. eslint 강의를 듣고 있습니다. 답변해주시면 감사하겠습니다! 버전은 아래와 같습니다. "@eslint/js": "^9.9.1", "@stylistic/eslint-plugin-js": "^2.6.4", "webpack": "^5.93.0", "webpack-cli": "^5.1.4" eslint 공식홈에 no-extra-semi 사용법을 확인하면 아래와 같이 나와있습니다. https://eslint.org/docs/latest/rules/no-extra-semi#rule-details This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js . 8.53.0 버전부터 deprecated가 되어서 stylistic 플러그인을 사용해서 쓰라고 되어 있습니다. 그래서 아래와 같이 설정을 했습니다. // eslint.config.js import js from "@eslint/js"; import stylisticJs from '@stylistic/eslint-plugin-js' export default [ js.configs.recommended, { plugins: { '@stylistic/js': stylisticJs, }, } ]; 그런데, no-extra-semi rule이 동작을 하지 않고 아래와 같이 rules안에 명시를 해줘야만 동작을 합니다. 플러그인만 명시하면 되는게 아니라 사용할 rule을 하나하나 명시해줘야만 하는건가요? // eslint.config.js import js from "@eslint/js"; import stylisticJs from '@stylistic/eslint-plugin-js' export default [ js.configs.recommended, { plugins: { '@stylistic/js': stylisticJs, }, rules: { "@stylistic/js/no-extra-semi": "error" } } ]; 그리고 추가적으로 궁금한 것은 deprecated 되었다고 했는데 왜 아래와 같이 eslint에서 "no-extra-semi" 를 사용할 수 있는걸까요? // eslint.config.js import js from "@eslint/js"; import stylisticJs from '@stylistic/eslint-plugin-js' export default [ js.configs.recommended, { rules: { "no-extra-semi": "error" } } ];
제가 백엔드 강의는 수강한 적이 없어서요, 대신 노드js 교과서 책을 구매해서 가지고 있는데.. 우선 프론트는 네트리파이로 배포 완료했습니다 https://admirable-donut-f22cc6.netlify.app/ 백엔드 배포는 선생님 책 노드js 교과서 722쪽 AWS 배포하기 부터 보면서 하면 별 문제없지 진행할 수 있을까요? 추가적으로 백엔드쪽 코드 수정이 필요할지.. 배포할 레포 구조는 아래 처럼 루트 폴더 하위에 백엔드, 프론트 폴더 각각 있습니다
1) "webpack": "^5.94.0", "webpack-cli": "^5.1.4" node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist 다른 질문글에 open index.html 을 했는지 모르겠지만 저는 잘 안되더라구요 차이점은 ./dist/main.js 에서 ./dist 입니다. main.js를 /dist/main.js/main.js 이렇게 만들어버리더라구요 그래서 요상한 에러들 때문에 해맸었습니다. 2) 제가 봤던 에러는 크롬 디버깅창에 main.js를 그대로 로딩하지않고 마치html처럼 <!DOCTYPE html> 이 첫줄에 추가된 체로 로딩이 되어서 unexpected token "<" 와 같은에러를 봤습니다. 혹시 왜 js를 html로 랩핑? 해서 읽어온 이유를 아시나요?
안녕하세요 제로초님 components 의 alias 경로가 오류가 나서요 질문 드립니다 저는 src 폴더를 추가해서 한번 더 감싼 구조에서 이에 맞게 alias 경로를 세팅했는데요 import { TextField, Button } from '@components'; 이렇게 불러오면 components 폴더의 index 파일이 자동으로 인식되는 걸로 알고 있는데, 에러가 뜨더라구요 그래서 import { TextField, Button } from '@components/index'; 로 해야 정상적으로 불러오던데 왜 index를 별도로 입력해야 하는지 모르겠어서요 반면 @assets alias 경로에 있는 icons는 index 입력 없이 index 파일을 잘 불러와서 문제가 없더라구요 // webpack.config.ts alias: { '@assets': path.resolve(__dirname, './src/assets'), '@hooks': path.resolve(__dirname, './src/hooks'), '@components': path.resolve(__dirname, './src/components'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@utils': path.resolve(__dirname, './src/utils'), '@typings': path.resolve(__dirname, './src/typings'), }, // tsconfig.json "paths": { "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@components/*": ["./src/components/*"], "@layouts/*": ["./src/layouts/*"], "@pages/*": ["./src/pages/*"], "@utils/*": ["./src/utils/*"], "@typings/*": ["./src/typings/*"] }
커스텀 훅에서 사용된 제네릭에 대해서 공부하다가 궁금한게 생겨서요. 아래 테스트 코드 에서 '+' 연산자는 'T' 및 'T' 유형에 적용할 수 없습니다. 라는 에러 코드가 발생하는 이유가 이해가 안 가서요 위 함수는 사용한다면 아래 처럼 숫자 또는 문자인 타입으로 쓰일텐데, 그러면 return 값에서 + 연산자가 number + number 또는 문자열 + 문자열로 실행되어 문제가 없을 것 같은데 에러가 뜨는 이유가 모르겠어서요 add<number>(1, 2); add<string>('1', '2'); 지피티에 질문해보니 함수 오버로드를 쓰거나 return 값에 any를 쓰라곤 하는데 잘못된 방법 같고 extends로 타입 제한을 걸어도 같은 에러가 뜹니다 function add<T extends number | string>(x: T, y: T): T { return x + y; } 제가 참고한 제네릭 레퍼런스 자료입니다 https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%ADgenerics_%EC%86%8C%EA%B0%9C
