[2024.04.29] JS 딥다이브 스터디 모집 시작 + 개인 과제 해설

자바스크립트 딥다이브 스터디 모집 시작 

내배캠 본 과정 시작하는 날 매니저님이 지난 기수때는 스터디도 모여서 했다는 걸 듣고 2주 동안 기다렸지만 새로운 스터디가 생기지 않았다! 매일 '내가 올릴까?' ↔ '누군가 멋지게 모아주시지 않을까?'의 무한 챗바퀴를 열심히 타던 중 더 늦으면 최종 프로젝트 때도 딥 다이브 책만 읽고 있을 것 같아 진짜 눈 꼭 감고 올렸다...(글 작성하고 올리는데만 몇 시간이 걸렸어요ㅠㅠ)

글 쓰고 올리기까지 진짜 한 세월..

모던 자바스크립트 딥다이브라는 책은 혼자 읽어도 충분히 유익할테지만, 점차 다른 사람의 코드를 읽어야 하는 시간이 많아지자 타인이 코드의 로직을 짤 때, 혹은 개발자라는 직군을 준비하면서 어떤 생각과 관점을 가지고 있는지 공유하는 것이 상당히 좋은 경험이라는 것을 알게 되었다. 그렇기에 서로의 생각을 공유하고 긴 캠프 과정동안 서로 재밌게 떠들기도 하는 그룹이 있으면 좋을 것 같아 스터디 모집글을 올리게 되었고,  벌써 몇 분 관심을 가져주셨다(행복)˶ᵔ'ヮ'ᵔ˶

이번 개인 프로젝트만 하더라도 바닐라 자바스크립트만을 사용해야하는 상황 속에서도 누군가는 한 페이지로 깔끔하게 작성했고, 누군가는 가상 DOM을 이용해 컴포넌트 단위로 기능을 구성하였으며, 튜터님의 코드는 기능별로 js파일을 분리해서 가독성이 좋은 코드를 구성하셨다. 이처럼 하나의 문제를 두고 다양한 해결방법을 알아가는 것은 혼자서 한다면 시간이 많이 걸릴테지만, 모아놓은 다른 여러명의  코드를 보면 적은 시간안에 매 코드마다 새로운 시각으로 접근할 수 있었다.

 

때문에 이번에 시작하게 될 자바스크립트 스터디도 똑같은 책, 똑같은 분량을 읽지만 누군가는 A를 중요시 여기고, 또 다른 사람은 B라는 개념을 더 중요시 여길 수도 있는 재밌는 상황이 발생할 수 있을 것 같아 기대가 된다. 솔직히 몇 분이나 스터디에 관심있을지 모르는 상황이기에 하나부터 열까지 세세하게 포맷을 다 정해놓지는 못했지만, 큰 틀이 있다면 세부적인건 잘 조율해 나갈 수 있을 거라는 자신감은 있다.  혹시나 스터디에 관심있으신 분이 이 글을 본다면 궁금한 점은 편하게 연락 부탁드릴게요!

---

개인과제 해설 영상_Feat. 튜터님

오늘은 개인과제 마감일이었고, 마감 시간이 되자 튜터님의 개인과제 해설 영상이 올라왔다. 코드에 대해 간략히 어떻게 구성하면 기능이 동작하는지 설명해주실 줄 알았는데, 파일 구조부터 자바스크립트의 이벤트 동작 그리고 여러 고려사항들을 주셔서 정~~말 유익했다!!

지금도 코드를 고치고 있어서 수정 예정 사항만 적어보려고 한다.

1. 컴포넌트 단위로 구성할까 하다가 결국 한 페이지에 js를 기능별로 쪼개놨었다

  → 기능별로 js 파일을 나눠 좀 더 가독성을 높힐 방법을 찾을 예정이다.

2. defer와 type="module"의 의미는 각각 알았는데, 비슷한 역할을 하는 건줄은 몰랐다. 좀 더 자세히 알아봐야겠다고 메모!
3. 튜터님 코드를 보면 :root에 css variable 변수를 지정해두고 색상을 사용하셨다. 굳이 개인 프로젝트에 변수명을 넣어야 할까 고민도 했었는데, 확실히 개인 프로젝트라도 사전에 지정해두고 사용하면 색상의 통일성 뿐만 아니라 css 코드의 가독성도 높아지는 효과를 얻을 수 있는 것 같아 사용해보려 한다.

+ vanilla JS에서는 html 태그에 이벤트 핸들러를 할당하는 방식을 잘 사용하지 않는다는 건 알았는데, 그냥 그렇구나 하고 넘겼었다. 코드를 읽을 때 html ↔ JS 왔다갔다 읽어야 해서 가독성이 나빠진다는 것을 꼭 명심하자.

Q. 튜터님 영상을 보면서 궁금했던 점(내일 찾아보기!)

 => 보통 <h1>이 시맨틱 태그로서 페이지의 주제를 알려주는 역할을 하여 SEO에 영향을 미치는데, 코드 특성상 <h1>을 사용하기가 마땅치 않다면 SEO 측면에서 손해를 보는걸까?

 

확실히 강의만 듣다가, 직접 프로젝트를 하니 너무 재밌다...

이런데서 재미를 느끼니 큰일났다 증말..