์ ์ฒด ๊ธ (49) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ 1๋ ๋ฏธ๋ง ๊ทผ๋ก์์ ์ค์๊ธฐ์ ์ฒญ๋ ์ ์ธ๋์ถ (์์ ๊ฟํ) ์ค์๊ธฐ์ ์ฒญ๋ ์ ์ธ๋์ถ (์ค๊ธฐ์ฒญ): ์ฒญ๋ ๋ค์ด ์ค์๊ธฐ์ ์ ๋ค๋๋ฉฐ ์์ ์ ์ผ๋ก ์ ์ธ์๊ธ์ ๋ง๋ จํ ์ ์๋๋ก ์ง์ํ๋ ์ ๋: ๋ง 19์ธ ์ด์ 34์ธ ์ดํ ์ฒญ๋ / ์ค์๊ธฐ์ ์ ์ฌ์ง ์ค (๋๋ ์ผ์ ์๋ ์ดํ์ ๊ฐ์ธ์ฌ์ ์) / ์ฐ ์๋ 3์ฒ 5๋ฐฑ๋ง์ ์ดํ / ๋ฌด์ฃผํ์ ์์1. ์ง ๊ตฌํ๊ธฐ ๋ถ๋์ฐ์ด๋ ์จ๋ผ์ธ์ฌ์ดํธ(๋ค์ด๋ฒ๋ถ๋์ฐ, kb๋ถ๋์ฐ ๋ฑ)์ ํตํด ๋ชจ๋ ๋์ถ, ๋ฒํ๋ชฉ ์ ์ธ๋์ถ, ์ค์๊ธฐ์ ์ฒญ๋ ์ ์ธ๋์ถ์ด ๊ฐ๋ฅํ ์ง์ ์ฐพ๋๋ค. ๋จ, 2์ต์ดํ์ด๋ฉฐ ์ต๋ ๋์ถ ํ๋๋ 1์ต์ด๋ฏ๋ก 1์ต์ ์ ์ธํ ๋ณด์ฆ๊ธ์ ๋ณด์ ํ๊ฑฐ๋ ๋ค๋ฅธ ๋์ถ์ด ํ์ํฉ๋๋ค. ์ํ๋ ์ง์ ๋ฐ๊ฒฌํ ํ ๊ณ์ฝ์ ์์ฑ ์ " - ํด๋น ๊ณ์ฝ ๊ฑด์ ์ค์๊ธฐ์ ์ทจ์ ์ฒญ๋ ์ ์ธ๋์ถ ๊ณ์ฝ ๊ฑด์ผ๋ก ์๋์, ์ฃผํ์ ๋ฌธ์ ๋ก ์ ์ธ ๋์ถ์ด ๋ถ๊ฐํ ๊ฒฝ์ฐ ๊ฐ๊ณ์ฝ๊ธ ํฌํจ ๊ณ์ฝ๊ธ์ ๋ชจ๋ ๋ฐํํ๋ค.(์์ฐจ์ธ .. Next14 App Router react-quill ์ฌ์ฉ (build ์ prerendered error ํด๊ฒฐ) react-quill ์ด๋?- html editor๋ฅผ ํ์ฉํ . ์์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ- ๋ฌ๋์ปค๋ธ๊ฐ ๋ฎ์ ๋ง์ด ์ฌ์ฉ- next13์์ ์ฌ์ฉํ ์ฝ๋๋ฅผ next14 App Router๋ก ์์ฑ ์ค build ์ [Error occurred prerendering page]/ [ReferenceError: document is not defined] ๋ฐ์ react-quill ์ฌ์ฉ๋ฐฉ๋ฒ1. react-quill ์ค์นyarn add react-quill 2. ์ฝ๋ ์์ฑ//Next13import ReactQuill from "react-quill";import "react-quill/dist/quill.snow.css";const Editor = () => { const Quill = ReactQuill.Quill;.. Next ๋ก๊ทธ์ธ (google provider ๋ฐฑ์๋ ๊ตฌํ ๋ฐ session์ ์ฌ์ฉ์ ์ ๋ณด ์ ์ฅ) (feat. next14 app-router) Project Explanation- 2024.07.02 - [next] - Next-Auth Login(Google/ jwt) ๊ตฌํ (feat. next 14 app-router)์์ ๊ตฌํํ๋ NextAuth Google Provider๋ฅผ ๋ฐฑ์๋๋ก ์ด๋- ์ฝ๋ ์์ ๋ ๋ถ๋ถ๋ง ๋จ๊ฒจ๋๊ฒ ์ต๋๋ค backend ์ข ๋ ๊ณต๋ถํ๊ณ ๋งํฌ ์ฒจ๋ถ ์์ Project Folder๋๋ณด๊ธฐ๐ฆapp โฃ ๐api โ โ ๐auth โ โ โ ๐[...nextauth] โ โ โ โ ๐route.ts โฃ ๐login โ โฃ ๐googleLogin โ โ โ ๐page.tsx โ โ ๐page.tsx โฃ ๐layout.tsx โ ๐page.tsx๐ฆlib โ ๐axios.ts๐ฆproviders โ ๐Sessi.. Next-Auth Login(Google/ jwt) ๊ตฌํ (feat. next 14 app-router) Project Setting๋๋ณด๊ธฐWould you like to use TypeScript? YesWould you like to use Tailwind CSS? YesWould you like to use App Router? (recommended) YesProject Folder๋๋ณด๊ธฐ๐ฆappโฃ ๐apiโ โ ๐authโ โ โ ๐[...nextauth]โ โ โ โ ๐route.tsโฃ ๐loginโ โ ๐page.tsxโฃ ๐layout.tsxโ ๐page.tsx๐ฆlibโ ๐axios.ts๐ฆprovidersโ ๐SessionProvider.tsx๐ฆsrcโฃ ๐serverโ โฃ ๐servicesโ โ โ ๐userService.tsโ โ ๐auth.tsโ ๐typesโ .. api ํ์ผ ๋ถ๋ฆฌ ์ axios์ ์๋ต์ด console์ ์๋์ค๋ ๊ฒฝ์ฐ ๋ฌธ์ ์ํฉ ๋ถ๋ฆฌ๋ API ํ์ผ(StorePostApi.js)์์๋ response ๋ก๊ทธ๋ฅผ ๋จ๊ธธ ๊ฒฝ์ฐ ๋์ค์ง๋ง reactํ์ผ(StorePage.js)์์ res ๊ฐ์ ์ฐ์ ๊ฒฝ์ฐ ๋์ค์ง ์์ // StorePage.js APIํธ์ถ ๋ถ๋ถ StorePostApi(data) .then(res =>{ console.log("res",res) if(res){ setUserCheck(true); setTimeout(() => { navigate('/signup/stores/pos'); }, 500); } else{ throw new Error("ํ ํฐ์ด ์์ต๋๋ค") } }) .catch(err=>{ console.error('API ํธ์ถ ๋๋ ํ ํฐ ๋ฐ๊ธ ์คํจ:',err) }) ๋ฐฉ๋ฒ (ํด๊ฒฐ) StorePostApi ํจ์์์.. React - Recoil ์ฌ์ฉ ์ค ๋์ณค๋ ํน์ง ๋๋ณด๊ธฐ Recoil ํน์ง - ํด๋น ์ํ๋ฅผ ๊ตฌ๋ ํ๋ ๊ตฌ์ฑ์์๋ฅผ ๊ฐ์ง ํจ์๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ค. ๋ฌธ์ ์ํฉ ํ์๊ฐ์ ํ Recoil์ ์ฌ์ฉํ์ฌ ํ์์ ์ ๋ฌด๋ฅผ ํ๋จํ๊ณ PrivateRoute์ PublicRoute์์ useRecoilState๋ฅผ ์ฌ์ฉํ๋๋ ๋ค์ ํ์ด์ง๋ก ๋์ด๊ฐ์ผ ๋๋ ๋ถ๋ถ์ด ๋ ๋๋ง ๋๊ณ ๋์ PrivateRoute์ PublicRoute๊ฐ ๋ ์คํ๋์ด ์ํ์ง ์๋ ํ์ด์ง๋ก ์ด๋ ๊ณผ์ 1. PublicRoute ์ PrivateRoute ์์ UserStateCheck Recoil ๋ณ์๋ฅผ ์ฌ์ฉ x => token ๊ฐ์ ์ ๋ฌด๋ก ํ๋จ // PublicRoute.js const userCheck = useRecoilValue(UserCheckState) return userCheck ? element : .. git file ํ๋๋ง ๋๋๋ฆฌ๊ธฐ ๋ฌธ์ ์ํฉ ์ค๋ฅ ์์ ์ค ํด๊ฒฐํ์ง ๋ชปํ๊ณ ์ต์ด ์ฝ๋๋ก ๋์๊ฐ๊ณ ์ถ์๋ค. git pull ์ ํ์ง๋ง ์ต์ด์ฝ๋๋ก ๋์๊ฐ์ง ๋ชปํ์ ๊ทธ๋๋ก ์ ์ง ๋์์์ ํ์ธ ํด๊ฒฐ git checkout -- ํ์ผ ๊ฒฝ๋ก ํ์ผ ์์์ด ๋ณ๊ฒฝ๋๊ณ origin์ ์๋ ์ฝ๋๋ฅผ ๊ฐ์ ธ์์ Axios - http -> https ๋ณ๊ฒฝ ์ ์ค๋ฅ ๋ฌธ์ ์ํฉ SSL ์ธ์ฆ์๋ฅผ ๋ถํ์ ํต์ URI๊ฐ `https://api.salesync.site`๋ก ๋ณ๊ฒฝ๋จ ํด๋นํ๋ URI์ ๋ง์ถฐ JS ์์ฒญ ์๋ํฌ์ธํธ ๋ณ๊ฒฝ ./src/api/BaseUrl.js ๋ณ๊ฒฝ ์ const URL = "[http://api.salesync.site"](http://api.salesync.site"); export default URL; ๋ณ๊ฒฝ ํ const URL = "[https://api.salesync.site"](https://api.salesync.site"); export default URL; ์ค๋ฅ ๋ฐฐํฌ์ ํต์ ์ค๋ฅ๊ฐ ๋จ๊ณ ๋ฐ์ดํฐ๋ฅผ ์กฐํํ ์ ์์ ๋ถ๋ช `https`๋ก ๋ณ๊ฒฝํ์ผ๋ `http`๋ก ํต์ ์ด ๊ฐ # ํด๊ฒฐ์๋1 ๐์ฐธ์กฐ : [https://velog.io/@shin.. ์ด์ 1 2 3 4 ยทยทยท 7 ๋ค์