random-quiz-frontend

๐Ÿ  ์›นํŽ˜์ด์ง€: https://random-quiz-frontend-task.vercel.app

โœ… E2E ํ…Œ์ŠคํŠธ ๋ณด๊ณ ์„œ ํŽ˜์ด์ง€: https://davidyang2149.github.io/random-quiz-frontend

๐Ÿ“š ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์†Œ๊ฐœ & ๊ธฐ๋Šฅ

'ํ€ด์ฆˆ'๋ฅผ ํ’€ ์ˆ˜ ์žˆ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค.

๐Ÿ’Ž ๊ธฐ์ˆ  ์Šคํƒ

์–ธ์–ด

  • TypeScript

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ & ํ”„๋ ˆ์ž„์›Œํฌ

  • React
  • Next.js

์ƒํƒœ๊ด€๋ฆฌ

  • Redux Toolkit

CSS ์Šคํƒ€์ผ

  • Tailwind CSS

ํ…Œ์ŠคํŠธ ๋„๊ตฌ

  • Jest
  • Testing Library
  • Cypress

ํ™˜๊ฒฝ์„ค์ • ์ง€์›

  • ESLint
  • Sentry
  • Vercel(Deploy)

ํ…Œ์ŠคํŠธ

E2E ํ…Œ์ŠคํŠธ

๊ฐ ํ”ผ์ฒ˜ ์ž‘์—…์ด ์™„๋ฃŒ๋œ ํ›„ PR์„ ์˜ฌ๋ฆฌ๋ฉด GitHub Actions๋ฅผ ํ†ตํ•ด E2E ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ๋Š” ์›นํŽ˜์ด์ง€์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ์ปค๋ฒ„๋ฆฌ์ง€

Jest์™€ Testing-Library๋ฅผ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

test-coverage

๐Ÿ”– ํ”„๋กœ์ ํŠธ ๋…ธ๋“œ ๋ฒ„์ „ ๊ด€๋ฆฌ

ํ”„๋กœ์ ํŠธ ์‹คํ–‰์‹œ ๊ถŒ์žฅ ๋…ธ๋“œ ๋ฒ„์ „

# .nvmrc
v16.15.0

If you want to manage nvm. recommand to use fnm(Fast Node Manager)

# use Homebrew
brew install fnm

๐Ÿ”– ํ”„๋กœ์ ํŠธ ํŒจํ‚ค์ง€ ์„ค์น˜ - canvas๊ฐ€ ์„ค์น˜๋˜์ง€ ์•Š๋Š” ์ด์Šˆ

ํ”„๋กœ์ ํŠธ ํŒจํ‚ค์ง€ ์„ค์น˜ ์‹œ canvas๊ฐ€ ์„ค์น˜๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ, ๋‹ค์Œ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

npm install -g node-gyp
# use Homebrew
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

๐Ÿ“š Install dependencies

npm install

๐Ÿ’ป Run dev server

npm run dev

๐Ÿงช Lint and fix

npm run lint

๐Ÿงช Run Coverage

npm run test:unit

# running option
npm run test

๐Ÿงช Run E2E tests

npm run e2e

# headless option
npm run e2e:headless