-
[패스트캠퍼스] 프론트엔드 강의 3주 차 후기코딩/JS 2023. 3. 29. 14:50
-
[JavaScript 선행 학습]
바로 이어서 하게 될 스타벅스 클론코딩에 적용될 자바스크립트 코드를 미리 배워보는 과정.두 시간 남짓 되는 짧은 강의 시간에 한 타임 쉬어가는(?) 타이밍인 줄 알았지만... 어느샌가 나는 몇 번씩 반복 시청하면서 노트필기를 하고 있었다. 사실 이번 국비지원교육을 듣기 전까지는 자바스크립트 쪽은 무조건적으로 함수를 외우고 적용을 시켰기 때문에, js함수를 제대로 읽고 이해하지는 못했다. 하지만 이번 강의를 통해 자바스크립트 내에서 각각의 함수들이 쓰여지는 이유와 그 자리에 있는 의미를 제대로 알게 되면서 애매하게 위치해있던 퍼즐 조각들이 이제서야 제대로 맞춰지는 기분이 들었다.
제일 기억에 남는 부분은 DOM API 단락의 HTML 요소(Element) 검색/찾기 부분인데 내용은 단순하다. html 요소 중 가장 먼저 찾아진 요소 하나만을 반환한다는 것이다. 왜 이게 제일 기억에 남냐면... 이 단락부터 js코드를 제대로(?) 읽을 줄 알게 되었기 때문이다.
const boxEl = document.querySelector(".box"); // document.querySelecto는 box라는 클래스 중 가장 먼저 찾아진 요소 하나만 반환하겠다는 의미이다. boxEl.addEventListener("click", function () { console.log("Click~!"); }); // addEventListener는 이벤트가 발생하는지 청취하고 있다가 // 해당 이벤트'click'이 발생하게 되면, // 익명함수인 'function() {}'를 실행하겠다는 의미이다.
실습 : 왼쪽 하단의 브라우저에서 .box 클래스의 콘텐츠(box~!!)를 클릭하면,
오른쪽 상단의 자바스크립트 명령어대로 오른쪽 하단의 콘솔 창에 해당 로그가 뜨는 것을 볼 수 있다.-
수업내내, 스타벅스 클론코딩을 하기 전에 왜 [JavaScript 선행 학습]을 먼저 들어야 하는지 알 것 같았다. 강사님께서 강조하셨던 부분도 '우선 자바스크립트 명령어 체계에 익숙해져야 한다.' 였다. 개인적으로도 [JavaScript 선행 학습] 파트는 익숙하지 않고 이해도도 다른 파트에 비해 딸렸기에... 좀 더 반복해서 봤던 것 같다. 수업을 들으면 들을수록, 선행학습을 거치고 클론코딩을 시작하는 것과 그냥 클론코딩으로 들어가는 것은 엄청난 차이가 있을 거라고 예상됐기 때문이다.-
이번 [JavaScript 선행 학습]은 한 문장으로도 표현이 가능할 거 같다.
이보다 더 적절한 표현이 있을까?'아는 만큼 보인다'
-
'코딩 > JS' 카테고리의 다른 글
[패스트캠퍼스] 프론트엔드 강의 8주 차 후기 (0) 2023.05.02 [패스트캠퍼스] 프론트엔드 강의 7주 차 후기 (0) 2023.04.28 [패스트캠퍼스] 프론트엔드 강의 6주 차 후기 (0) 2023.04.21 [패스트캠퍼스] 프론트엔드 강의 5주 차 후기 (0) 2023.04.13 [패스트캠퍼스] 프론트엔드 강의 4주 차 후기 (0) 2023.04.06