바쁘다는 핑계로 기록을 소홀히 했더니, 내가 7월에 어떤 일을 하고 어떤 고민들을 했는지 벌써 기억이 가물가물하다. 기억이 더 날아가기 전에 간략하게 7월에 있었던 일을 회고해보자.

개발

Vanilla JS 로 Notion 클론 코딩

Vanilla JS 로 Notion 을 클론 코딩했다. 개발 편의를 위한 라이브러리는 사용하지 않고, 오로지 Vanilla JS만 사용하여 구현했다.

상태 관리에 대한 고민

이 프로젝트 이전에 Vanilla JS 로 간단한 앱을 구현할 때는, 컴포넌트의 계층이 그리 깊지 않아 전역 상태관리 없이 App 에서 prop을 넘겨주는 것 만으로 충분했다. 그러나 Notion 앱은 컴포넌트들의 계층이 복잡했고, 하나의 state 를 다른 컴포넌트들이 참조해야 하는 경우가 많았다. App 컴포넌트에서 모든 state 를 관리하고, prop drilling 으로 내려주도록 전체 구조를 설계하여 어찌저찌 기능을 구현했지만, 완성된 코드는 너무 복잡하고 어려웠다.

또한, 각 컴포넌트에서 view 로직과 상태 관리 로직, 비즈니스 로직들을 모두 가지고 있어서 코드가 가독성이 매우 떨어졌다. 컴포넌트는 상태를 "보여주기만" 하도록 하고 싶었는데, 아직은 프레임워크의 도움 없이 순수 JavaScript 만으로 구현하기가 어려웠다. 마침 황준일 멘토님께서 관련된 내용으로 블로그 포스팅을 올려두신 것들이 있어서 참고하여 코드를 작성해보았다. 그러나 내가 진행하고 있는 프로젝트에 적용하기에는 부족한 부분들이 있었다. (비동기 처리라던가, 랜더링 최적화 등...) 그래서 내 생각을 조금 반영하여 컴포넌트 구조를 수정하여 사용했는데, 아직 아쉽고 부족한 부분들이 많다. 추후 좀더 고민하여 좀더 범용적으로 사용할 수 있는 컴포넌트 구조를 만들어보고 싶다.

프로젝트의 아키텍처에 대해 더욱 깊게 고민해보고 싶었으나, contenteditable 을 사용해서 rich 한 에디터를 만들어보고 싶다는 욕심 때문에 기능 구현을 하는 데 시간을 많이 써버리느라 시간이 부족했다.

지금 생각해보면, 초반에 프로젝트의 구조를 고민하고 설계하는 데 시간을 좀 더 투자할 걸 하는 생각이 든다.

Youtube 웹페이지 레이아웃 클론 코딩

이번에 SCSS 를 처음으로 배워서, 배운 것을 토대로 Youtube 웹 페이지 레이아웃을 클론 코딩해보았다. javascript 로직 없이 오로지 순수하게 레이아웃 구조만 똑같이 만들었다.(이런걸 퍼블리싱이라고 부른다고 알고 있다)

나는 어떤 기술을 처음 배우거나 사용할 때는 레퍼런스를 많이 찾아보고 참고하고 응용해보려고 노력하는 편이다. 그래서 SCSS 를 사용한 다른 프로젝트들을 많이 찾아보고 사용 방법을 응용해보려고 해보았다.

SCSS 를 직접 사용해보니, CSS 를 좀 더 편리하고, 재사용 가능하도록 만든 기술 같다는 생각이 들었다. 그래서 SCSS 의 mixins 같은 기능들을 적극적으로 활용했는데, 일관된 규칙없이 mixins 만 잔뜩 만들어 사용하다보니 뒤로 갈수록 코드가 이해하기 어려워졌다. 또한, 이것저것 mixins 를 만들어 놓다보니, 해당 mixin 을 만들었다는 사실을 까먹고 사용하지 않는 경우도 많았고, 어떤 mixin 은 다양한 상황에 재사용하기 어려워서 한 두번만 사용되고 말기도 하는 점이 아쉬웠다.

만약 실제 프로젝트에서 SCSS 를 사용한다면, 빈번하게 중복되는 style 을 관리하는 용도 정도로만 mixin 을 사용하게 될 것 같다. 근데, 그런 용도로만 사용할거면 굳이 SCSS 를 사용할 필요가 있을지 조금 의문이다.

내가 CSS 도 잘 모르는 상태라, SCSS도 제대로 이해하지 못해서 생긴 의문일 수도 있겠다. 일단 나는 기반 지식에 대해 이해가 깊지 않은 상태에서 해당 기술을 wrapping 하여 만든 라이브러리 같은 것을 사용하는 것을 그닥 좋아하지 않기 때문에 (sql 문법도 잘 모르는 상태에서 orm 만 공부하는 느낌?) 당분간은 SCSS도 보다는 CSS 를 더 잘 사용하는 데 주력하고 싶다.

학습

Vue 공부

그동안은 React 만 사용하다가 처음으로 Vue 프레임워크 공부해 보았다.

Vue 의 Options API 와 Composition API 를 두 개 다 학습해보았는데, 확실히 Composition API 가 사용하기 더 편리한 느낌을 받았다. Vue 를 공부하면서 느낀 점은, 코드를 작성하는 방법만 다를 뿐, React 와 아주 유사한 것 같다는 점이다. React 에서 되는 기본적인 기능들은 거의 다 Vue 에서도 되는 것 같다. useState() 와 비슷한 기능을 하는 ref() 라던지...

또한, Composition API 를 사용하면, boiler plate 코드가 거의 사라지는 것 같은 느낌을 받았다. 코드가 굉장히 간결해져서 보기 편했다.

그러나, Vue의 디렉티브 사용 방법을 모르면, JavaScript 문법을 알아도 이해하지 못하는 코드가 많은 점이 React 와의 차이점인 것 같았다. 예를 들어 React 에서는 list.map((item) => <div>{item}</div>) 이런 식으로 javascript 의 고차함수를 사용하여 컴포넌트를 반복 출력할 수 있지만, Vue 에서는 컴포넌트를 반복 출력하기 위해 v-for 디렉티브를 사용해야 한다.

JavaScript 지식과는 별개로 학습해야 할 Vue 만의 문법 규칙이 많아 보였다. 이래서 React는 라이브러리, Vue 는 프레임워크라고 부르는구나 싶었다.

활동

오픈소스 컴트리뷰톤 Yorkie 팀 활동

오픈소스 컨트리뷰톤에서 Yorkie 오픈소스에 첫 PR 을 날리고 merge 했다. Node LTS version 을 사용하면, yorkie 프로젝트의 node package 가 install 되지 않는 버그가 발생해서 yorkie 프로젝트에서 LTS 버전을 사용할 수 있도록 .nvmrc 파일을 추가하는 PR 을 추가하고, 해당 내용이 승인을 받아 merge 되었다.

파일 하나 추가하는 건데 깜빡하고 EOF 를 추가하지 않아서 메인테이너분이 수정을 해주셨다. 조금 부끄러웠다.

별 거 아닌 파일 하나 추가한 거지만, 나도 오픈소스 컨트리뷰터가 되었다는 사실이 내심 기뻤다.