Skip to content

[Week 2] 주영#11

Open
woodzverse wants to merge 14 commits intomainfrom
week2-juyoung
Open

[Week 2] 주영#11
woodzverse wants to merge 14 commits intomainfrom
week2-juyoung

Conversation

@woodzverse
Copy link
Collaborator

@woodzverse woodzverse commented Nov 12, 2025 •
edited
Loading

📝 학습 내용 요약

  • 이번 주차에는 JavaScript의 실행 구조와 코드 품질 관리에 대한 내용을 중심으로 학습했어요. <script> 태그의 defer와 async 속성을 통해 HTML 파싱과 스크립트 실행의 관계를 제어할 수 있다는 점이 특히 흥미로웠어요. 기존에는 단순히 <body> 끝에 스크립트를 두는 게 정석이라고만 생각했는데, 실제 로딩 성능에 영향을 준다는 사실을 체감할 수 있었어요.
  • 또한 ESLint와 Prettier 설정을 직접 다루면서, 단순히 규칙을 적용하는 수준이 아니라 프로젝트 성격과 협업 환경에 맞게 규칙을 커스터마이징하는 중요성을 배울 수 있어어요. 코드 스타일을 자동으로 정리해 주는 것 외에도, 일관된 규칙이 팀 전체의 생산성을 높인다는 점이 인상 깊었어요.
  • 이벤트 실습에서는 클릭, 마우스, 키보드, 스크롤 등 다양한 이벤트를 활용해 인터랙션을 구현했어요. 특히 IntersectionObserver API를 사용해 스크롤 위치를 효율적으로 감지하는 방식은 실제 웹사이트 구현 시 매우 유용할 것 같아요.

📁 실습 파일 설명

5-1. Script Loading

  • 인라인, 내부, 외부 스크립트 방식 비교 및 defer, async 동작 차이 실험

5-2. ESLint / Prettier 설정

  • 규칙 정의 및 포맷 자동화 설정 실습 — 세미콜론, 탭 간격, 따옴표 규칙 등을 커스터마이징

5-3. DOM 조작 실습

  • 노드 탐색(parentNode, nextElementSibling), 텍스트 수정, DocumentFragment 활용 등

5-4. 이벤트 실습

  • 마우스 드로잉, 키보드 입력 감지, 스크롤 기반 애니메이션 구현 및 IntersectionObserver 비교

5-5. 함수 구조화

  • 중복 로직을 함수로 분리해 재사용성과 가독성 향상 — 폼 유효성 검사, 시간 표시, 계산 로직 등

5-6. 비동기 처리

  • setTimeout, Promise, fetch, axios를 통한 동기/비동기 실행 흐름 비교

🌟 느낀 점 및 피드백 요청 사항

  • 이번 주차는 단순히 코드를 돌려보는 수준이 아니라, 브라우저가 동작하는 방식을 이해하는 데 초점이 맞춰져 있어서 유익했어요. DOM 조작이나 이벤트 처리처럼 눈에 보이는 결과물이 바로 나타나는 실습이 많아서 재미있었고, 비동기 로직을 시각적으로 확인할 수 있었던 것도 좋았어요.(마우스 이벤트가 진짜 재미있었어요.😃)
스크린샷 2025-11-12 오후 8 29 14

@woodzverse woodzverse self-assigned this Nov 12, 2025
@woodzverse woodzverse changed the title [Week2] 주영 [Week 2] 주영 Nov 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@woodzverse woodzverse

Labels

week2 🐶 주영

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@woodzverse