/Final_project

FE lab for project

Primary LanguageJavaScript

project description

projectname ๐Ÿง‘โ€๐ŸŒพ


๐Ÿฉป Service Architecture








์„œ๋น„์Šค ํ•ต์‹ฌ๊ธฐ๋Šฅ

๐Ÿ›  Tech & Platfrom

Front-End

Back-End

Design

Tools



๐Ÿ›  ์ฃผ์š” ๊ธฐ์ˆ 

์‚ฌ์šฉ ๊ธฐ์ˆ  ๊ธฐ์ˆ ๋‚ด์šฉ
CI/CD FE์—์„œ๋Š” Github Actions, BE์—์„œ๋Š” jenkins, nginx๋ฅผ ์‚ฌ์šฉํ•œ ์ž๋™ ๋นŒ๋“œ ๋ฐ ๋ฌด์ค‘๋‹จ ๋ฐฐํฌ ๊ตฌํ˜„
Refresh token JWT ํ† ํฐ์„ ์ผ์ • ์‹œ๊ฐ„๋งˆ๋‹ค ์ž๋™ ๋ฐœ๊ธ‰ํ•˜์—ฌ ์ธ์ฆ์‹œ๊ฐ„์„ ๋Š˜๋ฆฌ๊ณ  ๋ณด์•ˆ์„ฑ ๋†’์ž„
์ด๋ฉ”์ผ ์ธ์ฆ ํšŒ์›๊ฐ€์ž…์‹œ ์ธ์ฆ ์ด๋ฉ”์ผ์„ ๋ฐœ์†กํ•˜์—ฌ ์‚ฌ์šฉ์ž ํ™•์ธ
์†Œ์…œ ๋กœ๊ทธ์ธ ์นด์นด์˜ค๋ฅผ ํ†ตํ•œ ์†Œ์…œ ๋กœ๊ทธ์ธ
Cache ์ผ€์‹œ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•œ API ์š”์ฒญ ์ตœ์†Œํ™”
CloudFront ์ •์  ์ปจํ…์ธ ์˜ ์ „์†ก ์†๋„๋ฅผ ๋†’์ด๊ณ  HTTPS ์ ์šฉ์„ ํ†ตํ•œ ๋ณด์•ˆ๊ฐ•ํ™”
ํ†ต๊ณ„๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ApexCharts ์ปค์Šคํ…€์„ ํ†ตํ•ด ํ†ต๊ณ„ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์–‘ํ•œ ๊ทธ๋ž˜ํ”„๋กœ ์‹œ๊ฐํ™”



๐Ÿ“š ์ฃผ์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ช… ๋ฒ„์ „ ์‚ฌ์šฉ๋ชฉ์ 
react-redux 6.3.0 ๊ทœ๋ชจ๊ฐ€ ํฐ ํ”„๋กœ์ ํŠธ์˜ ๋ฐ์ดํ„ฐ ์ „์—ญ๊ด€๋ฆฌ์— ์šฉ์ด. mobx, recoil ๋“ฑ๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ ์•„์ง๊นŒ์ง€ ์‚ฌ์šฉ์ž๊ฐ€ ์••๋„์ ์œผ๋กœ ๋งŽ๊ณ  ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ๊ฐ€์žฅ ๋ฐœ๋‹ฌ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ œ์ผ ๊ธฐ๋ณธ์ ์ธ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์ดํ•ด๋„๋ฅผ ๋†’์ด๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ
react-actions 2.6.5 ๋ฆฌ๋“€์„œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ switch๋ฌธ์ด ์•„๋‹Œ handleActions๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ๊ฐ€ ์งง์•„์ง€๊ณ  ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ง. ๋‹ค๋ฅธ ์ƒํƒœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋น„ํ•ด ์ฝ”๋“œ๊ฐ€ ๊ธธ๊ณ  ๋ณต์žกํ•œ redux์˜ ๋‹จ์  ๋ณด์™„
react-thunk 2.4.1 redux ์•ก์…˜์„ ๋ฐ˜ํ™˜ํ•  ๋•Œ ๊ฐ์ฒด๋ฟ ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ํ•ด์ฃผ์–ด ๋ฏธ๋“ค์›จ์–ด์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅ
react-router-dom 6.3.0 ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฒฝ๋กœ์„ค์ • ๊ฐ€๋Šฅ
Styled-components 5.3.5 css์˜ ์ปดํฌ๋„ŒํŠธํ™”๋กœ ์žฌ์‚ฌ์šฉ ๋ฐ ์œ ์ง€๋ณด์ˆ˜ ์šฉ์ด, props ์ „๋‹ฌ ๋ฐ jsx๋ฌธ๋ฒ• ์ ์šฉ ๊ฐ€๋Šฅ
jwt-decode 3.1.2 jwtํ† ํฐ์—์„œ ์œ ์ €์ •๋ณด ๋””์ฝ”๋”ฉ์„ ์œ„ํ•ด ์‚ฌ์šฉ
axios 0.27.2 HTTP Client ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ Fetch API์— ๋น„ํ•ด ์ฝ”๋“œ๊ฐ€ ๊ฐ„๊ฒฐํ•˜๊ณ  JSON๋ฐ์ดํ„ฐ๋กœ ์ž๋™๋ณ€ํ™˜ ๊ฐ€๋Šฅ
react-big-calendar 0.40.2 ์ผ์ • / ์žฅ๋ถ€ / ์ผ์ง€ ํŽ˜์ด์ง€์—์„œ ๋‹ฌ๋ ฅ์— ๋“ฑ๋ก๋œ ์ด๋ฒคํŠธ๋ฅผ ๋„์›Œ์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ react-calendar, react-datepicker ๋Š” ๋‚ ์งœ ์„ ํƒ ํ˜น์€ ๋“ฑ๋ก๋œ ์ผ์ •์˜ ๊ธฐ๊ฐ„์„ ์ง๊ด€์ ์œผ๋กœ ๋ณด๊ธฐ์— ์šฉ์ดํ•˜๋‹ค๋ฉด react-big-calendar ๋Š” ๋“ฑ๋ก๋œ ์ด๋ฒคํŠธ์˜ ๋‚ด์šฉ์„ ์ง๊ด€์ ์œผ๋กœ ๋ณด์—ฌ์คŒ
react-apexcharts 1.4.0 ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋””์ž์ธ์ด ๊น”๋”ํ•˜๊ณ  CSS ๋ฐ ๋ฐ์ดํ„ฐ ์ปค์Šคํ…€์— ์šฉ์ด



๐Ÿ”ฅ ์ด์Šˆ ๋ฐ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ