솔리드 커넥션프론트엔드 개발최초의 개발 스택과 변경 사항디자인린터, 포매터앞으로 나아갈 길Data fetching library 사용라이브러리 Github stars, npm weekly downloads 비교References
솔리드 커넥션
솔리드 커넥션은 교환학생을 나가는 학생들에게 도움을 주기 위해 23년도 말부터 시작된 프로젝트다.
우여곡절도 많았지만 끝까지 포기하지 않는 열정적인 팀원들과 성장을 지향하는 좋은 개발자들을 만나 현재까지 계속 개발을 진행해오고 있다.
프론트엔드 개발
해당 프로젝트에서 현재 나는 주로 프론트엔드 웹 개발을 맡고 있다.
원래 리엑트가 CSV를 쓰던 시절 잠깐 공부해본 것 말고는 문외한이였던 내가 20시간 정도의 Next.js 강의를 서둘러 듣고 프로젝트를 시작하게 된 것은 교환학생이라는 이 아이템에 매력을 느껴서 그랬던 것 같다.
이제 점점 팀을 키워나갈 단계이고, 혼자서 개발 할때 처럼 마음대로 코드를 짤 수도 없으며, 현재 코드 베이스는 남에게 보이기 부끄러울 정도니 대중적인 기술 스택을 적용하고 코드를 다듬기 위해 한번 큰 틀을 생각해보기로 했다.
최초의 개발 스택과 변경 사항
현재 사용하고 있는 프레임워크는 Next.js Pages Router이다.
당시에는 App Router가 초기 단계여서 여러 버그가 있다는 이야기도 들었던 것 같은데, 이전 방식인 Pages Router를 쓰게된 이유는 그냥 강의가 Pages Router를 기반으로 하고 있던 것이 가장 큰 이유이다. 그리고 이번에 새롭게 바뀐다면, 지금 써보지 못하면 앞으로 써보지 못할 것 같은 느낌에 도입 한 것도 있다.
이후에 언젠간 App Router로 바꿔야 한다 생각하면 머리가 좀 아프기도 하지만 먼 미래의 일이라 생각해야겠다.
디자인
디자인은 CSS Module만을 사용하고 있다. 뭔가 SASS나 Tailwind, styled-component는 사용하지 않고 있다. 웹은 모바일 화면만을 고려하고 만들어져서 이후 PC화면에 대응하려면 또 많은 자원이 소요될 것 같다.
당시에는 Tailwind는 따로 디자이너가 있어 피그마로 협업하는 프로젝트에서는 적절하지 않다 생각해서 사용하지 않았고, styled-component는 그냥 없이 시작하고 얼마나 불편한지 확인해보자, 라는 마인드로 사용하지 않은 것 같다.
나에게 프론트 개발이란 뭔가 하나의 실험실이여서 분명 비효율적인것을 머리속으로 알고 있지만 해보고 싶은건 다 해보면서 진행했던 것 같다.
린터, 포매터
특히 프로젝트 초반에는 린터나 TypeScript도 적용하지 않고 시작했다. 파이썬 코딩시에는 black을 적용할정도로 엄격한 포매팅과 규칙을 좋아하는 편인데, 그냥 정말로 별 생각이 없던 것 같다.
TypeScript는 난이도가 있다 생각해서 도입하지 않았던 것 같다. 처음 도입 할 때 TypeScript는 어떻게 공부해야 하나요? 글을 많이 참고했던 것 같다.
이후 EsLint와 TypeScript를 도입하며 굉장히 만족감이 높아진 것 같다.
프로젝트 폴더 구조는 처음에 pages/와 components/만을 두고 시작했다.
이후 services/로 api 요청을 분리하고, utils/, types/, constants/, containers/등을 추가해왔다.
앞으로 나아갈 길
- 디자인 관련
- Tailwind CSS 적용
- styled-component등의
Data fetching library 사용
라이브러리 Github stars, npm weekly downloads 비교
- Next.js App Router
- Github stars: 125k+
- npm weekly downloads: 7.4m+(Next.js 전체)
- TanStack Query (React Query)
- RTK Query (Redux Toolkit Query)
기존에 axios
