이게 몇 년 만의 기록인지 모르겠다. 일에 치여 살다 보니(핑계) 잊혀진 내 블로그…

TIL 페이지의 글들을 보니 감회가 새롭다. 내가 저 글들을 쓴 게 맞나? 싶을 정도로 현재의 나답지 않게 열정적이었다. 몇 년 동안 야근에 야근에 야근야근야근야근야근!!!!!😇❤️‍🔥 을 하니까 무기력함도 몰려왔고 개발도 그만해야겠다는 생각을 하게 되었던 것 같다.

그런데 작년 12월부터 새로운 프로젝트를 하며 생각이 조금씩 바뀌었다. 한 달 정도 진행한 짧은 프로젝트였지만 개발을 계속해야겠다는 다짐과 열정이 솟아나는 계기가 되었다. (그 계기는 비밀 우히히)

그 이후부터 투입 되었던 프로젝트들에 임하는 자세가 달라졌고, 현재 나는 Next.js v14 기반 프로젝트를 진행하며 학습하고 느꼈던 것들을 틈틈이 기록해 보려 한다! (이 글은 약간의 회고를 곁들인… 글이다)

지금 개발 중인 서비스는 타겟이 정해져 있고 어드민 서비스와 같이 폐쇄적이라 SEO를 고려하지 않아도 되기에 굳이 Next.js를 고집하지 않아도 되었다. 그럼에도 불구하고 해당 프레임워크를 선택했던 이유는 *팀장님의 압박ㅎㅎ*이 아니고 예습 같은 느낌이다. 앞으로 진행할 다른 프로젝트에는 SEO를 고려해야 하기 때문에 Next.js를 도입할 수 있을 것 같으니 지금부터 차근차근 학습해가며 매번 다른 스택 사용 않고 이 프레임워크 기반으로 우리만의 개발 환경을 만들어 가자는 게 큰 이유였다.

사실 Next.js 기반의 서비스를 이번에 처음 도입한 것은 아니다. 재작년과 작년에 이미 두 개의 서비스를 만들어냈다. 하지만 서비스의 규모가 크지 않았고, 빠르게 만들어내야 했기 때문에 Next.js만의 장점을 살리지 못한 채 마무리해야만 했다.

이번 프로젝트도 빠르게 만들어 내긴 해야 하지만 이전 프로젝트의 아쉬움을 이번에도 가지고 가고 싶진 않았다. 밤 좀 새우지 뭐…

일단 현재 프로젝트는 속도감 있는 개발을 위해 UI 템플릿을 사용하여 UI 작업에 발생하는 리소스를 최소화하고자 했다. 그래서 레이아웃과 프로젝트 구조는 크게 고민하지 않았고, 이 글에서도 해당 내용은 배제할 것이다.

<aside> 💡

내가 선정한 UI 템플릿에서는 네트워크 통신으로 axios와 fetch를 사용하였고, swr 라이브러리로 데이터 패칭과 캐시 관리를 하고 프론트 쪽 전역 상태 관리로는 redux-toolkit, css 프레임워크는 mui를 사용하고 있었다.

</aside>

CSS 프레임워크 세팅

본격적으로 개발하기 전, css 프레임워크에 tailwindcss를 추가로 세팅했다.

mui와 tailwind는 각각의 장단점이 명확하다. mui는 컴포넌트 기반이라서 컴포넌트를 가져오기만 하면 기본적으로 스타일이 세팅되어 있다. sx라는 속성을 통해 스타일을 정의하는데, 객체 타입으로 선언하며 함수로 theme 값을 가져와 사용할 수도 있다. (찾아보니 배열 형태로도 가능. 뭐 어쨌든)

지원하는 속성이 많아 어려움 없이 사용할 수 있어 편한 프레임워크다. 하지만 개발자 도구에서 보면 살짝 복잡해진다. 개발자 도구에서 확인해보면 전부 div로 되어 있는 것을 볼 수 있다. (Box, Stack, Grid, …) 그리고 TextField와 같은 컴포넌트를 사용하면 div 하위로 div가 존재하고, 그 안에 input 태그가 존재하다는 것을 알게 된다.

그래서 input 컴포넌트를 커스텀 하려고 접근할 때 자식의 자식을 찾아서 스타일을 적용해 주어야 한다.

또한 기본 스타일이 적용되어 있다 보니 직접 스타일을 넣어 주어도 적용되지 않는 경우가 있다. 이 경우는 !important로 강제해야 한다.