Code Monkey home page Code Monkey logo

react-express-ts-lerna-boilerplate's Introduction

React, Express, TypeScript Lerna Monorepo Boilerplate

React, Express, TypeScript๋ฅผ Lerna๋กœ ๊ตฌ์ถ•ํ•œ ๋ชจ๋…ธ๋ ˆํฌํ•˜์—ฌ ์‰ฝ๊ฒŒ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.


๐Ÿ“‚ ํด๋” ๊ตฌ์กฐ

์ด ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํด๋” ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

โ”œโ”€โ”€ packages/
โ”‚   โ”œโ”€โ”€ client/
โ”‚   โ”œโ”€โ”€ server/
โ”œโ”€โ”€ lerna.json
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ tsconfig.base.json
โ”œโ”€โ”€ ...
  • packages/client: React ํด๋ผ์ด์–ธํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜
  • packages/server: Express ์„œ๋ฒ„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜

๐Ÿ“– ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

  1. ํ”„๋กœ์ ํŠธ ํด๋ก 
git clone https://github.com/chan9yu/react-express-typescript-lerna-boilerplate.git
  1. ์˜์กด์„ฑ ์„ค์น˜
# root ์œ„์น˜์—์„œ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
yarn install
  1. ๊ฐœ๋ฐœ ์„œ๋ฒ„ ์‹œ์ž‘
# client์™€ server ํŒจํ‚ค์ง€์˜ ๊ฐœ๋ฐœ์„œ๋ฒ„๊ฐ€ ๋™์‹œ์— ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.
yarn dev

โš™๏ธ ์„ธํŒ… ํ™˜๊ฒฝ

client

  • react: v18.2.0
  • vite: v4.2.0

server

  • express: v4.18.2

common

  • lerna: v6.5.1
  • typescript: v5.0.2

๐Ÿ“Œ ์ฐธ๊ณ 

  • ๊ฐ์ฒด์ง€ํ–ฅ๋ฌธ๋ฒ•์„ ๊ณต๋ถ€ํ•˜๊ธฐ ์œ„ํ•ด server ํŒจํ‚ค์ง€๋Š” OOP๋กœ ์ž‘์„ฑํ•˜์˜€์œผ๋ฉฐ ์‹ฑ๊ธ€ํ„ด ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • controller, service, model, router๋กœ ๋‚˜๋ˆ„์–ด api๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํด๋”๊ตฌ์กฐ๋ฅผ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

โš™๏ธ setting

node -v

v18.12.1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.