2024년 1월 1주차
FE 스터디 시작
현재 참여하고 있는 부트캠프 수강생 중 한 분이
FE 스터디를 모집한다는 글을 Slack 채널에 올려 참여 의사를 밝혔다!
2024년 1월 6일,
Zep(가상공간)에서 가진 첫 FE 스터디 모임에서는 자기소개 시간과
함께 스터디 운영에 대한 논의와 프로그램을 건의 하는 시간을 가졌다.
논의나 건의하는 시간에는 스터디원 모두가 적극적으로 의견을 냈기 때문에 빠르게 정리할 수 있었고, 무엇보다 스터디원들과 함께하는 프로그램이 기대됐다😆
건의된 프로그램으로는 코드 리뷰와 내가 건의한 알고리즘 스터디 이렇게 2개가 있었는데,
두 개 모두 모든 스터디원이 참여하게 되었다.
코드 리뷰는 매주 2회씩 평일, 주말에 진행되는데,
평일에는 아쉽게도 회사에 있는 시간이라 참여가 불가능해 아쉬웠다.🥲
FE 스터디 정기 모임은 월요일 저녁 9시이고, 부트캠프에서 진행하는 데일리 스크럼은 월~토 매일 저녁 10시부터 시작이기 때문에 FE스터디 정기 모임 시간이 조금 짧지 않을까 걱정이 됐는데 생각해보니 내가 포함되어있는 데일리 스크럼 조의 모든 팀원이 FE 스터디원으로 지원해서 그냥 FE 스터디 정기 모임 끝나고 데일리 스크럼을 진행하기로 했다!
알고리즘 스터디 진행은 스터디원이 모두 다 같이 듣는 이론부터 실전까지 모든 것을 담은 자료구조/알고리즘 강의를 기반으로 진행하려고 한다. 정렬, 이진검색, 탐욕알고리즘, 백트래킹, 동적계획법, 최단경로, 분할 정복 알고리즘을 모든 팀원이 같은 강의를 듣고 관련 문제 5개를 푼 후 알고리즘 스터디 모임 시간에 스터디원에게 설명해 주는 방식이 좋을 거 같다.
JS 과제 시작
부트캠프 HTML/CSS 과제 마감일이 1월 10일인데, 12월 26일쯤에 과제를 마무리하고 제출했다.
그런데 오늘도 제출한 과제에 대한 피드백이 없어 확인해 보니 과제 업로드는 완료했는데 제출완료라는 댓글을 안 남긴 거였다😂 오늘이라도 확인했으니 다행이지 1월 10일 넘어서 봤으면 큰일 날 뻔했다.
1차 과제: nav 토글 상태 관리
HTML/CSS 과제도 제출했고, 강의 영상도 틈틈이 보고 진도를 많이 빼놔서 토요일부터 JS 과제를 시작했다. HTML/CSS 과제와 동일하게 총 5개의 과제가 있었다. 토요일에 끝낸 1번 과제는 상태 관리와 Local Storage를 사용해 구현하는 nav 토글 과제였다. HTML과 CSS는 이미 완성되어 있고 JS만 하면 되는 거라 40분만에 끝냈다.
1차 과제를 할 때는 중복된 코드를 없애려고 함수나 반복문으로 코드를 작성하려고 노력했고, 한 개의 페이지에서만 상태가 유지되는 게 아니라 다른 페이지로 이동했을 때도 토글 상태가 동일하게 유지되어야 했기 때문에 Local Storage를 사용해 상태 관리를 했다.
토글이 ON 되어있을 때 페이지를 이동하거나 새로고침하면 해당 nav 요소가 깜빡 거리는 현상이 발생했다. 이 문제는 body에 visibility: 'hidden'를 설정하고, DOMContentLoaded를 사용해 DOM 렌더링이 끝난 후 visibility: 'visible'로 적용해 주는 코드를 작성했다. (즉시 실행 함수를 사용해서 코드를 작성해도 작동은 되는 거 같은데
또 한 가지 문제는 요소에 적용된 트랜지션이 토글이 ON 되어있을 때 페이지를 이동하거나 새로고침하면 nav가 옆으로 나오는 모습이 보여지는 것이었다. 이거는 초기 렌더링이 끝난 후 트랜지션이 작동하도록 body에 transition: none !important;을 Class로 적용해 주고, 초기 렌더링 끝난 후 요소에 트랜지션이 적용되도록 해당 Class를 제거해 주는 코드를 Window.onload와 함께 작성했다. (즉시 실행 함수로 구현해도 작동하긴 하던데 사용 시 성능에 차이가 있는지는 확인해 봐야겠다.)
DOMContentLoaded는 DOM 렌더링이 끝난 후 적용되고 onload는 CSS와 같은 리소스도 다 가져온 후에 적용된다는데 이부분은 블로그 포스팅이 필요할 거 같다!
2차 과제: 시계 만들기
2차 과제는 1시간 30분 정도 걸렸다. 시, 분, 초 침의 각도를 1초마다 변경되도록 하는 과제였다.
time과 dom에 관련된 모듈은 utils 폴더에 따로 js 파일로 import 했다.
새롭게 알게 된 건 요소.style.setProperty를 사용하면 CSS 변수도 조작할 수 있다는 점이다.
2차 과제는 구글링 하는데에 시간이 소요된 거 같다!
과제를 할 때마다 새로운 걸 배우고 얻어가는 느낌이 있어서 계속 과제를 하고 싶다..
이번 주에는 강의에 마켓 서비스 실습이라고 코드 따라치는 강의가 있는데 따라치지 않고 일단 보이는 UI를 참고해 만든 다음 내가 작성한 코드랑 강사님이 작성한 코드를 비교해 볼 예정이다.
