코드 리뷰 후 배운 것
- 헤더 메뉴의 스크롤 기능 작업
function scrollPage(target) {
let position = document.querySelector(target).offsetTop;
window.scroll({
top: position-80,
behavior: 'smooth'
});
}
=> 해석하면 scrollPage란 함수가 실행되면 target이란 매개변수로 값이 들어와 querySelector로 해당 값의 요소찾아와 그 값의 좌표를 position이란 변수에 담아서
윈도우 브라우저에서 스크롤을 쓸 때, 내 문서를 특정 위치로 이동 시켜달라는 거야. 그리고 top의 상단 위치에서 -80 아래에 해당하는 위치에서 시작해서 behavior란 옵션으로 smooth , 즉 부드럽게 스크롤 되어라~ 라는 함수지.
offsetTop는 가져온 요소의 위치값, 좌표를 알려주는 애야.
*참고 사이트
- https://developer.mozilla.org/ko/docs/Web/API/Window/scroll
코드 리팩토링, 코드 리뷰 후 느낀 점
프로젝트 발표까지 마치고 팀원분들과 맡은 기능에 대한 코드를 공유하며 설명하는 시간을 가졌어. 그동안 단 7일이지만 프로젝트 만들며 들은 생각들을 얘기하게 됐는데 다들 정말 엄청난 책임감ㅋㅋ을 가지고 기능을 구현하고 계셨어. 그만큼 열정적인 이유가 있으셨어.
그렇게 서로 앉은 자리 순서로 시연을 하며 설명하는데 차근차근 잘 설명해 주셨어. 좋은 코드도 알게 되서 좋은 것 같아. 다들 최대한 javascript로 구현하려고 애쓰셨어. 서로 설명해주면서 설명하는 게 정말 어렵구나 생각을 했지ㅋㅋ
그래서 다같이 이런 시간이 정말 좋다고 느낀 걸 공유했지. 서로에게 배우면서 설명하는 스킬도 늘고 역시 좋은 것 같아.
팀원 분 중 한 분도 코드 리뷰를 하기 전엔 혼자 해석하고 공부하려니 이해가 안 됐는데 공유하면서 설명을 들으니까 흐름과 원리를 아시겠다며 깨달음을 얻으셨는데 다들 그렇게 느껴서 다행이야.
'개발일지' 카테고리의 다른 글
[TIL] 24_0102 검색 기능과 setAtrribute()와 classList.add() (2) | 2024.01.02 |
---|---|
[TIL] 23_1229 js 문법과 검색 기능에 필요한 함수들 (0) | 2023.12.29 |
[TIL] 23_1227 미니 프로젝트를 마치며 (0) | 2023.12.27 |
[TIL] 23_1226 .on("click",~) 과 .click의 차이 = 동적으로 처리, 정적으로 처리 (0) | 2023.12.26 |
[TIL] 23_1222 firestorage 내장함수, flex로 비율 조정 (2) | 2023.12.22 |