-
[패스트캠퍼스] 프론트엔드 강의 4주 차 후기코딩/JS 2023. 4. 6. 16:00
-
[JavaScript 선행 학습]을 통해 미리 자바스크립트 코드를 체험(?)한 뒤 접한 스타벅스 클론코딩.
제일 신선했던 것은 담당 강사님께서 내가 기존에 학원에서 배우고 구글검색을 통해 습득했던 방식들보다 더 깔끔한 코드로 클론코딩을 진행하셨다는 것이다.- position / flex
특히 정렬과 배치를 구분해서 코드를 짜는 부분은 감탄에 감탄... 이때까지의 나는 flex로만 배치하고 정렬하고 position은 특별한(?) 위치에 놓을 때나 특정 컨테이너에 가둬야 할 때(?) 사용했었는데 강사님께서는 되도록 레이아웃의 큰 틀인 초반 배치는 position을 활용해서 하셨고, 세부적인 정렬 부분에서 flex를 쓰셨다. 어떤 방식이 좋고 나쁨을 떠나, 다양한 방식으로 코딩을 된다는 것을 말만 들었지 똑같은 상황에 다른 코드를 짤 수 있다는 것을 직접 눈으로 본 적은 없어서 그야말로 강의 내내 신세계였다. 마치 우등생의 수업시간 노트필기를 열람하는 기분이랄까... 어쩜 저렇게 깔끔하게 코드를 작성할까 매번 감탄하면서 봤던 것 같다.-
사실 클론코딩의 힘든 점 중 하나가 자바스크립트 함수 부분이 숨겨져 있을 때이다. 내가 그동안 혼자서 했던 클론코딩도 대부분이 숨겨져 있었기 때문에 그 비슷한 동작을 하는 코드를 구글검색을 통해 찾아서 복붙 하는 형식으로 진행을 했었다. 학원 수업에서도 자바스크립트 이외의 다른 부분에 더 중점을 뒀었기 때문에 딱 복붙 할 수 있는 정도의 기초지식만을 알려줬던 것 같다. 그래서 더욱더 자바스크립트를 제대로 배우고 싶다는 갈망이 있었다. 그렇기 때문에 학원을 다니면서 클론코딩도 몇번 해보고 포폴 시간에 개인포트폴리오 페이지도 직접 만들어본 경험이 있었던 나는 스타벅스 클론코딩을 하면서 접하게되는 자바스크립트 함수들은 기본적인 웹퍼블리싱을 할 때 꼭 필요한 요소들이라는 것을 단번에 알 수 있었다. 그중 인상 깊었던 메소드는 scroll 관련 메소드였는데 lodesh와 gsap이라는 라이브러리를 가져와서 적용시키는 것이었다.// _.throttle -> scroll 이벤트일 때 많이 사용되는 메소드 (로데쉬라는 라이브러리에서 사용할 수 있는 기능) // _.throttle(함수, 시간) window.addEventListener( "scroll", _.throttle(function () { console.log(window.scrollY); if (window.scrollY > 500) { // 배지 숨기기 // gsap.to(요소, 지속시간, 옵션); gsap.to(badgeEl, 0.6, { opacity: 0, display: 'none' }); } else { // 배지 보이기 gsap.to(badgeEl, 0.6, { opacity: 1, display: 'block' }); } }, 300)
스크롤 메소드 관련 라이브러리 다운로드는 아래의 링크에서...
Lodash cdn https://cdnjs.com/libraries/lodash.js/4.17.20
GSAP cdn https://cdnjs.com/libraries/gsap/3.6.0-
사실 내가 이번 국비지원교육인 내일배움을 통해 프론트엔드 종합반을 듣게 된 이유는 자바스크립트 쪽을 좀 더 제대로 배워보고 싶어서였다. 그전까지는 쉬어가는 타이밍으로만 생각하고 좀 안일하게(?) 들었는데 강의를 들으면 들을수록 정신바짝 차리지 않으면 진도 못 따라가겠구나 싶었던 찰나에.. 클론코딩 파트에서 뒤통수를 제대로 한방 맞은 느낌이 들었다. 아직 커리큘럼에서는 절반정도밖에 지나지 않았지만, 어느 파트 하나 버릴 게 없는 알찬 구성에 그동안의 내 마음가짐을 반성하게 되는 한 주였다.-
'코딩 > JS' 카테고리의 다른 글
[패스트캠퍼스] 프론트엔드 강의 8주 차 후기 (0) 2023.05.02 [패스트캠퍼스] 프론트엔드 강의 7주 차 후기 (0) 2023.04.28 [패스트캠퍼스] 프론트엔드 강의 6주 차 후기 (0) 2023.04.21 [패스트캠퍼스] 프론트엔드 강의 5주 차 후기 (0) 2023.04.13 [패스트캠퍼스] 프론트엔드 강의 3주 차 후기 (0) 2023.03.29