R3F 지옥에 입문

D+40

항상 프로젝트를 호기롭게 시작하는 편이다. 그리고 어느 정도 하다 쉽게 잊히는 프로젝트가 많았다. 하지만 나는 이미 떠 벌 떠 벌을 해놓았기 때문에 그럴 수없어졌다. 오늘의 시행착오를 적어보도록 한다

섣불리 Next.js를 접근했다

나는 부트캠프 개발자다. 지난번에도 이야기했듯 react는 개인적인 관심으로 조금 해본 정도다. 관련 문서들을 찾다 보면 webpack이니 vite니 react를 잘 말아주는 프레임워크들이 존재한다. 그들은 나름 철학을 가지고 있고, 원론적으로 본다면 자기의 철학과 일치하는 프레임워크를 써야 한다. 하지만 나는 잃을 게 없는 뉴비기 때문에 가장 최신이라고 하는 next.js를 선택했다.

next.js공식 문서에 자그마한 튜토리얼이 있다. 그들이 하는 얘기를 들어보면, 서버사이드 렌더링이라는 방법을 통해 상당히 빠르게 프런트 앤드를 구현할 수 있는 것이 next.js의 장점이다. 거꾸로 얘기하면 프런트앤드 사이드에서 연산을 돌리는 react 코드는 next.js의 철학과 맞지 않는다고 볼 수 있다. 그런 문제점 때문에 살짝 애를 먹었다.

프런트엔드 디자이너 보단 프런트엔드 엔지니어

프런트엔드 개발자는 두 가지 덕목을 갖춰야 한다. 예쁘게 그리고 쾌적하게 만드는 것. 나의 짧은 지식으로 예쁘게는 UI에 해당하고 쾌적하게는 UX에 해당한다. UX의 여러 갈래 중 하나가 엔지니어링 부분이다. 

React를 조금 써보면 이게 무슨 뜻인지 알 수 있다. 가령 같은 예쁜 화면이라고 하더라도 방식에 따라서 한 페이지를 로딩하는데 10초가 걸릴 수도 있고 1초가 걸리수도 있다. 나는 예쁘게는 항상 나중에 할 수 있다는 믿음으로 로딩시간을 줄이는데 초점을 맞추곤 한다. 

근데 얕은 CSS 지식과 nextjs 스타일의 css와 결합되니 다소 머리가 어지럽다. 좀 더 구체적으로 말한다면 이렇다. 내가 본 대부분 react 예제는 html파일을 포함하고 있었지만 next.js의 경우 그렇지 않았다. 따라서, css를 불러오는 방식이 애당초 다르다. 일단 죽이 되든 밥이 되든 하기로 했으니 어떻게든 해결하는 것은 나의 몫이다.

그래도 약속을 지킨다는 사실에 위안을 얻는다

글을 쓰면서 좋은 점은 내가 약속을 지키고 있다는 생각이 든다는 것이다. 딱 한 번을 제외하고는 계속 글을 쓰고 이 씨. 그리고 이런 일을 계속 해냈다는 점에서 오는 성취감도 꽤나 크다. 그리고 공부를 하는 가장 좋은 방식은 누군가를 가르치는 것이라고 했는데, 누군가에게 가르치기 위해 조금이라도 더 열심히 할 수 있으니 나는 만족한다. 아무튼 아직도 화면을 띄우지 못했지만 반드시 띄워서 올 것이다.