엘리의 드림코딩 4

[엘리의 드림코딩 JS] 자바스크립트 프로처럼 쓰는 팁✨

https://youtu.be/BUAhpB3FmS4 1) Ternary Operator (삼항 연산자) /** Ternary Operator */ { // 💩Bad code { function getResult(score) { let result; if (score > 5) { result = "👍"; } else { result = "👎"; } return result; } console.log(getResult(6)); } // ✨ { function getResult(score) { return score > 5 ? "👍" : "👎"; } console.log(getResult(6)); } } 2) Nullish coalescing operator ( + OR 논리 연산자와의 차이) /** Null..

[엘리의 드림코딩 JS] ES6 - ES11 핵심 문법들

https://youtu.be/36HrZHzPeuY 1) ES6에 추가된 기능들 : Shorthand property names, Destructuring Assignment, Spread Syntax, Default Parameters, Tenary Operator, Template Literals /* * Shorthand property names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const ellie1 = { name: "Ellie", age: "18", }; // 전역 변수 const name = "Ellie"; const age = "18"; // 💩 ..

[엘리의 드림코딩 JS] 직접 쇼핑몰 사이트 HTML, CSS, JS로 만들기

https://youtu.be/We2Kv1HMGvc 이제까지 배운 JavaScript, 그리고 HTML과 CSS를 활용해 동적으로 움직이는 온라인 쇼핑몰을 만드는 실습! 뒤에 있을 해설 강의를 아예 안보고 한 5시간 정도 걸려서 혼자 만들었다. 프로젝트 하는 동안 react와 jsx만 써오다가, Vanilla JS로 DOM을 조작하는 방식을 하게 되니 querySelector, createElement 등 예전에 배운 메서드를 다시 복습하게 됐다. 그리고 CSS media query를 배운 후 자주 안쓰다 보니 많이 까먹어서 다시 찾아봤다(부끄럽군..복습 열심히 해야지😥) 1. 설계(개발 순서) 항상 플젝 할 때 본격적인 코드 구현 전에는, 저렇게 디자인을 태그로 묶어서 개발할 부분을 나눈다. 그래야 나..

[엘리의 드림코딩 JS 보충] 16. 함수 정의, 호출, 그리고 콜백 함수

https://youtu.be/-cAPq25P-68 함수에 대해 소개하는 아주 기초적인 부분이지만, 혹시나 내가 놓친 부분이 있을 수 있는데다 기초를 잘 이해하는 것이 가장 중요하니 넘기지 않고 들었다. // 가령 똑같은 기능을 여러번 반복하는 코드를 작성한다 해보자. const num1 = 1; const num2 = 2; const result = num1 + num2; console.log(result); const num3 = 1; const num4 = 2; const result2 = num3 + num4; //... 이렇게 계속 쓸 순 없잖아? // 그러니까 특정 기능을 재사용할 수 있는 함수로 만드는거야! function add(a, b) { // 함수 호출 전까지 a,b는 undefine..