데브코스를 시작하고 절반이라는 시간이 흘렀다.
이번 단위 기간은 하루 하루가 순식간에 지나갈 만큼 시간을 쏟았지만,
어쩐지 가장 아쉽고 버거웠다.
반성뿐인 회고지만.. 다음 한 달은 더더더 열심히 달려야겠다고 다짐하게 된다😂
😄 좋았던 점
학습 시간 늘리기
코어 타임이 끝나면 저녁 먹은 뒤 늘어져 있곤 했는데,
이번 한 달은 코어타임 전후로 학습에 더 투자하기 위해 나름 애썼다.
강의를 다 못 들어서…가 컸지만 포기하지 않았다는 것에 의의를 두고 싶다!
이전에는 새벽에 공부가 잘 된다고 생각했는데 이번 단위 기간 동안 아침이 더 능률이 좋다는 것을 실감했다.
늦게 자다보니 일찍 일어나는 것이 정말 힘들지만
앞으로 13시 코어타임인 날보다 9시 코어타임인 날이 더 많으니🙃
일찍 일어나서 공부하는 습관을 잘 들여야겠다.
📝 배운 점
Intersection Observer API
Vue.js 과제에서 검색 결과를 무한 스크롤 방식으로 볼 수 있게 구현했다.
이전에 VanillaJS 강의에서 다양한 무한 스크롤 구현 방법을 다루었기 때문에 수월할 것이라 생각했지만,
그때 Intersection Observer API를 따로 찾아봐야겠다! 하고 제대로 보지 않았던 탓에 꽤나 애를 먹었다.
처음에는 요소 관찰 시작과 중지를 각각의 함수로 만들었는데, 비슷한 코드가 불필요하게 반복되는 느낌이었다.
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(async (entry) => {
if (
entry.isIntersecting &&
!isLoading.value &&
movies.value.length < totalResults.value
) {
isLoading.value = true
await movieStore.getMovies(movies.value.length / 10 + 1)
isLoading.value = false
}
})
})
const addObserver = () => {
const lastEl = document.querySelector(".movie-list")?.lastElementChild
if (lastEl) {
intersectionObserver.observe(lastEl)
}
}
const removeObserver = () => {
const prevLastEl = document.querySelector(".movie-list")?.lastElementChild
if (prevLastEl) {
intersectionObserver.unobserve(prevLastEl)
}
}
const showResults = () => {
if (isLoading.value) {
removeObserver()
return
}
addObserver()
}Intersection Observer API에 대해 찾아보다가 발견한 강사님의 블로그 글(Intersection Observer - 요소의 가시성 관찰)은 해당 API를 이해하는데 정말 많은 도움이 되었고, 덕분에 코드를 개선할 수 있었다.
const intersectionObserver = new IntersectionObserver(
(entries, observer) => {
entries.forEach(async (entry) => {
if (entry.isIntersecting && !isLoading.value) {
observer.unobserve(entry.target)
isLoading.value = true
await movieStore.getMovies(movies.value.length / 10 + 1)
isLoading.value = false
}
})
},
{ threshold: 0.3 }
)
const addObserver = () => {
const lastEl = document.querySelector(".movie-list")?.lastElementChild
if (lastEl) {
intersectionObserver.observe(lastEl)
}
}
const showResults = () => {
if (isLoading.value || movies.value.length >= totalResults.value) return
addObserver()
}🤔 부족한 점
사실 이번 단위 기간은 아쉬운 점이 가장 많았다..🥲학습 시간은 늘었지만 밀도 높은 학습이 이루어지지 않은 것 같다.
코테 공부
어쩌다 보니 가장 뒷전이 되어버렸다.
11월은 나름 1차팀 팀원분들과 꾸준히 해왔는데, Vue 과제를 시작하면서 아예 멈춰버렸다.
문제를 풀 때마다 감을 잃지 않는 것이 참 중요하다는 걸 깨닫지만 매일 꾸준히 하는 것은 역시 쉽지 않다.
데브코스 기간이 습관을 만드는 시간임을 기억하며 다시 달려봐야겠다💪
React 학습
React 강의는 제대로 따라가지 못한 느낌이다.
이해되지 않는 부분은 여러 번 보고 따로 찾아보며 학습했어야 했는데 시간에 쫓겨 진도 나가기에만 급급했다.
멘토님께서도 강의를 들으며 “내가 공부한 것 같다”는 느낌에 심취하면 안 된다고 하셨고, 많이 반성하게 됐다.
간단히 할 수 있을 것이라 생각했던 과제도 며칠 동안 붙들고 있어야 했고 그 결과도 정말 만족스럽지 않았다. 가장 고통스러웠던 과제였다..🥲
React Hooks, Components에 대한 이해가 많이 부족하다는 것을 깨달았다.
기대했던 팀 프로젝트를 잘 마칠 수 있도록 열심히 학습해야겠다!
🗨️ 바라는 점
-
React, TypeScript 공부하기
-
꾸준히 코테 공부하기
-
팀 프로젝트 기간 동안 why에 집중하여 학습하기
