- ์น ์๋น์ค ์๊ฐ
- ๋ฒ์ ๊ธฐ๋ก
- ๊ธฐ์ ์คํ
- ์ฃผ์ ๊ธฐ๋ฅ
- ํ๋ก์ ํธ ๊ตฌ์ฑ๋
- ๋ฐ๋ชจ ์์
- ํน์ด์ฌํญ
- ๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค ํต๊ณ
- ๊ฐ๋ฐ ํ ์๊ฐ
- ๊ฐ๋ฐ ๊ธฐ๊ฐ ๋ฐ ์ผ์
- ์คํ ๋ฐฉ๋ฒ
์ธํผ ๋ฉ์ดํธ(SSAFY MATE) ๋ ์ผ์ฑ ์ฒญ๋ SW ์์นด๋ฐ๋ฏธ ๊ต์ก ๊ณผ์ ์ค 2ํ๊ธฐ ํ ํ๋ก์ ํธ ๊ธฐ๊ฐ์ ํ ๋น๋ฉ์ ๋์์ฃผ๋ ์๋น์ค์ ๋๋ค.
์ธํผ ๋ฉ์ดํธ๋ ํ ๊ณต๊ณ ์๋น์ค๋ฅผ ํตํด ํ๋ค์ ์ ๋ณด๋ฅผ ๋น๊ตํ๊ณ ๊ฒ์ ํผ์ ํตํด ๋ด๊ฐ ์ํ๋ ํ๋ก์ ํธ ํธ๋, ์ง๋ฌด, ๊ธฐ์ ์คํ ๋ฑ์ ๊ฒ์ํ์ฌ ๋ด๊ฒ ๊ผญ ๋ง๋ ํ์ ์ฐพ์ ์ ์์ต๋๋ค.
๊ต์ก์ ๊ณต๊ณ ์๋น์ค๋ฅผ ํตํด์๋ ๊ต์ก์๋ค์ ์ ๋ณด๋ฅผ ํ๋์ ํ์ธํ๊ณ ๊ฒ์ ํผ์ ํตํด ๋์ ํ์ ํ์ํ ์ง๋ฌด, ๊ธฐ์ ์ญ๋ ๋ฑ์ ๊ฐ์ถ ๊ต์ก์์ ์ฐพ์ ์ ์์ต๋๋ค.
๋ด๊ฐ ์ํ๋ ํ ๋๋ ๊ต์ก์์ ์ฐพ์๋ค๋ฉด ์ธํผ ๋ฉ์ดํธ๊ฐ ์ ๊ณตํ๋ ํ ์ง์ ๋ฐ ํ ํฉ๋ฅ ์์ฒญ ๊ธฐ๋ฅ์ ํตํด ํ์ ํฉ๋ฅํ๊ฑฐ๋ ํ์ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
- '์ธํผ ๋ฉ์ดํธ' ๊ฒ์คํธ ๊ณ์ ์ ๋ณด
์์ด๋ | ssafymate@gmail.com |
---|---|
๋น๋ฐ๋ฒํธ | ssafymate123 |
์๋น์ค๋ฅผ ๊ตฌ๊ฒฝํ๊ณ ์ถ์ผ์๋ค๋ฉด ์๋จ์ ๊ณ์ ์ ๋ณด๋ก ๋ก๊ทธ์ธ ํ ์ฌ์ฉํ์ค ์ ์์ต๋๋ค.
๐ ๋ฐฐํฌ๋ ์น ์๋น์ค๋ก ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
๐ ์๋น์ค ์๊ฐ ์์ ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
๐ ํ๋ก ํธ์๋ ์ ์ฅ์ ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
๐ ๋ฐฑ์๋(๋ฉ์ธ ์๋ฒ) ์ ์ฅ์ ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
๐ ๋ฐฑ์๋(์ฑํ ์๋ฒ) ์ ์ฅ์ ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
์ ์ฐฝ ์ด๊ธฐ ๋ฐฉ๋ฒ : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)
๋ฒ์ | ์
๋ฐ์ดํธ ๋ด์ฉ |
์ ๋ฐ์ดํธ ๋ ์ง |
---|---|---|
v1.2.10 |
- ํธํฐ์ ๊นํ๋ธ ๋งํฌ ์ฃผ์ ์์ | 22.04.05. |
v1.2.9 |
- ์ด๋ฉ์ผ ์ธ์ฆ ์ฝ๋ ๋ง๋ฃ ์ค๋ฅ ์์ | 22.03.30. |
v1.2.8 |
- ํ ํฉ๋ฅ ์์ฒญ ๋ค์ด์ผ์ ์ต์ ์์ ์์น ์ค๋ฅ ์์ | 22.03.29. |
v1.2.7 |
- ์น ์ฑ๋ฅ ์ต์ ํ(๋ค์ด์ผ ์ฐฝ ์ง์ฐ ๋ก๋ฉ ์ ์ฉ) | 22.03.20. |
v1.2.6 |
- ์ฑํ
์๋น์ค ๋ก์ง ์์ - ์น ์ฑ๋ฅ ์ต์ ํ(Code Splitting ์ ์ฉ) |
22.03.17. |
v1.2.5 |
- ํ ๋ฐฐ๋ ์ ๋๋ฉ์ด์
ํ์ผ๋ค์ ๊ธฐ๋ณธ ์ด๋ฏธ์ง ํ์ผ๋ก ๊ต์ฒด - ํ๋ก์ ํธ ํธ๋ ์๊ฐ ๋ฐฐ๋ mp4 ํ์ผ๋ค์ webp ํ์ผ ํ์์ผ๋ก ๊ต์ฒด - ํ์ด์ง ํค๋ฉ ์ฒ๋ฆฌ ๊ฐํธ |
22.03.16. |
v1.2.4 |
- ํ๋ก์ ํธ ํธ๋ ์๊ฐ ๋ฐฐ๋ gif ํ์ผ mp4 ํ์ผ๋ก ๋ณ๊ฒฝ - ์๋น์ค Description ์์ - ์๋น์ค ๋ก๊ณ ์ด๋ฏธ์ง ์ต์ ํ |
22.03.14. |
v1.2.3 |
- ์ฑํ ์๋ฒ URL ์์ | 22.03.07. |
v1.2.2 |
- ์ฒซ ํ์ด์ง ์น ์ฑ๋ฅ ์ต์ ํ - ํ์ด์ง ํค๋ฉ ์ฒ๋ฆฌ ์์ |
22.03.07. |
v1.2.1 |
- ํธํฐ ์ ํ๋ธ ์์ด์ฝ์ ์๋น์ค ์๊ฐ UCC ์์ ๋งํฌ ์ฐ๊ฒฐ | 22.02.20. |
v1.2.0 |
- ๋ฐ์ ์ ์ ๋ฐ ๋ณด๋ธ ์์ฒญ ํญ๋ชฉ ์ญ์ ๊ธฐ๋ฅ ์ถ๊ฐ - ์ฑํ ๋ชฉ๋ก ๋ฆฌ์คํธ์์ ์ ํ๋ ์ฑํ ๋ฐฉ ํ์ ๊ธฐ๋ฅ ์ถ๊ฐ - ๋ฐ์ ์ ์ ๋ฐ ๋ณด๋ธ ์์ฒญ ํ์ด์ง UI ๊ฐ์ - ๊ธฐ์ ์คํ ์ ํ ์ต์ ์ถ๊ฐ - ๋ชจ์ง ๋ง๊ฐ ํ ๊ธ ๋ฒํผ ํด๋ฆญ ์ ํ์ด์ง๋ค์ด์ ๋ฏธ์ด๊ธฐํ ์ค๋ฅ ์์ |
22.02.17. |
v1.1.1 |
- ์์ผ ์๋ฒ ์ฐ๊ฒฐ ์ค๋ฅ ํด๊ฒฐ | 22.02.15. |
v1.1.0 |
- ์ฑํ
ํ์ด์ง ์ฌ์ฉ์ ์ ์ ON/OFF ํ์ ๊ธฐ๋ฅ ์ถ๊ฐ - ํ๋ก์ ํธ ํธ๋ ์๊ฐ ๋ฐฐ๋ ์ด๋ฏธ์ง ์ถ๊ฐ - ๋ฐ์ ์ ์ ๋ฐ ๋ณด๋ธ ์์ฒญ ๋ชฉ๋ก ์๊ฐ์ ์ ๋ ฌ ์ ์ฉ ๋ฐ UI ์์ - ํค๋ ๋ง์ด ๋ฉ๋ด ์ฐฝ UI ์์ - ํ ์๊ฐ, ์๊ธฐ์๊ฐ ์ ๋ ฅ ์ฐฝ ์คํ ์ฌ์ด์ฆ ์ค๋ฅ ์์ - ๊ธฐ์ ์คํ ์ ๋ ฅ ๋ฐ ์์ ์ ์ํฐํค ์ธ์ ์ค๋ฅ ์์ |
22.02.15. |
v1.0.6 |
- ์ฑํ
ํ์ด์ง ํ๋กํ ์ด๋ฏธ์ง CSS ์ค์ฒฉ ์ค๋ฅ ์์ - ์ฑํ ํ์ด์ง์ ์๋๋ฐฉ ํ๋กํ ๋งํฌ UI ๊ฐ์ - ํ ํ์ด์ง์ ๋ชจ๋ฐ์ผ ์๋น์ค ์๊ฐ ๋ถ๋ถ PC, Mobile ์ด๋ฏธ์ง ์คํ์ผ๋ง ์์ - ๊ณต๊ณ ํ์ด์ง ํํฐ ์ต์ ๋ณ๊ฒฝ์ ํ์ด์ง ์ค์ ๋ฏธ์ด๊ธฐํ ์ค๋ฅ ์์ - ๊ต์ก์ ๊ณต๊ณ ํ์ด์ง ๊ณต์ ํ๊ธฐ, ๋ฉ์์ง ๋ณด๋ด๊ธฐ ๋ฒํผ UI ์์ - ํ ์์ฑ ๋ฐ ์์ ํ ์คํธ ์ ๋ ฅ ํผ ์ ๋ ฅ ํ ์คํธ ๊ธธ์ด ์ ํ ์ถ๊ฐ |
22.02.14. |
v1.0.5 |
- ํค๋ ๋ค๋น๊ฒ์ด์
๋งํฌ ์ค๋ฅ ์์ - ๋ชจ๋ฐ์ผ ์๋น์ค ์๊ฐ ์ด๋ฏธ์ง ์์น ์ฌ์กฐ์ |
22.02.13. |
v1.0.4 |
- ๋ฐ์ ์ ์ ๋ฐ ๋ณด๋ธ ์์ฒญ ์์ดํ ์ํ ๋ฐ์ค ๋ฐฐ์น ์ค๋ฅ ์์ ์์ | 22.02.13. |
v1.0.3 |
- ๊ธฐ์ ์คํ ์ ๋ ฅ๋์์์ ๋ฐฑ์คํ์ด์ค ์ ๋ ฅ ์ค๋ฅ ์์ | 22.02.13. |
v1.0.2 |
- ํ๋ก์ ํธ ํธ๋ ์ ํ์ ๋ก๊ทธ์ธ ํ ๋ฐ๋ก ์คํ์ผ๋ก ๋ก์ง ์์ - ์ฑํ ํ์ด์ง ์ฑํ ๋ฐฉ ์ ํ์ด ์์ ์ ์๊ธฐ๋ ์ค๋ฅ ์์ |
22.02.12. |
v1.0.1 |
- ํ์๊ฐ์ 2๋จ๊ณ ์ค๋ฅ ๋ฌธ๊ตฌ ์์ | 22.02.12. |
v1.0.0 |
- ์ธํผ ๋ฉ์ดํธ ์๋น์ค ์คํ | 22.02.12. |
HTML5 | CSS3 | TypeScript |
React | Redux | Redux-Saga | React-Query |
![]() |
|||
---|---|---|---|
Socket.io | Emotion | MUI | Mock Service Worker |
Java | Spring-Boot | Hibernate | MySQL | H2 |
TypeScript | Node.js | Nest.js | Socket.io |
Postman | Swagger | redis |
NGiNX | aws | Jenkins | docker |
๊ธฐ๋ฅ | ๋ด์ฉ |
---|---|
ํ ๊ณต๊ณ | ํ๋ค์ ์ ๋ณด๋ฅผ ๋น๊ตํ๊ณ ๊ฒ์ ํผ์ ํตํด ๋ด๊ฐ ์ํ๋ ํ๋ก์ ํธ ํธ๋, ์ง๋ฌด, ๊ธฐ์ ์คํ ๋ฑ์ ๊ฒ์ํ์ฌ ๋ด๊ฒ ๊ผญ ๋ง๋ ํ ์ ๋ณด๋ฅผ ์ ๊ณตํด์ค๋๋ค. |
๊ต์ก์ ๊ณต๊ณ | ๊ต์ก์๋ค์ ์ ๋ณด๋ฅผ ํ๋์ ํ์ธํ๊ณ ๊ฒ์ ํผ์ ํตํด ๋์ ํ์ ํ์ํ ์ง๋ฌด, ๊ธฐ์ ์ญ๋ ๋ฑ์ ๊ฐ์ถ ๊ต์ก์์ ์ฐพ์๋ณผ ์ ์์ต๋๋ค. |
ํ ์ง์ ๋ฐ ํฉ๋ฅ ์์ฒญ ๊ธฐ๋ฅ | ๋ด๊ฐ ์ํ๋ ํ ๋๋ ๊ต์ก์์ ์ฐพ์๋ค๋ฉด ํ ์ง์ ๋ฐ ํ ํฉ๋ฅ ์์ฒญ ๊ธฐ๋ฅ์ ํตํด ํ์ ํฉ๋ฅํ๊ฑฐ๋ ํ์ ๊ตฌ์ฑํ ์ ์์ต๋๋ค. |
์ค์๊ฐ 1๋1 ์ฑํ ์๋น์ค | ํ์ฅ ๋๋ ๊ต์ก์์๊ฒ ์ข ๋ ๊ตฌ์ฒด์ ์ธ ๊ฐ๋ฐ ๊ณํ์ด๋ ์ ๋ณด๊ฐ ๊ถ๊ธํ๋ค๋ฉด ์ค์๊ฐ 1๋1 ์ฑํ ์ ํตํด ์ด์ผ๊ธฐ๋ฅผ ๋๋ ์ ์์ต๋๋ค. |
๋ฐ์ํ ์น ์ ๊ณต | PC, ํ ๋ธ๋ฆฟ, ๋ชจ๋ฐ์ผ ๋ฑ ์ด๋ค ๊ธฐ๊ธฐ์์๋ ์ต์ ํ๋ ์ธํผ ๋ฉ์ดํธ ์๋น์ค๋ฅผ ์ด์ฉํ์ค ์ ์์ต๋๋ค. |
์ํคํ ์ฒ(Architecture) |
---|
![]() |
๊ฐ์ฒด-๊ด๊ณ ๋ชจ๋ธ(ERD) |
---|
![]() |
๐ ์๋น์ค ์๊ฐ ์์ ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
์ ์ฐฝ ์ด๊ธฐ ๋ฐฉ๋ฒ : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)
SEO ์ ์ |
SEO ์์
๋ด์ญ |
---|---|
![]() |
- Meta Data ์ค์ - ์ฒด๊ณํ๋ Heading ์ฒ๋ฆฌ - ์๋ฉํฑ ๋งํฌ์ ์ฌ์ฉ - Document title ์ค์ - img ํ๊ทธ์ alt ์์ฑ ์ค์ - HTTPS ์ ์ฉ |
Lighthouse๋ฅผ ํตํ ์ธก์ ๊ธฐ์ค
๊ตฌ๊ธ์ '์ธํผ ๋ฉ์ดํธ' ๊ฒ์ ์ ์ต์๋จ์ ์์น
ํ ํ์ด์ง | ํ ๊ณต๊ณ ํ์ด์ง | ํ ์์ธ ์ ๋ณด ํ์ด์ง |
---|---|---|
![]() |
![]() |
![]() |
์น ์ฑ๋ฅ ์ต์ ํ ์ | ์น ์ฑ๋ฅ ์ต์ ํ ํ (22.03.17. ๊ธฐ์ค) |
---|---|
![]() |
![]() |
ํญ๋ชฉ | ์น ์ฑ๋ฅ ์ต์ ํ ์ | ์น ์ฑ๋ฅ ์ต์ ํ ํ |
---|---|---|
Performance Score | 62 | 88 |
First Contentful Paint | 0.6s | 0.5s |
Time to Interactive | 2.8s | 1.3s |
Speed Index | 3.5s | 1.3s |
Total Blocking Time | 100ms | 0ms |
Largest Contentful Paint | 6.2s | 2.2s |
Cumulative Layout Shift | 0.128 | 0.001 |
- '์ง์ฐ ๋ก๋ฉ(Lazy Loading)' ์ ์ฉ
- ์ด๋ฏธ์ง ํ์ผ ์ต์ ํ
- ์ด๋ฏธ์ง Meta Data ์ ๊ฑฐ ๋ฐ ์ต์ ํ
- ๋ทฐํฌํธ์ ๋ฐ๋ฅธ ์ฌ๋ฌ ๋ฒ์ ์ ์ด๋ฏธ์ง ์ ๊ณต
- gif ํ์ผ๋ค์ webp, png ํ์ผ๋ค๋ก ๊ต์ฒด
- ๋ถํ์ํ JS ํ์ผ ์ ๊ฑฐ
- '์ฝ๋ ๋ถํ (Code Splitting)' ์ ์ฉ
์์ ์์ ๋ค์ ํตํด Performance Score 62์ โ 88์ ์ผ๋ก ๊ฐ์ , Speed Index ์๋ 3.5์ด โ 1.3์ด๋ก ๊ฐ์
๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค๋ฅผ ์ธํ ํ๊ณ ๋ฐฐํฌ๋ฅผ ์งํํ์ฌ 2์ 12์ผ๋ถํฐ ํ์ฌ๊น์ง ์ค์๋น์ค๋ฅผ ์งํํ๊ณ ์์ต๋๋ค.
์ค์ '์ผ์ฑ ์ฒญ๋ SW ์์นด๋ฐ๋ฏธ' ํนํ ํ ํ๋ก์ ํธ ํ ๋น๋ฉ ๊ธฐ๊ฐ์ด์๋ 2์ 12์ผ๋ถํฐ 2์ 18์ผ๊น์ง ๊ธฐ๊ฐ์ ์ง์ค์ ์ผ๋ก ๊ต์ก์๋ถ๋ค์ด ์ด์ฉํด ์ฃผ์์ต๋๋ค.
2์ 12์ผ ~ 2์ 18์ผ (1์ฃผ์ผ) ๋์ ์ต๊ณ ์น DAU 357๋ช , WAU 744๋ช ์ ๊ธฐ๋กํ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ํต๊ณ | ์ด์์ฒด์ ํต๊ณ |
---|---|
![]() |
![]() |
์ฌ์ฉ์์ 70%๊ฐ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ์ด์ฉํด์ฃผ์๊ณ , ์ด์ธ์๋ Safari, Edge ๋ฑ์ผ๋ก ์ด์ฉํ์์ต๋๋ค.
์ฌ์ฉ์์ 76%๊ฐ PC ํ๊ฒฝ์์, 22%๊ฐ Mobile ํ๊ฒฝ์์ ์ด์ฉํ์์ต๋๋ค.
|
|
|
|
|
|
์กฐ์๋น (Back-end & ํ์ฅ) |
์์๋ฐฐ (Back-end) |
์ด์ ํ (Back-end) |
๋ฐ์ ํ (Front-end) |
์์ ์ (Front-end) |
์ด์ฌ์ง (Front-end) |
์ด๋ฆ | ์ญํ | ๊ฐ๋ฐ ๋ด์ฉ |
---|---|---|
์กฐ์๋น | Back-end ํ์ฅ |
- DB ์ค๊ณ - Spring Data JPA ์ธํ ย ย ย ย - ์ฑํ ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ๋ก๊ทธ์ธ ๋๋ฉ์ธ ๊ฐ๋ฐ - TypeScript, Nest.js์ Socket.io๋ฅผ ์ด์ฉํ ์ค์๊ฐ ์ฑํ ์๋ฒ ๊ตฌํ ย ย ย ย - ์น์์ผ ์ฐ๊ฒฐ ย ย ย ย - 1๋1 ์ค์๊ฐ ์ฑํ ๊ตฌํ - JWT๋ฅผ ์ด์ฉํ ํ ํฐ ์์ฑ ๊ตฌํ - ์ฑํ ์๋ฒ EC2 ๋ฐฐํฌ - crontab ์ด์ฉํ Linux mysql DB ๋ฐฑ์ ์ค์ผ์ค๋ฌ ์๋ - 'ssafymate.site' ๋๋ฉ์ธ ์ ์ฉ |
์์๋ฐฐ | Back-end | - DB ์ค๊ณ - Spring Boot๋ก RESTful API ์์ฑ ย ย ย ย - ๋ก๊ทธ์ธ ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ์๊ฐ์ ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ์์ด๋ ์ฐพ๊ธฐ ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ๋น๋ฐ๋ฒํธ ์ฌ์ค์ ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ์ ์ ๋ณด ์กฐํ ๋ฐ ์์ ๋๋ฉ์ธ ๊ฐ๋ฐ - SMTP Server, Redis๋ฅผ ์ด์ฉํ ์ด๋ฉ์ผ ์ธ์ฆ ๊ธฐ๋ฅ ๊ตฌํ - ์คํ๋ง ์ํ๋ฆฌํฐ, JWT๋ฅผ ์ด์ฉํ ์ธ์ฆ ๊ตฌํ - EC2 ์ธํ๋ผ ํ๊ฒฝ ์ธํ - ํ๋ก ํธ์๋, ๋ฐฑ์๋ EC2 ๋ฐฐํฌ - Github Action, Jenkins, Docker๋ฅผ ํ์ฉํ CI/CD - Letsencrypt, Certbot์ ์ด์ฉํ ์๋น์ค SSL ๋ณด์ ์ ์ฉ - Nginx ์น์๋ฒ ์ ์ฉ(Load Balancing, Reverse Proxy, Service Redirect ์ค์ ) |
์ด์ ํ | Back-end | - DB ์ค๊ณ ย ย ย ย - ๊ธฐ์ ์คํ ๋ฐ์ดํฐ ์ ์ฒ๋ฆฌ ย ย ย ย - ๊ต์ก์ ์ธ์ฆ ๋ฐ์ดํฐ ์ ์ฒ๋ฆฌ - ์๋ฒ์ ๊ธฐ์ ์คํ ์ด๋ฏธ์ง ์ ๋ก๋ - Spring Boot๋ก RESTful API ์์ฑ ย ย ย ย - ๊ธฐ์ ์คํ ์กฐํ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ์์ฑ/์์ /์ญ์ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ์์ธ๋ณด๊ธฐ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ํํด ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ๋ฆฌ์คํธ ๊ฒ์ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ํฉ๋ฅ/์ง์ ์์ฒญ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ํฉ๋ฅ/์ง์ ๋ฉ์ธ์ง ์กฐํ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ํ ํฉ๋ฅ/์ง์ ์์ฒญ ์๋ต ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ๊ต์ก์ ์์ธ๋ณด๊ธฐ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ๊ต์ก์ ๋ฆฌ์คํธ ๊ฒ์ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ๊ต์ก์ ํ๋ก์ ํธ ํธ๋ ์ ํ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ ย ย ย ย - ์ฐธ์ฌ ์ค์ธ ํ ์กฐํ ์๋น์ค ๋๋ฉ์ธ ๊ฐ๋ฐ |
๋ฐ์ ํ | Front-end | - '์ธํผ ๋ฉ์ดํธ' ์๋น์ค ๊ธฐํ - ์๋น์ค ๋ฉ์ธ ํ ํ์ด์ง ๊ฐ๋ฐ - ํ ๊ณต๊ณ , ๊ต์ก์ ๊ณต๊ณ ์ ๋ณด ์ ๊ณต ๋ฐ ๊ฒ์ ์๋น์ค ๊ฐ๋ฐ - ํ ์์ฑ ยท ์์ ยท ์ญ์ ยท ํํด ์๋น์ค ๊ฐ๋ฐ - ํ ํฉ๋ฅ ์์ฒญ ๋ฐ ํ ์ง์ ์์ฒญ ์๋น์ค ๊ฐ๋ฐ - 404 Not Found ํ์ด์ง ๊ฐ๋ฐ - ํ, ๊ต์ก์ ๊ณต๊ณ ๋ชฉ๋ก ํ์ด์ง, ์์ธ ์ ๋ณด ํ์ด์ง์ Skeleton UI ๊ตฌํ - 'Redux', 'React-Query'๋ฅผ ์ด์ฉํ ์ํ๊ด๋ฆฌ - 'Emotion'์ ์ด์ฉํ CSS-in-JS ๋ฐฉ์์ผ๋ก ์คํ์ผ๋ง ๊ตฌํ - 'Media Query'์ 'React-Responsive'๋ฅผ ์ด์ฉํ ๋ฐ์ํ ์น ๊ตฌํ - ๊ฒ์ ์์ง ์ต์ ํ(SEO) ์์ ย ย ย ย - Meta Data๋ค์ ์ค์ ํ๊ณ ์ฒด๊ณํ๋ Heading ์ฒ๋ฆฌ ๋ฐ ์๋ฉํฑ ๋งํฌ์ ์ฌ์ฉ, ย ย ย ย - SEO Score 100์ ๋ฌ์ฑ - ์น ์ฑ๋ฅ ์ต์ ํ ์์ ย ย ย ย - 'Lazy Loading' ์ ์ฉ ย ย ย ย - ์ด๋ฏธ์ง ํ์ผ ์ต์ ํ ๋ฑ์ ํตํด ์น ์ฑ๋ฅ ์ต์ ํ ์งํ ย ย ย ย - Performance Score 62์ โ 88์ ์ผ๋ก ๊ฐ์ ย ย ย ย - Speed Index ์๋ 3.5์ด โ 1.3์ด๋ก ๊ฐ์ - 'Mock Service Worker'๋ฅผ ์ด์ฉํด ๋ชฉ์ API ๊ตฌํํ์ฌ API ํ ์คํธ ์งํ |
์์ ์ | Front-end | - Emotion์ ์ด์ฉํ CSS-in-JS ๋ฐฉ์์ผ๋ก ์คํ์ผ๋ง ์์
- Media Query๋ฅผ ์ด์ฉํ ๋ฐ์ํ UI ์ค๊ณ ย ย ย ย - MUI๋ฅผ ์ด์ฉํด ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ ๋ฑ์ ๋ทฐํฌํธ์ ๋ฐ๋ฅธ ์ฑํ ๋ชฉ๋ก Drawer ์ ์ฉ - Custom hook์ ์ด์ฉํ ์ฑํ ์ ๋ ฅ ์ํ ๊ด๋ฆฌ - Socket.io๋ฅผ ์ด์ฉํ WebRTC ์ฑํ ๊ตฌํ ย ย ย ย - 1:1 ์ค์๊ฐ ์ฑํ ๊ตฌํ, ๋ฉ์์ง ์ฃผ๊ณ ๋ฐ๊ธฐ ย ย ย ย - Socket์ namespace๋ฅผ ๋๋์ด ์ฌ์ฉ์๊ฐ ํ์ธ์ ์ฑํ ๋ฐฉ์ ์ ์ํ๋ ๊ฒ ์ ํ ย ย ย ย - Socket์ผ๋ก ๋ก๊ทธ์ธ, ๋ก๊ทธ์์ ์ํ๋ฅผ ์ ๋ฌํด ์ ์ ์ค์ธ ์ฌ์ฉ์์ ์จ๋ผ์ธ ์ํ ๋๊ธฐํ - SWR์ ์ด์ฉํ ์ฑํ ๋ชฉ๋ก, ์ฑํ ๋ด์ญ ์ํ ๊ด๋ฆฌ ๋ฐ ๋น๋๊ธฐ API ์ฒ๋ฆฌ ย ย ย ย - ์ฑํ ๋ด์ญ ์คํฌ๋กค ์ด๋์ ๋ฐ๋ฅธ ๋ฐ์ดํฐ ํ์ด์ง API ์ฒ๋ฆฌ, ๋ฌดํ ์คํฌ๋กค๋ง ๊ตฌํ - Mock Service Worker๋ฅผ ์ด์ฉํด ๋ชฉ์ API ๊ตฌํํ์ฌ ๋ฐฑ์๋ API ์ค๊ณ ์ด์ API ํ ์คํ ์งํ |
์ด์ฌ์ง | Front-end | - ํ์๊ฐ์
์๋น์ค ๊ฐ๋ฐ ย ย ย ย - React-hook-form ์ ์ด์ฉํ ํ์๊ฐ์ form ๊ด๋ฆฌ ย ย ย ย - ์ด๋ฉ์ผ ์ธ์ฆ์ ํตํ ํ์๊ฐ์ ๊ตฌํ - ๋ก๊ทธ์ธ ย ย ย ย - Redux, Redux Saga๋ฅผ ํตํ ํ์ ์ ๋ณด ์ํ ๊ด๋ฆฌ - ํ์ ์ ๋ณด ์์ ์๋น์ค ๊ฐ๋ฐ ย ย ย ย - React custom hook ์ฌ์ฉ ย ย ย ย - Redux, Redux-Saga๋ฅผ ํตํ ํ์ ์ ๋ณด ์ํ ๊ด๋ฆฌ - Redux๋ฅผ ํตํ ์ ์ญ Alert ์๋น์ค ๊ฐ๋ฐ - ์์ด๋์ฐพ๊ธฐ, ๋น๋ฐ๋ฒํธ ์ฌ์ค์ ์๋น์ค ๊ฐ๋ฐ - ์ ๋ ฅ๊ฐ์ ๋ํ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ํตํด ๋ถํ์ํ ํต์ ์ต์ํ - Emotion์ ์ด์ฉํ CSS-in-JS ๋ฐฉ์์ผ๋ก ์คํ์ผ๋ง ์์ - ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํ ๋ฐ์ํ ๊ตฌํ - Mock Service Worker๋ฅผ ์ด์ฉํด ๋ชฉ์ API ๊ตฌํํ์ฌ ๋ฐฑ์๋ API ์ค๊ณ ์ด์ API ํ ์คํ ์งํ |
22.01.06. ~ ์ด์ ๊ด๋ฆฌ ์ค
- ์๊ฒฉ ์ ์ฅ์ ๋ณต์
$ git clone https://github.com/ssafy-mate/ssafy-mate_front-end.git
- ํ๋ก์ ํธ ํด๋๋ก ์ด๋
$ cd ssafy-mate_front-end
- ํ์ํ node_modules ์ค์น
$ yarn install
- ๊ฐ๋ฐ ์๋ฒ ์คํ
$ yarn start
- ์๊ฒฉ ์ ์ฅ์ ๋ณต์
$ git clone https://github.com/ssafy-mate/ssafy-mate_back-end.git
- ํ๋ก์ ํฐ ํด๋ > src > main > resources ์ด๋
$ cd ssafy-mate_back-end
$ cd src
$ cd main
$ cd resources
- ํ๋ก์ ํธ ์คํ์ ์ํ yml ํ์ผ ์์ฑ
- ํ๋ก์ ํธ ์ฒซ ๋น๋์
jpa:hibernate:ddl-auto:create
๋ก ์์ฑ - ์ดํ์๋
jpa:hibernate:ddl-auto:none
์ผ๋ก ๋ณ๊ฒฝ
server:
port: [ํฌํธ๋ฒํธ]
spring:
redis:
host: [ํธ์คํธ๋ช
]
port: [ํฌํธ๋ฒํธ]
mail:
host: smtp.gmail.com
port: 465
username: [์ด๋ฉ์ผ]
password: [๋น๋ฐ๋ฒํธ]
smtp:
socketFactory:
class: javax.net.ssl.SSLSocketFactory
fallback: 'false'
port: '465'
starttls:
required: 'true'
enable: 'true'
port: '465'
auth: 'true'
jpa:
database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
hibernate:
ddl-auto: create
properties:
hibernate:
format_sql: true
show_sql: true
defer-datasource-initialization: true
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: [DB์ค์ ]
username: [์ฌ์ฉ์๋ช
]
password: [๋น๋ฐ๋ฒํธ]
jwt:
secret: [๋น๋ฐํค]
- ํ๋ก์ ํธ ํด๋ ๋ฃจํธ ๊ฒฝ๋ก๋ก ์ด๋
$ cd ssafy-mate_back-end
- ํ๋ก์ ํธ ๋น๋
$ ./gradlew build
- ๋น๋ ํด๋ ์ด๋ ํ war ํ์ผ ์คํ
$ cd build
$ java -jar [ํ์ผ๋ช
].war
- ์๊ฒฉ ์ ์ฅ์ ๋ณต์
$ git clone https://github.com/ssafy-mate/ssafy-mate_back-end_with-chatting.git
- ํ๋ก์ ํฐ ํด๋ > src > .env ํ์ผ ์์ฑ
DB_USER=[DB ์ฌ์ฉ์๋ช
]
DB_PASSWORD=[DB ๋น๋ฐ๋ฒํธ]
DB_DATABASE=[DB๋ช
]
PORT=[ํฌํธ๋ฒํธ]
- ํ๋ก์ ํฐ ํด๋ > src > ormconfig.ts ํ์ผ ์์ฑ
import { TypeOrmModuleOptions } from '@nestjs/typeorm';
import * as dotenv from 'dotenv';
import { User } from './src/entities/User';
import { ChattingRoom } from './src/entities/ChattingRoom';
import { ChattingHistory } from './src/entities/ChattingHistory';
dotenv.config();
const config: TypeOrmModuleOptions = {
type: 'mysql',
host: '[ํธ์คํธ๋ช
]',
port: 3306,
username: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE,
entities: [User, ChattingRoom, ChattingHistory],
migrations: [__dirname + '/src/migrations/*.ts'],
cli: { migrationsDir: 'src/migrations' },
autoLoadEntities: true,
charset: 'utf8mb4',
synchronize: false, // ddl-auto ์ต์
logging: true,
keepConnectionAlive: true,
};
export = config;
- ํ๋ก์ ํฐ ํด๋ > src > output > ormconfig.json ํ์ผ ์์ฑ
[
{
"name": "default",
"type": "mysql",
"host": "[ํธ์คํธ๋ช
]",
"port": 3306,
"username": "[DB ์ฌ์ฉ์๋ช
]",
"password": "[DB ๋น๋ฐ๋ฒํธ]",
"database": "[DB ๋ช
]",
"synchronize": false,
"entities": ["entities/*.js"]
}
]
- ํ๋ก์ ํธ ํด๋ ๋ฃจํธ ๊ฒฝ๋ก๋ก ์ด๋
$ cd ssafy-mate_back-end_with-chatting
- npm ์ค์น
$ npm install
- ํ๋ก์ ํธ ๋น๋
$ npm run build