240220 일상 및 공부들

February 20, 2024

웹 공부를 시작하다

요즘은 웹 공부에 흥미를 붙였다.

플루터를 쭉 공부하다 갑자기 왜 웹을 공부한거냐면 만들고싶은 서비스가 웹으로 만들 때 가장 가치가 있을 것 같아서이다.

사실 웹은 예전에 MJ Studio 블로그을 개발할 때 잠깐 다루어 본 적이 있다.

그 때는 React를 기본적으로 알고 React Native로 개발을 하고 있었으니 대충 styled-component , react-router, react-spring 같은 라이브러리들만 익혀서 Client Side Rendering으로 정말 React의 기본을 이용해서 개발을 했다.

그 이후로는 웹에 무언가 올리는 것을 해보고 싶을 때 Flutter를 그냥 웹으로 빌드한다든지, 최근엔 React Native를 Expo를 써서 웹으로도 빌드를 해봤다.

하지만 이런 방식에는 성능, SEO, UX등 다양한 측면에서 결함이 생겨버리기 때문에 진정한 의미의 웹이라고 볼 수 없다고 생각한다.

그래서 Next js를 열심히 공부했고 그걸 이용해서 내가 만들고싶은 웹사이트를 개발하고 있다.

무엇들을 공부했을까

간만에 이것저것 많이 공부했다.

웹 기본

일단 HTML, CSS등의 기본을 다시 잡기위해 https://poiemaweb.com/ 요 사이트를 정독했다.

놓쳤던 React API들

React를 이전에 공부했을 때 이후로 독스를 많이 안봤는데 새롭게 등장한(꽤 됐지만) Suspense, use, useTransition 등 API 들을 파악했다.

Next JS와 SSR, Server Component

Next JS 독스를 모두 읽으며(app router를 읽었다), SSR, Server Component 등의 개념을 잡을 수 있었다(이게 혼자 공부하면 상당히 헷갈리는 부분이 있다.)

CSS, Style packages

공부할게 많은 부분이였다.

처음엔 그냥 Primer UI나 MUI 같은걸 써서 디자인 시스템을 구현해야하나? 라고 생각했는데, 이것저것 비교를 해보았고 결국 Chakra UI를 기반으로 UI를 작성하기로 했다.

이것을 따라가다보니 styled-component 나 styled-system 에 대한 개념도 잡을 수 있었다.

특히 styled-system 은 sx 라는 것이 무엇인가 파고들어가다 발견했는데, 모던한 CSS in JS 라이브러리들에서 모두 이런 방식을 차용해서 그것들의 근간이 되는 개념을 익힌 기분이라 좋았다.(이 라이브러리는 웬지 모르게 Docs가 모두 막혀있어서 그냥 Github에 docs 부분의 md파일들을 모두 읽었다)

또한 기본적으로 CSS에 대해서도 많이 이것저것 필요할 때 마다 찾아보면서 익혔다. 예전엔 CSS라는 것 자체가 복잡하고 그것을 다루는 방식조차 한 프로젝트 내에서 CSS in JS로 쓰는것, Global로 쓰는것, CSS내의 변수로 쓰는 것 등 여러가지를 혼용해서 써야했기 때문에 부정적인 인식이 있었는데, 좀 심도있게 보다보니 꼭 그렇게 어려운것만은 아니였다.

Framer Motion

예전엔 react-spring을 썼었는데, 이번엔 두 가지를 고민하다 결국 Framer motion으로 정했다. API도 간단하고 어렵지 않아서 독스를 모두 읽고 적극적으로 활용중이다. 예전에 디자인 툴로써 Framer를 써본적이 있는데, 거기서 이런 완성도 높은 Web Animation Package가 있는지 몰랐다.

I18N

영어, 한글 번역을 지원하기 위해 이것도 간략히 설정법을 따라해서 설정을 하는데 여러가지 애로사항이 있었다.

Server Component와 Client Component에서 각각 다르게 API를 써줘야 하거나, Next JS의 path로 구분을 해줘야 하거나 쿠키를 핸들링하거나 SSR에서와 Hydration후에 언어가 잘 적용되거나 번역 키 타입스크립트 자동완성을 설정하는 등, 우여곡절이 꽤나 있었다.

지금은 잘 완성해서 잘 작동한다.

React Hook Form

Formik도 안써봤지만 이걸 한 번 써보기로 했다. Docs도 간단해서 다 읽었고 아직 제대로 써보진 않았지만 유용한 친구가 될 것 같다.

Yup

Next JS에서 서버도 Route API로 Firebase와 연동해서 직접 짤 것이기 때문에 데이터 검증 라이브러리를 하나 써야겠다고 생각하고 있던 참에 API가 간단한 것이 마음에 들어서 독스를 모두 읽었고 잘 사용하고 있다.

MDX

이 부분은 많이 공부했다. 살짝 스포하자면 만들고 있는 웹이 에디터 + 리더를 지원하는 Medium같은 것을 고려하고 있는데, 어떻게 글의 데이터 구조를 보관하고 렌더링해야할지 끊임없이 생각한 결과 MDX라는 결론이 처음에 나왔다.

그래서 MDX쪽 Next JS문서나 MDX Remote같은 라이브러리도 찾아보고 Remark, Rehype과정들이라든지 Markdown이 처리되는 과정같은것도 꽤 공부하고 유틸리티도 만들어두었다.

그런데 Lexical의 State자체를 관리하고 거기서 HTML을 렌더링해버리는 전략을 쓰면 MDX를 안써도 될 것 같아서 상황을 지켜봐야 할 것 같다.

Web API들

Cookie라든지, Session이라든지, ResizeObserver, IntersectionObserver 라든지 Drag & Drop, 마우스 키보드 이벤트 등 DOM을 다루는 법 등을 필요할 때 마다 공부한 것 같다.

Lexical

정말 많은부분을 할애해서 공부를 하고 Lexical 이 독스가 부실해서 거의 라이브러리내의 중요한 코드들을 거의 읽은 것 같다.

내가 만들고있는 에디터가 특정 부분 Lexical Playground에서 복붙을 해온 코드라는 점은 부정할 수 없지만 내가 직접 여러 플러그인을 만들고 공부하고, 특히 @lexical/code 부분을 완전히 가져와서 내부 코드 하이라이팅 부분을 prism.js에서 shiki.js 로 변환하여 사용하는 모듈을 만든 점은 스스로 자랑스러워 할 만 하다.

그리고 이런 wysiwyg 에디터를 만들면서 정말 개인적으로도 간만에 실력적으로 성취가 있었다고 느낀다. 난 뭐 Lexical을 써서

<div contenteditable='true'></div>

같은 바닥부터 새롭게 모든걸 구현한건 아니지만, 복사 붙여넣기, 이미지 처리, 링크 처리, 헤더, 코드블록, 인라인코드, 스타일, Indent, 키보드 숏컷, 특정 노드를 따라다니는 팝오버들 까지 하나하나 밤낮으로 그 원리를 생각해보고 구현하게 되면서 정진이 있었다고 생각한다.

shiki js

highlight js, prism js 등이 있지만 요즘 대세는 이녀석인것같다.

syntax highlighting을 해주는데 modern 한 API와 Docs가 돋보인다.

스노우 보드를 타다

이번 시즌에 태어나서 처음으로 스노우보드를 타보게 되었다. 아주 어렸을 때 딱 한 번 빼고 스키도 타본적 없었다.

주로 곤지암 스키장에 주말이나 퇴근을 하고 다녀왔는데 벌써 9번정도 갔을 정도로 재미가 있었다.

초반에 너무 많이 넘어진것 때문에 팔과 꼬리뼈부분이 통증이 있어 헬스를 못한지도 꽤 됐지만, 그걸 감안하고 탈 정도로 재미있다고 생각한다.

처음엔 일어서기도 힘들었는데 이제 어느정도 너비스턴(S턴)도 익숙해진 것 같아 이것저것 기술을 쌓아가며 즐기고있다.

겨울이 끝나가 아쉽지만 내년에는 더 본격적으로 시즌권도 끊고 타볼 예정이다.

끝