Week02/heaseung

[sunwin1029]

✨어떤 과제를 수행했나요?✨

• 2주차 유튜브 클론 코딩하기
• 2주차 javascript로 달력 만들기

✨어려웠던점, 트러블슈팅✨

1. 클론 코딩을 하면서 html 구조가 css 코드와 잘 조합되지 못해서 예기치 못한 화면이 출력되는 상황이 많이 발생했습니다.
   html과 css를 열심히 해야 원하는 구조를 만들수 있을 것 같습니다.

2. Date() 함수를 이용해서 달력을 구현하고자 했는데, 월과 요일의 경우 1부터 시작하는 것이 아니라 0부터 시작한다는 점이 헷갈렸습니다.
   또한, html코드와 javascript를 연결하는 부분이 처음이라 어려웠습니다.
   html의 구조를 설정할 때, js와 css 모두에서 편리하게 사용하기 위해 구조를 잘 짜야 함을 느꼈는데 이 부분에 대해서 아직 감이 오질 않았습니다.

🤔 PR Point

javascript를 작성할 때 다른사람과의 협업 그리고 가독성을 위해 함수, 변수, 메인 로직 등의 부분을 어떤 식으로 배치하는게 맞는건지 궁금합니다.
"변수들을 최상단에 올려야한다", "메인코드를 상단에 위치시켜야 한다" 와 같이 어느정도 정해진 규범이 있는지 알고 싶습니다.

[hyun907]

전체 구조 깔끔하고 날짜 채우는 로직도 명확해서 전반적인 구현이 보기 좋았습니다! 유튜브 퍼블리싱도 정말 꼼꼼하게 요소 고려하신 게 눈에 보여 좋습니다!

특히 달력 과제에서 make_calendar함수에서 DOM 요소 생성 과정이 반복문 내에서 잘 정리되어 있어서 로직 이해가 쉬웠어요! 다만 성능 관점에서 한 가지 코멘트 드리자면,
innerHTML +=은 반복문 안에서 사용하면 매번 DOM을 재파싱하게 되어 성능상 비효율적일 수 있을 것 같은데 이와 관련해서 제가 만든 성능 비교 실험 PR(innerHTML vs join 성능 비교)도 참고해주시면 좋을 것 같아요. 지금 달력은 아주 간단한 프로젝트이기 때문에 큰 차이는 안 느껴질 수 있지만, join 방식이 더 안정적으로 작동할 수 있을 것 같아 추천합니다!

관련해서 테스트 페이지 구현해서 만들어놨는데, 혹시 궁금하시면 참고해도 좋을 것 같아요!
PR 링크: innerHTML vs 배열.join 성능 비교 테스트 페이지 구현

[hyun907]

태그에 id가 붙어있는데 유효하지 않은 문법인 것 같아 확인 부탁드려요!

[hyun907]

달력 월 넘김 로직 잘 구현된 것 같습니다!
년도 전환 처리도 포함돼 있어 good~!

[hyun907]

그리고 PR Point에 남겨주신 코멘트에 대한 답을 해보자면,

정해진 법은 없지만 정석적인 어느 정도 흐름은 있는 것 같아요!
모든 로직에서 사용하는 상수나 외부 변수는 가장 위에 있어야 한눈에 파악 가능하고, 동작 단위가 잘 분리된 함수는 위에서 먼저 정의되면, 아래서 호출될 때 읽기 흐름이 끊기지 않는다는 장점이 있어 상수나 함수를 미리 위에 정의해두고 사용하는 것 같아요.

예제 코드

// 1. 상수/전역 변수
const ITERATIONS = 1000;
const $testArea = document.getElementById('test');

// 2. 함수 정의
function runTest() { ... }
function renderResult() { ... }

// 3. 이벤트 등록
function bindEvents() {
  document.getElementById('btn').addEventListener('click', runTest);
}

// 4. 초기 실행
function init() {
  bindEvents();
}
init();
// 참고: React가 아닌 바닐라 JS에서는 init() 패턴을 많이 씀
// init에는 처음 실행 할때 초기값을 갖는 함수나 객체를 생성함

더 알아보고 싶다면 '탑다운 디자인 (Top-Down Design)'에 대해 찾아봐도 좋을 것 같습니다!
다만, 협업과 유지보수를 고려할 때 팀 스타일 가이드에 맞는 코드 컨벤션을 따라가는 게 맞다고 답변드리고 싶습니다.