Vue์ SpringBoot๋ฅผ ํ์ฉํ ๋ ์ ๊ด๋ จ ์น SNS ๊ฐ๋ฐ ๊ณต๊ฐ์ ๋๋ค.
-
๊ฐ๋ฐ ์ธ์ด
- Vue.js 2.6.11 | vue/cli 4.5.0
- Springboot 2.5.2 | Gradle 6.8.3
-
ํ์ ์ ๋ณด ๋ฐ ์ ๋ฌด ๋ถ๋ด
-
Communication with Books
- '์ฑ '์ ์ค์ฌ์ผ๋ก ์ํตํ๋ ์น SNS ํ๋ก์ ํธ
-
CommB๋ ๋ชจ๋ฐ์ผ ์ฌ์ด์ฆ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋ฐ๋ ์น SNS์ ๋๋ค.
- ๊ธฐ์กด SNS ํ๋ซํผ์ ๊น๋ํ UI์ CommB๋ง์ ๊ท์ฌ์ด ํฌ์ธํธ๋ฅผ ๋ํด UI ๋์์ธ์ ์งํํ์ต๋๋ค.
-
์นด์นด์ค ์ฑ ๊ฒ์ API์์ ์ฐ๋์ ํตํด ๋ค์ํ ์ฑ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ฉฐ, ์ฑ ๊ณผ ๊ด๋ จํ ์ฌ๋ฌ ๊ธฐ๋ฅ์ ์ด์ฉํ ์ ์์ต๋๋ค.
- ํผ๋ ์์ฑ ์, ๊ฒ์๋ฌผ๊ณผ ์ฐ๊ด๋ ์ฑ ์ ๋ฑ๋กํ ์ ์์ต๋๋ค.
- ์นด์นด์ค ์ฑ
๊ฒ์ API๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ฑ
์ ๋ณด๋ฅผ ์ด๋ํ ์ ์์ต๋๋ค.
- CommB์์ ์ฑ ์ ๊ฒ์ํ ๊ฒฝ์ฐ, ์นด์นด์ค API์์ ํต์ ์ ํตํด ์ฑ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋, CommB DB์ ์๋ ์ฑ ์ผ ๊ฒฝ์ฐ ์๋์ผ๋ก DB์ ์ถ๊ฐํ๋๋ก ๋ก์ง์ ๊ตฌํํ์ต๋๋ค.
- ํ๋กํ ํ์ด์ง์์ ์์ฌ์ ๋ถ์นดํธ ํญ์ ํ์ฉํ ์ ์์ต๋๋ค.
- ๋ณธ์ธ์ด ์ฝ์ ์ฑ ์ ์์ฌ์ ์ถ๊ฐํ ์ ์์ผ๋ฉฐ, ๊ทธ ์ค ๋ง์์ ๋๋ ์ฑ ์ ์๋จ ์ปฌ๋ ์ ๋ฐ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
- ์ฝ๊ณ ์ถ์ ์ฑ ์ด ์๊ธฐ๋ฉฐ ๋ถ์นดํธ์ ์ถ๊ฐํด ๋ชฉ๋ก์ ๋ณผ ์ ์์ต๋๋ค.
-
์ฌ์ฉ์๋ค์ ๊พธ์คํ ๋ ์๋ฅผ ๊ถ์ฅํ๊ธฐ ์ํด ์ํด๋ฆฌ/๋ฐ์ผ๋ฆฌ ์ฑ๋ฆฐ์ง๋ฅผ ์ด์ํฉ๋๋ค.
- ์ํด๋ฆฌ ์ฑ๋ฆฐ์ง์์๋ ๋งค์ฃผ ์๋ก์ด ์ฑ ์ ์ถ์ฒํฉ๋๋ค. ํด๋น ์ฑ ์ ์ฃผ์ ๋ก ์์ฑํ ํผ๋๋ ํ๋จ์ ํ์๋์ด ํผ๋ ๋ด์ฉ์ ๋ณผ ์ ์์ต๋๋ค.
- ๋ฐ์ผ๋ฆฌ ์ฑ๋ฆฐ์ง์์๋ ๋งค์ผ ์๋ก์ด ํค์๋๋ฅผ ์ถ์ฒํฉ๋๋ค. ํด๋น ํค์๋๋ฅผ ํ๊ทธ๋ก ๋ฑ๋กํ ํผ๋๋ ํ๋จ์ ํ์๋์ด ํผ๋ ๋ด์ฉ์ ๋ณผ ์ ์์ต๋๋ค.
- ๋ด ์ฑ๋ฆฐ์ง ํ์ด์ง๋ฅผ ํตํด ์ฑ๋ฆฐ์ง ์ํ ์ฌ๋ถ๋ฅผ ํ์ธํ ์ ์์ผ๋ฉฐ, ๊ทธ์ ๋ฐ๋ผ ์ฑ๋ฆฐ์ง ๋ฑ์ง๊ฐ ์กฐ์ ๋ฉ๋๋ค. ๋ฑ์ง๋ ํ๋กํ์ ํ์ํ ์ ์๋๋ก ๋์์ธํ์ต๋๋ค.
-
JWT ํ ํฐ ์ธ์ฆ๊ณผ ์๋ฒ ์๋ฌ๋ฅผ ๊ด๋ฆฌํ๋ ๊ณผ์ ์์
axios interceptor
๋ฅผ ํ์ฉํ์ต๋๋ค. ์ฐธ๊ณ ๋ฌธ์- ์ธํฐ์ ํฐ์ ์ฃผ์ ๊ธฐ๋ฅ์ 500 Server Error ํธ๋ค๋ง, access tokenยทrefresh token ์ ์ฅ ๋ฐ header์ ์ถ๊ฐ, ํ ํฐ ๋ง๋ฃ ์ฌ๋ถ์ ๋ฐ๋ฅธ ์ถํ ์์ ์ด์์ต๋๋ค.
- ํ ํฐ ๋ง๋ฃ ์ ์ถํ ์์
์ ๋ ๋จ๊ณ๋ก ๋๋ ,
- access token๋ง ๋ง๋ฃ๋์์ ๊ฒฝ์ฐ, refresh token์ header์ ์ถ๊ฐํด ๊ธฐ์กด ์์ฒญ์ ๋ค์ ๋ณด๋ด๊ณ ์๋กญ๊ฒ ๋ฐ๊ธ๋ฐ์ token์ ์ ์ฅํ๋ ๋ฐฉ์์ด๋ฉฐ
- refresh token๊น์ง ๋ชจ๋ ๋ง๋ฃ๋์์ ๊ฒฝ์ฐ, ๋ก๊ทธ์์์ ํ๋๋ก ์กฐ์ ํ์ต๋๋ค.
-
๋ก๊ทธ์ธ ์ฌ์ฉ์๋ง ์ด์ฉํ ์ ์๋ ํ์ด์ง์ ๊ฒฝ์ฐ,
vue-router ๋ด๋น๊ฒ์ด์ ๊ฐ๋
๋ฅผ ํ์ฉํด ์ ๊ทผ ๊ถํ์ ๋ถ๋ฆฌํ์ต๋๋ค. ์ฐธ๊ณ ๋ฌธ์ -
ํผ๋์ ํ๋กํ ์ด๋ฏธ์ง๋ฅผ ์ ๋ฐฉํ ์ฌ์ด์ฆ๋ก cropํ ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ๊ฐํ๊ณ , ๋ชจ๋ฐ์ผ์์ ํ์ฉ์ด ๊ฐ์ฅ ์ฝ๋ค๊ณ ํ๋จํ
vue croppa
๋ฅผ ์ฌ์ฉํ์ต๋๋ค. ์ฐธ๊ณ ๋ฌธ์ -
๊ฒ์๋ฌผ์ด๋ ๊ฒ์ ๊ฒฐ๊ณผ๋ ์ธํผ๋ํธ ์คํฌ๋กค์ ์ ์ฉํ์ผ๋ฉฐ, ๊ทธ ๊ณผ์ ์์ Lazy load ํจ๊ณผ๋ฅผ JS๋ก ๊ตฌํํ์ต๋๋ค.
- ์ธํผ๋ํธ ์คํฌ๋กค์ ๊ฒฝ์ฐ, ๋ง์ง๋ง ๊ฒ์๋ฌผ์ด ํ๋ฉด ํ๋จ๊ณผ ๊ฐ๊น์์ก์ ๋ ๋ค์ ํ์ด์ง ์์ฒญ์ ๋ณด๋ด๋๋ก ๊ตฌ์ฑํ๊ณ ํด๋น ํ์ด์ง์ ์ฝํ ์ธ ๊ฐ ์์ ๊ฒฝ์ฐ ์์ฒญ์ ๋ฉ์ถ๋ ๋ก์ง์ผ๋ก ๊ตฌ์ฑํ์ต๋๋ค.
- scroll ์ด๋ฒคํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ฉด ์ฌ์ด์ฆ์ ๊ฒ์๋ฌผ์ ์์น๋ฅผ ๊ณ์ฐํ์ฌ opacity์ translateY๋ฅผ ์กฐ์ ํด lazy load ํจ๊ณผ๋ฅผ ๊ตฌํํ์ต๋๋ค.
-
์นด์นด์ค API๋ฅผ ์ด์ฉํ ์ฑ ๊ฒ์์ ๊ฒฝ์ฐ, space๊ฐ ํฌํจ๋์์ ๋ ์๋ฌ๊ฐ ๋๋ ์ํฉ์ ์ธ์งํ๊ณ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐพ์์ต๋๋ค.
- input ๋จ์ด์์ space๊ฐ ํฌํจ๋ ๊ฒฝ์ฐ
+
๋ก ๋ณํํ๋ ๋ฐฉ์์ ๋์ ํด ๋์ด์ฐ๊ธฐ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ ์ ์์ ์ผ๋ก ์๋ํ๋๋ก fixํ์ต๋๋ค.
- input ๋จ์ด์์ space๊ฐ ํฌํจ๋ ๊ฒฝ์ฐ
-
์ฌ๋ฌ ๋ช ์ด ํจ๊ปํ๋ ์ฒซ ํ๋ก์ ํธ์ธ ๋งํผ ๊ฒฐ๊ณผ๋ฌผ์ ๋ํ ์์ฌ์๊ณผ ํจ๊ป ํ์ ๋ฐฉ์์ ๋ํ ๊ณ ๋ฏผ๋ ๋ง์ด ํ๊ฒ ๋๋ ๊ฒ ๊ฐ์ต๋๋ค.
-
์ด๋ฐ์ ํ๋ก ํธ์๋ ํํธ์์ ๋๋ถ๋ฅ๋ฅผ ๊ธฐ์ค์ผ๋ก 3๊ฐ์ฉ ์ ๋ฌด ๋ถ๋ฐฐ๋ฅผ ํ๊ฒ ๋์๋๋ฐ, ์์ฑํด์ผ ํ๋ ์ฝ๋์ ์ปดํฌ๋ํธ ์์ ๋์ ์ฐจ์ด๊ฐ ์๊ฐ๋ณด๋ค ๋ง์์ต๋๋ค. ์ง๊ธ ์๊ฐํด๋ณด๋ฉด, ์ฒ์๋ถํฐ ๋ชจ๋ ์ ๋ฌด๋ฅผ ๋๋๊ธฐ๋ณด๋ค๋ ๊ฐ์์ ์์ ์๋์ ๋ฐ๋ผ ์ ๊ธฐ์ ์ผ๋ก ์์ ๋ถ๋ฐฐ๋ฅผ ํ ์ ์์๋ค๋ฉด ์กฐ๊ธ ๋ ์์ ์ ์ผ๋ก ์์ ์ ํ ์ ์์ง ์์์๊น ํ๋ ์์ฌ์์ด ๋จ์ต๋๋ค.
-
๊ฐ์ ๋งฅ๋ฝ์์ ํ๋ก์ ํธ ๋ง๋ฌด๋ฆฌ ๋จ๊ณ์ ์์ฑ๋์ง ๋ชปํ ๋ถ๋ถ์ด ๋ง์ ๊ธํ๊ฒ ์์ ์ ํ๊ฒ ๋์์ต๋๋ค. ์ด ๋๋ฌธ์ ์ปดํฌ๋ํธ ๊ตฌ์กฐํ๋ ์์๋๋ก ๋์ง ์์๊ณ , ์ค๋ณต๋ ์ฝ๋๊ฐ ์ฌ์ฉ๋ ๊ฒฝ์ฐ๊ฐ ๊ฝค ๋ง์์ต๋๋ค.
- ์ด ๋ถ๋ถ์ ๋ํด์๋ ์ฌ๋ฌ ์์ฌ์์ด ๋จ์ ์ดํ ํ๋ก์ ํธ ์งํ์ ๋์์ด ๋ ์ ์๋๋ก ๊ฐ์ ์ ์ ์ ๋ฆฌํด๋ณด์๋ฉด,
- UI ์ค๊ณ ๋จ๊ณ์์ ๋์์ธ๋ฟ ์๋๋ผ ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์์ธํ๊ฒ ๊ตฌ๋ถํ์ฌ ํ ๋ด ํฉ์๋๋ฅผ ๋์ฌ์ผ ์ํธ ๊ฐ์ ์์ ์ ๋์์ด ๋ ์ ์๋ค.
- ๊ณตํต์ ์ผ๋ก ์ฌ์ฉํ๋ CSS ์ฝ๋๋ ์ด๋ฐ๋ถ ์์ ๊ณผ ๊ฐ์ด ์คํ์ผ์ํธ๋ก ์ ๋ฆฌํด์ ์ฌ์ฉํ๋ค.
- ๋์ผํ๊ฑฐ๋ ์ ์ฌํ ๋ก์ง์ method, computed๊ฐ ๋ณด์ด๋๋ฐ ์ด ์ญ์ vuex๋ฅผ ์ข ๋ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ ํ์๊ฐ ์๋ค.
- ์๋ก์ ์ฝ๋๋ฅผ ๊ณต์ ํ๋ฉด์ ํผ๋๋ฐฑํ ์ ์๋ ์๊ฐ์ ์กฐ๊ธ ๋ ๋ ์ ์์๋ค๋ฉด ํผ์ ์ด ์ ์์ ๊ฒ ๊ฐ๋ค.
-
API ํต์ ์ ํ๋ฉฐ, ์๋ต ๋ฐ์ดํฐ์ ํ์ํ์ง ์์ ๋ค์คํ ์ด ๋์ด ์๋ ๊ฒฝ์ฐ๊ฐ ์กด์ฌํ์ต๋๋ค. ์๋ฅผ ๋ค๋ฉด,
response.data.data
์ ๋ฐฉ์์ผ๋ก ์ ๊ทผํด์ผ ํ๊ฑฐ๋ Object์ ์์ดํ ์ด ํ๋๋ฟ์ธ๋ฐresponse.data.<Object>.<key>
๋ก ํ ๋ฒ ๋ ๊น์ด ์ ๊ทผํด์ผ ํ๋ ๋ถ๋ถ์ด ์์๋๋ฐ ๊ธฐํ ๋จ๊ณ์์ api ์ค๊ณ๋ฅผ ์กฐ๊ธ ๋ ๊ผผ๊ผผํ๊ฒ ํด์ผ๊ฒ ๋ค๋ ์๊ฐ์ด ๋ค์์ต๋๋ค.
-