๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€

(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..