6주차때는 한달동안 어떤 일이 있었는지 정리했었죠. 이번 주차는 정말 이번 주동안 있었던 일에 대한 회고를 하기로 했습니다! 이번주는 배우기도 많이 배우고, 개발도 잔뜩 한 기간인것같아요. 굵은 일부터 하나씩 설명해볼게요!
회고스터디 가보자고!
이번주부터 상추가 열었던 회고 스터디를 참여할수 있게 되었어요. 인원은 메이토, 상추, 피터, 분주(저) 이렇게 네명이었는데, 블로그를 써온 크루도 있었고 노션에 정리한 크루도 있었습니다!
각자 본인의 회고에 대해서 설명하고, 스터디원들이 그 회고에 대해서 하고싶은말을 덧붙이는 방식으로 진행됐어요. 모든 크루들의 얘기들이 흥미로웠지만 가장 흥미로웠던건 본인이 용기낸 내용에 대해서 공유한 크루였어요. 크루한테 자주 질문하고, 코치와 자주 커피챗을 신청해야겠다는 목표를 세운걸 보고 저도 생각이 많아졌거든요.
질문한다는게 쉬운건 아니잖아요? 단순히 크루의 시간을 뺏는것 뿐만아니라 내가 부족하다는걸 스스로 드러내야한다는 점에서요. 그런데 크루가 그말을 하니까 저도 모르게 그런생각이 들더라고요.
오잉? 나는 나한테 질문해주면 너무너무 좋을것같은데!! 이런 생각이요.
다른 크루들도 똑같이 말한걸 보니까 우테코에는 본인의 지식을 공유하고, 설명해주는걸 좋아하는 크루들이 많다는걸 알게됐어요. 그러면 거꾸로 생각해서 제가 무언가 물어보고싶을때 거리낌없이 물어봐도 되는거잖아요! 앞으로 나도 질문을 두려워하지 말아야 겠다는 생각을 할수 있었습니다.
크론의 비동기 숙제
저희는 비동기해설지 만들기 라는 숙제를 받았는데요. 비동기에 관한 문제를 주시고 각 문제를 어떻게 풀었는지에 관해서 말하는... 그런 숙제였답니다. 다음수업에 만약에 호명당하면 라이브코딩하면서 발표해야했어요.
여튼 걸렸을때를 대비해서
페어와 같이 공부하면서 매크로테스크큐, 마이크로테스크큐, 이벤트루프 등등 평소에 생각하지 못한 것들에 대해서 공부할수있는 계기가 되었습니다! 비동기 코드가 어떻게 작동하는지 이해에 가장 도움을 준 사이트는 아래와 같았어요.
JS Visualizer 9000
www.jsv9000.app
만약 테스크큐는 뭐고 마이크로테스크큐는 뭐고 이 코드가 왜 먼저 실행되고... 를 확실하게 시각적으로 확인하고 싶으시면 위에 코드를 작성해서 확인해보시면 좋을것같아요! 참고로 저는 걸려서 발표하긴 했는데 라이브 코딩을 하진 않고 말로 설명만 하는 문제에 걸렸답니다. 즐겁게 얘기하면서 설명했어요!
반응형 ... 너 정말 만만치않은 애였구나.
그리고 이번주에는 영화목록불러오기 라는 미션에 반응형을 추가하는 개발을 진행했어요. 아래와 같이 시안이 주어지고 그에 따라서 맞게 개발하는건데... 전 사실 미디어 쿼리만 사용한것 같아요... ㅎㅎ
개발하긴 되게 편하죠! 그냥 시안대로 css에 구분해놓고 변한 스타일만 각 클래스에 추가하면 되니까요.
그런데 반응형에 대해서 공부할때 뷰포트관련해서 여러 단위들을 배웠던 터라 좀더 효율적인 방법은 없을까? 하고 찾아봤어요. 그러니까 미디어쿼리만 사용하는건 다음과 같은 문제가 있더라구요.
1. 코드가 너무 길어짐: 모바일, 태블릿... 등등 따로 스타일을 작성하다보니 비슷한 코드를 여러개 쓰게 돼요.
2. 너무 딱딱 변한다! : 실제 내용물의 양이나 특성에 맞게 자연스럽게 변하지 않는 모습이 보여요.
3. 관리하기 어려워요: 나중에 디자인이 바뀌었을때 미디어 쿼리를 모두 수정해야해서 불편했어요.
그래서 보통 고정픽셀대신에 유동적인 크기단위를 사용하고, 플렉스 박스를 쓰는 방식으로 개발한다고 하더라구요. 반성하고.. 다음엔 꼭 그렇게 개발할 예정입니다!
무한 스크롤? 그냥 버튼 없애고 스크롤 달면 되는거 아님?
아니였다! 저는 처음에 무한스크롤을 구현할때 더보기 버튼을 누르는 로직 대신에 스크롤로 맨 아래에 도착했을때의 로직으로 갈아끼우는 방식으로 구현을 했어요. 아래처럼요.
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
fetchMoreMovies();
}
});그리고 아래같은 문제가 생겼습니다.
1. API 호출로 새 데이터가 추가되면서 페이지 길이가 늘어나 다시 스크롤 이벤트가 트리거되고, 또 API를 호출하는 순환 구조
2. 스크롤이 맨 아래에 있는 동안 계속해서 API 요청이 발생.
각 문제에 대해서 페이지 번호를 관리하고, 현재 데이터 로딩 상태를 체크하는 플래그를 도입했고, 쓰로틀링(throttling) 기법을 적용해서 일정 시간 내에는 한 번만 API 요청을 보내도록 제한하면서 해결했어요. 그런데 그러다보니 이런게 있더라구요? 위에 있는 단점을 보완하기 위해 생긴 API였어요. Intersection Observer API
슬픈 생각을 잠시 하긴했지만... 일단 좋은게 좋은거라고(?) 다음 미션부터는 적극활용하기로 했습니다. 원래 하나하나 배워가는거 아니겠습니까! 그래도 일단 내가 할수있는 방법으로 개발하고, 더 좋은 방법을 찾아본뒤에 나중에는 그걸 활용하는 방식이 좋은것같아요. 기억에도 더 잘남고 왜 이런 기술이 생겼을까?를 생각하는 과정에서 얻어가는게 분명 있다고 생각하거든요!
레벨인터뷰를 위한 학습문서 작성
그리고 8주차 화요일에 레벨 인터뷰가 잡혔습니다! 레벨인터뷰라는것은 모든 크루가 본인이 자신의 레벨동안 배운 내용을 한장으로 정리해서 그 내용을 기반으로 같은 크루에게 인터뷰를 받는 자리에요. 일요일 6시에 제출이라서 일요일 아침부터 작성해봤는데... 참 생각이 많아 지더라구요.
나는.... 아직도... 말하는 감잔디
막상 흰 종이를 보니까 뭘써야할지 막막했습니다. 그래서 우테코의 LMS에있던 학습목표를 보면서 배운 것들을 하나하나 적었어요. 아래는 제가 적은 학습 정리문서 한장입니다!
분주) 레벨인터뷰1 학습 정리 문서
Jest를 활용한 단위 테스트 경험 자동차 경주 미션에서 jest를 사용해보면서 리팩토링 과정에서 테스트가 실패할 경우 즉시 문제점을 파악할수 있다는 점을 배울 수 있었다. 그러나 완벽하지 않은
docs.google.com
적다보니 아 이건 많이 배웠어. 할말이 많겠네~ 하는 부분도 있었고, 이건... 배우긴 했지... 하고 숙연해진 파트도 있었어요. 직접 하나하나 정리해보니 모든 학습목표를 확실히 공부했다 라고 확신하진 못하겠더라구요. 그런데 하나 느낀점은 확실히 제가 level1전보다는 아는게 좀더 많아진 사람이 됐다 라는 거였어요.
저는 처음왔을때부터 계속 제가 모르는것에 대해서 마주해서 힘들었어요. A,B 에 대해서 배우면, 그걸 활용하기보다는 다시 C,D에 대해서 배웠으니까요.
그런데 정리해보니까 제가 A부터 F까지를 여기서 배우고 성장했더라구요! 히히. 앞으로 어떤 일을 겪든간에 이번에 제가 느낀것처럼 시간이 지나면 좀더 성장한 자신을 볼수있을것 이라는 생각이 들었어요.
이제 조금만 있으면 level1을 마무리하고 level2가 되는데요 그때도 묵묵히 걸어가보려구 합니다. 배운 내용에 대해서 인터뷰도 이제 다음주부터 진행하게될텐데 거기에서 얻은 인사이트도 꾹꾹 적어서 블로그에 올리도록 하겠습니다! 봐주셔서 감사해요!
'회고 > 우아한테크코스' 카테고리의 다른 글
| Level1을 마무리하고, 다음을 준비하기! (0) | 2025.04.07 |
|---|---|
| 유연성 강화 스터디를 진행하면서... (feat. level1) (2) | 2025.04.03 |
| 우테코 7기, 첫 한달동안 내게 있었던 일 (feat.6주차) (3) | 2025.03.23 |
| [우아한테크코스 7기 웹 프론트엔드] 최종 합격 후기 (4) | 2024.12.30 |
| [웹 프론트엔드 7기] 우아한테크코스 최종 코딩테스트 회고 (2) | 2024.12.27 |