일단 이번 프로젝트를 진행하는 근본적인 이유는 공부했지만 기록하지 못했던 것들에 대한 복습이다. 따라서 HTML, JavaScript, ReactJS와 함께 NextJS, TypeScript는 당연히 포함되었음을 선언한다.
이외에 스타일적인 부분을 어떻게 풀어나갈지 고민이 많았는데, 결국에는 scss + MUI로 풀어나가보기로 했다. css, bootstrap, styled component, 이외에도 많은 선택지가 있었지만 이 조합을 택한 이유는 아래에서 같이 설명하도록 할 것이다.
1. NextJS
설정보다 관습(convention-over-configuration): 개발자가 해야 할 결정의 수를 줄여주면서도 유연성은 잃지 않도록 하는 소프트웨어 설계 패러다임
next는 리액트를 위해 만들어진 오픈소스 자바스크립트 웹 프레임워크로, 리액트의 단점을 보완해주기 위해 등장했다. (참고로 리액트는 라이브러리!) 현 회사에서 다수의 프로젝트가 NextJS와 함께 진행되었는데, 해당 프로젝트를 진행해나가며 기억에 남은 Next의 장점은 아래와 같았다.
- SSR(Server Side Rendering) 지원
- 간편한 라우팅
- 자동 코드 분할
이외에도 향상된 성능의 SEO(검색 엔진 최적화), 짧은 로딩 시간, CSS 등이 포함된 내장 도구를 지원함으로써 제공하는 간편화된 개발 경험 등의 특장점을 가지고 있다.
고민이 되는 부분은 버전이었다. NextJS 13에서 app directory와 Next/Image 컴포넌트의 발전 등이 큰 장점으로 거론되며 뜨거운 감자로 다루어지던 때, 나는 사내에서 처음으로 맡은 1인 개발 프로젝트에 13버전을 사용했다. 기술 스택 선정 사유를 발표할 때에도, 선배들의 인정을 받기 충분했다. 그러나 사용하며 수백번 엥..을 외쳤다. 13이 발표된 지 채 몇 달 되지도 않았던 그 때, 용감하게 사내 최초로 활용했던 13은 여유롭지 않았던 프로젝트 기간에 쫓겨 몇 가지 의문점을 남겼다. 사수도, GPT도, 구글도 나를 도와주지 않았다ㅠㅠ 해당 의문점과 12-13 차이점 등은 나중에 따로 정리해볼 예정이다. 글이 너무 길어질 것 같기 때문에..
어쨌든, 이후 작년 말 14가 발표되었고, app dir은 발전하고있다. 언젠가는 모든 next 프로젝트가 app dir을 사용하는 날이 올 것이라고 생각한다. 그래서! 이번 프로젝트에서는 13을 사용할 것이다. 정확히는 438개 이상의 버그가 고쳐졌다고 발표된 13.5 👻
2. TypeScript
사실 TS는 입사 후 공부 시간으로 주신 일주일 정도의 시간 동안 급히 공부하고 연습했던 부분이다. 그리고 느낀점은 WOW.. 왜 지금까지 사용하지 않았지? 그냥 공부할 때는 몰랐다. 대규모 프로젝트에 이렇게나 장점이 많을 줄. 학사 과정에서 진행했던 프로젝트에도 TS를 함께 사용했다면 더더더 좋았으리라 확신한다.
가끔 유지보수를 위해 이~전의 사내 프로젝트를 받아보면 TS가 빠져있는 경우가 많다. 이젠 허전하다. (TS는 이전에 현 벨로그에 정리해둔 기록들이 있으므로 기술 정의는 생략한다.)
3. SCSS + MUI
styled components는 이미 이전의 많은 개인 프로젝트에서도 적용해왔던 부분이기 때문에 제외하고, 가장 유력했던 후보지 중 하나는 tailwind 였다. 직관적인 코드와 비교적 빠른 작업 속도를 가져갈 수 있다는 부분이 굉장히 큰 장점이라고 하지만, (지극히 개인적으로는) 잘 모르겠다. 코드 자체도 직관적이라는 것을 제외하고는 다른 장점이 있을까? 복습을 하고 정리를 해야할까..? + 이번 개인 프로젝트에서는 mui를 사용하고자 하는 생각이 있었는데, 이러한 방향과는 오히려 scss가 조금 더 잘 어울린다고 생각했다. tailwind에 대한 주관적 견해와 관련된 부분은 아래 작성자 분들이 잘 정리해두신 것 같다.
- material ui와 tailwind
https://swcho.github.io/blogs/2021-02-22-material-ui-and-tailwindcss - tailwind의 장단점
https://www.jeje01.me/css/overview-and-usage-of-tailwind-css/
SCSS가 뭔데?
sass(syntactically awesome style sheets), scss(sassy-css)는 모두 문법적으로 어썸한 CSS라는 의미를 가지고 있다. 둘은 문법적으로 차이(sass는 중첩으로 들여쓰기 사용 및 속성 구분은 줄바꿈 이용, scss는 중괄호로 중첩 표현 및 세미콜론으로 속성 구분)를 가지며 보통 scss가 조금 더 넓은 범용성과 호환성의 장점을 가진다고들 말한다. 또한 공식 레퍼런스도 sass보다는 css와 더 비슷한 모양새인 scss를 선호한다고 한다. 사용자 수 역시 마찬가지.
이를 사용하는 가장 큰 이유는 css가 가지고 있는 불필요한 선택자, 연산 기능의 한계, 구문의 부재 등의 이슈를 해결해줄 수 있기 때문이다. 코드의 가독성과 재사용성 역시 높여주어 보다 심플한 표기법으로 css 구조를 평준화 할 수 있다.
sass,scss를 css pre-processor(전처리기)라고도 하는데, 이들은 스크립팅 언어이기 때문에 곧바로 웹에 적용될 수는 없다. 웹은 기본적으로 css 파일로 동작하므로 별도의 컴파일 과정을 거친 다음 css 파일로 변환하여 사용하게 된다. 따라서 전치리기를 위한 도구가 필요하며, 컴파일 시간이 소요된다는 단점도 가지고 있다.
따라서 간단하고 코드량이 적은 프로젝트는 단순 css를 사용하는 것도 방법이 될 수 있겠지만, 본 프로젝트의 취지를 고려하여 scss의 장점을 가져가려고 한다.
- css, sass, scss 차이점 https://cocoon1787.tistory.com/843
대망의, MUI
입사 후 MUI를 처음 접했고, 충격이었다. 아.. 이렇게 좋은 것이. 그리고 기획자, 디자이너나 퍼블리셔 없이 진행하는 이번 프로젝트의 경우 가장 먼저 떠오른 것 또한 MUI였다. 조금 획일화된 UI를 제공한다는 부분이 걸렸지만 1년이 넘는 시간 동안 커스텀 커스텀 커스텀을 반복했고 많은 오류와 부딪혀왔기 때문에 이러한 단점이 크게 작용하지는 않았다. 믿고 간다!
mui는 프로토타이핑과 제품 개발에 가장 많이 활용되는 interactive-component기반 React UI 라이브러리이다. 이들은 구글의 디자인 철학인 material design을 구현했는데, materialUI라고 불리었다가 5버전부터 MUI라는 명칭을 사용했다고 한다.
이외에 연혁(?)을 그래프로 표현하는 방안도 고민 중이긴 한데, 아마 그렇게 되면 chartjs나 apexcharts정도 사용하지 않을까 싶다. 변경 사항은 그때그때 다시 기록하는 걸로!
그럼 전 이만 초기구조 세팅하러 가보겠습니다 안녕 🤗
