/frontend

๐Ÿ“š ์ž์‚ฐ ๊ด€๋ฆฌ ์„œ๋น„์Šค - FE

Primary LanguageJavaScriptMIT LicenseMIT

ํ•จ๊ป˜ํ•˜๋Š” ์ž์‚ฐ ๊ด€๋ฆฌ ์„œ๋น„์Šค ๋ชจ์•„๋ชจ์•„์ž…๋‹ˆ๋‹ค! ๐Ÿก


๐Ÿ“ Introduction

๐Ÿฝ ์–ด์ œ๋ณด๋‹ค ๋ฐœ์ „ํ•  ์ˆ˜๋ฐ–์— ์—†๋Š” ์†Œ๋น„ ์Šต๊ด€

๋ˆ๊ณผ ๊ด€๋ จํ•œ ๊นŠ์€ ์ด์•ผ๊ธฐ๋“ค, ์†”์งํžˆ ์นœ๊ตฌ๋“ค๊ณผ, ์ฃผ๋ณ€๊ณผ ์ด์•ผ๊ธฐํ•˜๊ธฐ ์กฐ๊ธˆ ์–ด๋ ต์ง€ ์•Š์œผ์‹ ๊ฐ€์š”..? ๋‚˜์™€ ๋น„์Šทํ•œ ์‚ฌ๋žŒ๋“ค์€ ๋ˆ๊ด€๋ฆฌ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€ ๋„ˆ๋ฌด๋‚˜ ๊ถ๊ธˆํ•˜๊ณ , ๋‚˜์˜ ๊ฑด๊ฐ•ํ•œ ์†Œ๋น„๋ฅผ ์ž๋ž‘์„ ํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ์ ๋„ ์žˆ์—ˆ์„ ๊ฒƒ ๊ฐ™์•„์š”. ์ €ํฌ ๋ชจ์•„๋ชจ์•„ํŒ€์€ ๊พธ์ค€ํ•œ ์ž์‚ฐ๊ด€๋ฆฌ์™€ ์†Œ๋น„์Šต๊ด€ ๊ฐœ์„ ์„ ์œ„ํ•ด ์„œ๋กœ์˜ ์†Œ๋น„ ์Šต๊ด€์„ ์‘์›ํ•˜๋Š” ๊ด€๊ณ„๋ฅผ ์ด์–ด์ฃผ๊ณ  ์นœ๊ตฌ๋ณด๋‹ค๋„ ํŽธํ•˜๊ฒŒ ์ด์•ผ๊ธฐํ•˜๋ฉด์„œ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ณต๊ฐ„์„ ๋งŒ๋“ค๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿฝ ํ•˜๋ฃจ ์ •๋ฆฌ๋ฅผ ๋ชจ์•„๋ชจ์•„์™€ ํ•จ๊ป˜

ํ•˜๋ฃจ์— ๋”ฑ 10๋ถ„! ๊ฐ€๊ณ„๋ถ€์™€ ๋จธ๋‹ˆ๋กœ๊ทธ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ ์˜ค๋Š˜ ํ–ˆ๋˜ ์†Œ๋น„๋ฅผ ๋˜๋Œ์•„๋ณด๊ณ , ๋‚ด์ผ์„ ๊ณ„ํšํ•ด๋ณด์•„์š”. ํ•˜๋ฃจ 10๋ถ„ ํˆฌ์žํ•˜์—ฌ ์˜ค๋Š˜ ํ•˜๋ฃจ ์ง€์ถœ ๋‚ด์—ญ์— ๋Œ€ํ•œ ์นญ์ฐฌ๊ณผ ๋ฐ˜์„ฑ์„ ๊ธฐ๋ก์œผ๋กœ ๋‚จ๊ฒจ ๊ฑด๊ฐ•ํ•œ ์†Œ๋น„ ์Šต๊ด€์„ ๊ธฐ๋ฅด๊ณ  ํ‰์ƒ์˜ ์ž์‚ฐ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ๊ธฐ๋ฐ˜์„ ๋‹ค์งˆ ์ˆ˜ ์žˆ์–ด์š”.

๐Ÿฝ ๊ณต์œ  ํ”Œ๋žซํผ

๊ฐœ์ธ์ ์œผ๋กœ ๋จธ๋‹ˆ๋กœ๊ทธ์˜ ์›ํ•˜๋Š” ๋ถ€๋ถ„๊ณผ ๋ชจ์•„๋ชจ์•„๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์ˆ˜์ต/์ง€์ถœ ํŒจํ„ด ๊ทธ๋ž˜ํ”„๋ฅผ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ณต์œ  ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์–ด์š”. ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ†ตํ•ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ์€ ์–ด๋–ค ์†Œ๋น„๋ฅผ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๊ณ , ๋Œ“๊ธ€๋กœ ์ƒํ˜ธ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ์–ด์š”. ๋˜ํ•œ, ๋‹ค์–‘ํ•œ ์ž์‚ฐ ๊ด€๋ฆฌ ๋ฐ ํˆฌ์ž ์ •๋ณด๋“ค์„ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ํ†ตํ•ด ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์–ด์š”.


โฐ Dev Period

2022-03-02 - 2022-04-30


๐ŸŽจ Design

  • ์™€์ด์–ดํ”„๋ ˆ์ž„
  • ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ : desktop, tablet
  • Chrome, Safari, Firefox, Edge IE ๋“ฑ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์— ์ตœ์ ํ™”

๐Ÿ“ฌ API


๐Ÿ”จ Tech Stack

Frontend

Javascript React Redux Styled-Component React-Query

Backend

Java Spring boot Spring Security MySQL Redis


๐Ÿ‘จโ€๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ง Contributors

๋ฐฑ์—”๋“œ ๋ฐฑ์—”๋“œ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐํš
๊น€๋„ํ›ˆ ๊น€๋ฏผ์šฐ ์œ ์ง€์•„ ๊ฐ•์€๋น„ ๊น€์˜ˆ๋ฆผ
๊น€๋„ํ›ˆ ๊น€๋ฏผ์šฐ ์œ ์ง€์•„ ๊ฐ•์€๋น„ ๊น€์˜ˆ๋ฆผ

โœจ Role

Name Role
๊น€์˜ˆ๋ฆผ ๋ชจ์•„๋ชจ์•„ ๊ธฐํš ๋ฐ ์ˆ˜์ •, ์™€์ด์–ดํ”„๋ ˆ์ž„ ์ž‘์„ฑ
์œ ์ง€์•„ ๊ฐœ์ธ์ •๋ณด ๋ณ€๊ฒฝ ํŽ˜์ด์ง€, ๊ฐ€๊ณ„๋ถ€ ์„ค์ • ํŽ˜์ด์ง€, ๊ฐ€๊ณ„๋ถ€ ํ†ต๊ณ„ ํŽ˜์ด์ง€
๊ฐ•์€๋น„ ์ปค๋ฎค๋‹ˆํ‹ฐ, ๊ฐ€๊ณ„๋ถ€ ์ˆ˜์ต์ง€์ถœ ๊ด€๋ฆฌ ํŽ˜์ด์ง€, ๊ฐ€๊ณ„๋ถ€ ๋จธ๋‹ˆ๋กœ๊ทธ ํŽ˜์ด์ง€, ๋งˆ์ดํŽ˜์ด์ง€, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€
๊น€๋„ํ›ˆ ๊ฒŒ์‹œ๊ธ€, ๋Œ“๊ธ€/๋Œ€๋Œ“๊ธ€, ์ข‹์•„์š”/์Šคํฌ๋žฉ, ์ด๋ฏธ์ง€ ํŒŒ์ผ ์—…๋กœ๋“œ, ๊ฐ€๊ณ„๋ถ€ ์„ค์ •/์ˆ˜์ต ์ง€์ถœ ๊ด€๋ฆฌ/๋จธ๋‹ˆ๋กœ๊ทธ
๊น€๋ฏผ์šฐ JWT + OAuth2 ๊ธฐ๋ฐ˜ ๋กœ๊ทธ์ธ ์ธ์ฆ, ์ด๋ฉ”์ผ ์ธ์ฆ, ์‹œํ๋ฆฌํ‹ฐ ์„ค์ •, ๋ฐฐํฌ ๋ฐ ๋ฐฐํฌ ์ž๋™ํ™”, ๊ฐ€๊ณ„๋ถ€ ํ†ต๊ณ„

๐Ÿค— Team Culture

  1. ์šฐ๋ฆฌ๋Š” ๊น๋ถ€! ๐ŸŽฒ
    • ์ƒํ˜ธ ์กด์ค‘๊ณผ ์ˆ˜ํ‰์  ๊ด€๊ณ„๋Š” ๊ธฐ๋ณธ์ž…๋‹ˆ๋‹ค.
  2. ๋ถˆํŽธํ•ด? ๋ถˆํŽธํ•˜๋ฉด ์ž์„ธ๋ฅผ ๊ณ ์ณ์•‰์•„! ๐Ÿ˜Ž
    • ํšŒ์˜๋Š” ๊ณต์ ์ธ ์ž๋ฆฌ์ž…๋‹ˆ๋‹ค. ์„œ๋กœ์—๊ฒŒ ์กด์นญ๊ณผ ์กด๋Œ“๋ง์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ํšŒ์˜๊ฐ€ ๊ฐ์ •์ ์ธ ๋ฐฉํ–ฅ์œผ๋กœ ์น˜์šฐ์น˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  3. ํ•œ ์ฃผ์˜ ๋งˆ๋ฌด๋ฆฌ๋Š” ํŒ€์›๋“ค๊ณผ ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ
    • ๋งค์ฃผ ์ผ์š”์ผ ์˜คํ›„ 1์‹œ์— ๋งŒ๋‚˜์„œ ์˜คํ”„๋ผ์ธ ํšŒ์˜๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  4. ๊ธฐ์–ต๋ณด๋‹จ ๊ธฐ๋ก์„ ๐Ÿ“„
    • ๊ฐœ๋ฐœ์ž๋Š” ๊ธฐ์–ต์„ ๋ฏฟ์ง€ ์•Š์•„์š”. ๊ธฐ๋ก์„ ๋ฏฟ์Šต๋‹ˆ๋‹ค. ํšŒ์˜๋ก์€ ๊ผญ ๋…ธ์…˜์— ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  5. ์–ดํ‘ธ์–ดํ‘ธ ์ €๋Š” ๋ฌด์ฃ„์ž…๋‹ˆ๋‹คใ…  ๐ŸฅŠ
    • ์„œ๋กœ ๊ฐ„์— ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์ง„ํ–‰ํ•ด์š”. ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ํ†ตํ•ด ๋‚ด๊ฐ€ ๋‹ด๋‹นํ•˜์ง€ ์•Š์€ ๋ถ€๋ถ„๋„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • PR์€ ํŒ€์› ๊ฐ„์˜ approve๋ฅผ ๋ฐ›์€ ํ›„ ๋จธ์ง€ ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์ง„ํ–‰ํ–ˆ๊ธฐ์—, ์„œ๋น„์Šค์—์„œ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ๋Š” ๋ชจ๋‘์˜ ์ฑ…์ž„์ž…๋‹ˆ๋‹ค.
  6. ์ƒˆ ์นœ๊ตฌ๋ฅผ ์ฐพ์•„๋ณด์ž! ๐Ÿคข
    • ์šฐ๋ฆฌ๋Š” ํŒ€์ด๋‹ˆ๊นŒ ๋”ฐ๋กœ ๋…ธ๋Š” ์‚ฌ๋žŒ ์—†์ด ๋””์Šค์ฝ”๋“œ/์นด์นด์˜คํ†ก์„ ํ†ตํ•˜์—ฌ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค!
    • ๋งค์ฃผ ์—…๋ฐ์ดํŠธํ•œ ๋‚ด์šฉ์„ ์„œ๋กœ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.
  7. ์–ด? ์ด๊ฒŒ ์™œ ๋ผ?? ๐Ÿค•
    • ์ตœ์šฐ์„  ์ˆœ์œ„๋Š” ๊ฐ€์น˜ ์žˆ๋Š” ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์ผ์ฐ ๊ทธ๋ฆฌ๊ณ  ์ง€์†์ ์œผ๋กœ ์ „๋‹ฌํ•ด์„œ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค!
    • ํ˜•์‹์ ์ธ ๋ฌธ์„œ๋ณด๋‹ค ์‹ค์šฉ์„ฑ์„ ์ค‘์‹œํ•ฉ๋‹ˆ๋‹ค.
  8. ์• ์ž์ผ ๊ทธ๊ฒŒ๋ญ์–‘? ๐ŸŒŠ
    • ๊ณ„ํš์€ ๋Š˜์ƒ ๋ณ€ํ•˜๋‹ˆ ๋ณ€ํ™”์— ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์œ ์—ฐํ•œ ์ž‘์—… ๋ฐฉ์‹์œผ๋กœ ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.
    • ๋งค๋ฒˆ ๋ณ€ํ•˜๋Š” ๊ธฐํš์— ๋งž์ถฐ ํ”„๋กœ๊ทธ๋žจ ์ฝ”๋“œ๋ฅผ ์œ ์—ฐํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.

BE Repository ๐Ÿท

๋ชจ์•„๋ชจ์•„ BE