본의 아니게 3주차 회고를 생략하게 되었다. 3, 4주차를 통합하여 이번 월간회고로 작성하려 한다. 학습 관련한 TIL은 개인적으로 노션에 정리하고 있는데, 공개로 돌려야 할지 고민 중이다. 정신없이 지나간 한 달 간 배운 것들과, 느낀 점 그리고 앞으로의 계획을 정리하려 한다.
1. 학습
📚 1~2주차 : 자바스크립트 기초개념, 자료구조와 알고리즘
첫째 주는 OT와 함께 이벤트 루프, 메모리, 스코프, 클로저같은 자바스크립트 개념과 자료구조 및 알고리즘을 학습하였다. 아무래도 적지 않은 분량이다보니 강의에서는 가볍게 다루고 넘어갔지만, 프론트엔드 개발자에게 있어 굉장히 핵심적인 내용들이라 추가적인 학습이 필요하다고 생각되었다. 현재 리스트를 정리해두고 있는데 여유가 생기면 이들을 좀 깊게 파헤쳐 볼 예정이다.
둘째 주는 자료구조 및 알고리즘을 학습하고, 예제 문제를 풀어보는 방식으로 진행되었다. 미처 모르고 있었던 자료구조도 접할 수 있었고, 이전에 정리해 놓았던 개념들을 복습하고 보완할 수 있었다. 프로그래머스의 메인 컨텐츠가 코딩테스트이다 보니, 연계가 잘 되어있는 점도 굉장히 편리했다. 지금도 하루에 한 문제씩 꾸준히 풀고 있고, 팀원들과 스크럼 간 코드리뷰를 진행하고 있다.
📚 3~4주차 : 컴포넌트 단위로 자바스크립트 바라보기
로토님의 강의로 본격적인 자바스크립트 학습이 시작되었다. 투두리스트와 자동저장 편집기 등을 함께 구현해보며 컴포넌트를 구성하고 상태를 관리하는 흐름을 익힐 수 있었다. 사실 4주차 막바지에 가서는 따라 치는 것도 힘들었다. 분명 똑같은데 대체 왜 안 돼? (안똑같음) 그래도 스스로 원인을 찾고 에러를 잡아가면서 흐름이 좀 보이구나.. 생각했다.
크나 큰 오산
사실 데브코스 이전 리액트를 학습하면서 어느 정도 자바스크립트는 뗐거니 생각했다. 이번 강의를 통해 컴포넌트 단위의 코드 작성 방식에 대해 기존에 갖고 있던 사고방식을 바꿀 수 있었다. 비슷한 역할들끼리 묶지만, 독립적으로 작동하며 필요한 기능에 충실해야 하는 '컴포넌트'는 리액트만의 전유물이라는 다소 편협한 생각을 갖고 있었으나 이는 굉장히 잘못된 생각이라는 걸 깨달았다.
컴포넌트 간 의존성을 줄이고 잘 분리함으로써 가독성이나 유지보수 측면에서 큰 이점이 있으며, 자바스크립트로 이를 구현할 수 있으면 어느 프레임워크를 사용하는지는 크게 중요하지 않다는 것이다. 리액트는 훅들을 통한 상태관리와 SPA를 좀 더 쉽게 구현할 수 있는 프레임워크일 뿐이다.
컴포넌트 간 State, 즉 프롭스를 공유하는 방식에 대해서도 많이 배웠다. 최상위 컴포넌트인 <App/>에서 State를 관리하고, 하위 컴포넌트에게 갱신된 State를 전달한다. 하위 컴포넌트에서 State의 변경이 발생하면 콜백을 통해 <App/>까지 끌고와 갱신, 재분배가 이루어진다. 또한 이를 하위 컴포넌트에 내려줄 때, 모든 값들을 전달하는 것이 아닌 필요한 프롭스만 전달해주면 된다는 것을 알 수 있었다.
SPA와 HistoryAPI
개인적으로 바닐라 자바스크립트를 통해 리액트같은 SPA를 구현해볼 계획을 갖고 있었는데, 마침 본 강의에서 History API와 함께 이를 구현해볼 수 있었다. HistoryAPI는 브라우저에서 페이지 이동 간 세션 히스토리를 저장해놓는 API로, 기존의 Multi Page Application 방식은 화면 이동을 통해 히스토리가 쌓이지만 Single Page Application의 경우 페이지 이동이 없기 때문에 특정 메서드로 히스토리를 업데이트(라우팅)할 수 있다. 일반 URL 형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수도 있다.
주의할 점은 단일 페이지 기반으로 Index.html에만 의존하는 SPA 특성 상 URL 이동 후 새로고침 시 404 Not Found가 발생한다는 점이다. 따라서 최상위 페이지로 리다이렉트되는 안전장치가 구성되어 있어야 한다. http-server의 경우 npx serve -s 커맨드를 통해, AWS에서는 CloudFront에서 이를 설정할 수 있다. 다른 서버나 호스팅을 이용할 때에도 해당 기능을 지원하는지 확인할 필요가 있으며 지원하지 않을 경우 Hashbang을 사용해야 한다. 해당 섹션에서 바닐라 자바스크립트로 페이지에 따른 라우팅을 처리하고, URL이 변경되어도 화면이 이동하지 않는 방식을 구현해봤다는 점이 흥미로웠다.
사용자 경험을 고려하기
낙관적 업데이트 (Optimistic Update)
용어만 들으면 쿠르츠게작트에 나올 것만 같다. 낙관적 업데이트란 변경된 데이터가 서버에 반영되기 전, 로컬 State를 갱신시켜 반영된 값을 화면에 미리 출력하는 것을 말한다. 사용자가 인터페이스를 조작하면 즉각적으로 변화가 이루어지는 것처럼 보이기 때문에, 사용자 경험 측면에서 반응성이 더 좋다고 느낄 수 있게 된다. 낙관적 업데이트를 잘 활용하는 서비스로는 페이스북을 예로 들 수 있다. 코멘트를 작성하거나 좋아요 버튼을 누르면 Count나 Active 효과가 즉각적으로 변경된다. 그러나 서버에 요청이 실패할 경우 일관성 문제가 발생할 수 있기 때문에, 이 경우 UI를 롤백하거나 오류 메시지를 표시하는 등의 처리가 필요하다는 것을 기억하자.
디바운스 (Debounce)
디바운스는 특정 시간 동안 빈번하게 발생하는 이벤트를 하나의 이벤트만 처리하도록 하는 제어 기법으로, 자동저장 편집기 실습에서 익힌 개념이다. texterea를 편집할 때마다 onEditing 콜백이 호출되어 로컬스토리지에 값을 저장하는데, setTimeout과 clearTimeout을 활용하여 의도적으로 지연(ex. 타이핑이 끝난 후 3초 후 저장)시킴으로써 디바운스를 구현하였다.
사실 채용공고나 자소서 문항 중 '사용자 경험을 향상시키기 위한 경험이 있나요?' 라는 질문이 막막할 때가 있었는데, 벌써 두 가지의 경험이나 챙길 수 있게되어 굉장히 의미있지 않았나 싶다.
2. 특강
🎤 꾸준한 개발 습관과 성장 - 마광휘님
매주 주말이나 코어타임 이후 연사님의 특강이나 강의 세션이 진행된다. 그 중 인상깊었던 우아한 형제들의 광휘님이 진행하신 특강을 참여하고 느낀 점들을 정리해보려 한다. 기록과 함께 성장하기와 왜?라고 생각하기 두 가지 섹션으로 진행되었다.
✏️ 기록과 함께 성장하기
개발자에게 블로그는 경쟁력이 될 수 있다. 신입 채용이 얼어붙은 현 시점에서는 더욱 그렇고, 거의 필수 덕목이라 볼 수 있을 것이다. 나도 글을 꽤 나쁘지 않게 쓰고, 블로그를 잘 활용하고 있다고 생각했는데 디벨롭시킬 부분에 대해서 다시 생각해볼 수 있었던 것 같다. 핵심적인 내용에 대해 정리해보았다.
- 첫째, 의도와 목적성을 가질 것.
- 둘째, 통용되는 내용을 정확하게, 깊이있게 다룰 것
- 셋째, 꾸준하게 나만의 글로 다룰 것
- 넷째. 피드백과 교차 검증은 정말 중요!!
궁극적으로는 나만의 블로그를 만들고자하는 목표가 생겼다. 사실 막연히 생각은 하고 있었는데, 좀 더 구체화되었다. 이 과정에서 좀 더 목적성을 갖고, 전문적인 내용을 다루는 것을 고려해야겠다고 생각했다.
🤔 왜? 라고 생각하기
본 섹션의 키워드는 '깊이있는 이해'였다. 어떤 지식을 얼마나 단계적으로 알고 있는지, 이해의 범주를 인지함으로써 공부의 목표와 방향을 정할 수 있게 되며 3depth 이상 고민해보는 것이 정말, 정말 중요하다고 한다. 연쇄적인 궁금증을 풀어나가면서 이만큼 분야에 애정이 있고, 깊이있게 파고들 수 있음을 보여주는 것이 큰 메리트가 되는 것이다. 물론 전문성을 위한 깊이있는 이해도 중요하지만, 커뮤니케이션을 위한 지엽적이고 넓은 이해도 필요함을 인지해야 한다.
- 스스로 어느 정도 알고 있는지, 얼마나 파고들었는지를 생각하는 지속적인 메타인지
- 하나의 프로덕트가 어떤 사이클로 동작하고, 거기서 어떤 역할을 맡고 있는지 이해하는 것
- 신입들의 실력이 전반적으로 상향평준화됨. 프론트엔드로서의 애정과 애티튜드가 경쟁력이 될 수 있다.
- 멀리 볼 것. 개발은 장거리 레이스..!
3. 과제 및 프로젝트
📖 과제
한 달 간 두 개의 과제가 출제되었다. 학습한 것들에 대한 추가적인 요구 사항을 구현하는 방식이다. 이렇게 많은 인원들과 레포지토리를 공유하는 것이 처음이라 걱정을 꽤 했었는데, 가이드 덕에 큰 어려움 없이 마무리할 수 있었다. 사실 욕심내지 않고 요구사항만 구현하였는데, 코드리뷰 간 팀원분들의 코드를 보고 욕심이 좀 생겼다. 다음엔 객체지향으로 코드를 작성해볼까? 추가적으로 가능한 예외처리 방식이 있을까? 등의.. 프로젝트에서는 이러한 점들을 반영할 계획이다.
처음 경험한 코드리뷰도 인상 깊었다. 내가 제안한 것들이 잘못된 방식이거나 방해가 될 수 있다 생각되어, 구현 간 눈에 띄는 점을 감상문처럼 작성하거나 개선해보면 좋을 부분들을 근거와 함께 작성하는 방식으로 진행하고 있다. 멘토님의 디테일한 피드백도 정말 큰 도움이 되고, 값진 경험이라고 생각된다. 사실 팀원 뿐 아니라 5기 인원들 코드를 전부 살펴보고 싶었지만 그럴 여유가 없었다. 차근차근 확인할 예정이다.
🚀 프로젝트
이번 주 부터는 약 10일간 노션 클로닝 프로젝트가 진행된다. 실습 간 진행한 프로덕트의 흐름을 익히는 것도 쉽지 않았지만, 컴포넌트 구성이나 상태관리를 처음부터 직접 구현하려 하니 다소 막막하긴 하다. 그래도 열심히 임할 예정..✊🏻 본격적으로 프로젝트를 시작하기 전 스스로 몇 가지 규칙을 정해 보았다.
- ESLint, Prettier을 적용하여 컨벤션을 준수하며 코드를 작성할 것
- 커밋, 브랜치 전략을 적용하여 효과적으로 Git을 관리할 것
- 문서화 및 회고 꼼꼼히 작성할 것
- 타입스크립트로 리팩토링해볼 것
- 디자인 레퍼런스를 옵시디언으로 바꿔봐도 재밌겠다는 생각을 했다.
4. 한 달 후기
1. 시간이 정~말 빨리간다. 6개월 너무 짧은데?라는 위기의식을 느낄 정도다. 매번 얘기하지만 코어타임만으로는 학습 시간이 절대적으로 부족하다. 그 와중에 할 건 많아서, 우선순위를 따져 빠르고 효율적이지만 제대로 학습할 능력이 필요하다는 생각을 종종 한다..😇 그래도 조급해하지 않고 집중하며 멀리 보려 하고 있다.
2. 알고 있는게 다가 아니다. 한 달 동안 학습하면서 기존에 알고 있던 내용 중 틀린 부분을 발견하기도 하고, 새롭게 알게 되는 내용들도 종종 있었다. 끊임없이 검증하고 받아들이는 자세를 갖는 것이 중요하다 생각했다. 또한 멘토링, 특강, 코드리뷰, 양질의 강의, 열정있는 동료들... 진짜 값진 경험들이다. 더 잘 활용하고 소통하고 싶은 욕심이 있다.
5. 앞으로 할 일
- 노션 클로닝 프로젝트 (컨벤션 준수하여 코드 작성 / 요구사항 이외에도 추가적인 구현과 배포까지)
- 타입스크립트 수강 마무리
- 커피챗 및 멘토링 답변 정리
- 딥다이브 주제들 정리 및 아티클 작성 (모딥다 활용, CS까지 생각해보며 깊이 있게 접근)
- 코딩테스트 꾸준히, 제대로 준비하기
- 잠..줄이기
6. 딥다이브
🐠 시간날 때마다 깊게 학습해볼 내용들
자바스크립트 스코프와 클로저, 실행 컨텍스트, 이벤트 위임, 비동기함수(Promise, Async/Await)
개발 XSS, SAAS, Hashbang/URL Querystring, 정규식 패턴, 객체지향 프로그래밍
기타 낙관적 업데이트, Git 브랜치 전략과 Cherrypick 등의 심화 내용
본 게시글에서 틀린 내용이나 다른 의견이 있다면 자유롭게 피드백 부탁드립니다. 큰 도움과 힘이 됩니다.
