69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
@babel/core
@babel/core라는 것은 파싱과 출력을 담당하고 플러그인을 통해서 변환과정을 거치는거죠 ?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
안녕하세요 proxy 설정 관련해서 질문이 있습니다.
먼저 좋은 강의 정말 감사드립니다! 실습을 진행하다가 막히는 부분이 하나 생겼습니다. 선생님께서 설명해주신대로 webpack.config.js 파일에 다음과 같이 설정해주었습니다. devServer: { proxy: { '/api': 'http://localhost:8081', } } 이렇게 해주었는데 계속해서 요청을 보낼 때 localhost:8080 으로 날아가서 CORS가 지속적으로 발생하고 있습니다.. 구글링을 해보다가 changeOrigin : true로 설정하면 된다는 글들이 많아서 똑같이 해보았지만 해결되지 않고있습니다. 무엇이 문제일까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
env 관한 질문입니다.
NODE_ENV=production npx webpack 이렇게 사용하게 되면 process.env.NODE_ENV가 production으로 바뀌고 나서 실행되는것은 알겠습니다. 근데 nodejs에서는 운영체제마다 환경변수 바꾸는 명령어가 달라서 dotenv나 cross-env를 활용하여 .env파일을 읽어서 환경변수를 설정해주는것으로 알고있습니다. 여기서 질문은 1. wepback에서 mode 라는것에 development가 있다면 웹팩에서 자동으로 dotenv나 cross-env와 같이 process.env.NODE_ENV 환경변수를 development로 만들어주는 것인가요? 2. DefinePlugin을 통해서 new DefinePlugin({ 'process.env.NODE_ENV' : 'production'})이렇게도 실무에서 사용되는지 궁금합니다.
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
target 관련 질문
안녕하세요. 수업 잘 듣고 있습니다. 질문이 있어 글을 올립니다. 만약 targets : {ie: 11}을 지원하게 된다면 ie 11보다 최신 브라우저인 사파리, 오페라, 엣지,크롬들은 전부 지원된다고 보면 되나요? 그리고 ie11도 버전이 있는것으로 알고 있는데 ie11의 모든버전을 제공하는 것이겠죠?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
자주 사용 하는 플러그인에서 childProcess is not defined 에러가 뜹니다.
상단에 추가 아래 코드 추가 Author쪽 아래와 같이 변경 하면 문제없이 적용되는 건 확인했습니다. 현재 webpack 버전은 4.44.1입니다.
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
수업을 듣고 궁금한 점이 있습니다!
우선 좋은 강의 감사합니다. 😄 개발 환경을 구현하고 나서 그 후에 이 환경에서 어떤 방식으로 개발을 진행하는지 궁금합니다. 기본적인 프로젝트 구조나, routing 등 프론트엔드 실무에서 사용하는 여러가지들을 해당 환경에 적용하는 방법을 알 수 있을까요? 항상 구조가 짜여져 있는 환경에서 개발을 하다가 직접 환경을 구성하는 연습을 해보니 감이 잘 잡히지 않네요... ㅠ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹팩 플러그인 질문입니다.
webpack안에 플러그인들을 [new fooPlugin()] 이런식으로 전달하게 되는데, 왜 이렇게 전달하는 걸까요? 그냥 [fooPlugin] 으로 전달하면 안되나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
copy-webpack-plugin spec 변경
질문은 아니고 몇 가지 정보입니다. windows 환경에서 build 시 production과 development 설정 시 아래와 같이 합니다. 중요한 부분은 && 양측에 공백이 없어야 합니다. "build": "SET NODE_ENV=production&&webpack --progress", 추가적으로 강의 내용과 현 시점 기준 copy-webpack-plugin 의 spec이 변경된 게 확인되어 글 남깁니다. patterns 라는 게 새롭게 추가된 것으로 확인됩니다. new CopyPlugin({ patterns: [ { from: "./node_modules/axios/dist/axios.min.js", to: "./axios.min.js", }, ], // { // from: "./node_modules/axios/dist/axios.min.js", // to: "./axios.min.js" // }, }),
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
4-webpack/1-dev-server 실습 시 빌드 에러
4-webpack/1-dev-server 실습을 위해 해당 브랜치로 이동 후 npm i 으로 모듈을 설치하던 도중 스크린샷과 같은 에러가 확인됩니다. 두 번째 터미널에서 ./server 로 이동 후 npm i 으로 모듈 설치 후 8081번 포트로 웹서비스는 구동이 잘 되었습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
플러그인설치시 의존성
어떤건 devDependencies 에 설치하고 어떤건 dependencies에 플러그인들을 설치하는데 어디에 하던 상관없나요??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
자바환경에서도 이 설정들이 가능한가요?
리액트나 뷰를 사용하거나, 적어도 rest api같은 걸루 서버에서 api만 받아서 사용하는 거라면 노드환경을 구성해서 이 설정들을 만들어서 사용할 수 있을 것 같습니다. 그런데 만약 Java&jpa&timeleaf를 쓰는 상황이라면 바벨조차도 사용할 수 없는 건가요?? 이런 경우에는 그냥... 최신 문법 하나도 못쓰고 옛날 방식으로 짜야하나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
DefinePlugin 에서
TWO가 전역변수로 접근된다고 하셨는데 window.TWO를 콘솔찍어보면 undefined 입니다. TWO 변수는 어디에 있는건가요...
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
eslint 질문입니다.
package.json 파일에서 { scripts : { lint : "eslint . --fix" } } 이렇게 설정을 했습니다. vscode 에디터에서 eslint 플러그인을 설치했고 저장시에 lint가 자동적용되게 했습니다. 그런데 json 파일이나 .eslintrc.js 파일이나 .scss 파일 등에도 적용하고 싶을 땐 어떻게 해야하나요? 우선 저는 vscode에서 prettier 플러그인을 설치하고 workspace.json에서 "editor.codeActionsOnSave": { "git.ignoreLimitWarning": true, "source.fixAll.eslint": true }, "editor.formatOnSave": true editor.formatOnSave : true를 추가해서 해결했습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
axios오류가 발생합니다ㅠㅠ
안녕하세요! 강의 정말 잘 수강하고 있습니다! 바벨 파트를 수강하다가 궁금한 점이 있어 질문 남김니다. babel에서 corejs 설정은 ie에서 axios 오류('Promise'이(가) 정의되지 않았습니다.)를 해결 할 수 없는 걸까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
external은 어떤 식으로 활용해야 하나요?
강의에서 axios를 external로 빼서 index.html에서 바로 불러오도록 하게 하는 것이 나와있었는데, 실제로 적용해보려고 하니 고민이네요. 일단은 뭘 그런 식으로 빼고 어떤 건 그냥 둘 건지 결정해야할 것 같은데, 어떤 식으로 판단하나요? 최대한 external로 빼서 하는 게 좋은 건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
eslint를 설정하고 나니 온통 빨간줄이 뜨는데 어떻게 해야 하나요?
안녕하세요. 좋은 강의 해주셔서 감사합니다. 웹팩이나 바벨 등에 대해서 막연하게 복잡할 것 같다, 신경 쓸 게 많을 것 같다 이렇게 생각하고 있었는데, 강의를 들으면서 많이 정리가 된 것 같습니다. 저 그런데 eslint를 설정하고 나서 온통 빨간 줄이 뜨는데요. require에는 'require' is not defined. eslint(no-undef)라고 나오고요. 라인 끝에 있는 comma나 semicolon 뒤에는 Delte `CR` eslint(prettier/prettier)라는 경고 메시지가 뜹니다. 노드 기본 모듈에 대해서도 온통 not defined가 뜨고 온통 난리인데요. 제가 뭔가 설정을 잘못한 것일까요? 현재 에디터는 vscode 사용하고 있고, 터미널에서 npm run lint로 해서 eslint src --fix를 실행시켰을 때는 결과로 나오는 게 딱히 없습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
NODE_ENV 설정 문의
보통 MAC 이나 우분투에서 NODE_ENV 를 설정할 때 export NODE_ENV=development 처럼 앞에 export 를 붙이는데 NODE_ENV=development npm run build 처럼 한번에 입력할 때는 export가 필요없는건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
HtmlWebpackPlugin에서 app.js console.log와 index.html에서 값이 다르게 나옵니다.
NODE_ENV=product npm run build후 app.js의 console.log(process.env.NODE_ENV) 는 development로 출력되고 html.index에서는 product로 처리되어 타이틀 이름에 (개발용)이 붙지 않았습니다. 이게 왜 이렇게 되는지 궁금합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
url-loader와 file-loader의 관계
url-loader 에서 설정한 용량을 넘어가면 file-loader 에 대한 설정이 없어도 자동으로 file-loader를 사용하게 되는건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
첫번째 실습 ui 깨짐 문제
강의 정말 잘 듣고 있습니다. 첫번째 실습에서 사용된 샘플 페이지가 사파리에서 ui가 살짝 깨지네요 ㅋㅋ; 포함된 이미지가 max-width 로 설정된 너비는 제대로 표시하는데, 높이는 크롬에서는 자동 계산이 되고 사파리에서는 아래처럼 표시됩니다. 별 내용은 아니지만 강의의 완성도를 위해서 굳이 공유해드립니다. ㅠ 그리고 여담이지만, 초반부에 로컬로 설치된 웹팩 실행파일을 절대경로로 찾아서 실행시키던데.. local 로 설치된 모듈은 npx로 오버헤드 없이(별도 추가 다운로드 없이) 실행 가능합니다 npx webpack 과 같이.. 부수적인 설명이 필요하여 생략한 내용이겠지만, 이 역시 강의의 완성도를 위해 굳이 공유해드립니다 ㅋㅋ;