🔥2022년 새로운 자바스크립트 마스터리 (ES6+ 최신문법) 강의가 런칭 되었어요. 유튜브보다 체계적으로 꼼꼼하게 기본&고급 내용 전부 배워보고 싶으시다면 → academy.dream-coding.com/courses/javascript 요즘 올림픽 경기 재밌게 보고 계신가요? 몇년동안 땀흘리며 열심히 준비한 선수들을 응원하면서, 나도 더 열심히 살아야겠다고 자극 받고 있어요 🔥 여러분들도 아자아자! 📒 예제 코드 깃 리파지토리 ⇢ github.com/dream-ellie/learn-javascript 📓 자바스크립트 재생 목록: ru-vid.com/group/PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2
우울증이 심해져 무언가 집중할 만한 일을 찾던 중 우연히 엘리님 영상을 보고 낯선 개발 공부를 시작하게 되며 용기를 얻곤했는데, 다시 자신감도 사라지고 모두 포기하고 싶어진 요즘에도 틈틈히 올라오는 엘리님 영상을 보니까 그때 첫 마음도 떠오르고 포기하지 말아야겠다는 생각이 드네요. 항상 이렇게 밝은 에너지로 힘이 되고 도움이 되는 영상들을 올려주셔서 항상 너무너무 감사드립니다! 영원한 제 멘토세요!
9:37 이렇게 하면 item에 detail 값이 들어가고 shirt0 === item이므로 item 객체가 오염되는 것을 원치 않으려면 Object.assign({}, item, detail)으로 써야합니다! 11:40 concat은 지금까지 기존 배열에 다른 배열의 값을 추가하는 것으로 알고 있었는데 알고보니 새 배열을 반환한 것이었군요 12:52 person.job?.title에서 job이 없을때 정확히는 undefined 입니다. 따라서 nullish polishing이 가능한 것이죠. 13:25 backtick키는 물결표와 같은 키를 쓰죠 16:43 하지만 배열 API들도 내부적으로는 각 원소들에 하나씩 연산하기 위해 루프가 사용되는데요, 이 예시도 루프를 3번 돌기 때문에 썩 좋은 코드는 아닙니다. 루프는 최소화시켜서 한번만 돌리는 것이 좋으므로, 꼭 재활용이 필요하지 않다면 배열 API도 하나만 쓰는 것이 좋습니다. 본 예제같은 경우에는 items.reduce((sum, num) => (num % 2)? sum : sum + num * 4, 0)으로 합칠 수 있습니다. 각 원소별로 2의 나머지가 있는지 확인하고 2의 나머지(1)가 있는 홀수는 더하지 않고 기존 합을 그대로 다음 원소로 넘기고 나머지(0)가 없는 짝수는 합에서 원소에 4를 곱한 값을 더하고 넘깁니다. 2번째 인자의 0은 초기값으로 첫 원소에서는 합의 값을 0으로 받습니다. 초기값을 설정하지 않으면 첫 원소가 합으로 넘어가서 두번째 원소부터 반복을 돕니다. 마지막 원소까지 연산이 끝나면 마지막에 넘긴 값이 반환됩니다. 17:34 async/await을 사용하기 어려울 때 Promise를 깔끔하게 쓰고 싶다면 새로운 promise를 이전 promise의 then 콜백 함수(then의 인자로 들어가는 함수; Promise 작업이 완료되면 실행됨)에서 리턴해주고 이전 promise에서 then을 이어서 해당 콜백에서 새 promise 작업이 완료될 때 실행할 작업을 작성해 주면 됩니다. 이런 식으로요: function displayUser() { let user; fetchUser().then(usr => { user = usr; return fetchProfile(usr); }).then(profile => updateUI(user, profile)) // profile 안에 user값이 포함되어 있다면 let으로 변수를 별도로 등록하는 대신 그것을 씁시다 } async/await가 나오기 이전에는 then 콜백 안에 콜백을 넣지 않고 이렇게 콜백 밖에 then을 이어주는 것이 Promise의 정석이었습니다. 사실 Promise가 나오기 이전에는 then 메소드로 따로 빼지 않고 비동기 함수에서 콜백함수를 바로 인자로 받았는데요, 당시에는 연속되는 비동기 작업의 콜백함수도 그 콜백함수 안에 넣어서 함수가 깊어져 (시각적으로는 들여쓰기가 무한히 들어가) 가독성이 떨어지는 콜백 지옥에서 벗어나기 위해 연속된 콜백을 따로 빼는 Promise가 나온 것이지요. 따라서 저렇게 then then then 들어가는 것은 금물입니다.
와 포인트 정리 감사합니다! 🔥 다른 분들께 도움이 될 것 같아 📌 핀 해 둘께요 :) 16:43에 대해서 중요한 포인트를 찝어 주셨어요! 배열마다 루프를 도는것도 문제지만 함수들마다 각각 다른 배열을 만들기 떄문에 메모리도 많이 차지하죠 지금 예제 같은 경우는 심플하게 하나 안에서 충분히 작성할 수 있기 때문에 하나로 작성하는 것이 좋고, 재사용 가능하거나, 정말 가독성이 중요한 경우에는 저렇게 따로 작성하는것도 좋아요 🤓
엘리가 최고에요♥ 엘리님 강의 듣고 JS 사랑하게 되었어요 추가+) 브라우저101 강의 진짜 꼭 들으세요 여러분... 유료인건 유료인 이유가 있습니다. 유튜브에 올려주신 무료 js 강의 쭈르륵 듣고 브라우저101 강의 구매해서 들으면... 내 안에서 문제를 해결할 힘이 생긴다는게 어떤 기분인지 알게됩니다.
역시 간결 명료 명쾌 엘리선생님 bb 처음에 자바스크립트 문법 강의들을때 긴가민가했었는데, 리액트 강의 수강하고 계속 따라쳐보니까 완벽히 이해가 되었어요. 코딩은 머리가 아닌 손으로 익히는게 맞나봅니다. 마지막 퀴즈처럼 자료구조 관련해서도 다뤄주셨으면 좋겠어요. 응원합니다. :)
드림코딩 nodejs 강의 듣다가 모르는 자바스크립트 문법이 많이 나와서 찾아왔어요 😵 제가 얼마나 💩 같은 코드를 쓰고 있었는지 깨닫고 가요 ㅎ.ㅎ 한번 더 영상 복습하면서 내것으로 소화하고 강의로 돌아가야겠어요. 🐾 async, await은 엘리쌤 강의를 들으며 무한 반복하다보니 처음엔 1도 이해안갔는데 어느 순간 저도 모르게 구현하고 있을 때 쾌감!!을 느껴요 ㅎㅎㅎ 다른 문법들도 제것으로 소화하겠습니다 (꿀꺽 🤸♀️)
안녕하세요 2년차 병아리 개발자입니다 :) 두번째 팁 ?? 대신 || 를 주로 쓰곤 했는데, 차이점이 궁금해서 바로 F12눌러서 테스트 해보니, ?? 는 빈스트링 ("") 과 0은 true 처리 되고 || 는 빈스트링은 false 처리 되는군요. 라고 써놓고 테스트 후에 영상을 계속 보니 이미 설명해주셨군요 ㅋㅋㅋㅋ 암튼 잘 써먹(?)겠습니다. :) 감사합니다 선배님!
마지막 퀴즈 짚고 넘어가야할 점이 있습니다. 파이썬의 경우 최근 버전은 dict(objcet)를 이용해서 배열의 중복을 제거해도 아이템들의 순서가 바뀌지 않습니다. 그런데 set는 기본적으로 원소의 순서는 보장되지 않는걸로 알고 있습니다. 자바스크립트도 순서를 유지하는 것을 보장하며 중복이 제거 되는 우아한 코드를 알고 싶네요. 영상에 나온 예제는 순서가 유지된것 같습니다. 개가 몇마리 없어서...
우어... 마지막 console.log([...new Set(array)]); 는 잘 이해가 안가네요... Set 은 중복을 허용하지 않는다는 것은 알겠는데, 앞에서 Spread 가 먼저 쓰였으니까, 각각의 item copy 가 먼저 발생하고 그 뒤에 Set 을 붙이는거 아닌가요?? 아웅... 햇가리네요 ㅎㅎ
선생님 정말 감사합니다. $("#tbl").on("click",".title #chkAll",function(){ if($(this).is(":checked")){ $("#tbl .chk").prop("checked",true); }else{ $("#tbl .chk").prop("checked",false); } }) 라는 구문을 $("#tbl").on("click",".title #chkAll",function(){ return $(this).is(":checked") ? $("#tbl .chk").prop("checked",true) : $("#tbl .chk").prop("checked",false) }) 로 정말 간단하게 바꿨습니다. 제이쿼리로 먼저 개념을 배우고 있는데, 순수 자바스크립트는 제이쿼리로 기본 CRUD를 구현할 수 있을 때부터 배우면 될까요? 바닐라 JS가 많이 어렵다는 이야기가 많아서 걱정되는데 어떤가요?