수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
2022년 기준 웹팩 설정하실 때
제 webpack.config.js 입니다 참고하세요 모듈 설정하실 때 js로드 할 babel-loader, css 로드 할 style-loader, css-loader를 설정하시고 플러그인에서 HtmlWebpackPlugin 객체에서 쓸 템플릿을 설정해주세요 그리고 엔트리포인트 js파일에서 css파일을 import하세요 import './index.css 혹은 require('./index.css') 이런 식으로해주세요. const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: { index: './src/index.js', }, output: { filename: '[name].entry.js', path: path.join(__dirname, 'dist'), }, module: { rules: [{ test: /\.m?js$/, include: path.resolve(__dirname, 'src'), exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: ['last 2 versions'], debug: true }] ], plugins: ['@babel/plugin-transform-runtime'], } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ]}, // devServer: { // port: 9000, // }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], };
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
로또 구현
const SETTING = { name: 'Lucky Lotto!', count: 6, maxNumber: 45 } function getSingleNum(min, max) { return Math.floor(Math.random() * (max - min + 1)) + 1 } function getLottoNum() { let numSet = new Set() let {count, maxNumber} = SETTING while(numSet.size !== count) { let num = getSingleNum(1, maxNumber) if(!numSet.has(num)) numSet.add(num) } return [...Array.from(numSet).sort((a, b) => a - b)] } console.log(getLottoNum())
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
선생님, arrow 로 활용해서 스크립트 짜봤는데 왜 안될까요? ㅠㅠㅠ
var partOne = document.querySelectorAll(".one h2"); const h2_add = () => { partOne.classList.add("on"); }; const h2_remove = () => { partOne.classList.remove("on"); }; window.addEventListener("scroll", () => { var scrollPos = window.scrollY; console.log(scrollPos); const one = document.querySelector(".one").offsetTop; // .offset().top; if (scrollPos >= one) { h2_add(); } else { h2_remove(); } }); <section class="one"> <article class="one__inner"> <div class="one__inner-item"> <div class="desc"> <h2>Vision Description</h2> </div> <div class="photo"> <img src="img/1.jpg" alt="" /> </div> <button type="button">더보기</button> </div> <div class="one__inner-item"> <div class="desc"> <h2>Vision Description</h2> </div> <div class="photo"> <img src="img/1.jpg" alt="" /> </div> <button type="button">더보기</button> </div> </article> </section>
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
Cannot get 은 무엇이 문제인걸까요?
현재 버젼은 webpack 5.65.0 / webpack-cli 4.9.1 / barbel-loader 8.2.3 인 상황입니다. 알려주신 코드를 그대로 다 입력해보았고, 오타가 없는 것을 확인하였는데 접속시 계속 cannot get이라고 나옵니다. 경로가 잘못된건가 싶어 하나하나 다 확인해보았는데 결국 해결하는데 실패하였고, 여기저기 구글링을 하여 html-webpack-plugin을 추가해주니 해결이 되긴 하였는데 뭐가 문제였던 것인지 아직 잘 모르겠어서 질문드립니다. webpack을 아직 정확히 모르는 상황이라 질문이 조금 구체적이지 못한데 이런 경우에 어떤 것이 문제가 될 수 있을까요?
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
작업했습니다.
const SETTING = { name : "LUCKY LOTTO!", count : 6, maxNumber : 45, } const { count, maxNumber } = SETTING; const lotto = new Set(); let result; function getRandomNumber(maxNumber) { // 랜덤한 유일한 숫자값을 추출 while (lotto.size < count ) { let number = Math.floor(Math.random()*maxNumber + 1); lotto.add(number); } result = Array.from(lotto); return console.log(result); } getRandomNumber(maxNumber);
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
타입 관련 궁금한 점이 있습니다.
안녕하세요 toString.call()을 이용하여 타입을 확인할 수 있다고 했는데, 언제 사용하나요 ?? typeof()와 비교했을 때, 차이점이 무엇인가요?
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
Set 사용 안 한 풀이법
set 메서드 사용 안한 풀이법 공유드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>로또 추첨기</title> </head> <body> <div id="result"></div> <script> const $result = document.querySelector("#result"); const SETTING = { name: "LUCKY LOTTO!", count: 6, maxNumber: 45 }; const $message = document.createElement("div"); $message.textContent = `${SETTING.name}`; $result.appendChild($message); function getRandomNumber() { // 1~maxNumber 순서대로 숫자 배열 생성 const numbers = Array(45) .fill() .map((item, idx) => idx + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45] // 순서대로 생성된 1~45 숫자를 섞기 const randomNum = []; while (numbers.length > 0) { const random = Math.floor(Math.random() * numbers.length); // 랜덤 인덱스 뽑기 const tempArray = numbers.splice(random, 1); // 위에서 뽑은 랜덤 인덱스 위치에 있는 numbers의 요소를 뽑아 임시 변수에 담기 (splice는 배열로 반환됨) numbers의 배열 요소 개수가 하나씩 줄어든다. const value = tempArray[0]; // 임시 배열(tempArray)에 담긴 값을 변수에 담기 randomNum.push(value); } // 숫자 6개 뽑기 const result = randomNum.slice(0, 7); // 7번째 숫자는 보너스 const bonus = result.slice(6); result.pop(); // 화면에 결과 출력 for (let i = 0; i < result.length; i++) { const $ball = document.createElement("div"); $ball.className = "ball"; $ball.textContent = result[i]; //$ball.textContent = `${SETTING.name} ${result} 보너스 번호: ${bonus}`; $result.appendChild($ball); } const $bonusBall = document.createElement("div"); $bonusBall.className = "bonusBall"; $bonusBall.textContent = bonus[0]; $result.appendChild($bonusBall); } getRandomNumber(); </script> </body> </html>
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
로또
Set 자체는(add 메서드) 중복검열이 안되나요?.. 일단은 하긴 했습니다
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
이거 링크 없는거 맞죠?
https://tlhm20eugk.execute-api.ap-northeast-2.amazonaws.com/prod/lamda_get_blog_info 강의속에 나오는 링크 없는 링크맞죠?
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
export default 해도
만약 module.js 에 fn1(), fn2(), Object 1개 요렇게 export할수 있는게 3개가 있을 경우, export defalut fn1(); 으로 지정했을때 import로 전달 받으려면 {} destructuring 방법으로 지정을 하면 default한 fn1() 이 아닌 fn2() 나 Object를 받아올수 있나요?
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
로또 번호 생성 풀이는 없나요??
구현했는데 선생님 코드도 보고싶은데 다음강의에서 풀이하신다 했는데 없어서요
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
예제 오류 입니다.
const name 선언으로는 setName 으로 이름 변경을 하면 안될 것 같습니다. name 변경 시 "Assignment to constant variable" 오류가 발생합니다. 수정이 필요할 것 같습니다.
- 해결됨모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
로또 번호 생성기 소스코드
function makeLottoNumber() { const lottoList = new Set(); while (lottoList.size < (CONFIG.bonus ? 7 : 6)) { const random = Math.floor(Math.random() * CONFIG.maxNumber + 1); lottoList.add(random); } console.log(CONFIG.title); const result = [...lottoList]; if (CONFIG.bonus) { const bonusNum = result.pop(); return { number: result, bonus: bonusNum }; } else { return { number: result }; } } const CONFIG = { title: "Happy Lotto Time!", maxNumber: 45, bonus: true, }; console.log(makeLottoNumber());참고용으로 올립니다.
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
강의에서 사용하시는 툴이 궁금해요
안녕하세요~ 이제 강의를 듣기 시작했는데 사용하는 툴이 무엇인가요??
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
풀이가 없어서
const SETTING = { name: 'lotto', count: 6, maxNumber: 45, lotto : new Set() } ;(function ({ maxNumber, count, lotto }) { while(lotto.size < count) { lotto.add(Math.round(Math.random() * maxNumber)); } const result = Array.from(lotto).sort((a, b) => a - b); console.log(result); }(SETTING));
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
this 바인딩 질문드립니다~
안녕하세요. 수업과 관련된 질문은 아니지만 this 바인딩이 좀 햇갈려서 질문드립니다. 아래와 같은 코드가 있다고 했을 때, myObj.runFunc 메소드에 매개 함수 func의 내부 코드에서는 절대 myObj.data 프로퍼티에 접근할 수 없는 건가요? 혹시 접근할 수 있는 방법이 존재하나요? const myObj = { data : 200, runFunc : function(func){ func(); } }; myObj.runFunc(function() { console.log(this.data) });
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
bundle.js 내용이 index.js와 동일합니다
선생님 안녕하세요, 강의 너무 잘 듣고 있습니다. 다름이 아니라 가이드주신대로 쭉 따라했는데요, 저는 bundle.js가 만들어지면 console.log("start project by webpack"); 이라는 내용으로만 만들어지네요. 보니까 npm run start할때도 bundle.js는 40byte밖에 안되는것 같습니다 (선생님 강의에는 2.51kb더라고요). 혹시 추정되는 원인이 있을까요?
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
로또 번호 생성기 풀이
const SETTING = { name: 'LUCKY LOTTO!', count: 6, maxNumber: 45, }; function getRandomNumber({ count, maxNumber }) { let lottoSet = new Set(); const minNumber = 1; for (let i = 0; i < count; ) { // 두 값 사이의 난수 생성 && Math.random()이 0이 출력될 확률이 낮지만 가능해서 보완 코딩 처리. const num = parseInt(Math.random() * (maxNumber - minNumber) + minNumber); if (!lottoSet.has(num)) { lottoSet.add(num); i++; } } return lottoSet; } const colorSet = getRandomNumber(SETTING); // console.log(colorSet.values()); let cnt = 1; colorSet.forEach((v) => { console.log(cnt++, v); });
- 해결됨모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
전 html 파일을 만들어서 해결해봤습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Exam2</title> </head> <body> <h3>Destructuring, Set 활용한 Lotto 번호 만들기</h3> <ol> <li>유일한 값을 추출하는 과정에서 Set을 활용</li> <li>getRandomNumber 함수를 만들어 변수를 전달하는 과정에서 destructuring을 사용</li> </ol> <div style="border: 1px solid black"> <pre> const SETTING = { name : "LUCKY LOTTO!", count : 6, maxNumber : 45 } function getRandomNumber(maxNumber) { // 랜덤한 유일한 숫자값을 추출 } </pre > </div> <p><span class="lottoName">0</span> : <span class="lottoNumber">0</span></p> <script> const numbers = new Set(); const SETTING = { name: "LUCKY LOTTO!", count: 6, maxNumber: 45, }; function getRandomNumber(maxNumber, numbers) { // 랜덤한 유일한 숫자값을 추출 while (numbers.size != 6) { numbers.add(Math.floor(Math.random() * 45 + 1)); // 1 ~ 45 } } function settingText(name, numbers) { const lottoName = document.querySelector(".lottoName"); const lottoNumber = document.querySelector(".lottoNumber"); const lottoNumbers = Array.from(numbers); lottoNumbers.sort(function (a, b) { return a - b; }); lottoName.innerText = name; result = ""; for (let data of lottoNumbers) { result += data + " "; } console.log(result); lottoNumber.innerText = result; } const { name, maxNumber } = SETTING; getRandomNumber(maxNumber, numbers); settingText(name, numbers); </script> </body> </html>
- 미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
newArr에 map으로 묶은 fucntion 인자들은 어디서 받아오는 값인가요?
let newArr = [1,2,3,4,5].map(function(value, index, object) { return value*2; }) 받아오는 값이 3개인데 어디서 전달받는건지 궁금합니다.