3월 2주차 주간회고

Facts (사실, 객관)

해야 할 것들이 너무 많다.

타입스크립트 기반의 간단한 앱을 만들고 있다.

 

Feelings (느낌, 주관)

그동안 회고를 쓰지 못했다. 배운 것을 날마다 정리하는 것이 귀찮게 느껴지고 여러 가지 합리화를 하면서 시간을 꽤나 허비했다. 벌써부터 이래서는 안 된다. 좀 더 성실해질 필요가 있다.

 

부트캠프가 끝나고 운이 좋게도 취업이 되어서 다음 달에 첫 출근을 앞두고 있다. 초반에는 다른 곳과 몇 차례 면접을 보기도 했지만, 어느 순간 다른 회사를 더 알아보기보다는 부족한 부분을 채우는데 주어진 시간을 써야겠단 생각이 들었다. 그렇게 마음의 결정을 하고 나니까 온전한 자기 계발의 시간에 놓이게 됐다. 출근까지 시간이 꽤 많이 남은 편이어서 시간을 어떻게 써야 좋을지 고민이 많았다. 해야 할 것은 많고 시간은 충분해 보이지 않았다. 마음만 조급하고 행동은 더뎌지면서 이도 저도 아닌 채로 시간을 보내기도 했다.

 

TODO 리스트를 굳이 나열해보자면,

• 운동
• 타입스크립트 학습
• 인프런 - 함수형 자바스크립트 완강 및 복습
• 개인 프로젝트 기능 확장 및 리팩토링
• 팀 프로젝트 CI/CD 구축 및 리팩토링
• 지금까지 배웠던 것들 복습하고 정리해보기
• 독서(리팩토링 2판, 자바스크립트 패턴과 테스트 등)
• Java 입문과 함께 테스트주도개발 읽어보기
• react query, recoil, solidjs 사용해보기

쓰다 보니 끝도 없네... 당연하게도 한 달 남짓한 시간 동안 모두 할 수는 없다. 당장 끌리는 건 팀 프로젝트를 건드리는 것과 리팩토링 2판 읽어보는 것 정도였고, 우선적으로 필요해 보이는 건 운동과 타입스크립였다. 개발 공부를 시작하면서 운동과 더 멀어지게 됐는데 지금이라도 다시 습관을 들여야 한다. 타입스크립트는 출근하게 될 회사에서 사용하는 기술 스택인 만큼 제대로 준비해야 되겠다는 생각이 들었다. 하고 싶은 건 나중에 해도 되지만 타입스크립트는 당장 시작해야 겠단 생각에 드림코딩의 '타입스크립트와 객체지향' 강의를 구매했다. 엘리스에서 아직까지 강의를 오픈해주고 있기 때문에 이전에 들었던 타입스크립트 강의를 복습하기도 했다. 그럼에도 강의를 구매한 이유는 무언가 지불하고 나면 그나마 열심히 하는 내 기질 때문이다. 강의평이 꽤나 좋기도 했고 객체지향이나 타입스크립트의 안티 패턴 등을 잘 알려주는 등 엘리님의 강의는 꽤나 만족스러웠다. 이론 강의는 모두 들었고 지금은 마지막 과제를 진행하고 있다.

 

진행 중인 과제는 비디오, 이미지, 할 일,  메모 등을 올리는 간단한 웹페이지를 제작하는 건데, 강의에서 배웠던 타입스크립트와 객체지향을 적용해야 한다. 드래그앤드랍도 구현해야 한다. 사용해봤던 경험이 있는 타입스크립트는 어렵게 느껴지진 않았지만 객체지향적으로 코드를 작성하는 게 막막했다. 지금도 잘하고 있는지 모르겠지만 우선 해설을 보지 않고 나만의 방식대로 완성시켜 볼 계획이다. 단순히 주어진 과제를 수행하는 것보다는 내가 사용하고 싶은 앱을 만들고 싶어서 여러 기능을 추가하고 있다. 과제 이외에 추가할 기능은 다음과 같다.

 

• 탭 구현
• 할 일 목록에 카테고리 기능 추가
• 로컬 스토리지 연동하여 CRUD 구현하기
• shadow-dom 사용해보기
• 날씨, 미세먼지 정보 알려주기

custom-element의 존재에 대해서는 알고 있었는데 쉐도우 돔에 대해서는 처음 알게 되었다. (정말 아직도 모르는 것이 너무나도 많다.) 커스텀 엘리먼트를 생성할 때 두 번째 인자로 class 객체를 주입시키는데 이 부분을 객체지향과 접목시켜 프로젝트를 만들 수 있을 것 같아서 MDN 등을 살펴보다가 여러 흥미로운 점을 발견했다. 특히 class 객체에서 여러 생명주기 메서드를 사용할 수 있다는 점이 리액트와 유사하단 생각이 들어서 매우 흥미로웠다. 예를 들어 connectedCallback()은 커스텀 엘리먼트가 문서에 연결될 때 호출된다. 커스텀 엘리먼트의 다양한 생명주기 콜백은 아래의 링크에서 확인할 수 있다.

 

라이프사이클 콜백

 

shadow-DOM은 메인 DOM으로부터 독립된 DOM인데, 가장 큰 특징은 캡슐화이다. 재사용 가능한 캡슐화된 웹 컴포넌트를 커스텀 엘리먼트와 쉐도우 돔을 이용해 구현할 수 있다. 만약 template과 slot 태그를 사용한다면 쉐도우 돔 내의 엘리먼트를 동적으로 다룰 수도 있다. 탭을 누르면 특정 엘리먼트가 slot에 삽입되도록 하여 탭 기능을 간편하게 구현할 수 있었다. 

 

위 기술들은 모두 웹 컴포넌트에 관한 것이다. MDN에 따르면 파이어폭스, 크롬, 오페라에서 지원되고, 사파리에서는 부분적으로 지원, 엣지에서는 준비 중이라고 소개한다. 사실 사용하면서도 리액트나 다른 프레임워크를 활용하는 것이 더 편리하단 생각이 들었지만, 외부 프레임워크에 의존하지 않고 자바스크립트에서 기본적으로 제공하는 API로 컴포넌트를 구현할 수 있다는 점이 흥미로웠다. (서로가 완전히 대체되는 성질도 아닌 듯하다.) 향후 관련 API가 더 발전한다면 프레임워크에 대한 의존도가 크게 줄어들 수도 있지 않을까.

 

Findings (배운 점)

1. 커스텀 엘리먼트 정의하고 쉐도우 돔 부착하기
2. 탬플릿과 슬롯으로 더 유연한 웹 컴포넌트 구성하기
3. 일반적으로 Type Assertion은 지양해야 한다.
4. 타입스크립트 제네릭 사용법

 

Affirmation(자기 선언)

더 자주 기록하고 회고한다.