풀스택 환경을 구축한 한 기업에서 운이 좋게 2024년 상반기 인턴십 기회를 얻었다.

이때까지 Java+Springboot 기반의 순수 백엔드 프로젝트 경험이 대부분이었고, JavaScript를 활용한 프로젝트 경험이 전무한데, TypeScript를 사용하는 풀스택 개발팀에 합류하게 되었다!!

솔직히 좀 두렵고 무섭지만, 앞으로 내가 몸을 담을 이 생태계에서 살아남기 위한 내성을 키우는 도전이라고 생각하고 있다. 강한 자가 살아남는 게 아니라 살아남는 자가 강하다는 말을 믿고 있다.

목표는 3월 ~ 8월까지 회사가 운영하는 서비스에 특정 기능을 안정성 있게 구현하여 회사에 내 흔적을 남기고 가는 것이다.

회사는 RedwoodJS라는 독특한 풀스택 개발 환경을 구축하였다.

RedwoodJS란? 한번 chatGPT에게 물어보자.

RedwoodJS는 2020년 전후에 태어난 JavaScript 진영의 React 기반 풀스택 프레임워크이다. 캐치프레이즈가 The App Framework for Startups인 만큼, 풀스택 개발에 필요한 수많은 Tool을 풍부하게 제공하고 있다.

Velog 상에서 RedwoodJS를 폭넓게 다루는 한글 게시물이 거의 없다.
아마 내 생각엔 이유가 둘 중 하나일 것 같은데

1. 인지도가 낮아서 다루는 사람이 별로 없거나
2. 나 빼고 이미 다 알고 있거나

내 게시물이 RedwoodJS를 다루려는 누군가에게 도움이 되었으면 좋겠다.

• React.js
• GraphQL
• Prisma ORM
• Jest
• Storybook
• TailwindCSS
• Typescript

RedwoodJS 환경을 구성하는 위 기술스택에 대해서는 튜토리얼을 진행하며 천천히 다루어보려고 한다.

사전 준비

• M1 Macbook
• Node v20.11.1
• npm 10.2.4
• TypeScript 사용

yarn create redwood-app my-redwood-project (--typescript)
cd my-redwood-project
yarn install
yarn redwood dev

참고로 이런 오류가 뜨는 경우가 있다.
터미널에 "corepack enable"를 입력하면 해결된다는데 나는 해결이 되지 않았다.

노드 버전을 21에서 20으로 낮추고, 기존에 설치했던 yarn을 삭제한 후 yarn install을 실행하니 해결되었다.

error This project's package.json defines "packageManager": "yarn@4.1.0". However the current global version of Yarn is 1.22.21.

Presence of the "packageManager" field indicates that the project is meant to be used with Corepack, a tool included by default with all official Node.js distributions starting from 16.9 and 14.19.
Corepack must currently be enabled by running corepack enable in your terminal. For more information, check out https://yarnpkg.com/corepack.

아래 명령어를 실행하면 프로젝트가 시작된다.

yarn redwood dev

기본 실행 경로는 http://localhost:8910/ 이다.

패키지 구조

web 패키지는 Front-End 코드를, api 패키지는 Back-End를 담당한다고 한다.
패키지별 주요 파일에 대해 간단하게 정리해보자.

web 패키지

• /src/Routes.tsx
  URL에 따라 어떤 페이지를 보여줄지에 대한 라우팅을 관리하는 공간이다. 로그인 여부나 로그인한 유저의 권한에 따라 특정 페이지에 대한 접근을 막을 수 있는 기능도 제공한다.

• /src/pages
  말 그대로 유저에게 보여줄 페이지를 작성하는 공간이다.

• /src/components
  페이지를 구성하는 다양한 UI를 생성 및 관리하는 공간이다. UI가 만약 Cell일 경우 mock 파일을 활용할 수 있다.

• /src/layouts
  반복되는 페이지 내부 구성요소를 따로 분리하여 재사용성을 강화하기 위한 UI 컴포넌트이며, Routes.tsx에서 여러 페이지를 묶어 해당 layout 사용을 지정할 수 있다.

• Componenet명.tsx
  React 기반으로 컴포넌트를 구현한다. RedwoodJS는 기본적으로 tailwindCSS를 활용할 것을 권장한다.

• test.tsx
  작성한 컴포넌트에 대한 테스트 코드를 작성하는 공간이다.

• stories.tsx
  기본적으로 generated 함수가 존재하며, 작성한 컴포넌트를 Storybook 상에서 확인할 수 있는 공간이다. 컴포넌트를 반환하는 함수를 정의하면 Storybook에서 함수의 반환 결과를 화면으로 제공한다.

• mock.ts
  기본적으로 standard라는 함수가 존재하며, 스토리 파일이나 테스트 파일에 필요한 기초 더미데이터를 포함한다. 보통 Cell을 다룰 경우 사용된다.

api 패키지

• api/db/schema.prisma
  간단한 문법 기반 스키마를 통해서 DB 마이그레이션과 관련 코드를 완전히 자동으로 생성해주는 ORM인 Prisma의 핵심 파일이다. model를 선언하여 테이블을 생성 및 테이블 내부 속성을 추가할 수 있다.

• api/src/graphql의 sdl.ts
  SDL(스키마 정의 언어)은 GraphQL이 사용하게 될 스키마를 정의하며, 데이터 모델과 해당 데이터 모델에 대한 쿼리 및 뮤테이션을 담고 있다. 프런트엔드는 실제 구현에 대해서 알 필요 없고, 오직 이 공간에서 정의해둔 뮤테이션 및 쿼리를 활용해 원하는 데이터를 가져오거나 데이터를 수정할 수 있다. 일종의 API 설명서라고 이해하면 편하다.

• api/src/services의 models.ts
  위에서 작성한 sdl에 대한 리졸버(resolver)를 구현하는 공간이다. 리졸버는 클라이언트가 요청한 데이터를 데이터베이스에서 실제로 조회하거나 수정하는 로직을 의미한다. prisma에서 제공하는 db 객체를 바탕으로 한 비즈니스 로직을 담고 있으며, 예외처리 및 유효성 검사 역시 포함된다.
  (Springboot의 Service 계층을 떠올리면 쉽다.)

• api/src/services의 test.ts
  Jest 라이브러리 기반으로, models.ts에서 작성한 비즈니스 로직의 테스트 코드를 작성하는 공간이다. 시나리오 파일이나 Mock 파일을 활용해 테스트를 진행할 수 있다.

• api/src/services의 scenarios.ts
  테스트 등에 필요한 "시나리오"를 작성하여 테스트에 활용할 수 있다.

이제 RedwoodJS 공식문서에서 제공하는 Tutorial을 경험해보자!